/* ============================================================
   MeshOps Analytics — "SIGNALS LAB" design system.
   Shared by analytics.html + analytics-rf / topic / node / vault.
   Class names are a hard contract (meshops-analytics.js +
   meshops-branch-live.js write .vault-step / .schema-pill /
   .event-cell / .metric-card markup) — restyle, never rename.
   ============================================================ */

:root {
  --ma-bg:         #060814;
  --ma-bg-2:       #0A0E20;
  --ma-card:       #0E1428;
  --ma-card-2:     #121A34;
  --ma-inset:      #080B18;
  --ma-line:       #23304F;
  --ma-line-soft:  #1A2440;
  --ma-text:       #E9F0FF;
  --ma-bright:     #FFFFFF;
  --ma-muted:      #93A6CE;
  --ma-dim:        #5C6E96;
  /* signal palette — used to color-code MQTT traffic */
  --ma-cyan:       #38D9FF;
  --ma-green:      #4BE38A;
  --ma-amber:      #FFC24B;
  --ma-red:        #FF6B7E;
  --ma-purple:     #A98BFF;
  --ma-pink:       #FF6BB8;
  --ma-blue:       #5B8CFF;
  --ma-mono: var(--tac-font-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  --ma-disp: var(--tac-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
}

body.analytics-body {
  min-height: 100vh;
  color: var(--ma-text);
  font-family: var(--ma-mono);
  background:
    radial-gradient(1200px 500px at 15% -5%, rgba(56,217,255,.10), transparent 60%),
    radial-gradient(1000px 460px at 88% 0%, rgba(75,227,138,.08), transparent 55%),
    radial-gradient(900px 500px at 60% 108%, rgba(169,139,255,.09), transparent 55%),
    var(--ma-bg);
  overflow-x: hidden;
}
/* faint grid, fades out downward */
.analytics-body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; opacity: .5; z-index: 0;
  background-image:
    linear-gradient(rgba(91,140,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,140,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, black, transparent 60%);
}
/* wrap has NO padding so the header/class-bar span edge-to-edge like the
   other pages; the page body padding lives on <main> instead. */
.analytics-wrap { position: relative; z-index: 1; padding: 0; }
.analytics-body main { position: relative; z-index: 1; padding: 16px clamp(12px, 2.2vw, 34px) 48px; }

/* ---- shared card frame + corner accent ---- */
.analytics-panel, .analytics-orbit, .analytics-module,
.analytics-vault, .analytics-collector, .analytics-feed-card,
.metric-card, .ana-card {
  position: relative;
  background: linear-gradient(180deg, var(--ma-card), var(--ma-card-2));
  border: 1px solid var(--ma-line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.analytics-panel::before, .analytics-vault::before, .analytics-collector::before,
.analytics-feed-card::before, .analytics-module::before, .metric-card::before {
  content: ""; position: absolute; top: -1px; left: -1px;
  width: 12px; height: 12px; pointer-events: none;
  border-top: 2px solid var(--ma-cyan); border-left: 2px solid var(--ma-cyan);
  border-top-left-radius: 14px; opacity: .7;
}

/* ============================================================
   HERO
   ============================================================ */
.analytics-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(340px, 620px);
  gap: 16px; align-items: stretch;
  margin: 12px 0 18px;
}
.analytics-panel { padding: clamp(20px, 2.4vw, 34px); overflow: hidden; }

.analytics-kicker {
  display: inline-flex; gap: 8px; align-items: center;
  font: 600 11px var(--ma-disp);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ma-green);
  border: 1px solid rgba(75,227,138,.35);
  border-radius: 2px; padding: 5px 10px;
  background: rgba(75,227,138,.07);
}
.analytics-title {
  font-family: var(--ma-disp);
  font-size: clamp(40px, 5.2vw, 82px);
  line-height: .9; letter-spacing: .01em; text-transform: uppercase;
  margin: 18px 0 14px; font-weight: 700; color: var(--ma-bright);
}
.analytics-title span {
  display: block;
  color: transparent;
  background: linear-gradient(90deg, var(--ma-cyan), var(--ma-green) 60%, var(--ma-amber));
  -webkit-background-clip: text; background-clip: text;
}
.analytics-copy { max-width: 780px; font-size: 15px; color: var(--ma-muted); line-height: 1.6; }
#analyticsStatus.ready { color: var(--ma-green); }

.analytics-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.analytics-actions .btn, .analytics-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 8px 14px;
  border-radius: 2px; border: 1px solid var(--ma-line);
  background: var(--ma-inset); color: var(--ma-text);
  text-decoration: none; font: 600 12px var(--ma-disp);
  letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .14s, color .14s, background .14s;
}
.analytics-actions .btn:hover, .analytics-action:hover {
  border-color: var(--ma-cyan); color: var(--ma-bright);
}
.analytics-action.primary {
  border-color: rgba(75,227,138,.55);
  background: linear-gradient(90deg, rgba(75,227,138,.20), rgba(56,217,255,.14));
  color: var(--ma-bright);
}

/* ---- orbit diagram ---- */
.analytics-orbit { position: relative; min-height: 420px; padding: 20px; overflow: hidden; }
.orbit-core {
  position: absolute; inset: 50%; width: 140px; height: 140px;
  transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle, rgba(56,217,255,.20), rgba(75,227,138,.06) 60%, transparent);
  border: 1px solid rgba(56,217,255,.45);
  box-shadow: 0 0 70px rgba(56,217,255,.16);
}
.orbit-core b { display: block; font: 700 26px var(--ma-disp); letter-spacing: .04em; color: var(--ma-bright); }
.orbit-core span { display: block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ma-muted); }
.orbit-ring { position: absolute; inset: 42px; border: 1px dashed rgba(91,140,255,.28); border-radius: 50%; }
.orbit-ring.r2 { inset: 86px; opacity: .6; } .orbit-ring.r3 { inset: 128px; opacity: .4; }
.orbit-node {
  position: absolute; width: 120px; min-height: 72px;
  border: 1px solid var(--ma-line); background: var(--ma-inset);
  border-radius: 10px; padding: 10px; border-left: 3px solid var(--node-color, var(--ma-cyan));
}
.orbit-node::before {
  content: ""; display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--node-color, var(--ma-cyan)); box-shadow: 0 0 14px var(--node-color, var(--ma-cyan));
  margin-bottom: 8px;
}
.orbit-node strong { display: block; font: 600 13px var(--ma-disp); text-transform: uppercase; letter-spacing: .04em; }
.orbit-node span { color: var(--ma-muted); font-size: 11px; }
.orbit-node.n1 { left: 20px; top: 66px; --node-color: var(--ma-green); }
.orbit-node.n2 { right: 30px; top: 50px; --node-color: var(--ma-cyan); }
.orbit-node.n3 { left: 48px; bottom: 58px; --node-color: var(--ma-amber); }
.orbit-node.n4 { right: 60px; bottom: 54px; --node-color: var(--ma-purple); }
.orbit-node.n5 { left: 50%; top: 12px; transform: translateX(-50%); --node-color: var(--ma-pink); }

