:root {
  /* Layered surfaces — Prism house style (deep blue-black) */
  --bg: #0a0e1a; --bg-card: #0f1424; --bg-band: #0c1020; --bg-raise: #161c30;
  /* Border hierarchy — sharper, operator-monitor density */
  --border: rgba(255,255,255,0.10); --border-soft: rgba(255,255,255,0.05); --border-strong: rgba(255,255,255,0.18);
  /* Foreground hierarchy (white-alpha) */
  --text: #ffffff; --text-muted: rgba(255,255,255,0.62); --text-dim: rgba(255,255,255,0.40);
  /* Accent palette — matches Prism Surface */
  --cyan: #00d4ff; --green: #00e88f; --amber: #ffb020; --red: #ff4060;
  --purple: #a855f7; --blue: #60a5fa; --pink: #ec4899;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
  --r: 8px; --r-sm: 4px; --r-lg: 12px;
  --t-xs: 11px; --t-sm: 13px; --t-md: 16px; --t-lg: 20px; --t-xl: 28px; --t-hero: 44px;
  /* Elevation + motion */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.20); --shadow-md: 0 4px 14px rgba(0,0,0,0.30); --shadow-lg: 0 10px 28px rgba(0,0,0,0.40);
  --ease-out: cubic-bezier(0.16,1,0.3,1); --dur-fast: 120ms; --dur-normal: 180ms;
  --glass: rgba(15,20,36,0.85);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-feature-settings: "tnum" on, "cv01" on; }
body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  background: radial-gradient(1200px 560px at 50% -8%, rgba(0,212,255,0.06), transparent 60%), var(--bg) fixed;
  color: var(--text); min-height: 100vh;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* Command bar */
.cmd-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid var(--border);
  padding: 10px var(--s6); display: flex; align-items: center; gap: var(--s5);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; letter-spacing: -0.5px; }
.brand-logo { font-size: 22px; }
.brand-name { background: linear-gradient(135deg, var(--cyan), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.brand-tag { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; margin-left: 4px; }

.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.82)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.cmd-ticker { display: flex; gap: var(--s4); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; flex: 1; overflow: hidden; min-width: 0; }
.cmd-stat { display: flex; gap: 6px; align-items: baseline; min-width: 72px; }
.cmd-stat-label { color: var(--text-dim); text-transform: uppercase; }
.cmd-stat-val { color: var(--text); font-family: 'JetBrains Mono', monospace; font-weight: 700; min-width: 40px; display: inline-block; }

/* Section nav */
.cmd-nav { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.cmd-nav a {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  padding: 6px 10px; border-radius: var(--r-sm);
  transition: color 120ms, background 120ms;
}
.cmd-nav a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.cmd-nav a.active { color: var(--cyan); background: rgba(0,191,255,0.08); }
@media (max-width: 1100px) { .cmd-nav { display: none; } }

.cmd-clock { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted); letter-spacing: 1px; }

/* Layout */
.container { padding: 20px 24px; max-width: 1600px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }

.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--s5);
  position: relative; overflow: hidden;
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); gap: var(--s3); }
.card-title { font-size: var(--t-xs); font-weight: 700; letter-spacing: 1.6px; color: var(--text-muted); text-transform: uppercase; display: flex; align-items: center; gap: var(--s2); }
.card-title .bar { width: 3px; height: 13px; border-radius: 2px; background: var(--cyan); }
.card-meta { font-size: 11px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* Section titles */
.section {
  margin: var(--s7) 0 var(--s4);
  scroll-margin-top: 72px;
}
.section:first-of-type { margin-top: var(--s4); }
.section-title {
  font-size: var(--t-sm); font-weight: 800; letter-spacing: 2.5px; color: var(--text);
  text-transform: uppercase; margin: 0 0 var(--s3); padding: 0 0 var(--s2);
  display: flex; align-items: center; gap: var(--s3);
  border-bottom: 1px solid var(--border);
}
.section-title::before { content: ''; width: 3px; height: 16px; background: var(--cyan); border-radius: 2px; }
.section-title span { color: var(--text-dim); font-weight: 500; font-size: 11px; letter-spacing: 1.5px; margin-left: auto; }

/* Health badge */
.health-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border-radius: 20px;
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
}
.health-badge.excellent { background: rgba(0,217,126,.12); color: var(--green); border: 1px solid rgba(0,217,126,.3); }
.health-badge.good { background: rgba(0,191,255,.12); color: var(--cyan); border: 1px solid rgba(0,191,255,.3); }
.health-badge.degraded { background: rgba(255,167,38,.12); color: var(--amber); border: 1px solid rgba(255,167,38,.3); }
.health-badge.unknown { background: rgba(255,255,255,.04); color: var(--text-dim); border: 1px solid var(--border); }
.health-badge.poor { background: rgba(239,68,68,.12); color: var(--red); border: 1px solid rgba(239,68,68,.3); }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.health-badge.degraded .health-dot, .health-badge.poor .health-dot { animation: pulse 2s infinite; }

/* Big numbers */
.big-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 42px; line-height: 1; letter-spacing: -1px;
}
.big-num-unit { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.big-num-label { font-size: 11px; color: var(--text-dim); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; }

.latency-green { color: var(--green); }
.latency-amber { color: var(--amber); text-shadow: 0 0 10px rgba(255,167,38,.35); }
.latency-red { color: var(--red); text-shadow: 0 0 10px rgba(239,68,68,.4); }
.latency-cyan { color: var(--cyan); }
.latency-muted { color: var(--text-muted); }
.latency-dim { color: var(--text-dim); }

/* Show all / show less toggle for long lists */
.list-cap-toggle {
  text-align: center; cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dim); padding: 8px; margin-top: 4px;
  border: 1px dashed var(--border); border-radius: var(--r-sm);
  transition: color 120ms, border-color 120ms;
}
.list-cap-toggle:hover { color: var(--cyan); border-color: rgba(0,191,255,0.4); }

/* Probe rows */
.probe-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  border-bottom: 1px solid var(--border-soft);
}
.probe-row:last-child { border-bottom: none; }
.probe-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.probe-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.probe-dot.ok { background: var(--green); }
.probe-dot.fail { background: var(--red); }
.probe-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.probe-host { color: var(--text-dim); font-size: 11px; margin-left: 4px; }
.probe-latency { font-weight: 700; font-size: 11px; min-width: 55px; text-align: right; }