/* ============================================================
   METRIC / KPI CARDS  (color-cycled accents)
   ============================================================ */
.analytics-metrics {
  display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px; margin: 16px 0 18px;
}
.metric-card { padding: 14px; min-height: 96px; overflow: hidden; }
.metric-value { font: 700 30px var(--ma-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ma-bright); }
.metric-label { color: var(--ma-muted); font-size: 11px; margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.metric-mini { height: 3px; margin-top: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--mc, var(--ma-cyan)), transparent); }
/* cycle the accent color across the metric row */
.analytics-metrics .metric-card:nth-child(6n+1) { --mc: var(--ma-cyan); }
.analytics-metrics .metric-card:nth-child(6n+2) { --mc: var(--ma-green); }
.analytics-metrics .metric-card:nth-child(6n+3) { --mc: var(--ma-amber); }
.analytics-metrics .metric-card:nth-child(6n+4) { --mc: var(--ma-purple); }
.analytics-metrics .metric-card:nth-child(6n+5) { --mc: var(--ma-pink); }
.analytics-metrics .metric-card:nth-child(6n+6) { --mc: var(--ma-blue); }
.analytics-metrics .metric-card::before { border-top-color: var(--mc); border-left-color: var(--mc); }
.metric-card .metric-value { color: var(--mc, var(--ma-bright)); }

/* ============================================================
   SECTION TITLES
   ============================================================ */
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 26px 0 12px; }
.section-title h2 { margin: 0; font: 700 22px var(--ma-disp); text-transform: uppercase; letter-spacing: .06em; color: var(--ma-bright); }
.section-title p { margin: 0; color: var(--ma-muted); font-size: 13px; }