/* Tech status grid */
.status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.status-card {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; min-height: 68px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color 150ms;
}
.status-card.operational { border-left: 3px solid var(--green); }
.status-card.minor { border-left: 3px solid var(--amber); }
.status-card.major { border-left: 3px solid var(--red); }
.status-card.unknown { border-left: 3px solid var(--text-dim); }
.status-name { font-size: 11px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.status-desc { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.3; }
.status-indicator { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.status-indicator.operational { color: var(--green); }
.status-indicator.minor { color: var(--amber); }
.status-indicator.major { color: var(--red); }
.status-indicator.unknown { color: var(--text-dim); }

/* Telecom */
.telecom-summary {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 14px; background: rgba(255,255,255,0.02);
  border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px;
}
.telecom-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.telecom-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
}
.telecom-chip .c-val { font-size: 12px; font-weight: 700; }
.telecom-chip.healthy { color: var(--green); border-color: rgba(0,217,126,.3); }
.telecom-chip.slow { color: var(--amber); border-color: rgba(255,167,38,.3); }
.telecom-chip.degraded { color: #ff7a2e; border-color: rgba(255,122,46,.3); }
.telecom-chip.partial { color: var(--purple); border-color: rgba(168,85,247,.3); }
.telecom-chip.down { color: var(--red); border-color: rgba(239,68,68,.3); }
.telecom-avg {
  display: flex; gap: 14px; margin-left: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
.telecom-avg-item { display: flex; gap: 6px; align-items: baseline; }
.telecom-avg-label { font-size: 11px; color: var(--text-dim); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.telecom-avg-val { color: var(--cyan); font-weight: 700; }

.telecom-row {
  display: grid; grid-template-columns: 14px 1fr auto auto auto 14px; gap: 8px;
  align-items: center; padding: 8px 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  border-bottom: 1px solid var(--border-soft); cursor: pointer;
  border-radius: 3px; transition: background 120ms;
}
.telecom-row:last-child { border-bottom: none; }
.telecom-row:hover { background: rgba(255,255,255,0.025); }
.telecom-chev {
  color: var(--text-dim); font-size: 11px; text-align: center;
  transition: transform 150ms ease-out;
}
.telecom-row.expanded .telecom-chev { transform: rotate(90deg); color: var(--cyan); }
.telecom-dot { width: 8px; height: 8px; border-radius: 50%; }
.telecom-dot.healthy { background: var(--green); }
.telecom-dot.slow { background: var(--amber); box-shadow: 0 0 6px rgba(255,167,38,.4); }
.telecom-dot.degraded { background: #ff7a2e; box-shadow: 0 0 6px rgba(255,122,46,.45); animation: pulse 2.4s infinite; }
.telecom-dot.partial { background: var(--purple); box-shadow: 0 0 6px rgba(168,85,247,.45); }
.telecom-dot.down { background: var(--red); box-shadow: 0 0 8px rgba(239,68,68,.5); animation: pulse 2s infinite; }
.telecom-name { display: flex; flex-direction: column; min-width: 0; }
.telecom-op-name { font-weight: 700; font-size: 12px; color: var(--text); font-family: 'Inter', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telecom-parent { font-size: 11px; color: var(--text-dim); font-weight: 400; font-family: 'Inter', sans-serif; }
.telecom-type {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(0,191,255,0.08); color: var(--cyan);
  border: 1px solid rgba(0,191,255,0.2);
}
.telecom-type.mvno { background: rgba(168,85,247,0.08); color: var(--purple); border-color: rgba(168,85,247,0.2); }
.telecom-type.isp { background: rgba(0,217,126,0.08); color: var(--green); border-color: rgba(0,217,126,0.2); }
.telecom-type.altnet { background: rgba(236,72,153,0.08); color: var(--pink); border-color: rgba(236,72,153,0.2); }
.telecom-type.wholesale { background: rgba(255,167,38,0.08); color: var(--amber); border-color: rgba(255,167,38,0.2); }
.telecom-latency { font-weight: 700; min-width: 60px; text-align: right; }
.telecom-probes { font-size: 11px; color: var(--text-dim); min-width: 28px; text-align: right; font-weight: 700; }
.telecom-probes.partial { color: var(--purple); }
.telecom-probes.down { color: var(--red); }
.telecom-detail {
  grid-column: 1 / -1;
  padding: 6px 0 2px 22px;
  display: none;
  border-top: 1px solid var(--border-soft);
  margin-top: 6px;
}
.telecom-row.expanded .telecom-detail { display: block; }
.telecom-probe-line {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--text-muted); padding: 2px 0;
}
.telecom-probe-line .tl-name { color: var(--text); font-weight: 600; }
.telecom-probe-line .tl-host { color: var(--text-dim); font-size: 11px; }
.telecom-probe-line .tl-lat { font-weight: 700; }
.telecom-probe-line .tl-lat.ok { color: var(--green); }
.telecom-probe-line .tl-lat.fail { color: var(--red); }

/* News */
.news-list { display: flex; flex-direction: column; gap: 8px; }
.news-item {
  display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 12px; line-height: 1.4;
}
.news-item:last-child { border-bottom: none; }
.news-rank {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  color: var(--text-dim); min-width: 28px; font-size: 11px;
}
.news-title { color: var(--text); flex: 1; }
.news-title a { color: inherit; text-decoration: none; }
.news-title a:hover { color: var(--cyan); }
.news-meta { font-size: 11px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; margin-top: 2px; display: flex; gap: 8px; }
.news-score { color: var(--amber); font-weight: 700; }
.news-views { color: var(--purple); font-weight: 700; }

/* Siphon pipeline */
.sh-wrap { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center; margin-bottom: 10px; }
@media (max-width: 700px) { .sh-wrap { grid-template-columns: 1fr; } }
.sh-score { text-align: center; min-width: 110px; }
.sh-score-val { font-family: 'JetBrains Mono', monospace; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.sh-score-val.healthy { color: var(--green); }
.sh-score-val.degraded { color: var(--amber); }
.sh-score-val.critical, .sh-score-val.down { color: var(--red); }
.sh-score-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.4px; margin-top: 4px; }
.sh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.sh-tile { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; padding: 10px; text-align: center; }
.sh-tile-val { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; }
.sh-tile-lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.sh-failing-head { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--text-muted); text-transform: uppercase; margin: 8px 0 4px; }
.sh-row { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 2px; font-family: 'JetBrains Mono', monospace; font-size: 11px; border-bottom: 1px solid var(--border-soft); }
.sh-row .dot { width: 8px; height: 8px; border-radius: 50%; }
.sh-row .dot.error { background: var(--red); }
.sh-row .dot.warn { background: var(--amber); }
.sh-row .sh-err { color: var(--text-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.sh-row .sh-n { color: var(--amber); }
.pipeline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pipeline-card {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px; text-align: center;
}
.pipeline-count { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; color: var(--cyan); }
.pipeline-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* Footer */
.footer {
  margin-top: var(--s8); padding: var(--s5) var(--s6); border-top: 1px solid var(--border);
  text-align: center; font-size: 11px; color: var(--text-dim);
}
.footer a { color: var(--cyan); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 1400px) {
  .span-8 { grid-column: span 12; }
  .span-6 { grid-column: span 6; }
  .span-4 { grid-column: span 6; }
  .span-3 { grid-column: span 6; }
}
@media (max-width: 900px) {
  .span-6 { grid-column: span 12; }
  .span-4 { grid-column: span 12; }
  .span-3 { grid-column: span 6; }
  .cmd-ticker { gap: var(--s3); }
  .cmd-stat { min-width: 60px; }
}
@media (max-width: 768px) {
  .cmd-ticker { display: none; }
  .cmd-clock { font-size: 11px; }
  .container { padding: var(--s3); }
  .cmd-bar { padding: 10px var(--s3); gap: var(--s3); }
  .span-6, .span-4, .span-3 { grid-column: span 12; }
  .big-num { font-size: 32px; }
  .card { padding: var(--s4); }
}

/* UK Services categories */
.uk-cat-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px; }
.uk-cat-big { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 26px; color: var(--cyan); line-height: 1; }
.uk-cat-big-label { font-size: 11px; color: var(--text-dim); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; }
.uk-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.uk-cat-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; cursor: pointer; transition: border-color 150ms, background 150ms; }
.uk-cat-card:hover { border-color: var(--cyan); background: rgba(255,255,255,0.03); }
.uk-cat-card.healthy { border-left: 3px solid var(--green); }
.uk-cat-card.slow { border-left: 3px solid var(--amber); }
.uk-cat-card.degraded { border-left: 3px solid #ff7a2e; }
.uk-cat-card.critical { border-left: 3px solid var(--red); }
.uk-cat-card.unknown { border-left: 3px solid var(--text-dim); }
.uk-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uk-cat-card::after {
  content: '›'; position: absolute; top: 10px; right: 12px;
  color: var(--text-dim); font-size: 14px; line-height: 1;
  transition: transform 150ms, color 150ms;
}
.uk-cat-card { position: relative; }
.uk-cat-card.expanded::after { transform: rotate(90deg); color: var(--cyan); }
.uk-cat-card.expanded { border-color: rgba(0,191,255,0.3); }
.uk-cat-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text); }
.uk-cat-icon { font-size: 16px; }
.uk-cat-dot { width: 8px; height: 8px; border-radius: 50%; }
.uk-cat-dot.healthy { background: var(--green); }
.uk-cat-dot.slow { background: var(--amber); box-shadow: 0 0 6px rgba(255,167,38,.4); }
.uk-cat-dot.degraded { background: #ff7a2e; box-shadow: 0 0 6px rgba(255,122,46,.45); animation: pulse 2.4s infinite; }
.uk-cat-dot.critical { background: var(--red); box-shadow: 0 0 8px rgba(239,68,68,.5); animation: pulse 2s infinite; }
.uk-cat-dot.unknown { background: var(--text-dim); }
.uk-cat-stats { display: flex; gap: 14px; margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.uk-cat-stat { display: flex; gap: 5px; align-items: baseline; }
.uk-cat-stat-label { color: var(--text-dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }
.uk-cat-stat-val { color: var(--text); font-weight: 700; font-size: 11px; }
.uk-cat-detail { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.uk-cat-card.expanded .uk-cat-detail { display: block; }
.uk-svc-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.uk-svc-name { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uk-svc-lat { font-weight: 700; }
.uk-svc-lat.healthy { color: var(--green); }
.uk-svc-lat.slow { color: var(--amber); }
.uk-svc-lat.degraded { color: #ff7a2e; }
.uk-svc-lat.partial { color: var(--purple); }
.uk-svc-lat.down { color: var(--red); }

/* Masts */
.masts-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px; }
.masts-big { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 42px; color: var(--pink); line-height: 1; letter-spacing: -1px; }
.masts-big-label { font-size: 11px; color: var(--text-dim); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }
.masts-stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,0.03); margin: 12px 0 8px; }
.masts-stack-seg { height: 100%; transition: background 150ms; }
.masts-legend { display: flex; gap: 10px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.masts-legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); }
.masts-legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.masts-legend-label { color: var(--text-muted); font-weight: 700; letter-spacing: 0.5px; text-transform: capitalize; }
.masts-legend-val { color: var(--text); font-weight: 700; }
.masts-ops { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.masts-op-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 6px 10px; background: rgba(255,255,255,0.015); border-radius: 4px; border-left: 3px solid var(--cyan); }
.masts-op-name { color: var(--text); font-weight: 700; }
.masts-op-count { color: var(--cyan); font-weight: 700; }


/* Satellite + Business Telecom sections */
.sat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .sat-cols { grid-template-columns: 1fr; } }
.sat-col-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.sat-col-title { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.sat-col-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--cyan); font-weight: 700; }
.telecom-type.leo { background: rgba(0,191,255,0.08); color: var(--cyan); border-color: rgba(0,191,255,0.2); }
.telecom-type.geo { background: rgba(168,85,247,0.08); color: var(--purple); border-color: rgba(168,85,247,0.2); }
.telecom-type.meo\/geo { background: rgba(236,72,153,0.08); color: var(--pink); border-color: rgba(236,72,153,0.2); }
.telecom-type.sip { background: rgba(236,72,153,0.08); color: var(--pink); border-color: rgba(236,72,153,0.2); }
.telecom-type.cloud_pbx { background: rgba(59,130,246,0.08); color: var(--blue); border-color: rgba(59,130,246,0.2); }
.telecom-type.iot { background: rgba(168,85,247,0.08); color: var(--purple); border-color: rgba(168,85,247,0.2); }
.telecom-type.datacenter { background: rgba(0,191,255,0.08); color: var(--cyan); border-color: rgba(0,191,255,0.2); }
.telecom-type.business { background: rgba(0,217,126,0.08); color: var(--green); border-color: rgba(0,217,126,0.2); }
.biz-group { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.biz-group:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.biz-group-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 6px; }
.biz-group-title { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.biz-group-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--cyan); font-weight: 700; }
.biz-focus { font-size: 11px; color: var(--text-dim); font-style: italic; font-family: 'Inter', sans-serif; }
.sat-row, .biz-row {
  display: grid; grid-template-columns: 14px 1fr auto auto; gap: 8px;
  align-items: center; padding: 7px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  border-bottom: 1px solid var(--border-soft);
}
.sat-row:last-child, .biz-row:last-child { border-bottom: none; }
.sat-row:hover, .biz-row:hover { background: rgba(255,255,255,0.015); }

/* Networks add-on sections */
.nx-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.nx-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }
.nx-chip .c-val { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.nx-chip.healthy { color: var(--green); border-color: rgba(0,217,126,.3); }
.nx-chip.healthy .c-val { color: var(--green); }
.nx-chip.slow { color: var(--cyan); border-color: rgba(0,191,255,.3); }
.nx-chip.slow .c-val { color: var(--cyan); }
.nx-chip.degraded { color: var(--amber); border-color: rgba(255,167,38,.3); }
.nx-chip.degraded .c-val { color: var(--amber); }
.nx-chip.partial { color: var(--purple); border-color: rgba(168,85,247,.3); }
.nx-chip.partial .c-val { color: var(--purple); }
.nx-chip.down, .nx-chip.critical { color: var(--red); border-color: rgba(239,68,68,.3); }
.nx-chip.down .c-val, .nx-chip.critical .c-val { color: var(--red); }

.nx-list { display: flex; flex-direction: column; }
.nx-row { display: grid; grid-template-columns: 14px 1fr auto auto auto; gap: 8px; align-items: center; padding: 7px 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; border-bottom: 1px solid var(--border-soft); }
.nx-row:last-child { border-bottom: none; }
.nx-bar-wrap { display: flex; align-items: center; gap: 6px; }
.nx-bar { width: 64px; height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.nx-bar > span { display: block; height: 100%; background: var(--cyan); }
.nx-bar.healthy > span { background: var(--green); }
.nx-bar.slow > span { background: var(--cyan); }
.nx-bar.degraded > span { background: var(--amber); }
.nx-bar.partial > span { background: var(--purple); }
.nx-bar.down > span, .nx-bar.critical > span { background: var(--red); }
.nx-pct { font-size: 11px; font-weight: 700; color: var(--text-muted); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

.nx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.nx-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.nx-card .telecom-dot { width: 8px; height: 8px; }
.nx-card-name { display: flex; flex-direction: column; min-width: 0; }
.nx-card-op { font-weight: 700; font-size: 11px; color: var(--text); font-family: 'Inter', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-card-meta { font-size: 11px; color: var(--text-dim); font-family: 'Inter', sans-serif; }
.nx-card-lat { font-weight: 700; font-variant-numeric: tabular-nums; }

/* BGP cards */
.bgp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.bgp-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 4px; padding: 10px; font-family: 'JetBrains Mono', monospace; }
.bgp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.bgp-asn-name { font-size: 12px; font-weight: 700; color: var(--text); font-family: 'Inter', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgp-asn-id { font-size: 11px; color: var(--text-dim); font-weight: 700; }
.bgp-prefixes { font-size: 20px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }
.bgp-split { font-size: 11px; color: var(--text-dim); letter-spacing: 0.5px; margin-top: 2px; }
.bgp-split .v4 { color: var(--green); font-weight: 700; }
.bgp-split .v6 { color: var(--purple); font-weight: 700; }
.bgp-type { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; padding: 2px 6px; border-radius: 3px; background: rgba(0,191,255,0.08); color: var(--cyan); border: 1px solid rgba(0,191,255,0.2); margin-top: 6px; text-transform: uppercase; }
.bgp-type.cloud { background: rgba(168,85,247,0.08); color: var(--purple); border-color: rgba(168,85,247,0.2); }
.bgp-type.isp { background: rgba(0,217,126,0.08); color: var(--green); border-color: rgba(0,217,126,0.2); }
.bgp-type.cdn { background: rgba(236,72,153,0.08); color: var(--pink); border-color: rgba(236,72,153,0.2); }
.bgp-type.hosting { background: rgba(255,167,38,0.08); color: var(--amber); border-color: rgba(255,167,38,0.2); }

/* Submarine cables map */
.cables-wrap { display: grid; grid-template-columns: 1fr 280px; gap: var(--s3); margin-bottom: var(--s4); }
@media (max-width: 1100px) { .cables-wrap { grid-template-columns: 1fr; } }
.cables-map {
  height: 460px; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border); background: #0a0f1a;
  position: relative;
}
.cables-map .leaflet-container { background: #0a0f1a; font-family: 'JetBrains Mono', monospace; }
.cables-map .leaflet-tile-pane { filter: brightness(0.55) contrast(1.25) hue-rotate(190deg) saturate(0.7); }
.cables-map .leaflet-control-attribution {
  background: rgba(10,10,15,0.8); color: var(--text-dim); font-size: 11px;
  border: 1px solid var(--border); border-radius: 3px;
}
.cables-map .leaflet-control-attribution a { color: var(--cyan); }
.cables-map .leaflet-control-zoom a {
  background: rgba(18,19,26,0.95); color: var(--text); border: 1px solid var(--border);
}
.cables-map .leaflet-control-zoom a:hover { background: var(--bg-card); color: var(--cyan); }
.cable-tooltip {
  background: rgba(10,10,15,0.95) !important; color: var(--text) !important;
  border: 1px solid var(--cyan) !important; border-radius: 3px !important;
  box-shadow: 0 0 12px rgba(0,191,255,0.2) !important;
  font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important;
  padding: 4px 8px !important; font-weight: 700 !important;
}
.cable-tooltip::before { display: none !important; }
.landing-tooltip {
  background: rgba(10,10,15,0.95) !important; color: var(--pink) !important;
  border: 1px solid var(--pink) !important; border-radius: 3px !important;
  font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important;
  padding: 3px 6px !important; font-weight: 700 !important;
}
.landing-tooltip::before { display: none !important; }
.probe-tooltip {
  background: rgba(10,10,15,0.95) !important; color: var(--text) !important;
  border: 1px solid var(--cyan) !important; border-radius: 3px !important;
  font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important;
  padding: 6px 10px !important; font-weight: 700 !important;
  min-width: 140px;
}
.probe-tooltip::before { display: none !important; }
.probe-tooltip .pt-lat { font-size: 13px; color: var(--cyan); }
.probe-tooltip .pt-lat.slow { color: var(--amber); }
.probe-tooltip .pt-lat.degraded { color: #ff7a2e; }
.probe-tooltip .pt-lat.down { color: var(--red); }
.probe-tooltip .pt-corridor { font-size: 11px; color: var(--text-dim); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.probe-tooltip .pt-drift { font-size: 11px; color: var(--amber); font-weight: 700; margin-top: 2px; }
.probe-tooltip .pt-drift.critical { color: var(--red); }
.probe-tooltip .pt-drift.normal { color: var(--green); }
.cable-affected { filter: drop-shadow(0 0 4px rgba(239,68,68,0.6)); }
.corridor-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s2); margin-bottom: var(--s3);
}
.corridor-chip {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left-width: 3px; border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); font-family: 'JetBrains Mono', monospace;
}
.corridor-chip.healthy { border-left-color: var(--green); }
.corridor-chip.elevated { border-left-color: var(--amber); }
.corridor-chip.degraded { border-left-color: #ff7a2e; }
.corridor-chip.down { border-left-color: var(--red); }
.corridor-chip.warming { border-left-color: var(--text-dim); }
.corridor-name { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.corridor-stat { display: flex; justify-content: space-between; align-items: baseline; margin-top: 3px; }
.corridor-lat { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.corridor-lat.slow { color: var(--amber); }
.corridor-lat.degraded { color: #ff7a2e; }
.corridor-lat.down { color: var(--red); }
.corridor-count { font-size: 11px; color: var(--text-dim); font-weight: 700; }
.corridor-chip.degraded .corridor-count, .corridor-chip.down .corridor-count { color: var(--red); }
.cables-side {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3);
  max-height: 460px; overflow: hidden;
}
.cables-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.cables-stat {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: var(--s2) var(--s3);
}
.cables-stat-val {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 22px; color: var(--cyan); line-height: 1; font-variant-numeric: tabular-nums;
}
.cables-stat-label { font-size: 11px; color: var(--text-dim); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
.cables-list-head { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; padding: 0 0 var(--s1); border-bottom: 1px solid var(--border-soft); }
.cables-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.cables-list::-webkit-scrollbar { width: 6px; }
.cables-list::-webkit-scrollbar-track { background: transparent; }
.cables-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.cables-item {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px;
  font-size: 11px; cursor: pointer; border-radius: 3px;
  font-family: 'JetBrains Mono', monospace; border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.cables-item:hover { background: rgba(255,255,255,0.04); border-color: var(--border); }
.cables-item.active { background: rgba(0,191,255,0.08); border-color: rgba(0,191,255,0.35); }
.cables-swatch { width: 10px; height: 3px; border-radius: 1px; flex-shrink: 0; }
.cables-name { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* Prism UK Health Pulse */
.pulse-card {
  background: linear-gradient(135deg, rgba(0,191,255,0.04) 0%, rgba(168,85,247,0.04) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--s5);
  margin-bottom: var(--s4);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s6);
  align-items: center;
}
.pulse-card.healthy { border-left: 3px solid var(--green); }
.pulse-card.slow { border-left: 3px solid var(--amber); }
.pulse-card.degraded { border-left: 3px solid #ff7a2e; }
.pulse-card.critical { border-left: 3px solid var(--red); }
.pulse-score {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 56px; line-height: 1; letter-spacing: -2px;
  display: flex; align-items: baseline; gap: 4px;
}
.pulse-score-unit { font-size: 14px; color: var(--text-dim); font-weight: 600; letter-spacing: 0; }
.pulse-score.healthy { color: var(--green); }
.pulse-score.slow { color: var(--amber); }
.pulse-score.degraded { color: #ff7a2e; text-shadow: 0 0 12px rgba(255,122,46,.3); }
.pulse-score.critical { color: var(--red); text-shadow: 0 0 14px rgba(239,68,68,.4); }
.pulse-label {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-dim); margin-top: var(--s1);
}
.pulse-body { min-width: 0; }
.pulse-desc {
  font-size: var(--t-md); font-weight: 700; color: var(--text);
  letter-spacing: -0.3px; margin-bottom: var(--s1);
}
.pulse-bottleneck {
  font-size: 11px; color: var(--text-muted); font-weight: 500;
  display: flex; align-items: center; gap: var(--s2);
}
.pulse-bottleneck-tag {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(0,191,255,0.08); color: var(--cyan);
  border: 1px solid rgba(0,191,255,0.2);
}
.pulse-bottleneck-tag.upstream { background: rgba(255,122,46,0.1); color: #ff7a2e; border-color: rgba(255,122,46,0.25); }
.pulse-bottleneck-tag.last_mile { background: rgba(168,85,247,0.1); color: var(--purple); border-color: rgba(168,85,247,0.25); }
.pulse-bottleneck-tag.shared_dependency { background: rgba(236,72,153,0.1); color: var(--pink); border-color: rgba(236,72,153,0.25); }
.pulse-bottleneck-tag.transit { background: rgba(255,167,38,0.1); color: var(--amber); border-color: rgba(255,167,38,0.25); }
.pulse-bottleneck-tag.widespread { background: rgba(239,68,68,0.12); color: var(--red); border-color: rgba(239,68,68,0.3); }
.pulse-bottleneck-tag.none { background: rgba(0,217,126,0.1); color: var(--green); border-color: rgba(0,217,126,0.25); }
.pulse-dims {
  display: flex; gap: var(--s1); margin-top: var(--s3); flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
}
.pulse-dim {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 3px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.pulse-dim-val { color: var(--text); }
.pulse-dim.top-impact { border-color: rgba(255,122,46,0.3); background: rgba(255,122,46,0.05); }
.pulse-dim.top-impact .pulse-dim-val { color: #ff7a2e; }
.pulse-side {
  display: flex; flex-direction: column; gap: var(--s2); text-align: right;
  border-left: 1px solid var(--border-soft); padding-left: var(--s5);
  font-family: 'JetBrains Mono', monospace;
}
.pulse-metric { display: flex; flex-direction: column; gap: 2px; }
.pulse-metric-label { font-size: 11px; color: var(--text-dim); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.pulse-metric-val { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pulse-metric-val.up { color: var(--green); }
.pulse-metric-val.down { color: var(--red); }
.pulse-metric-val.muted { color: var(--text-dim); font-size: 11px; font-weight: 500; }
.pulse-insufficient {
  grid-column: 1 / -1; text-align: center; padding: var(--s4);
  font-size: 11px; color: var(--text-dim); font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
@media (max-width: 900px) {
  .pulse-card { grid-template-columns: auto 1fr; }
  .pulse-side { grid-column: 1 / -1; flex-direction: row; border-left: none;
    border-top: 1px solid var(--border-soft); padding: var(--s3) 0 0; justify-content: space-around; text-align: center; }
}

/* Airports tiles */
.air-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.air-tile { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; display: grid; grid-template-columns: 10px 1fr auto; gap: 6px; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.air-name { display: flex; flex-direction: column; min-width: 0; }
.air-title { font-size: 11px; font-weight: 700; color: var(--text); font-family: 'Inter', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.air-icao { font-size: 11px; color: var(--text-dim); font-weight: 700; letter-spacing: 0.5px; }
.air-lat { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Command-bar actions ── */
.cmd-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cmd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 28px; padding: 0 10px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: color 120ms, border-color 120ms, background 120ms;
  font-family: 'JetBrains Mono', monospace;
}
.cmd-btn:hover { color: var(--cyan); border-color: rgba(0,191,255,0.4); background: rgba(0,191,255,0.06); }
.cmd-btn .ico { display: inline-block; }
.cmd-btn.spinning .ico { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cmd-refresh-ring { font-size: 11px; font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; color: var(--text-dim); }
@media (max-width: 768px) { .cmd-actions { gap: 4px; } #refreshRing { display: none; } }

/* ── Sparklines ── */
.spark-wrap { height: 26px; margin-top: 8px; }
.spark-wrap svg { display: block; width: 100%; height: 26px; }

/* ── Live issues banner ── */
.issues {
  margin-bottom: var(--s4); border-radius: var(--r);
  border: 1px solid var(--border); border-left-width: 3px; background: var(--bg-card);
  padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.issues.clean { border-left-color: var(--green); }
.issues.warn { border-left-color: var(--amber); }
.issues.crit { border-left-color: var(--red); }
.issues-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.issues-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.issues.warn .issues-head .dot { background: var(--amber); animation: pulse 2s infinite; }
.issues.crit .issues-head .dot { background: var(--red); animation: pulse 1.6s infinite; }
.issues-pills { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.issue-pill {
  display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border); cursor: pointer;
  transition: border-color 120ms; color: var(--text);
}
.issue-pill:hover { border-color: var(--cyan); }
.issue-pill .ip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; }
.issue-pill.down .ip-dot { background: var(--red); }
.issue-pill.degraded .ip-dot { background: #ff7a2e; }
.issue-pill .ip-sec { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Security & threat posture ── */
.posture { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); scroll-margin-top: 72px; }
.posture-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  border-left-width: 3px; border-left-color: var(--text-dim); padding: var(--s3) var(--s4);
  display: flex; align-items: center; gap: var(--s3);
}
.posture-card.green, .posture-card.low { border-left-color: var(--green); }
.posture-card.yellow, .posture-card.moderate { border-left-color: var(--amber); }
.posture-card.substantial { border-left-color: #ff7a2e; }
.posture-card.orange, .posture-card.severe { border-left-color: #ff7a2e; }
.posture-card.red, .posture-card.critical { border-left-color: var(--red); }
.posture-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.posture-body { min-width: 0; flex: 1; }
.posture-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.posture-val { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; margin-top: 2px; line-height: 1.1; }
.posture-val.green { color: var(--green); } .posture-val.yellow, .posture-val.moderate { color: var(--amber); }
.posture-val.substantial, .posture-val.orange, .posture-val.severe { color: #ff7a2e; }
.posture-val.red, .posture-val.critical { color: var(--red); }
.posture-sub { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Outages ── */
.out-col-head { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s2); }
.out-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 6px 2px; font-family: 'JetBrains Mono', monospace; font-size: 11px; border-bottom: 1px solid var(--border-soft); }
.out-row:last-child { border-bottom: none; }
.out-row .telecom-dot { width: 8px; height: 8px; }
.out-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.out-name .out-code { color: var(--text-dim); font-size: 11px; margin-left: 4px; }
.out-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; white-space: nowrap; }
.out-tag.critical { background: rgba(239,68,68,0.1); color: var(--red); border: 1px solid rgba(239,68,68,0.25); }
.out-tag.warning { background: rgba(255,167,38,0.1); color: var(--amber); border: 1px solid rgba(255,167,38,0.25); }
.out-empty { font-size: 11px; color: var(--text-dim); padding: 8px 2px; }

/* ── GNSS interference ── */
.gnss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.gnss-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; border-left-width: 3px; border-left-color: var(--text-dim); padding: 10px 12px; }
.gnss-card.high { border-left-color: var(--red); }
.gnss-card.medium { border-left-color: var(--amber); }
.gnss-card.low { border-left-color: var(--text-dim); }
.gnss-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gnss-name { font-size: 12px; font-weight: 700; color: var(--text); }
.gnss-type { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.gnss-type.jamming { background: rgba(239,68,68,0.1); color: var(--red); }
.gnss-type.spoofing { background: rgba(168,85,247,0.1); color: var(--purple); }
.gnss-type.exercise { background: rgba(0,191,255,0.1); color: var(--cyan); }
.gnss-sev { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.gnss-sev.high { color: var(--red); } .gnss-sev.medium { color: var(--amber); } .gnss-sev.low { color: var(--text-dim); }
.gnss-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-top: 6px; }

/* ── Incident timeline / escalation ── */
.tl-head { display: flex; align-items: center; gap: var(--s3); cursor: pointer; user-select: none; }
.tl-head .tl-caret { color: var(--text-dim); transition: transform 150ms; margin-left: auto; font-size: 12px; }
.timeline-card.collapsed .tl-caret { transform: rotate(-90deg); }
.timeline-card.collapsed .tl-body-wrap { display: none; }
.tl-body-wrap { max-height: 340px; overflow-y: auto; margin-top: var(--s3); padding-right: 4px; }
.tl-body-wrap::-webkit-scrollbar { width: 6px; }
.tl-body-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.tl-empty { font-size: 12px; color: var(--text-dim); padding: 14px 2px; text-align: center; }
.tl-item { display: grid; grid-template-columns: 46px 14px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.tl-item:last-child { border-bottom: none; }
.tl-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--text-muted); line-height: 1.1; }
.tl-time-z { display: block; font-size: 11px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.5px; }
.tl-rail { position: relative; display: flex; justify-content: center; align-self: stretch; }
.tl-rail::before { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border); }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); z-index: 1; border: 2px solid var(--bg-card); }
.tl-item.new .tl-dot { background: var(--cyan); }
.tl-item.elevated .tl-dot { background: var(--amber); }
.tl-item.sustained .tl-dot { background: #ff7a2e; }
.tl-item.prolonged .tl-dot, .tl-item.down .tl-dot { background: var(--red); animation: pulse 1.8s infinite; }
.tl-item.cleared .tl-dot { background: var(--green); }
.tl-label { font-size: 12px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-item.cleared .tl-label { color: var(--text-muted); }
.tl-sec { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); margin-left: 4px; }
.tl-status { font-size: 11px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }
.tl-esc { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; white-space: nowrap; background: rgba(255,255,255,0.04); color: var(--text-dim); }
.tl-esc.new { background: rgba(0,191,255,0.1); color: var(--cyan); }
.tl-esc.elevated { background: rgba(255,167,38,0.1); color: var(--amber); }
.tl-esc.sustained { background: rgba(255,122,46,0.1); color: #ff7a2e; }
.tl-esc.prolonged, .tl-esc.down { background: rgba(239,68,68,0.12); color: var(--red); }
.tl-esc.cleared { background: rgba(0,217,126,0.1); color: var(--green); }

/* ── Space weather ── */
.hf-chart-wrap { margin-top: 14px; }
.hf-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.hf-legend { font-weight: 600; letter-spacing: .5px; text-transform: none; font-size: 11px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.hf-k { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.hf-k.ground { background: rgba(0,212,255,.35); } .hf-k.e6b { background: var(--cyan); } .hf-k.sm { background: var(--amber); }
.hf-k.nolog { background: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 2px, transparent 2px 4px); border: 1px solid var(--border); }
.hf-k.p90 { height: 0; border-top: 1px dashed rgba(255,255,255,.45); border-radius: 0; vertical-align: 2px; }
.hf-chart { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 10px; border-bottom: 1px solid var(--border); }
.hf-bar { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.hf-bar .g { background: rgba(0,212,255,.35); border-radius: 2px 2px 0 0; }
.hf-bar .e { background: var(--cyan); }
.hf-bar.nolog { background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 3px, transparent 3px 6px); border-radius: 2px; }
.hf-bar.partial .g, .hf-bar.partial .e { opacity: .45; }
.hf-bar.sm::before { content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.hf-p90 { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,.35); pointer-events: none; }
.hf-axis { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.hf-events { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hf-ev { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-muted); background: rgba(255,255,255,.02); }
.hf-ev b { color: var(--text); font-weight: 700; margin-right: 6px; }
.hf-ev.skymaster { border-color: rgba(255,176,32,.35); } .hf-ev.skymaster b { color: var(--amber); }
.hf-ev.forecast { border-style: dashed; border-color: rgba(255,176,32,.5); color: var(--amber); }
.hf-own { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.hf-own-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.hf-sock { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-left: 3px solid var(--text-dim); border-radius: 6px; padding: 8px 10px; min-width: 0; }
.hf-sock.on { border-left-color: var(--green); } .hf-sock.active { border-left-color: var(--amber); } .hf-sock.closed { border-left-color: var(--text-dim); opacity: .75; }
.hf-sock-k { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--text); }
.hf-sock-r { font-size: 11px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-sock-s { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-note { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-top: 12px; }
.hf-note a { color: var(--cyan); text-decoration: none; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sw-tile { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; border-left-width: 3px; border-left-color: var(--text-dim); padding: 12px 14px; }
.sw-tile.green { border-left-color: var(--green); } .sw-tile.amber { border-left-color: var(--amber); }
.sw-tile.orange { border-left-color: #ff7a2e; } .sw-tile.red { border-left-color: var(--red); }
.sw-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.sw-val { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -1px; margin-top: 6px; color: var(--text); }
.sw-val.green { color: var(--green); } .sw-val.amber { color: var(--amber); } .sw-val.orange { color: #ff7a2e; } .sw-val.red { color: var(--red); text-shadow: 0 0 12px rgba(239,68,68,.35); }
.sw-val-unit { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 3px; }
.sw-sub { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-top: 5px; }
.sw-kp-scale { display: flex; gap: 2px; margin-top: 8px; }
.sw-kp-seg { flex: 1; height: 6px; border-radius: 1px; background: rgba(255,255,255,0.06); }
.sw-kp-seg.on-q { background: var(--green); } .sw-kp-seg.on-a { background: var(--amber); } .sw-kp-seg.on-s { background: var(--red); }
.sw-banner { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 6px; margin-top: 10px; }
.sw-banner.show { background: rgba(168,85,247,0.1); color: var(--purple); border: 1px solid rgba(168,85,247,0.25); }
.sw-banner.hide { background: rgba(255,255,255,0.02); color: var(--text-dim); border: 1px solid var(--border); }

/* ── Power grid ── */
.grid-top { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center; margin-bottom: 12px; }
@media (max-width: 700px) { .grid-top { grid-template-columns: 1fr; } }
.grid-intensity { display: flex; align-items: baseline; gap: 4px; }
.grid-ci-val { font-family: 'JetBrains Mono', monospace; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.grid-ci-val.green, .grid-ci-val.verylow, .grid-ci-val.low { color: var(--green); }
.grid-ci-val.moderate { color: var(--amber); }
.grid-ci-val.high, .grid-ci-val.veryhigh { color: var(--red); }
.grid-ci-unit { font-size: 12px; color: var(--text-muted); }
.grid-ci-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }
.grid-ci-index { font-size: 11px; font-weight: 700; text-transform: capitalize; margin-top: 2px; }
.gen-legend { display: flex; gap: 8px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-top: 8px; }
.gen-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.gen-legend-dot { width: 8px; height: 8px; border-radius: 2px; }
.gen-legend-label { color: var(--text-muted); text-transform: capitalize; }
.gen-legend-val { color: var(--text); font-weight: 700; }

/* ── Toasts ── */
#toastWrap { position: fixed; bottom: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.toast { background: var(--bg-card); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r); padding: 10px 14px; font-size: 11px; color: var(--text-muted); box-shadow: 0 8px 24px rgba(0,0,0,0.45); animation: toastIn 240ms ease-out; }
.toast.crit { border-left-color: var(--red); } .toast.warn { border-left-color: var(--amber); } .toast.ok { border-left-color: var(--green); }
.toast-title { font-weight: 800; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 3px; color: var(--text); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ───────── House-style refinement layer (2026-06-23) ─────────
   Aligns Signal with Prism Surface: card elevation, sharper chrome,
   and readable data (uppercase+tracking reserved for eyebrow labels only). */
.card {
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}
.card:hover { border-color: var(--border-strong); }

/* Section headers: thin accent rule + clearer eyebrow */
.section-title { letter-spacing: 2px; color: var(--text); }
.section-title span { color: var(--text-dim); font-weight: 600; }

/* Data rows should read like data, not micro-caps. Bump size, kill tracking. */
.probe-row, .telecom-row, .telecom-probe-line, .sat-row, .biz-row,
.nx-row, .nx-card, .uk-svc-line, .out-row, .air-tile { font-size: 11.5px; }
.telecom-op-name, .nx-card-op, .air-title, .bgp-asn-name,
.gnss-name, .masts-op-name, .cables-name {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0;
  font-family: 'Inter', system-ui, sans-serif;
}
.telecom-parent, .nx-card-meta, .air-icao, .biz-focus, .probe-name + .probe-host { color: var(--text-dim); }
.telecom-latency, .nx-card-lat, .air-lat, .nx-pct, .corridor-lat { font-size: 11.5px; }

/* Reachability dots: crisper, consistent glow scale */
.telecom-dot, .uk-cat-dot { box-shadow: none; }
.telecom-dot.down, .uk-cat-dot.critical { box-shadow: 0 0 7px rgba(255,64,96,0.55); }
.telecom-dot.partial { box-shadow: 0 0 6px rgba(168,85,247,0.45); }

/* Lift the smallest dim labels a touch for legibility */
.cmd-stat-label, .pulse-metric-label, .cables-stat-label, .masts-big-label,
.uk-cat-stat-label, .corridor-name, .grid-ci-label, .sh-tile-lbl, .pipeline-label,
.out-col-head, .sat-col-title, .biz-group-title { font-size: 9.5px; }

/* Health badges: a hair larger, calmer tracking */
.health-badge { font-size: 11px; letter-spacing: 1.4px; }

/* Big numbers get tighter, brighter contrast */
.big-num, .pulse-score, .grid-ci-val, .cables-stat-val, .masts-big { letter-spacing: -1px; }

/* Issue pills + chips inherit the sharper borders cleanly */
.issue-pill, .telecom-chip, .nx-chip { border-color: var(--border); }

@media (max-width: 768px) {
  .probe-row, .telecom-row, .nx-row, .nx-card, .biz-row, .sat-row { font-size: 12px; }
}
/* Layer verdict strip — one tile per Crosspoint comms.* channel */
.layer-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
@media (max-width: 1100px) { .layer-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .layer-strip { grid-template-columns: 1fr; } }
.layer-tile { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--text-dim); border-radius: var(--r); padding: var(--s3) var(--s4); cursor: pointer; min-width: 0; transition: border-color var(--dur-fast) var(--ease-out); }
.layer-tile:hover { border-color: var(--border-strong); }
.layer-tile.ok { border-left-color: var(--green); } .layer-tile.watch { border-left-color: var(--amber); }
.layer-tile.impaired { border-left-color: var(--red); } .layer-tile.unknown { border-left-color: var(--text-dim); }
.lt-head { display: flex; align-items: center; gap: var(--s2); }
.lt-name { font-size: var(--t-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.lt-state { margin-left: auto; font-size: var(--t-xs); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.layer-tile.ok .lt-state { color: var(--green); } .layer-tile.watch .lt-state { color: var(--amber); }
.layer-tile.impaired .lt-state { color: var(--red); } .layer-tile.unknown .lt-state { color: var(--text-dim); }
.lt-headline { font-size: var(--t-sm); color: var(--text); margin-top: 6px; line-height: 1.35; overflow-wrap: anywhere; }
.lt-meta { font-size: var(--t-xs); color: var(--text-dim); margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
/* Maritime & air radio intel + HF transcripts/audio (public, Ewan 9 Oct 2026) */
.ri-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.ri-col { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.ri-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ri-title { font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
.ri-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); text-align: right; }
.ri-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ri-list { max-height: 420px; overflow-y: auto; }
.ri-row { padding: 7px 2px; border-bottom: 1px solid var(--border-soft); font-size: 12px; line-height: 1.45; }
.ri-row:last-child { border-bottom: 0; }
.ri-row .ri-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); display: block; margin-bottom: 2px; }
.ri-row .ri-tag b { color: var(--cyan); font-weight: 700; margin-right: 6px; }
.ri-row.alert { border-left: 3px solid var(--red); padding-left: 8px; }
.ri-row.alert .ri-tag b { color: var(--red); }
.ri-row.dim { opacity: .6; }
.ri-row audio { display: block; width: 100%; height: 30px; margin-top: 4px; color-scheme: dark; }
.ri-txt { color: var(--text); white-space: pre-wrap; word-break: break-word; }
.ri-sub { margin-top: 14px; }

/* ════ Watch-floor shell (v2, 9 Oct 2026): priority strip + left nav + views ════ */
.top { position: sticky; top: 0; z-index: 100; }
.top .cmd-bar { position: static; padding: 8px var(--s5); gap: var(--s4); }
.cmd-ticker { display: none; }
.cmd-sub { font-size: 11px; color: var(--text-dim); letter-spacing: 1.5px; text-transform: uppercase; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prio { display: grid; grid-template-columns: minmax(210px, 1.4fr) repeat(6, minmax(150px, 1fr)); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); }
.prio-cell { background: var(--bg-band); padding: 7px 12px; min-width: 0; cursor: pointer; border-top: 3px solid var(--text-dim); transition: background var(--dur-fast); }
.prio-cell:hover { background: var(--bg-raise); }
.prio-cell.ok { border-top-color: var(--green); } .prio-cell.watch { border-top-color: var(--amber); }
.prio-cell.alert { border-top-color: var(--red); background: rgba(255,64,96,0.08); } .prio-cell.unknown, .prio-cell.stale { border-top-color: var(--text-dim); }
.prio-k { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; color: var(--text-dim); text-transform: uppercase; display: flex; gap: 6px; }
.prio-k .age { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 500; letter-spacing: 0; }
.prio-v { font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-top: 2px; line-height: 1.15; overflow-wrap: anywhere; }
.prio-cell.ok .prio-v { color: var(--green); } .prio-cell.watch .prio-v { color: var(--amber); } .prio-cell.alert .prio-v { color: var(--red); }
.prio-cell.unknown .prio-v, .prio-cell.stale .prio-v { color: var(--text-dim); }
.prio-s { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.prio-cell.overall .prio-v { font-size: 20px; }
@media (max-width: 1500px) { .prio { grid-template-columns: repeat(4, minmax(0, 1fr)); } .prio-cell.overall { grid-column: span 2; } }
@media (max-width: 1000px) { .prio { grid-template-columns: repeat(3, minmax(0, 1fr)); } .prio-cell.overall { grid-column: span 3; } }
@media (max-width: 640px) { .prio { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prio-cell.overall { grid-column: span 2; } }

.app { display: grid; grid-template-columns: 210px minmax(0, 1fr); max-width: 1800px; margin: 0 auto; }
.side { position: sticky; top: var(--top-h, 110px); align-self: start; height: calc(100vh - var(--top-h, 110px)); overflow-y: auto; padding: 14px 10px; border-right: 1px solid var(--border-soft); }
.side-group { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; margin: 14px 8px 6px; }
.side-group:first-child { margin-top: 0; }
.side a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r-sm); color: var(--text-muted); text-decoration: none; font-size: 12px; font-weight: 600; border-left: 2px solid transparent; }
.side a:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.side a.active { background: rgba(0,212,255,0.08); color: var(--cyan); border-left-color: var(--cyan); }
.side .nb { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 1px 6px; border-radius: 9px; background: rgba(255,255,255,0.06); color: var(--text-dim); }
.side .nb.ok { color: var(--green); } .side .nb.watch { color: var(--amber); background: rgba(255,176,32,0.12); }
.side .nb.alert { color: #fff; background: var(--red); } .side .nb.unknown { color: var(--text-dim); }
.side-foot { margin: 18px 8px 0; font-size: 11px; line-height: 1.5; color: var(--text-dim); }
.app .container { max-width: none; margin: 0; padding: 16px 20px; min-width: 0; }
.view { display: none; } .view.on { display: block; }
.view-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.view-head h1 { font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.view-head p { font-size: 11px; color: var(--text-dim); }
.view .section { margin: 0 0 var(--s5); }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; display: flex; gap: 4px; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .side-group, .side-foot { display: none; }
  .side a { white-space: nowrap; border-left: 0; }
}

/* Watch floor: activity timeline + feed board */
.wf-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1200px) { .wf-grid { grid-template-columns: 1fr; } }
.act-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.act-filters button { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 3px 9px; cursor: pointer; }
.act-filters button b { color: var(--text-muted); margin-left: 4px; font-family: 'JetBrains Mono', monospace; }
.act-filters button.on { color: var(--cyan); border-color: rgba(0,212,255,0.4); background: rgba(0,212,255,0.08); }
.act-list { max-height: 640px; overflow-y: auto; }
.act-row { display: grid; grid-template-columns: 92px 64px minmax(0, 1fr); gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--border-soft); font-size: 12px; line-height: 1.4; cursor: pointer; }
.act-row:hover { background: rgba(255,255,255,0.025); }
.act-row.alert { border-left: 3px solid var(--red); padding-left: 6px; background: rgba(255,64,96,0.05); }
.act-row.dim { opacity: .55; }
.act-t { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); padding-top: 2px; }
.act-src { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 2px 5px; border-radius: 3px; height: fit-content; text-align: center; background: rgba(255,255,255,0.05); color: var(--text-muted); }
.act-src.vhf { color: var(--cyan); } .act-src.dsc { color: var(--blue); } .act-src.navtex { color: var(--purple); }
.act-src.hf { color: var(--green); } .act-src.eam { color: var(--amber); } .act-src.inc { color: var(--red); }
.act-body { min-width: 0; }
.act-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); }
.act-txt { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-row.open .act-txt { white-space: pre-wrap; word-break: break-word; }
.act-empty { padding: 14px 4px; color: var(--text-dim); font-size: 12px; }
.feed-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; cursor: pointer; }
.feed-row:last-child { border-bottom: 0; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); align-self: center; }
.feed-dot.live { background: var(--green); } .feed-dot.stale { background: var(--amber); } .feed-dot.down { background: var(--red); }
.feed-name { font-weight: 600; } .feed-sub { display: block; font-size: 11px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-age { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); text-align: right; }
.feed-age.stale { color: var(--amber); } .feed-age.down { color: var(--red); }
.wf-side > .card { margin-bottom: 16px; }
.view[data-view="watch"] .layer-strip { margin-bottom: 12px; }
.view[data-view="watch"] .posture { margin-bottom: 12px; }
.feed-group { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; color: var(--text-dim); text-transform: uppercase; margin: 10px 0 2px; }
.feed-group:first-child { margin-top: 0; }
.cmp .feed-dot { display: inline-block; }
@media (max-width: 640px) { .top { position: static; } .side { position: sticky; top: 0; z-index: 90; background: var(--bg); } .issues { flex-direction: column; align-items: flex-start; } .cmd-sub { display: none; } }
#view-radio .section-title, #view-hf .section-title, #view-sources .section-title { display: none; }

/* ════ v2 components ════ */
.lh-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(220px, 1.6fr); gap: 8px; }
@media (max-width: 1300px) { .lh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lh-tile { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-top: 2px solid var(--border-strong); border-radius: 6px; padding: 8px 10px; cursor: pointer; min-width: 0; }
.lh-tile.watch { border-top-color: var(--amber); } .lh-tile.alert { border-top-color: var(--red); background: rgba(255,64,96,0.06); }
.lh-tile.lh-changes { cursor: default; }
.lh-v { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; margin-top: 2px; }
.lh-s { font-size: 11px; color: var(--text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.lh-s b { color: var(--text); font-weight: 700; }
.lh-prev { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-left: 4px; }
.st-ok { color: var(--green); } .st-watch { color: var(--amber); } .st-alert { color: var(--red); } .st-stale { color: var(--text-dim); }
.lh-note { font-size: 11px; color: var(--text-dim); margin-top: 8px; line-height: 1.45; }
.hbars { display: inline-block; vertical-align: middle; }
.feed-row .hbars { margin-right: 6px; }
.feed-right { display: flex; align-items: center; gap: 6px; }
.rs-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.rs-bar input[type=search] { flex: 1 1 260px; min-width: 200px; }
.rs-bar input, .rs-bar select, .hf-filters select { font: inherit; font-size: 12px; color: var(--text); background: var(--bg-raise); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; color-scheme: dark; }
.rs-bar label, .hf-filters label { font-size: 11px; color: var(--text-muted); display: flex; gap: 4px; align-items: center; }
mark { background: rgba(255,176,32,0.35); color: #fff; border-radius: 2px; padding: 0 1px; }
.rs-src { display: inline-block; min-width: 46px; }
.rs-src.dsc { color: var(--blue) !important; } .rs-src.navtex { color: var(--purple) !important; }
.mx-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
@media (max-width: 1200px) { .mx-grid { grid-template-columns: 1fr; } }
.dsc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.dsc-card { border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: 6px; padding: 8px 10px; background: rgba(255,255,255,0.02); font-size: 12px; }
.dsc-card.alert { border-left-color: var(--red); background: rgba(255,64,96,0.07); } .dsc-card.watch { border-left-color: var(--amber); }
.dc-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 11px; color: var(--text-muted); }
.dc-cat { font-weight: 800; letter-spacing: 1px; color: var(--text); }
.dsc-card.alert .dc-cat { color: var(--red); } .dsc-card.watch .dc-cat { color: var(--amber); }
.dc-t { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); }
.dc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.dc-k { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.dc-grid .dc-k { margin-bottom: 1px; }
span.dc-k { display: inline; margin-left: 4px; }
.dc-grid > div > span.dc-k:first-child { display: block; margin-left: 0; }
.dc-who { color: var(--text-muted); font-size: 11px; }
.dsc-card a, .cmp a { color: var(--cyan); text-decoration: none; font-family: 'JetBrains Mono', monospace; }
.net-group { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin: 10px 0 3px; }
.net-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 140px 34px 130px; gap: 8px; align-items: center; font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--border-soft); }
.net-row.active { background: rgba(0,232,143,0.06); } .net-row.active .net-k { color: var(--green); }
.net-k { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--cyan); }
.net-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
.net-bar { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; } .net-bar i { display: block; height: 100%; background: var(--green); }
.net-n { font-family: 'JetBrains Mono', monospace; text-align: right; } .net-last { font-size: 11px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 800px) { .net-row { grid-template-columns: 60px minmax(0, 1fr) 60px 30px; } .net-last { display: none; } }
.hf-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; align-items: center; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 12px; }
table.cmp th { text-align: left; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); font-weight: 800; padding: 4px 6px; border-bottom: 1px solid var(--border); }
table.cmp td { padding: 5px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
table.cmp td b { font-family: 'Inter', sans-serif; }
table.cmp .g, b.g { color: var(--green); } table.cmp .a, b.a { color: var(--amber); } b.r { color: var(--red); } .dim { color: var(--text-dim); }
.so-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1300px) { .so-grid { grid-template-columns: 1fr; } }
.so-col { min-width: 0; }
.so-svg { width: 100%; height: 80px; display: block; margin-top: 6px; background: rgba(255,255,255,0.02); border-radius: 4px; }
.so-g1 { stroke: var(--amber); stroke-dasharray: 3 3; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.so-g2 { stroke: var(--red); stroke-dasharray: 3 3; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .45; }
.so-tx { font-size: 7px; fill: var(--amber); opacity: .8; }
.gps-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
.gps-sev { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; text-align: center; border-radius: 3px; padding: 2px 4px; background: rgba(255,176,32,0.12); color: var(--amber); }
.gps-sev.high { background: rgba(255,64,96,0.15); color: var(--red); }
.gps-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gps-b { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); }
.gps-nov { font-size: 11px; color: var(--purple); font-weight: 800; text-transform: uppercase; }
.issues.info { border-color: var(--border); }
.wf-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 11px; color: var(--text-muted); margin: -4px 0 12px; }
.wf-summary a { color: var(--cyan); text-decoration: none; cursor: pointer; }
#helpOverlay { position: fixed; inset: 0; background: rgba(5,8,16,0.72); z-index: 500; display: none; align-items: center; justify-content: center; }
#helpOverlay.on { display: flex; }
.help-card { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 10px; padding: 18px 22px; width: min(520px, 92vw); box-shadow: var(--shadow-lg); }
.help-card h2 { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; display: flex; }
.help-card h2 button { margin-left: auto; }
.help-card table { width: 100%; font-size: 12px; border-collapse: collapse; }
.help-card td { padding: 5px 4px; border-bottom: 1px solid var(--border-soft); color: var(--text-muted); }
.help-card kbd { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: var(--bg-raise); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; color: var(--text); }

/* ════ Ops-room theme (v2, Ewan 9 Oct 18:08: "this belongs in an ops room") ════
   Neutral near-black/slate; colour is reserved for state (red critical/distress, amber watch, green nominal, grey
   stale). Thin borders, square chrome, no gradients/glow, minimal motion. Overrides everything above. */
:root {
  --bg: #0a0c0f; --bg-card: #101317; --bg-band: #0d1013; --bg-raise: #161a1f;
  --border: #232a32; --border-soft: #1a2027; --border-strong: #2f3842;
  --text: #e3e7eb; --text-muted: #9aa5b1; --text-dim: #66717d;
  --green: #3fae78; --amber: #d6a03c; --red: #e0484f;
  --cyan: #a9b6c3; --blue: #a9b6c3; --purple: #8f9baa; --pink: #8f9baa;
  --glass: #0d1013;
  --r: 2px; --r-sm: 2px; --r-lg: 2px;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
}
body { background: var(--bg) !important; font-family: 'Inter', system-ui, sans-serif; }
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
.card, .layer-tile, .prio-cell, .lh-tile, .dsc-card, .ri-col, .sw-tile, .posture-card, .pulse-card, .issues, .issue-pill, .nx-chip, .hf-sock, .hf-ev,
.act-filters button, .act-src, .side a, .side .nb, .health-badge, .cmd-btn, .help-card, input, select, .tl-esc, .out-tag, .cables-stat, .uk-cat-card, .sh-tile,
.telecom-card, .gps-sev, kbd, mark, .so-svg, .layer-strip > *, [class*="card"], [class*="tile"], [class*="pill"], [class*="chip"], [class*="badge"] { border-radius: 2px !important; }
[class*="dot"] { border-radius: 50% !important; }
[class*="gradient"], .card, .pulse-card, .issues, .posture-card, .sw-tile, .layer-tile { background-image: none !important; }
.card, .pulse-card, .issues, .posture-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; }
.card { padding: 12px 14px; }
.card::before, .card::after, .pulse-card::before, .pulse-card::after { display: none !important; }
.live-dot, .health-dot, .skeleton { animation: none !important; }
.live-dot { background: var(--green); }
.brand-logo, .posture-icon { display: none !important; }
.brand-name { background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text); font-weight: 800; letter-spacing: 3px; text-transform: uppercase; font-size: 14px; }
.brand-tag { color: var(--text-dim); }
/* classification bar */
.classbar { background: #0f1a14; border-bottom: 1px solid #1d3326; color: #8fc7a5; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-align: center; padding: 3px 8px; text-transform: uppercase; font-family: 'Inter', sans-serif; }
.top .cmd-bar { background: var(--bg-band) !important; backdrop-filter: none !important; border-bottom: 1px solid var(--border); padding: 6px 16px; }
.clocks { display: flex; gap: 18px; align-items: baseline; }
.clk { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.clk-k { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; }
.clk-v { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cmd-clock { display: none; }
.cmd-btn { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-muted) !important; }
/* priority strip: large key figures, small-caps labels */
.prio { background: var(--border); }
.prio-cell { background: var(--bg-band) !important; border-top-width: 3px; padding: 8px 12px 9px; }
.prio-cell:hover { background: var(--bg-raise) !important; }
.prio-cell.alert { background: #1c1012 !important; }
.prio-k { font-size: 11px; letter-spacing: 1.8px; color: var(--text-dim); font-variant: small-caps; }
.prio-v { font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.prio-cell.overall .prio-v { font-size: 28px; letter-spacing: 3px; }
.prio-cell.ok .prio-v { color: var(--green); } .prio-cell.unknown .prio-v, .prio-cell.stale .prio-v { color: var(--text-dim); }
/* side nav */
.side { background: var(--bg-band); border-right: 1px solid var(--border); }
.side a { color: var(--text-muted); font-weight: 500; }
.side a > span:first-child { display: none; }
.side a.active { background: var(--bg-raise); color: var(--text); border-left-color: var(--text); }
.side .nb { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
.side .nb.ok { color: var(--green); border-color: #1f3a2c; } .side .nb.watch { color: var(--amber); background: transparent; border-color: #4a3a1a; }
.side .nb.alert { color: #fff; background: var(--red); border-color: var(--red); }
.side-group { color: var(--text-dim); letter-spacing: 2.4px; }
/* titles: clean sans, small caps, no accent bars */
.section-title { font-size: 12px; letter-spacing: 2.5px; border-bottom: 1px solid var(--border); color: var(--text); }
.section-title::before, .card-title .bar { display: none !important; }
.section-title span { color: var(--text-dim); }
.card-title { font-size: 11px; letter-spacing: 1.8px; color: var(--text-muted); }
.view-head { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 14px; }
.view-head h1 { font-size: 16px; letter-spacing: 3px; }
.view .section { margin-bottom: 16px; }
/* state colours only */
.act-src { background: transparent !important; border: 1px solid var(--border); color: var(--text-muted) !important; }
.act-src.inc { color: var(--amber) !important; border-color: #4a3a1a; }
.act-row.alert { background: #1a0f11; border-left-color: var(--red); }
.act-row.alert .act-src { color: var(--red) !important; border-color: #5a2328; }
.act-filters button { background: transparent; }
.act-filters button.on { color: var(--text); border-color: var(--text-muted); background: var(--bg-raise); }
.ri-row .ri-tag b, .net-k, .hf-sock-k { color: var(--text) !important; }
.ri-row.alert .ri-tag b { color: var(--red) !important; }
mark { background: transparent; color: var(--text); border-bottom: 2px solid var(--amber); }
.lh-v, .sw-val, .big-num, .net-n { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.lh-v { font-size: 26px; }
.lh-tile, .ri-col, .dsc-card, .sw-tile, .hf-sock { background: var(--bg-band) !important; border: 1px solid var(--border) !important; }
.lh-tile { border-top: 2px solid var(--border-strong) !important; }
.lh-tile.watch { border-top-color: var(--amber) !important; } .lh-tile.alert { border-top-color: var(--red) !important; background: #1a0f11 !important; }
.dsc-card { border-left: 3px solid var(--border-strong) !important; } .dsc-card.alert { border-left-color: var(--red) !important; background: #1a0f11 !important; } .dsc-card.watch { border-left-color: var(--amber) !important; }
.dsc-card a, .cmp a, .wf-summary a, .footer a { color: var(--text) !important; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.layer-tile { background: var(--bg-card) !important; }
.issue-pill { background: transparent !important; border: 1px solid var(--border) !important; }
.health-badge { background: transparent !important; border: 1px solid var(--border) !important; }
.net-row.active { background: #0f1a14; } .net-row.active .net-k { color: var(--green) !important; }
.net-bar i { background: var(--text-muted); }
.so-svg path { stroke: var(--text) !important; }
.gps-sev { background: transparent; border: 1px solid #4a3a1a; } .gps-sev.high { background: transparent; border-color: #5a2328; }
.gps-nov { color: var(--amber); }
.footer { color: var(--text-dim); border-top: 1px solid var(--border); }
#helpOverlay { background: rgba(5,6,8,0.8); }
.hf-bar .e { background: var(--text-muted) !important; } .hf-bar .g { background: #3a4550 !important; }

/* ════ SIGINT console (hf-watch docs/SIGINT.md, 9 Oct 2026): emitters, event cards, unknowns ════
   Same ops-room rules: neutral chrome, amber = unknown emitter (needs eyes), green = decoded, square thin borders. */
.unk-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; margin: 0 0 12px; background: var(--bg-band); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); font-size: 12px; min-width: 0; }
.unk-strip.has { border-left-color: var(--amber); background: #15120b; }
.unk-strip .unk-k { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-dim); }
.unk-strip.has .unk-k { color: var(--amber); }
.unk-strip .unk-n { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--text); }
.unk-strip.has .unk-n { color: var(--amber); }
.unk-items { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: 1 1 300px; min-width: 0; }
.unk-item { cursor: pointer; color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
.unk-item:hover { color: var(--text); }
.unk-strip a { color: var(--text) !important; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; cursor: pointer; margin-left: auto; white-space: nowrap; }
.em-chip { font: inherit; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 0 5px; line-height: 16px; display: inline-block; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 2px; vertical-align: baseline; white-space: nowrap; }
.em-chip.unk { color: var(--amber); border-color: #5a4520; }
.em-chip:hover { color: var(--text); border-color: var(--text-muted); }
.sig-fix { padding: 6px 10px; margin-bottom: 12px; border: 1px dashed var(--border-strong); color: var(--text-muted); font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.sig-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.sig-filters button { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); background: transparent; border: 1px solid var(--border); padding: 3px 9px; cursor: pointer; border-radius: 2px; }
.sig-filters button b { color: var(--text-muted); margin-left: 4px; font-family: 'JetBrains Mono', monospace; }
.sig-filters button.on { color: var(--text); border-color: var(--text-muted); background: var(--bg-raise); }
.sig-filters button.unk b { color: var(--amber); }
.em-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.em-board > .act-empty { grid-column: 1 / -1; }
.em-card { background: var(--bg-band); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); padding: 8px 10px; cursor: pointer; min-width: 0; font-size: 12px; }
.em-card:hover { border-color: var(--border-strong); }
.em-card.unk { border-left-color: var(--amber); }
.em-card.sel { background: var(--bg-raise); border-color: var(--text-muted); }
.em-card.quiet { opacity: .7; }
.sig-tx.low { opacity: .6; border-left-color: var(--text-dim); }
.ri-row.lowq { opacity: .55; }
.ri-row.watch { border-left: 3px solid var(--amber); }
.lowq-tog { margin: 6px 0; background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; padding: 4px 8px; cursor: pointer; border-radius: 4px; }
.lag-bad { color: var(--amber); }
.em-fail { margin: 6px 0; padding: 6px 8px; border: 1px dashed var(--border-strong); color: var(--text-muted); font-size: 12px; }
.em-open { margin-top: 6px; color: var(--cyan); font-size: 12px; }
.em-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.em-kind { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.em-dec { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--green); }
.em-last { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.em-label { color: var(--text); margin: 4px 0 6px; line-height: 1.35; overflow-wrap: anywhere; }
.em-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin-top: 6px; }
.em-kv dt { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); padding-top: 2px; }
.em-kv dd { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.em-kv dd.next { color: var(--text); }
.sig-spec { margin: 0; background: #000; border: 1px solid var(--border); aspect-ratio: 10 / 3; overflow: hidden; position: relative; min-width: 0; }
.sig-spec img { display: block; width: 100%; height: 100%; object-fit: fill; image-rendering: auto; }
.sig-spec figcaption { position: absolute; right: 4px; bottom: 2px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.55); pointer-events: none; }
.sig-spec.none { display: none; }
.sig-ev { border: 1px solid var(--border); border-left: 3px solid var(--border-strong); background: var(--bg-band); padding: 8px 10px; margin-bottom: 8px; font-size: 12px; min-width: 0; }
.sig-ev.unk { border-left-color: var(--amber); }
.sig-ev.dec { border-left-color: var(--green); }
.sig-ev-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.sig-khz { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text); }
.sig-kind { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.sig-kind i { font-style: normal; font-weight: 500; color: var(--text-dim); letter-spacing: 0; text-transform: none; }
.sig-t { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.sig-sub { font-size: 11px; color: var(--text-dim); margin: 2px 0 6px; overflow-wrap: anywhere; }
.sig-ev-b { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.sig-ev-b.nospec { grid-template-columns: minmax(0, 1fr); }
table.sig-par { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.sig-par th { width: 34%; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); padding: 2px 6px 2px 0; vertical-align: top; }
table.sig-par td { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text); padding: 2px 0; overflow-wrap: anywhere; }
table.sig-par td .dim { color: var(--text-dim); }
.sig-brief { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.sig-dec { margin-top: 8px; border: 1px solid #1f3a2c; background: #0c130f; padding: 6px 8px; }
.sig-dec-h { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--green); margin-bottom: 3px; }
.sig-dec pre { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); white-space: pre-wrap; word-break: break-word; margin: 0; }
.sig-dec .sig-dec-p { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sig-dec.none { border-color: var(--border); background: transparent; }
.sig-dec.none .sig-dec-h { color: var(--text-dim); }
.sig-dec.ident { border-color: var(--border, #2a2f3a); background: transparent; }
.sig-dec.ident .sig-dec-h { color: var(--cyan, #7fd3e6); }
.sig-tx { margin-top: 8px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.sig-tx-k { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 2px; }
.sig-ev audio { display: block; width: 100%; height: 30px; margin-top: 8px; color-scheme: dark; }
.sig-list { max-height: 900px; overflow-y: auto; }
#hfClips .sig-ev { margin-bottom: 6px; }
.em-detail-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.em-detail-h h2 { font-size: 14px; font-weight: 700; letter-spacing: .3px; color: var(--text); overflow-wrap: anywhere; }
.em-detail-h button.x { margin-left: auto; font: inherit; font-size: 11px; color: var(--text-muted); background: transparent; border: 1px solid var(--border); padding: 2px 8px; cursor: pointer; border-radius: 2px; }
.em-detail-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 10px; }
.ref-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; align-items: start; margin-top: 16px; }
@media (max-width: 1100px) { .ref-grid { grid-template-columns: minmax(0, 1fr); } }
.cal-tbl { table-layout: fixed; }
.cal-tbl th:first-child, .cal-tbl td:first-child { width: 40%; overflow-wrap: anywhere; font-family: 'Inter', sans-serif; font-size: 12px; }
.cal-tbl td.num { text-align: right; white-space: nowrap; } .cal-tbl th.num { text-align: right; }
.ref-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; font-size: 12px; }
.ref-next b { font-family: 'JetBrains Mono', monospace; color: var(--text); }
.ref-row { border: 1px solid var(--border); border-left: 3px solid var(--border-strong); background: var(--bg-band); padding: 7px 10px; margin-bottom: 8px; font-size: 12px; min-width: 0; }
.ref-row.ok { border-left-color: var(--green); }
.ref-row .sig-dec pre { max-height: 220px; overflow-y: auto; }
.cad-svg { width: 100%; height: 34px; display: block; background: var(--bg-band); border: 1px solid var(--border); margin: 4px 0 10px; }
.cad-svg .hit { stroke: var(--amber); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cad-svg .slot { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.cad-svg .nxt { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.cad-svg text { font-size: 11px; fill: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.act-row.unk { border-left: 3px solid var(--amber); padding-left: 6px; }
.act-row .sig-ev { margin: 6px 0 4px; cursor: default; }
@media (max-width: 640px) {   /* phone: the UTC + local clocks pushed the page 120 px wider than the screen */
  .top .cmd-bar { flex-wrap: wrap; row-gap: 4px; }
  .clocks { gap: 12px; margin-left: auto; }
  .clk-v { font-size: 15px; }
}
@media (max-width: 700px) {
  .sig-ev-b, .em-detail-g { grid-template-columns: minmax(0, 1fr); }
  .sig-t { margin-left: 0; white-space: normal; }
}

/* honest panels (10 Oct) */
.unavail { margin: 0 0 var(--s3); padding: 8px 12px; border: 1px dashed var(--border-strong, rgba(255,255,255,.18)); border-radius: 8px;
  color: var(--text-muted); font-size: 13px; background: rgba(255,255,255,.02); }
.unavail b { color: var(--amber); font-weight: 600; letter-spacing: .02em; }
.pulse-own, .issues-own { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.issues-own:empty { display: none; }
.issues-own { flex-basis: 100%; width: 100%; }
.issue-pill.own { opacity: .8; border-style: dashed; }
.age-chip { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 11px; background: rgba(255,176,32,.12); color: var(--amber); }
.age-chip.old { background: rgba(255,64,96,.12); color: var(--red); }
.honest-note { margin: 6px 0 10px; padding: 8px 12px; border-left: 3px solid var(--amber); background: rgba(255,176,32,.06); font-size: 13px; color: var(--text-muted); }

.item-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: flex-start; justify-content: center; z-index: 1000; padding: 8vh 16px 16px; overflow-y: auto; }
.item-modal.on { display: flex; }
.item-card { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 10px; max-width: 760px; width: 100%; padding: 16px; font-size: 14px; }
.item-h { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.item-h .dim { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.item-text { white-space: pre-wrap; font-size: 13px; line-height: 1.45; background: rgba(255,255,255,.03); padding: 10px; border-radius: 6px; max-height: 50vh; overflow: auto; }
.item-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.item-f input { flex: 1; min-width: 200px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 4px 8px; font-size: 12px; }
.item-f button, .item-card .x { background: none; border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.item-f a, .act-link, .plink { color: var(--cyan); text-decoration: none; }
.act-link { display: inline-block; margin: 6px 12px 0 0; font-size: 12px; }
.flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 30% { background: rgba(0,212,255,.22); box-shadow: 0 0 0 2px var(--cyan); } 100% { background: transparent; box-shadow: none; } }
.feeds-tbl td { padding: 3px 10px 3px 0; font-size: 13px; }

.is-new { box-shadow: inset 3px 0 0 var(--cyan); background: rgba(0,212,255,.06); }
.is-new::after { content: 'NEW'; font-size: 11px; letter-spacing: .08em; color: var(--cyan); margin-left: 6px; }
.act-row.is-new::after, .sig-ev.is-new::after { position: absolute; right: 8px; top: 6px; }
.act-row, .sig-ev { position: relative; }
.sig-ev.playing { outline: 2px solid var(--cyan); }

.sea-map { height: 460px; border-radius: 8px; overflow: hidden; background: #0a0f1a; position: relative; z-index: 0; }
.sea-map .leaflet-tile-pane { filter: brightness(0.55) contrast(1.25) hue-rotate(190deg) saturate(0.7); }
.sea-map .leaflet-container { background: #0a0f1a; }
.sea-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sea-toggles label { font-size: 12px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; cursor: pointer; }
.sea-toggles input { margin-right: 4px; }
.sea-pop { font-size: 12px; line-height: 1.4; max-width: 320px; color: #111; }
.sea-pop pre { white-space: pre-wrap; max-height: 180px; overflow: auto; font-size: 11px; margin: 6px 0 0; }
.sea-pop .k { color: #555; }
@media (max-width: 700px) { .sea-map { height: 340px; } }

.sq-box { margin: 8px 0 4px; font-size: 13px; }
.sq-box .sq { display: inline-block; padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
.sq-box .sq.a { background: rgba(255,64,96,.18); color: var(--red); }
.sq-box .sq.w { background: rgba(255,176,32,.15); color: var(--amber); }

.al-ctl { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 8px; font-size: 12px; color: var(--text-muted); }
.al-ctl input[type=text] { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 2px 6px; font-size: 12px; }
.al-ctl .al-sub a { color: var(--cyan); }
.tr-row { display: grid; grid-template-columns: 150px 1fr 50px; gap: 8px; align-items: end; margin: 4px 0; font-size: 12px; }
.tr-n { color: var(--text-muted); } .tr-v { text-align: right; color: var(--text); }
@media (max-width: 600px) { .tr-row { grid-template-columns: 100px 1fr 40px; } }

.tbl-wrap { overflow-x: auto; }
.rx-tbl td { vertical-align: top; font-size: 13px; }
.rx-tbl .dim { font-size: 12px; }
.rx-tbl tr.grp td { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); padding-top: 12px; }
.rx-tbl tr.excl { opacity: .7; }
.rx-note { font-size: 12px; color: var(--text-muted); font-style: italic; }
.prop-svg { display: block; background: rgba(255,255,255,.02); border-radius: 6px; }
.pr-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-muted); margin: 6px 0; }
.pr-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.pr-ios { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.pr-io { border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; } .pr-io.old { opacity: .6; }

/* ── Density + mobile (item 8 + addendum, 10 Oct) ──────────────────────────────────────────────────────────────
   Inline styles in the JS still carry some 9-10 px chrome; body text is 12-13 px. One scroll per page on small
   screens: nested scroll boxes are flattened, and the header stops being sticky so it no longer eats half a phone. */
.ri-list { max-height: 520px; }
.ri-txt, .act-txt { font-size: 13px; }
.ri-tag, .act-tag, .feed-sub { font-size: 11px; }
@media (max-width: 900px) {
  .top { position: static; }
  .side { position: sticky; top: 0; z-index: 90; background: var(--bg); }
  .act-list, .ri-list, .sig-list, .tl-body-wrap, #eamList, #rsList { max-height: none !important; overflow: visible !important; }
  .prio { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .prio-cell.overall { grid-column: span 2 !important; }
  .prio-cell { padding: 6px 10px; }
  .prio-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .app .container { padding: 12px 16px; }
  .card { padding: 12px; }
  .act-row { grid-template-columns: 54px minmax(0, 1fr); }
  .act-row .act-src { grid-column: 2; justify-self: start; }
  .act-row .act-body { grid-column: 1 / -1; }
  .act-txt { white-space: normal; }
  .ri-grid, .hf-own.ri-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cmp { font-size: 12px; }
  table.cmp { display: block; overflow-x: auto; }
  .view-head { flex-direction: column; gap: 2px; }
}
@media (max-width: 480px) {
  .prio-v { font-size: 14px; }
  .sea-map { height: 300px; }
  .item-modal { padding: 16px 8px; }
}