/* ============================================================
   MODULE CARDS
   ============================================================ */
.analytics-modules { display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 14px; }
.analytics-module {
  min-height: 184px; padding: 18px; color: var(--ma-text);
  text-decoration: none; overflow: hidden;
  transition: transform .16s ease, border-color .16s ease;
}
.analytics-module:hover { transform: translateY(-3px); border-color: var(--ma-cyan); }
.analytics-module::after {
  content: attr(data-code); position: absolute; right: 14px; bottom: 8px;
  font: 800 44px var(--ma-disp); line-height: 1; color: rgba(255,255,255,.045);
}
.analytics-module:nth-child(4n+1) { --mc: var(--ma-cyan); }
.analytics-module:nth-child(4n+2) { --mc: var(--ma-green); }
.analytics-module:nth-child(4n+3) { --mc: var(--ma-amber); }
.analytics-module:nth-child(4n+4) { --mc: var(--ma-purple); }
.analytics-module::before { border-top-color: var(--mc); border-left-color: var(--mc); }
.module-icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  margin-bottom: 16px; font-size: 20px;
  border: 1px solid var(--mc, var(--ma-line)); color: var(--mc, var(--ma-cyan));
  background: color-mix(in srgb, var(--mc, var(--ma-cyan)) 12%, transparent);
}
.analytics-module h3 { margin: 0 0 8px; font: 600 18px var(--ma-disp); text-transform: uppercase; letter-spacing: .04em; color: var(--ma-bright); }
.analytics-module p { margin: 0; color: var(--ma-muted); line-height: 1.5; font-size: 13px; }

/* ============================================================
   GRID-2 / VAULT / COLLECTOR
   ============================================================ */
.analytics-grid-2 { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr); gap: 14px; margin-top: 14px; }
.analytics-vault, .analytics-collector { padding: 18px; }

/* ============================================================
   MQTT TRAFFIC ROWS  (.vault-step)  — color-coded, organized
   Used by: rfPressureRows, rfRecentRows, node "newest" feed.
   ============================================================ */
.vault-flow { display: grid; gap: 8px; margin-top: 14px; }
.vault-step {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center;
  background: var(--ma-inset);
  border: 1px solid var(--ma-line-soft);
  border-left: 3px solid var(--vs, var(--ma-cyan));
  border-radius: 8px; padding: 10px 12px;
  transition: border-color .14s, background .14s;
}
.vault-step:hover { background: var(--ma-card); border-left-color: var(--ma-bright); }
.vault-step b {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  font: 700 12px var(--ma-mono);
  color: var(--vs, var(--ma-cyan));
  background: color-mix(in srgb, var(--vs, var(--ma-cyan)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--vs, var(--ma-cyan)) 40%, transparent);
}
.vault-step strong { display: block; font: 600 14px var(--ma-disp); letter-spacing: .03em; color: var(--ma-bright); word-break: break-all; }
.vault-step span { display: block; color: var(--ma-muted); font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }
/* rotate accent color down the list so streams read as distinct lanes */
.vault-flow .vault-step:nth-child(6n+1) { --vs: var(--ma-cyan); }
.vault-flow .vault-step:nth-child(6n+2) { --vs: var(--ma-green); }
.vault-flow .vault-step:nth-child(6n+3) { --vs: var(--ma-amber); }
.vault-flow .vault-step:nth-child(6n+4) { --vs: var(--ma-purple); }
.vault-flow .vault-step:nth-child(6n+5) { --vs: var(--ma-pink); }
.vault-flow .vault-step:nth-child(6n+6) { --vs: var(--ma-blue); }

/* ============================================================
   TOPIC DNA / SCHEMA PILLS  (.schema-pill) — color-coded cards
   Used by: topicDnaGrid, collector-schema, error states.
   ============================================================ */
.collector-schema { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#topicDnaGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.schema-pill {
  position: relative;
  border: 1px solid var(--ma-line-soft);
  border-top: 2px solid var(--sp, var(--ma-cyan));
  background: var(--ma-inset);
  border-radius: 8px; padding: 12px;
  font: 400 12px var(--ma-mono); color: var(--ma-muted);
  line-height: 1.6; overflow: hidden; word-break: break-word;
}
.schema-pill strong { color: var(--sp, var(--ma-cyan)); font: 600 13px var(--ma-disp); letter-spacing: .04em; text-transform: uppercase; }
#topicDnaGrid .schema-pill:nth-child(6n+1) { --sp: var(--ma-cyan); }
#topicDnaGrid .schema-pill:nth-child(6n+2) { --sp: var(--ma-green); }
#topicDnaGrid .schema-pill:nth-child(6n+3) { --sp: var(--ma-amber); }
#topicDnaGrid .schema-pill:nth-child(6n+4) { --sp: var(--ma-purple); }
#topicDnaGrid .schema-pill:nth-child(6n+5) { --sp: var(--ma-pink); }
#topicDnaGrid .schema-pill:nth-child(6n+6) { --sp: var(--ma-blue); }
.collector-schema .schema-pill:nth-child(odd) { --sp: var(--ma-blue); }
.collector-schema .schema-pill:nth-child(even) { --sp: var(--ma-purple); }

/* ============================================================
   KPI / EVENT CELLS  (.event-cell) — used by node-life + event strip
   ============================================================ */
.analytics-feed-card { padding: 18px; margin-top: 14px; }
.event-strip, #nodeLifeGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
.event-cell {
  min-height: 84px; border-radius: 10px;
  background: var(--ma-inset); border: 1px solid var(--ma-line-soft);
  border-bottom: 3px solid var(--ec, var(--ma-cyan));
  padding: 12px; display: flex; flex-direction: column; justify-content: center;
}
.event-cell b { display: block; font: 700 24px var(--ma-mono); font-variant-numeric: tabular-nums; color: var(--ec, var(--ma-bright)); }
.event-cell span { color: var(--ma-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.event-strip .event-cell:nth-child(5n+1), #nodeLifeGrid .event-cell:nth-child(8n+1) { --ec: var(--ma-cyan); }
.event-strip .event-cell:nth-child(5n+2), #nodeLifeGrid .event-cell:nth-child(8n+2) { --ec: var(--ma-green); }
.event-strip .event-cell:nth-child(5n+3), #nodeLifeGrid .event-cell:nth-child(8n+3) { --ec: var(--ma-amber); }
.event-strip .event-cell:nth-child(5n+4), #nodeLifeGrid .event-cell:nth-child(8n+4) { --ec: var(--ma-purple); }
.event-strip .event-cell:nth-child(5n+5), #nodeLifeGrid .event-cell:nth-child(8n+5) { --ec: var(--ma-pink); }
#nodeLifeGrid .event-cell:nth-child(8n+6) { --ec: var(--ma-blue); }
#nodeLifeGrid .event-cell:nth-child(8n+7) { --ec: var(--ma-cyan); }
#nodeLifeGrid .event-cell:nth-child(8n+8) { --ec: var(--ma-green); }
/* node-life injects a feed card spanning the grid — let it breathe */
#nodeLifeGrid .analytics-feed-card { grid-column: 1 / -1; }

/* ============================================================
   ANALYTICS LAB PAGES
   ============================================================ */
.analytics-lab-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(340px, 1.15fr);
  gap: 14px;
  margin-top: 14px;
}

.analytics-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}

.analytics-field {
  display: grid;
  min-width: 170px;
  gap: 6px;
}

.analytics-field label {
  color: var(--ma-muted);
  font: 800 11px var(--ma-disp);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.analytics-field input,
.analytics-field select {
  min-height: 42px;
  border: 1px solid var(--ma-line);
  background: rgba(2, 6, 4, .72);
  color: var(--ma-bright);
  padding: 0 12px;
  font: 700 14px var(--ma-mono);
  outline: none;
}

.analytics-field input[type="range"] {
  padding: 0;
  accent-color: var(--ma-green);
}

.analytics-lab-button {
  min-height: 42px;
  border: 1px solid rgba(70, 224, 107, .52);
  background: rgba(70, 224, 107, .14);
  color: var(--ma-bright);
  padding: 0 14px;
  font: 900 12px var(--ma-disp);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.analytics-lab-button:hover {
  border-color: var(--ma-green);
  color: var(--ma-green);
}

.analytics-timeline {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.analytics-timeline-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(110, 231, 183, .14);
  background: linear-gradient(90deg, rgba(6, 17, 12, .88), rgba(3, 8, 7, .82));
}

.analytics-timeline-row b {
  color: var(--ma-green);
  font: 900 12px var(--ma-mono);
}

.analytics-timeline-row strong {
  display: block;
  color: var(--ma-bright);
  font: 800 13px var(--ma-mono);
  overflow-wrap: anywhere;
}

.analytics-timeline-row span {
  color: var(--ma-muted);
  font-size: 11px;
}

.analytics-chip {
  border: 1px solid rgba(108, 178, 255, .38);
  background: rgba(108, 178, 255, .10);
  color: var(--ma-blue);
  padding: 5px 8px;
  font: 900 10px var(--ma-disp);
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
}

.anomaly-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.anomaly-item {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(70, 224, 107, .16);
  background: rgba(5, 11, 8, .78);
}

.anomaly-severity {
  display: grid;
  place-items: center;
  min-height: 52px;
  border: 1px solid var(--sev, var(--ma-green));
  color: var(--sev, var(--ma-green));
  font: 900 11px var(--ma-disp);
  letter-spacing: .10em;
  text-transform: uppercase;
}

.anomaly-item[data-severity="critical"] { --sev: var(--ma-pink); }
.anomaly-item[data-severity="watch"] { --sev: var(--ma-amber); }
.anomaly-item[data-severity="info"] { --sev: var(--ma-blue); }

.anomaly-item strong {
  display: block;
  color: var(--ma-bright);
  font: 800 15px var(--ma-mono);
}

.anomaly-item span {
  display: block;
  margin-top: 4px;
  color: var(--ma-muted);
  line-height: 1.45;
}

/* ============================================================
   TOPOLOGY MEMORY
   ============================================================ */
.topology-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: 18px;
  align-items: center;
}
.topology-signal-card {
  min-height: 150px;
  border: 1px solid var(--ma-line);
  border-left: 3px solid var(--ma-green);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(75,227,138,.16), rgba(56,217,255,.06)),
    var(--ma-inset);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.topology-signal-card span {
  font: 600 12px var(--ma-disp);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ma-green);
}
.topology-signal-card b {
  font: 700 38px var(--ma-mono);
  line-height: 1;
  color: var(--ma-bright);
}
.topology-signal-card small { color: var(--ma-muted); line-height: 1.45; }
.topology-main-grid {
  grid-template-columns: minmax(480px, 1.35fr) minmax(320px, .65fr);
  align-items: start;
}
.topology-intel-grid { align-items: start; }
.topology-map-card { overflow: hidden; }
.topology-plot-wrap {
  position: relative;
  min-height: 420px;
  border: 1px solid var(--ma-line-soft);
  border-radius: 10px;
  background:
    linear-gradient(rgba(91,140,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,140,255,.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(56,217,255,.12), transparent 58%),
    var(--ma-inset);
  background-size: 44px 44px, 44px 44px, auto, auto;
  overflow: hidden;
}
.topology-graph {
  display: block;
  width: 100%;
  min-height: 420px;
}
.topology-region-box {
  fill: none;
  stroke: rgba(75,227,138,.35);
  stroke-width: 2;
  stroke-dasharray: 8 8;
}
.topology-edge {
  stroke: rgba(56,217,255,.24);
  stroke-width: 1.3;
}
.topology-edge.is-stable { stroke: rgba(75,227,138,.34); stroke-width: 1.8; }
.topology-edge.is-aging { stroke: rgba(255,194,75,.28); stroke-dasharray: 5 6; }
.topology-node {
  fill: var(--ma-cyan);
  stroke: rgba(255,255,255,.72);
  stroke-width: 1.1;
  filter: drop-shadow(0 0 5px rgba(56,217,255,.35));
}
.topology-node.is-repeater {
  fill: var(--ma-green);
  filter: drop-shadow(0 0 7px rgba(75,227,138,.38));
}
.topology-node.is-bridge {
  fill: var(--ma-amber);
  stroke: #fff3c2;
  filter: drop-shadow(0 0 8px rgba(255,194,75,.42));
}
.topology-node.is-stale {
  fill: var(--ma-dim);
  stroke: rgba(147,166,206,.55);
  filter: none;
}
.topology-label {
  fill: rgba(233,240,255,.76);
  font: 600 11px var(--ma-disp);
  letter-spacing: .04em;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(6,8,20,.95);
  stroke-width: 3px;
}
.topology-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: var(--ma-muted);
  font: 600 11px var(--ma-disp);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.topology-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: var(--ma-cyan);
  box-shadow: 0 0 10px currentColor;
}
.legend-dot.repeater { background: var(--ma-green); color: var(--ma-green); }
.legend-dot.bridge { background: var(--ma-amber); color: var(--ma-amber); }
.legend-line {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--ma-cyan), transparent);
}
.topology-lanes { display: grid; gap: 10px; }
.topology-lane {
  border: 1px solid var(--ma-line-soft);
  border-left: 3px solid var(--lane, var(--ma-cyan));
  border-radius: 10px;
  background: var(--ma-inset);
  padding: 12px;
}
.topology-lane-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.topology-lane h3 {
  margin: 0;
  font: 600 16px var(--ma-disp);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ma-bright);
}
.topology-lane strong {
  color: var(--lane, var(--ma-cyan));
  font: 700 18px var(--ma-mono);
  white-space: nowrap;
}
.topology-lane p {
  margin: 6px 0 0;
  color: var(--ma-muted);
  font-size: 12px;
  line-height: 1.45;
}
.topology-neighbor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.topology-neighbor-chips span,
.topology-chip {
  border: 1px solid color-mix(in srgb, var(--lane, var(--ma-cyan)) 42%, var(--ma-line));
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--ma-text);
  background: color-mix(in srgb, var(--lane, var(--ma-cyan)) 10%, transparent);
  font: 600 10px var(--ma-disp);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.topology-meter {
  height: 5px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.topology-meter i {
  display: block;
  height: 100%;
  width: var(--meter, 0%);
  background: linear-gradient(90deg, var(--lane, var(--ma-cyan)), transparent);
}
.topology-shape-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.topology-shape-cell {
  min-height: 116px;
  border: 1px solid var(--ma-line-soft);
  border-bottom: 3px solid var(--shape, var(--ma-cyan));
  border-radius: 10px;
  background: var(--ma-inset);
  padding: 12px;
}
.topology-shape-cell b {
  display: block;
  font: 700 24px var(--ma-mono);
  color: var(--shape, var(--ma-bright));
}
.topology-shape-cell span {
  display: block;
  margin-top: 4px;
  font: 600 12px var(--ma-disp);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ma-bright);
}
.topology-shape-cell small {
  display: block;
  margin-top: 7px;
  color: var(--ma-muted);
  line-height: 1.35;
}
.topology-shape-cell:nth-child(4n+1) { --shape: var(--ma-cyan); }
.topology-shape-cell:nth-child(4n+2) { --shape: var(--ma-green); }
.topology-shape-cell:nth-child(4n+3) { --shape: var(--ma-amber); }
.topology-shape-cell:nth-child(4n+4) { --shape: var(--ma-purple); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .analytics-hero, .analytics-grid-2, .analytics-lab-grid, .topology-hero-panel { grid-template-columns: 1fr; }
  .analytics-metrics { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .analytics-modules { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
}
@media (max-width: 720px) {
  .analytics-metrics, .analytics-modules, .collector-schema, .event-strip { grid-template-columns: repeat(2, 1fr); }
  .topology-shape-grid { grid-template-columns: 1fr; }
  .topology-plot-wrap, .topology-graph { min-height: 320px; }
  .analytics-orbit { min-height: 480px; }
  .orbit-node { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; margin: 8px 0; width: auto; }
  .orbit-ring, .orbit-core { display: none; }
  .analytics-title { font-size: clamp(34px, 10vw, 52px); }
  .analytics-timeline-row, .anomaly-item { grid-template-columns: 1fr; }
}

/* unbuilt module cards — clearly flagged "SOON", not dead links */
.analytics-module[data-soon] { opacity: .62; }
.analytics-module[data-soon]:hover { transform: none; border-color: var(--ma-line); }
.analytics-module[data-soon]::before {
  content: "SOON";
  position: absolute; top: 10px; right: 12px; left: auto;
  width: auto; height: auto; border: 1px solid var(--ma-amber);
  border-radius: 2px; padding: 2px 6px;
  font: 600 9px var(--ma-disp); letter-spacing: .12em;
  color: var(--ma-amber); background: rgba(255,194,75,.08);
  opacity: 1;
  z-index: 1;
}