/* ═══════════════════════════════════════════════════════
   PANOPTIS — OSINT Command Center
   Tactical reconnaissance display aesthetic
   ═══════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────────── */
:root {
  --accent:       #00ff41;
  --accent-dim:   rgba(0, 255, 65, 0.5);
  --accent-glow:  rgba(0, 255, 65, 0.15);
  --panel-bg:     rgba(2, 14, 6, 0.90);
  --panel-border: rgba(0, 255, 65, 0.30);
  --text:         #00ff41;
  --text-dim:     rgba(0, 255, 65, 0.45);
  --text-muted:   rgba(0, 255, 65, 0.25);
  --bar-bg:       rgba(1, 10, 4, 0.95);
  --font-ui:      system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Courier New', Courier, monospace;
  --font-brand:   var(--font-mono);  /* brand wordmark — alias lets it diverge from telemetry mono later */
  --font:         var(--font-ui);   /* global UI default — see --font-mono for telemetry */
  --top-h:        66px;
  --bot-h:        0px;
  --left-w:       216px;
  --right-w:      210px;

  /* ── CHROME / SHELL TOKENS (MyPriva / PanOptis brand) ──── */
  /* Fixed chrome accent — always cyan/teal regardless of globe mode */
  --chrome-accent:        #00cccc;
  --chrome-accent-bright: #00f5ff;
  --chrome-accent-dim:    rgba(0, 200, 200, 0.40);
  --chrome-accent-glow:   rgba(0, 200, 200, 0.10);
  --chrome-accent-border: rgba(0, 200, 200, 0.25);

  /* Panel glass levels — three common opacities */
  --panel-glass:          rgba(3, 8, 14, 0.72);   /* main panels — darkened for readability over bright terrain */
  --panel-glass-strong:   rgba(3, 8, 14, 0.86);   /* toolbars, nav, info bars */
  --panel-solid:          rgba(10, 14, 20, 0.92);  /* bottom bars, footers */

  /* Layer toggle ON state — replaces legacy green */
  --toggle-on:            #00cccc;
  --toggle-on-dim:        rgba(0, 200, 200, 0.40);

  /* Panel collapse — active widths (update to rail-w via body class) */
  --rail-w:               32px;
  --left-active-w:        var(--left-w);
  --right-active-w:       var(--right-w);

  /* ── LAYER DATA COLORS — semantic families ─────────────────
     These are entity/billboard colors, not chrome.
     Each layer uses one canonical color across globe rendering,
     left-panel dot, playback dot, and trace polyline.
     --chrome-accent (#00cccc) is reserved for chrome/UI only. */
  --layer-cctv:        #00ff66;   /* Green   — sensors/observation */
  --layer-satellites:  #7cff6b;   /* Lime    — sensors/observation */
  --layer-flights:     #b000ff;   /* Purple  — commercial aviation */
  --layer-military:    #ffaa00;   /* Amber   — military */
  --layer-maritime:    #00aaff;   /* Blue    — waterborne */
  --layer-sentinel:    #cfd8dc;   /* Gray    — raster reference */
  --layer-seismic:     #ff3b30;   /* Red     — hazard */
  --layer-weather:     #4dd2ff;   /* Sky     — atmospheric */
  --layer-traffic:     #ffd400;   /* Yellow  — flow */
  --layer-news:        #ffcc44;   /* Gold    — information */
  --layer-fires:       #ff5a00;   /* Orange  — hazard */
  --layer-live-traces: #00e5ff;   /* Teal    — analysis overlay */
  --layer-jamming:     #ff2bd6;   /* Magenta — interference */
  --layer-ports:       #00d8a8;   /* Teal-green — infrastructure */
  --layer-cables:      #00c2ff;   /* Cyan-blue  — infrastructure */
  --layer-power:       #ff9f1c;   /* Amber-orange — infrastructure */
  --layer-airports:    #a78bfa;   /* Violet — aviation infrastructure */
  --layer-volcanoes:   #f97316;   /* Orange — volcanic hazard */
  --layer-floods:         #3b82f6;   /* Blue   — flood hazard */
  --layer-cyclones:       #38bdf8;   /* Sky blue — tropical cyclone */
  --layer-tsunami-alerts: #22d3ee;   /* Cyan  — tsunami alert */
  --layer-droughts:       #d97706;   /* Amber — drought hazard */
  --layer-power-plants:       #facc15;   /* Yellow — power generation */
  --layer-rail-network:       #7dd3fc;   /* Sky blue — rail infrastructure */
  --layer-pipelines:          #ec4899;   /* Pink     — pipeline infrastructure */
  --layer-internet-exchanges: #a855f7;   /* Purple — network infrastructure */
  --layer-data-centers:       #14b8a6;   /* Teal   — compute infrastructure */
  --layer-admin-borders:      #93c5fd;   /* Blue-200 — reference boundary */
  --layer-urban-areas:        #38bdf8;   /* Cyan-blue — populated areas */
  --layer-power-substations:  #fbbf24;   /* Amber-400 — power distribution */
  --layer-telecom-towers:     #6366f1;   /* Indigo-500 — communications */
  --layer-emergency-facilities: #f43f5e; /* Rose-500 — emergency services */
}

/* ── MODE COLOR OVERRIDES ───────────────────────────────── */
body[data-mode="normal"] {
  --accent:       #00e5ff;
  --accent-dim:   rgba(0, 229, 255, 0.5);
  --accent-glow:  rgba(0, 229, 255, 0.12);
  --panel-bg:     rgba(0, 10, 16, 0.90);
  --panel-border: rgba(0, 229, 255, 0.28);
  --text:         #00e5ff;
  --text-dim:     rgba(0, 229, 255, 0.55);
  --text-muted:   rgba(0, 229, 255, 0.26);
  --bar-bg:       rgba(0, 6, 10, 0.96);
}

body[data-mode="flir"] {
  --accent:       #ff7700;
  --accent-dim:   rgba(255, 119, 0, 0.5);
  --accent-glow:  rgba(255, 119, 0, 0.12);
  --panel-bg:     rgba(14, 6, 0, 0.90);
  --panel-border: rgba(255, 119, 0, 0.30);
  --text:         #ff9933;
  --text-dim:     rgba(255, 153, 51, 0.45);
  --text-muted:   rgba(255, 153, 51, 0.25);
  --bar-bg:       rgba(10, 4, 0, 0.95);
}

body[data-mode="crt"] {
  --accent:       #33ff33;
  --panel-bg:     rgba(0, 12, 2, 0.92);
}

body[data-mode="anime"] {
  --accent:       #ff6eb4;
  --accent-dim:   rgba(255, 110, 180, 0.5);
  --accent-glow:  rgba(255, 110, 180, 0.12);
  --panel-bg:     rgba(15, 0, 12, 0.90);
  --panel-border: rgba(255, 110, 180, 0.30);
  --text:         #ff6eb4;
  --text-dim:     rgba(255, 110, 180, 0.55);
  --text-muted:   rgba(255, 110, 180, 0.28);
  --bar-bg:       rgba(12, 0, 10, 0.95);
}

body[data-mode="noir"] {
  --accent:       #b0b0b0;
  --accent-dim:   rgba(176, 176, 176, 0.5);
  --accent-glow:  rgba(176, 176, 176, 0.10);
  --panel-bg:     rgba(8, 8, 8, 0.92);
  --panel-border: rgba(176, 176, 176, 0.22);
  --text:         #cccccc;
  --text-dim:     rgba(200, 200, 200, 0.50);
  --text-muted:   rgba(200, 200, 200, 0.25);
  --bar-bg:       rgba(4, 4, 4, 0.97);
}

body[data-mode="snow"] {
  --accent:       #80d4ff;
  --accent-dim:   rgba(128, 212, 255, 0.5);
  --accent-glow:  rgba(128, 212, 255, 0.10);
  --panel-bg:     rgba(0, 8, 18, 0.90);
  --panel-border: rgba(128, 212, 255, 0.28);
  --text:         #a0e0ff;
  --text-dim:     rgba(160, 224, 255, 0.55);
  --text-muted:   rgba(160, 224, 255, 0.26);
  --bar-bg:       rgba(0, 5, 12, 0.97);
}

body[data-mode="tactical"] {
  --accent:       #4ade80;
  --accent-dim:   rgba(74, 222, 128, 0.5);
  --accent-glow:  rgba(74, 222, 128, 0.10);
  --panel-bg:     rgba(2, 10, 6, 0.93);
  --panel-border: rgba(74, 222, 128, 0.22);
  --text:         #86efac;
  --text-dim:     rgba(134, 239, 172, 0.55);
  --text-muted:   rgba(134, 239, 172, 0.26);
  --bar-bg:       rgba(0, 6, 3, 0.97);
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font);
}

button { cursor: pointer; font-family: var(--font); }

/* ── FONT OVERRIDES — telemetry, clocks, coordinates, brand ── */
/* Telemetry/readout surfaces stay --font-mono regardless of global --font default */
.clock,
.coord-item, .coord-val,
.tz-time,
#hud-rec { font-family: var(--font-mono); }

/* Brand wordmark uses --font-brand (currently aliases --font-mono; can diverge later) */
.brand-world, .brand-view, .brand-tagline { font-family: var(--font-brand); }

/* ── APP SHELL ─────────────────────────────────────────── */
#app {
  position: relative;
  width: 100vw; height: 100vh;
  overflow: hidden;
}

/* ── CESIUM CONTAINER ──────────────────────────────────── */
#cesiumContainer {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: filter 0.4s ease;
}

.cesium-widget-credits,
.cesium-viewer-bottom { display: none !important; }

/* ── GOOGLE ATTRIBUTION (Photorealistic 3D Tiles) ──────── */
/* creditContainer in main.js points here. Hidden until Photoreal 3D is active. */
/* Required by Google Map Tiles API ToS — do not remove or set display:none permanently. */
#cesium-credits {
  display: none;
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 10;
  pointer-events: auto;
  max-width: 420px;
}

#cesium-credits .cesium-credit-container {
  background: rgba(0, 0, 0, 0.62);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-ui);
  line-height: 1.4;
}

/* ── VISUAL MODE FILTERS ───────────────────────────────── */
body[data-mode="nvg"]    #cesiumContainer { filter: sepia(0.4) saturate(2.5) hue-rotate(75deg) brightness(0.82); }
body[data-mode="flir"]   #cesiumContainer { filter: sepia(1) saturate(5) hue-rotate(0deg) brightness(0.65) contrast(1.4); }
body[data-mode="crt"]    #cesiumContainer { filter: brightness(0.88) contrast(1.15) saturate(0.9); }
body[data-mode="normal"] #cesiumContainer { filter: none; }
body[data-mode="anime"]  #cesiumContainer { filter: saturate(1.8) hue-rotate(20deg) brightness(1.05); }
body[data-mode="noir"]   #cesiumContainer { filter: none; }
body[data-mode="snow"]     #cesiumContainer { filter: brightness(1.15) saturate(0.5) hue-rotate(190deg); }
body[data-mode="tactical"] #cesiumContainer { filter: none; } /* base suppression via Cesium imagery-layer props */

/* ── PANEL ISOLATION ───────────────────────────────────────
   Visual modes change --accent / --text / --text-dim etc. on
   <body>. Override those variables back to neutral inside every
   chrome panel so only #cesiumContainer (and the vignette /
   starfield overlays) are visually tinted by the active mode.

   filter: none is defensive — no body-level filter exists today
   but ensures panels are never accidentally tinted if one is
   added. Note: backdrop-filter is a separate property and is
   unaffected.
   ─────────────────────────────────────────────────────────── */
#panel-layers,
#panel-right,
#topbar,
.style-toolbar,
.timeline-bar,
.playback-layers,
.mode-toggle,
.location-nav,
.scene-info-bar {
  --accent:      var(--chrome-accent);
  --accent-dim:  var(--chrome-accent-dim);
  --accent-glow: var(--chrome-accent-glow);
  --text:        rgba(255, 255, 255, 0.82);
  --text-dim:    rgba(255, 255, 255, 0.50);
  --text-muted:  rgba(255, 255, 255, 0.25);
  filter: none;
}

/* ── VFX OVERLAYS ──────────────────────────────────────── */
.vfx-overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: none;
}

/* NVG: green vignette */
#overlay-nvg {
  background: radial-gradient(ellipse at 50% 50%,
    transparent 42%, rgba(0,20,5,0.55) 75%, rgba(0,10,2,0.85) 100%);
}
body[data-mode="nvg"] #overlay-nvg { display: block; }

/* FLIR: orange vignette */
#overlay-flir {
  background: radial-gradient(ellipse at 50% 50%,
    transparent 42%, rgba(20,8,0,0.50) 75%, rgba(10,3,0,0.82) 100%);
}
body[data-mode="flir"] #overlay-flir { display: block; }

/* CRT: scanlines */
#overlay-crt {
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.10) 2px, rgba(0,0,0,0.10) 4px);
}
body[data-mode="crt"] #overlay-crt { display: block; }

/* ── VIGNETTE LENS OVERLAY ─────────────────────────────── */
#vignette-overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 52%,
    rgba(0, 0, 0, 0.20) 72%,
    rgba(0, 0, 0, 0.52) 100%
  );
  transition: background 0.3s ease;
}

body[data-panoptic="true"] #vignette-overlay {
  background: radial-gradient(
    circle at center,
    transparent 25%,
    transparent 35%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.5) 48%,
    rgba(0,0,0,0.85) 53%,
    rgba(0,0,0,0.98) 58%,
    #000 62%
  );
  pointer-events: none;
}

/* ── HUD OVERLAY ELEMENTS ──────────────────────────────── */
.hud-overlay {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  pointer-events: none;
  position: fixed;
  z-index: 15;
  line-height: 1.5;
}

#hud-classification {
  top: calc(var(--top-h) + 10px);
  left: calc(var(--left-active-w) + 12px);
  color: rgba(255, 70, 70, 0.92);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.92), -1px -1px 2px rgba(0,0,0,0.85), 0 0 10px rgba(255, 50, 50, 0.50);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.16em;
  background: rgba(3, 8, 14, 0.55);
  padding: 3px 7px;
  border-radius: 2px;
}

#hud-designator {
  top: calc(var(--top-h) + 34px);
  left: calc(var(--left-active-w) + 12px);
  color: rgba(0, 200, 200, 0.82);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.92), -1px -1px 2px rgba(0,0,0,0.85), 0 0 8px rgba(0, 200, 200, 0.40);
  font-size: 8px;
  letter-spacing: 0.14em;
  background: rgba(3, 8, 14, 0.55);
  padding: 3px 7px;
  border-radius: 2px;
}

#hud-summary {
  top: calc(var(--top-h) + 56px);
  left: calc(var(--left-active-w) + 12px);
  color: rgba(0, 229, 255, 0.74);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.92), -1px -1px 2px rgba(0,0,0,0.85), 0 0 8px rgba(0, 229, 255, 0.35);
  font-size: 8px;
  letter-spacing: 0.10em;
  line-height: 1.6;
  background: rgba(3, 8, 14, 0.55);
  padding: 3px 7px;
  border-radius: 2px;
}

/* Right-column overlays */
#hud-active-style {
  top: calc(var(--top-h) + 10px);
  right: calc(var(--right-active-w) + 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  pointer-events: none;
  background: rgba(3, 8, 14, 0.55);
  padding: 5px 8px;
  border-radius: 2px;
}

.hud-label {
  font-size: 7px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.90);
}

.hud-value {
  font-size: 12px;
  font-weight: bold;
  color: var(--accent);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.90), 0 0 10px var(--accent-dim);
  letter-spacing: 0.16em;
}

#hud-rec {
  top: calc(var(--top-h) + 48px);
  right: calc(var(--right-active-w) + 12px);
  color: #ff3333;
  font-size: 9px;
  letter-spacing: 0.14em;
  display: none;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
  cursor: pointer;
}

.rec-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff3333;
  box-shadow: 0 0 6px #ff3333, 0 0 12px rgba(255, 51, 51, 0.5);
  animation: rec-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes rec-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px #ff3333, 0 0 12px rgba(255,51,51,0.5); }
  50%       { opacity: 0.25; box-shadow: none; }
}

#hud-orbital {
  top: calc(var(--top-h) + 66px);
  right: calc(var(--right-active-w) + 12px);
  color: rgba(0, 229, 255, 0.74);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.92), -1px -1px 2px rgba(0,0,0,0.85), 0 0 8px rgba(0, 229, 255, 0.35);
  font-size: 8px;
  letter-spacing: 0.12em;
  background: rgba(3, 8, 14, 0.55);
  padding: 4px 8px;
  border-radius: 2px;
}

/* Bottom-left overlays — dms sits above mgrs; bottom values account for padding boxes */
#hud-dms {
  bottom: 142px;
  left: calc(var(--left-active-w) + 12px);
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.92), -1px -1px 2px rgba(0,0,0,0.85);
  background: rgba(3, 8, 14, 0.55);
  padding: 3px 7px;
  border-radius: 2px;
}

#hud-mgrs {
  bottom: 118px;
  left: calc(var(--left-active-w) + 12px);
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.92), -1px -1px 2px rgba(0,0,0,0.85), 0 0 8px var(--accent-dim);
  background: rgba(3, 8, 14, 0.55);
  padding: 3px 7px;
  border-radius: 2px;
}

/* ── SHARED PANEL STYLE ────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.panel-title {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
}

.panel-badge {
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--chrome-accent);
  text-shadow: none;
}

/* ── TOP BAR ───────────────────────────────────────────── */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--top-h);
  z-index: 20;
  background: var(--panel-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.tb-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  gap: 10px;
  height: 44px;
  flex-shrink: 0;
}

/* ── BRAND TYPOGRAPHY ──────────────────────────────────── */
.brand-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* button reset */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.brand-block:hover { opacity: 0.75; }
.brand-block:focus-visible {
  outline: 1px solid rgba(0, 200, 200, 0.5);
  outline-offset: 4px;
  border-radius: 4px;
}

.brand-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.92;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-line {
  display: flex;
  align-items: baseline;
}

.brand-world {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.22em;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255,255,255,0.2);
}

.brand-view {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.22em;
  color: #00e5ff;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.6), 0 0 24px rgba(0, 229, 255, 0.2);
}

.brand-tagline {
  font-size: 7px;
  letter-spacing: 0.32em;
  color: rgba(0, 204, 204, 0.55);
  text-transform: uppercase;
}

.tb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}

.tb-center {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent), 0 0 12px var(--accent-dim);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.clock {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-dim);
  min-width: 100px;
  text-align: center;
}

.tb-status-sep {
  color: rgba(255, 255, 255, 0.12);
  font-size: 8px;
  opacity: 1;
}

.sb-item {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  white-space: nowrap;
}

.sb-val {
  color: var(--accent);
  font-weight: bold;
}

#sb-status {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.tb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-end;
}

.coord-item {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.coord-val {
  color: var(--accent);
  font-size: 11px;
}

.coord-sep {
  color: rgba(255, 255, 255, 0.12);
  font-size: 10px;
}

/* ── TOPBAR DROPDOWN ANCHORS ───────────────────────────── */
.tb-dd-wrap {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.tb-dd-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.50);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 5px;
  white-space: nowrap;
  transition: color 0.15s;
}

.tb-dd-btn:hover,
.tb-dd-wrap.open .tb-dd-btn {
  color: var(--chrome-accent);
}


/* ── WORLD CLOCK STRIP ─────────────────────────────────── */
#tz-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0 12px;
  padding: 0 14px;
  height: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.tz-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.tz-label {
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(0, 200, 200, 0.45);
}

.tz-time {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.40);
}

.tz-sep {
  color: rgba(255, 255, 255, 0.12);
  font-size: 8px;
  opacity: 1;
}

/* ── LEFT PANEL ────────────────────────────────────────── */
#panel-layers {
  position: fixed;
  top: calc(var(--top-h) + 8px);
  left: 0;
  width: var(--left-w);
  bottom: 8px;
  z-index: 20;
  background: var(--panel-glass);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: width 0.22s ease, background 0.25s ease;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layer-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.layer-list::-webkit-scrollbar { width: 3px; }
.layer-list::-webkit-scrollbar-track { background: transparent; }
.layer-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

/* ── ACCORDION ─────────────────────────────────────────── */
.accordion-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-align: left;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.75);
}

.accordion-header.open {
  color: var(--accent);
  background: rgba(0,0,0,0.15);
}

.acc-label { flex: 1; }

.acc-icon {
  font-size: 12px;
  line-height: 1;
  transition: transform 0.25s;
  color: rgba(255, 255, 255, 0.25);
}

.accordion-header.open .acc-icon {
  transform: rotate(90deg);
  color: var(--accent);
}

/* OPS STREAM master alerts toggle — lives inside the accordion-header button */
.ops-alerts-toggle {
  flex-shrink: 0;
  font-size: 8px;
  font-family: var(--font-mono);
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ops-alerts-toggle.ops-alerts-on {
  color: rgba(0, 204, 204, 0.75);
  border: 1px solid rgba(0, 204, 204, 0.30);
}

.ops-alerts-toggle.ops-alerts-off {
  color: rgba(255, 59, 48, 0.70);
  border: 1px solid rgba(255, 59, 48, 0.30);
}

.ops-alerts-toggle:hover {
  opacity: 0.85;
}

.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

.accordion-body.open {
  max-height: 1200px;
  transition: max-height 0.45s ease-in;
}

/* Preset grid inside accordion */
.acc-preset-grid {
  padding: 6px 8px;
}

/* ── LAYER ROWS ────────────────────────────────────────── */
.layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s;
}

.layer-row:hover { background: rgba(255, 255, 255, 0.03); }

/* Semantic color dot — replaces emoji icon */
.layer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Per-layer dot OFF-state tint */
.layer-dot-cctv       { background: rgba(  0,255,102,0.18); border-color: rgba(  0,255,102,0.32); }
.layer-dot-satellites { background: rgba(124,255,107,0.18); border-color: rgba(124,255,107,0.32); }
.layer-dot-flights    { background: rgba(176,  0,255,0.18); border-color: rgba(176,  0,255,0.32); }
.layer-dot-military   { background: rgba(255,170,  0,0.18); border-color: rgba(255,170,  0,0.32); }
.layer-dot-maritime   { background: rgba(  0,170,255,0.18); border-color: rgba(  0,170,255,0.32); }
.layer-dot-sentinel   { background: rgba(207,216,220,0.12); border-color: rgba(207,216,220,0.22); }
.layer-dot-seismic    { background: rgba(255, 59, 48,0.18); border-color: rgba(255, 59, 48,0.32); }
.layer-dot-weather    { background: rgba( 77,210,255,0.18); border-color: rgba( 77,210,255,0.32); }
.layer-dot-traffic    { background: rgba(255,212,  0,0.18); border-color: rgba(255,212,  0,0.32); }
.layer-dot-news       { background: rgba(255,204, 68,0.18); border-color: rgba(255,204, 68,0.32); }
.layer-dot-fires      { background: rgba(255, 90,  0,0.18); border-color: rgba(255, 90,  0,0.32); }
.layer-dot-jamming    { background: rgba(255, 43,214,0.18); border-color: rgba(255, 43,214,0.32); }
.layer-dot-ports      { background: rgba(  0,216,168,0.18); border-color: rgba(  0,216,168,0.32); }
.layer-dot-cables     { background: rgba(  0,194,255,0.18); border-color: rgba(  0,194,255,0.32); }
.layer-dot-power       { background: rgba(255,159, 28,0.18); border-color: rgba(255,159, 28,0.32); }
.layer-dot-airports    { background: rgba(167,139,250,0.18); border-color: rgba(167,139,250,0.32); }
.layer-dot-volcanoes   { background: rgba(249,115, 22,0.18); border-color: rgba(249,115, 22,0.32); }
.layer-dot-floods         { background: rgba( 59,130,246,0.18); border-color: rgba( 59,130,246,0.32); }
.layer-dot-cyclones       { background: rgba( 56,189,248,0.18); border-color: rgba( 56,189,248,0.32); }
.layer-dot-tsunami-alerts { background: rgba( 34,211,238,0.18); border-color: rgba( 34,211,238,0.32); }
.layer-dot-droughts       { background: rgba(217,119,  6,0.18); border-color: rgba(217,119,  6,0.32); }
.layer-dot-power-plants   { background: rgba(250,204, 21,0.18); border-color: rgba(250,204, 21,0.32); }
.layer-dot-rail-network   { background: rgba(125,211,252,0.18); border-color: rgba(125,211,252,0.32); }
.layer-dot-pipelines            { background: rgba(236, 72,153,0.18); border-color: rgba(236, 72,153,0.32); }
.layer-dot-internet-exchanges   { background: rgba(168, 85,247,0.18); border-color: rgba(168, 85,247,0.32); }
.layer-dot-data-centers         { background: rgba( 20,184,166,0.18); border-color: rgba( 20,184,166,0.32); }
.layer-dot-admin-borders        { background: rgba(147,197,253,0.18); border-color: rgba(147,197,253,0.32); }
.layer-dot-urban-areas          { background: rgba( 56,189,248,0.18); border-color: rgba( 56,189,248,0.32); }
.layer-dot-power-substations    { background: rgba(251,191, 36,0.18); border-color: rgba(251,191, 36,0.32); }
.layer-dot-telecom-towers       { background: rgba( 99,102,241,0.18); border-color: rgba( 99,102,241,0.32); }
.layer-dot-emergency-facilities { background: rgba(244, 63, 94,0.18); border-color: rgba(244, 63, 94,0.32); }
.layer-dot-live-traces          { background: rgba(  0,229,255,0.18); border-color: rgba(  0,229,255,0.32); }

/* Per-layer dot ON-state — full color with glow */
.layer-row:has(.layer-toggle.on) .layer-dot-cctv       { background: #00ff66; border-color: #00ff66; box-shadow: 0 0 6px 1px rgba(  0,255,102,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-satellites { background: #7cff6b; border-color: #7cff6b; box-shadow: 0 0 6px 1px rgba(124,255,107,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-flights    { background: #b000ff; border-color: #b000ff; box-shadow: 0 0 6px 1px rgba(176,  0,255,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-military   { background: #ffaa00; border-color: #ffaa00; box-shadow: 0 0 6px 1px rgba(255,170,  0,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-maritime   { background: #00aaff; border-color: #00aaff; box-shadow: 0 0 6px 1px rgba(  0,170,255,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-sentinel   { background: #cfd8dc; border-color: #cfd8dc; box-shadow: 0 0 6px 1px rgba(207,216,220,0.50); }
.layer-row:has(.layer-toggle.on) .layer-dot-seismic    { background: #ff3b30; border-color: #ff3b30; box-shadow: 0 0 6px 1px rgba(255, 59, 48,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-weather    { background: #4dd2ff; border-color: #4dd2ff; box-shadow: 0 0 6px 1px rgba( 77,210,255,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-traffic    { background: #ffd400; border-color: #ffd400; box-shadow: 0 0 6px 1px rgba(255,212,  0,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-news       { background: #ffcc44; border-color: #ffcc44; box-shadow: 0 0 6px 1px rgba(255,204, 68,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-fires      { background: #ff5a00; border-color: #ff5a00; box-shadow: 0 0 6px 1px rgba(255, 90,  0,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-jamming    { background: #ff2bd6; border-color: #ff2bd6; box-shadow: 0 0 6px 1px rgba(255, 43,214,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-ports      { background: #00d8a8; border-color: #00d8a8; box-shadow: 0 0 6px 1px rgba(  0,216,168,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-cables     { background: #00c2ff; border-color: #00c2ff; box-shadow: 0 0 6px 1px rgba(  0,194,255,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-power       { background: #ff9f1c; border-color: #ff9f1c; box-shadow: 0 0 6px 1px rgba(255,159, 28,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-airports    { background: #a78bfa; border-color: #a78bfa; box-shadow: 0 0 6px 1px rgba(167,139,250,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-volcanoes   { background: #f97316; border-color: #f97316; box-shadow: 0 0 6px 1px rgba(249,115, 22,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-floods         { background: #3b82f6; border-color: #3b82f6; box-shadow: 0 0 6px 1px rgba( 59,130,246,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-cyclones       { background: #38bdf8; border-color: #38bdf8; box-shadow: 0 0 6px 1px rgba( 56,189,248,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-tsunami-alerts { background: #22d3ee; border-color: #22d3ee; box-shadow: 0 0 6px 1px rgba( 34,211,238,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-droughts       { background: #d97706; border-color: #d97706; box-shadow: 0 0 6px 1px rgba(217,119,  6,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-power-plants   { background: #facc15; border-color: #facc15; box-shadow: 0 0 6px 1px rgba(250,204, 21,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-rail-network   { background: #7dd3fc; border-color: #7dd3fc; box-shadow: 0 0 6px 1px rgba(125,211,252,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-pipelines            { background: #ec4899; border-color: #ec4899; box-shadow: 0 0 6px 1px rgba(236, 72,153,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-internet-exchanges   { background: #a855f7; border-color: #a855f7; box-shadow: 0 0 6px 1px rgba(168, 85,247,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-data-centers         { background: #14b8a6; border-color: #14b8a6; box-shadow: 0 0 6px 1px rgba( 20,184,166,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-admin-borders        { background: #93c5fd; border-color: #93c5fd; box-shadow: 0 0 6px 1px rgba(147,197,253,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-urban-areas          { background: #38bdf8; border-color: #38bdf8; box-shadow: 0 0 6px 1px rgba( 56,189,248,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-power-substations    { background: #fbbf24; border-color: #fbbf24; box-shadow: 0 0 6px 1px rgba(251,191, 36,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-telecom-towers       { background: #6366f1; border-color: #6366f1; box-shadow: 0 0 6px 1px rgba( 99,102,241,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-emergency-facilities { background: #f43f5e; border-color: #f43f5e; box-shadow: 0 0 6px 1px rgba(244, 63, 94,0.60); }
.layer-row:has(.layer-toggle.on) .layer-dot-live-traces          { background: #00e5ff; border-color: #00e5ff; box-shadow: 0 0 6px 1px rgba(  0,229,255,0.60); }

/* Emoji icon column — hidden; dot replaces it. DOM kept for compatibility. */
.layer-icon {
  display: none;
}

/* Info column: name only (meta hidden below) */
.layer-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.layer-name {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.07em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layer-row:not(:has(.layer-toggle.on)) .layer-name {
  color: var(--text-dim);
}

/* Source + time sub-row — hidden visually; timestamp updater writes to #time-<layer> in DOM */
.layer-meta {
  display: none;
}

.layer-source,
.layer-time {
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1;
  white-space: nowrap;
}

.layer-meta-sep {
  font-size: 8px;
  color: var(--text-muted);
  opacity: 0.45;
  line-height: 1;
}

/* Count badge — slightly smaller for dual-count legibility */
.layer-count {
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  min-width: 28px;
  max-width: 68px;
  text-align: right;
  flex-shrink: 0;
  overflow: hidden;
}

@keyframes count-pop {
  0%   { opacity: 0.55; text-shadow: 0 0 0 rgba(0, 204, 204, 0); }
  100% { opacity: 1;    text-shadow: 0 0 8px rgba(0, 204, 204, 0.28); }
}

.layer-count.count-pop {
  animation: count-pop 0.35s ease forwards;
}

/* Muted total shown when density cap is active: "1.1K / 2.4K" */
.layer-count .count-total {
  opacity: 0.45;
  font-size: 7px;
}

/* Toggle pill — hidden; semantic dot communicates state via :has(.layer-toggle.on) */
.layer-toggle {
  display: none;
}

/* ── RIGHT PANEL ───────────────────────────────────────── */
#panel-right {
  position: fixed;
  top: calc(var(--top-h) + 8px);
  right: 0;
  width: var(--right-w);
  bottom: 8px;
  z-index: 20;
  background: var(--panel-glass);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: width 0.22s ease, background 0.25s ease, right 0.3s ease;
  border-radius: 8px 0 0 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* panel itself does not scroll; intel-panel handles it */
}

/* Cards above the intel feed stay at natural height and don't shrink */
#panel-right .mod-card:not(.mod-intel-card) {
  flex-shrink: 0;
}

#panel-right::-webkit-scrollbar { width: 3px; }
#panel-right::-webkit-scrollbar-track { background: transparent; }
#panel-right::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

/* ── PANOPTIC PANEL OVERRIDE ───────────────────────────── */
body[data-panoptic="true"] #topbar,
body[data-panoptic="true"] #panel-layers,
body[data-panoptic="true"] #panel-right {
  background: rgba(0, 0, 0, 0.95);
}

/* ── PANEL COLLAPSE / RAIL / PIN ────────────────────────── */
/* Shift HUD overlay positioning when a panel is collapsed */
body.left-collapsed  { --left-active-w:  var(--rail-w); }
body.right-collapsed { --right-active-w: var(--rail-w); }

/* Collapsed panel widths */
body.left-collapsed  #panel-layers { width: var(--rail-w); }
body.right-collapsed #panel-right  { width: var(--rail-w); }

/* Hover-expand collapsed panels back to full width */
body.left-collapsed  #panel-layers:hover { width: var(--left-w);  }
body.right-collapsed #panel-right:hover  { width: var(--right-w); }

/* Prevent inner content reflow at rail width — overflow:hidden clips the rest */
body.left-collapsed #panel-layers .panel-header,
body.left-collapsed #panel-layers .layer-list,
body.left-collapsed #panel-layers .panel-total {
  min-width: var(--left-w);
}
body.right-collapsed #panel-right .mod-card,
body.right-collapsed #panel-right .rpanel-accordion,
body.right-collapsed #panel-right .mod-intel-card {
  min-width: var(--right-w);
}

/* Collapse / pin buttons — body-level fixed elements, viewport-anchored */
.panel-collapse-btn {
  position: fixed;
  z-index: 1005;
  width: 18px;
  height: 48px;
  padding: 0;
  background: var(--panel-glass);
  border: 1px solid rgba(0, 200, 200, 0.25);
  color: rgba(0, 200, 200, 0.50);
  cursor: pointer;
  font-size: 14px;
  line-height: 48px;
  text-align: center;
  pointer-events: auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
}
.panel-collapse-btn:hover {
  background: rgba(0, 200, 200, 0.10);
  border-color: rgba(0, 200, 200, 0.55);
  color: var(--chrome-accent);
}
.panel-collapse-btn:focus-visible {
  outline: 1px solid rgba(0, 200, 200, 0.55);
  outline-offset: 2px;
}

/* Left button: attached to the right edge of the left panel */
#btn-collapse-left {
  left: var(--left-active-w);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0 6px 6px 0;
  border-left: none;
  transition: left 0.22s ease, background 0.15s, color 0.15s, border-color 0.15s;
}

/* Collapsed rail: visible edge-tab just outside the 32px dot column.
   left: rail-w (32px) is flush to the rail — 4px gap clears all dots. */
body.left-collapsed #btn-collapse-left {
  left: calc(var(--rail-w) + 4px);
}

/* Hover-expand: snap to full panel right edge to match pinned-open position. */
body.left-collapsed:has(#panel-layers:hover) #btn-collapse-left {
  left: var(--left-w);
}

/* Right button: attached to the left edge of the right panel */
#btn-collapse-right {
  right: var(--right-active-w);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 6px 0 0 6px;
  border-right: none;
  transition: right 0.22s ease, background 0.15s, color 0.15s, border-color 0.15s;
}

/* Collapsed right rail: visible edge-tab just outside the 32px right rail.
   right: rail-w (32px) is flush to the rail left edge — 4px gap clears rail content. */
body.right-collapsed #btn-collapse-right {
  right: calc(var(--rail-w) + 4px);
}

/* Hover-expand: snap to full panel left edge to match pinned-open position. */
body.right-collapsed:has(#panel-right:hover) #btn-collapse-right {
  right: var(--right-w);
}

/* Track AI Chat drawer when it slides in */
body.ai-chat-open #btn-collapse-right {
  right: calc(400px + var(--right-active-w));
  transition: right 0.3s ease, background 0.15s;
}

/* AI Chat open + right-collapsed: restore the 4px edge-tab gap outside the collapsed rail.
   Specificity (1,2,1) beats the base ai-chat rule (1,1,1).
   The :has() hover rule below needs (2,3,1) to beat the earlier :has() rule at (2,2,1). */
body.ai-chat-open.right-collapsed #btn-collapse-right {
  right: calc(400px + var(--rail-w) + 4px);
}

/* AI Chat open + right-collapsed + hover-expand: snap to the displaced panel left edge. */
body.ai-chat-open.right-collapsed:has(#panel-right:hover) #btn-collapse-right {
  right: calc(400px + var(--right-w));
}

/* Clear right-side HUD elements from behind the AI Chat drawer (400px wide, anchored right:0).
   Applies regardless of whether the right panel is pinned or collapsed. */
body.ai-chat-open #hud-active-style,
body.ai-chat-open #hud-rec,
body.ai-chat-open #hud-orbital,
body.ai-chat-open #hud-perf {
  right: calc(400px + 12px);
}

/* Hide buttons in Clean UI — explicit rule since buttons are no longer panel children */
body.clean-ui .panel-collapse-btn { display: none !important; }

/* Make room in left panel header for the collapse button */
#panel-layers .panel-header { padding-right: 28px; }

/* Hide panel content when collapsed and not hovered — clean rail */
body.left-collapsed  #panel-layers:not(:hover) > *,
body.right-collapsed #panel-right:not(:hover)  > * {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* Restore content on hover-expand */
body.left-collapsed  #panel-layers:hover > *,
body.right-collapsed #panel-right:hover  > * {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.15s ease 0.08s; /* slight delay lets width lead */
}

/* Collapse button always visible and interactive */
.panel-collapse-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Subtle cyan glow on rail edge when collapsed */
body.left-collapsed #panel-layers:not(:hover) {
  border-right-color: rgba(0, 200, 200, 0.18);
  box-shadow: 2px 0 8px rgba(0, 200, 200, 0.06);
}
body.right-collapsed #panel-right:not(:hover) {
  border-left-color: rgba(0, 200, 200, 0.18);
  box-shadow: -2px 0 8px rgba(0, 200, 200, 0.06);
}

/* Clean UI hides panels entirely (already handled by .hud-chrome rule) */
/* Collapsed state is irrelevant when clean-ui is active */

/* ── COLLAPSED LEFT RAIL — layer dot status display ──────── */
/*
 * When the panel is collapsed to the 32px rail and NOT hovered, show semantic
 * layer dots for every layer row across all accordion sections, regardless of
 * whether the accordion is open or closed. Labels, counts, toggles, and
 * dropdowns are hidden. ON-state glow (via :has(.layer-toggle.on)) is preserved.
 * Dots are visual-only in this state — no click-to-toggle.
 *
 * DOM structure: #panel-layers > .panel-header | .layer-list > .accordion-section
 * The > * blanket rule hides DIRECT children of #panel-layers — that is
 * .panel-header and .layer-list (NOT .accordion-section which lives one level
 * deeper). The previous pass incorrectly tried to override > .accordion-section
 * which never matched, leaving .layer-list at opacity:0.
 */

/* 1. Restore the .layer-list direct child — the actual container for all
 *    accordion sections and their layer rows. Without this, the entire list
 *    stays at opacity:0 and no dots are ever visible.
 *    Also reset min-width (the anti-reflow rule sets min-width:var(--left-w)
 *    on .layer-list to prevent content wrap; we need it to be 32px here so
 *    the centered dot lands within the visible rail, not off to the right). */
body.left-collapsed #panel-layers:not(:hover) > .layer-list {
  opacity: 1;
  pointer-events: none; /* dots are visual-only — no accidental clicks */
  overflow: hidden;
  min-width: 0;
  width: var(--rail-w);
}

/* 2. Force closed accordion bodies to show in the rail.
 *    Closed .accordion-body has max-height:0 and overflow:hidden.
 *    Override so all layer rows are visible in the 32px rail. */
body.left-collapsed #panel-layers:not(:hover) .accordion-body {
  max-height: none !important;
  overflow: visible !important;
}

/* 3. Collapse accordion headers to a minimal separator line. */
body.left-collapsed #panel-layers:not(:hover) .accordion-header {
  padding: 2px 0;
  min-height: 0;
  height: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
body.left-collapsed #panel-layers:not(:hover) .accordion-header .acc-label,
body.left-collapsed #panel-layers:not(:hover) .accordion-header .acc-icon {
  display: none;
}

/* 4. Center each layer row, showing only the dot. */
body.left-collapsed #panel-layers:not(:hover) .layer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  gap: 0;
  height: 20px;
  overflow: hidden;
  cursor: default;
}

/* 5. Keep the dot visible and centered. */
body.left-collapsed #panel-layers:not(:hover) .layer-dot {
  flex-shrink: 0;
  display: block;
  /* size inherited from base .layer-dot (8×8px) */
}

/* 6. Hide everything else in each row. */
body.left-collapsed #panel-layers:not(:hover) .layer-info,
body.left-collapsed #panel-layers:not(:hover) .layer-name,
body.left-collapsed #panel-layers:not(:hover) .layer-count,
body.left-collapsed #panel-layers:not(:hover) .layer-meta,
body.left-collapsed #panel-layers:not(:hover) .layer-toggle,
body.left-collapsed #panel-layers:not(:hover) .layer-icon,
body.left-collapsed #panel-layers:not(:hover) .layer-gear,
body.left-collapsed #panel-layers:not(:hover) .news-row-sub,
body.left-collapsed #panel-layers:not(:hover) select {
  display: none !important;
}

/* 7. News row: the .news-row-top wrapper needs the same centering treatment. */
body.left-collapsed #panel-layers:not(:hover) .news-row-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* 8. Hide any panel header (title bar) and footer. */
body.left-collapsed #panel-layers:not(:hover) .panel-header,
body.left-collapsed #panel-layers:not(:hover) .panel-total {
  display: none !important;
}

/* 9. SCENES accordion body: hide its content (scene list, no dots). */
body.left-collapsed #panel-layers:not(:hover) .accordion-body:not(:has(.layer-row)) {
  display: none;
}

/* ── END collapsed rail dot display ──────────────────────── */

/* ── MODULE CARDS ──────────────────────────────────────── */
.mod-card {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding: 0;
}

.mod-card-header {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.4);
  padding: 6px 10px 4px;
}

.mod-inline-header {
  padding: 0;
  font-size: 9px;
}

.mod-card-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
}

.mod-card-body {
  padding: 3px 10px 7px;
}

.mod-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mod-hint {
  font-size: 8px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.3);
}

.mod-toggle-btn {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.10em;
  font-weight: bold;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.mod-toggle-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.65);
}

.mod-toggle-btn.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-dim);
}

/* HUD card: teal left-border when active */
#card-hud.hud-active {
  border-left: 3px solid var(--chrome-accent);
}

/* ── PANOPTIC ──────────────────────────────────────────── */
#btn-panoptic.active {
  background: rgba(76, 175, 80, 0.15);
  border-color: #4CAF50;
  color: #4CAF50;
  text-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

#btn-panoptic.active:hover {
  background: rgba(76, 175, 80, 0.25);
}

/* ── RIGHT PANEL ACCORDIONS ─────────────────────────────── */
.rpanel-controls {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.rpanel-controls::-webkit-scrollbar { width: 3px; }
.rpanel-controls::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }

.rpanel-accordion {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.rpanel-accordion-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
  width: 100%;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.18em;
  transition: background 0.2s ease, color 0.2s ease;
  text-align: left;
}

.rpanel-accordion-header:hover {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.75);
}

.rpanel-accordion.is-open .rpanel-accordion-header {
  color: var(--accent);
  background: rgba(0, 0, 0, 0.15);
}

.rpanel-accordion-caret {
  font-size: 12px;
  line-height: 1;
  transition: transform 0.25s;
  color: rgba(255, 255, 255, 0.25);
}

.rpanel-accordion.is-open .rpanel-accordion-caret {
  transform: rotate(90deg);
  color: var(--accent);
}

.rpanel-accordion-title {
  flex: 1;
}

.rpanel-accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

.rpanel-accordion.is-open .rpanel-accordion-body {
  max-height: 600px;
  transition: max-height 0.45s ease-in;
}

.mod-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.mod-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(0, 200, 200, 0.4);
  cursor: pointer;
}

.mod-slider-val {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  min-width: 30px;
  text-align: right;
}


.mod-action-btn {
  width: 100%;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: bold;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.mod-action-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
}

.mod-action-btn.is-firing {
  background: rgba(0, 200, 200, 0.25);
  border-color: rgba(0, 200, 200, 0.5);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mod-icon-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  border-radius: 50%;
  transition: all 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.mod-icon-btn:hover,
.mod-icon-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* ── CAMERA CONTROLS ────────────────────────────────────── */
.cam-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 2px;
}

.cam-btn {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.08em;
  font-weight: bold;
  padding: 5px 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.50);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  text-align: center;
  width: 100%;
}

.cam-btn:hover {
  background: var(--chrome-accent-glow);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
}

.cam-btn:active {
  background: rgba(0, 200, 200, 0.18);
  border-color: var(--chrome-accent);
  color: var(--chrome-accent-bright);
}

.cam-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

/* Intel card — fills remaining panel space and clips overflow so #intel-panel scrolls */
.mod-intel-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  overflow: hidden; /* children must not leak outside the card */
}

.mod-intel-card #intel-panel {
  flex: 1 1 0;      /* flex-basis 0 so panel doesn't force card to grow */
  min-height: 0;    /* allow flex shrinking below content height */
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
}

.mod-intel-card #intel-panel::-webkit-scrollbar { width: 3px; }
.mod-intel-card #intel-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); }

/* ── MODE GRID (scene 3D/2D) ───────────────────────────── */
.mode-grid {
  display: flex;
  gap: 2px;
  padding: 3px 8px 7px;
  background: transparent;
}

.mode-btn {
  flex: 1;
  padding: 5px 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: bold;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.mode-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.65);
}

.mode-btn.active {
  background: var(--chrome-accent-glow);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
  text-shadow: none;
}

/* Scene buttons (MAP VIEW toggle) */
.scene-btn {
  flex: 1;
  padding: 5px 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.10em;
  font-weight: bold;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.scene-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.65);
}

.scene-btn.active {
  background: var(--chrome-accent-glow);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
  text-shadow: none;
}

/* ── PRESET BUTTONS ────────────────────────────────────── */
.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.preset-btn {
  padding: 6px 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  font-size: 8px;
  letter-spacing: 0.10em;
  font-weight: bold;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.preset-btn:hover {
  border-color: var(--accent-dim);
  color: var(--text);
  background: var(--accent-glow);
}

.preset-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 229, 255, 0.08);
}

/* ── INTEL PANEL ───────────────────────────────────────── */
.intel-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-align: center;
  opacity: 0.8;
}

.intel-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 10px;
}

.intel-key {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  font-size: 9px;
  text-transform: uppercase;
}

.intel-val {
  flex: 1;
  min-width: 0;
  color: rgba(255, 255, 255, 0.88);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

/* ── CROSS-REFERENCE SECTION ───────────────────────────── */
.intel-xref-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 6px 0 4px;
}

.intel-xref-header {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(0, 200, 200, 0.68);
  padding-bottom: 3px;
}

.intel-xref-row {
  font-size: 11px;
  line-height: 1.4;
  padding: 2px 2px 2px 8px;
  color: rgba(0, 204, 204, 0.80);
  border-radius: 2px;
  white-space: normal;
  word-break: break-word;
}

.intel-xref-row.clickable {
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.intel-xref-row.clickable:hover {
  background: var(--chrome-accent-glow);
  color: var(--chrome-accent);
}

/* ── OPS STREAM EVENT ROWS (intel panel) ─────────────── */
.intel-ops-event {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 3px 4px;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
  line-height: 1.45;
  color: var(--text-muted);
}
.ops-sev-info  { color: #888; }
.ops-sev-watch { color: #ffaa00; }
.ops-sev-warn  { color: #ffaa00; }
.ops-sev-alert { color: #ff3b30; }

/* ── CCTV SNAPSHOT WIDGET ──────────────────────────────── */
.intel-cam-wrap {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 229, 255, 0.15);
}

.intel-cam-label {
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  margin-bottom: 5px;
}

.intel-cam-img {
  width: 100%;
  height: auto;
  max-height: 130px;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
  filter: brightness(0.9) contrast(1.05);
}

.intel-cam-offline {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 0, 0, 0.08);
  border: 1px solid rgba(255, 0, 0, 0.3);
  font-size: 9px;
  color: rgba(255, 60, 60, 0.8);
  letter-spacing: 0.15em;
}

/* ── WEATHER SUB-CONTROLS ──────────────────────────────── */
#weather-controls {
  display: none;
  padding: 6px 10px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.windy-btn {
  padding: 5px 2px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.08em;
  font-weight: bold;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.windy-btn:hover {
  border-color: var(--accent-dim);
  color: var(--text);
  background: var(--accent-glow);
}

.windy-btn.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-dim);
}

/* ── LOCATION NAV ───────────────────────────────────────── */
.location-nav {
  position: fixed;
  top: calc(var(--top-h) + 6px);
  left: 0;
  z-index: 500;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 5px 10px;
  width: 640px;
  max-width: calc(100vw - 40px);
  background: var(--panel-glass-strong);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.tb-dd-wrap.open .location-nav {
  display: flex;
}

.city-pills,
.landmark-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.city-pills::-webkit-scrollbar,
.landmark-pills::-webkit-scrollbar { display: none; }

.landmark-pills { display: none; }
.landmark-pills.visible { display: flex; }

.city-pill {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.07em;
  font-weight: 500;
  border-radius: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.city-pill:hover {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
}

.city-pill.active {
  background: rgba(255, 90, 90, 0.18);
  border-color: rgba(255, 100, 100, 0.5);
  color: #ff8080;
}

.landmark-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.06em;
  border-radius: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.landmark-pill:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.12);
}

.landmark-pill.active {
  background: var(--accent-glow);
  border-color: var(--accent-dim);
  color: var(--accent);
}

.landmark-shortcut {
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.25);
  font-family: var(--font);
}

.location-info {
  display: none; /* redundant — selected city pill already shows active state */
}

.location-pin { font-size: 9px; line-height: 1; }

.location-label {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.3);
}

/* ── STYLE TOOLBAR ──────────────────────────────────────── */
.style-toolbar {
  position: fixed;
  top: calc(var(--top-h) + 6px);
  left: 0;
  display: none;
  gap: 4px;
  padding: 6px 10px;
  background: var(--panel-glass-strong);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  z-index: 500;
}

.tb-dd-wrap.open .style-toolbar {
  display: flex;
}

.style-btn {
  width: 40px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.style-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.style-btn.active {
  background: var(--chrome-accent-glow);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
  box-shadow: inset 0 0 8px var(--chrome-accent-glow), 0 0 6px var(--chrome-accent-glow);
}

/* ── DISPLAY DROPDOWN — section labels, separator, base toggle ── */
.style-section-label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 204, 204, 0.50);
  align-self: center;
  padding: 0 1px;
  pointer-events: none;
  user-select: none;
}

.style-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.10);
  align-self: center;
  margin: 0 3px;
  flex-shrink: 0;
}

.base-btn {
  width: 44px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.base-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.base-btn.active {
  background: var(--chrome-accent-glow);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
  box-shadow: inset 0 0 8px var(--chrome-accent-glow), 0 0 6px var(--chrome-accent-glow);
}

.base-btn:disabled,
.base-btn:disabled:hover {
  opacity: 0.3;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
}

#btn-photoreal-labels:disabled,
#btn-photoreal-labels:disabled:hover {
  opacity: 0.50;
}

/* ── HUD DETAIL LEVELS ─────────────────────────────────── */
/* OFF: hide all globe HUD overlays (including flex containers and rec inline style) */
body[data-hud-level="off"]     .hud-overlay { display: none !important; }

/* MINIMAL: coordinates/MGRS + performance block only */
body[data-hud-level="minimal"] .hud-overlay:not(#hud-dms):not(#hud-mgrs):not(#hud-perf) { display: none; }

/* STANDARD: minimal + active style + orbital */
body[data-hud-level="standard"] .hud-overlay:not(#hud-dms):not(#hud-mgrs):not(#hud-perf):not(#hud-active-style):not(#hud-orbital) { display: none; }

/* FULL: no restriction — all .hud-overlay elements visible */
/* (#hud-rec stays controlled by recording JS via inline style) */

/* ── LIVE / PLAYBACK MODE TOGGLE ────────────────────────── */
.mode-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.mode-toggle .mode-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mode-toggle .mode-btn:hover {
  color: rgba(255, 255, 255, 0.6);
}

.mode-toggle .mode-btn.active[data-mode="live"] {
  color: #ff5555;
}

.mode-toggle .mode-btn.active[data-mode="playback"] {
  color: var(--chrome-accent);
}

/* ── PLAYBACK REC INDICATOR ─────────────────────────────── */
.rec-indicator {
  position: fixed;
  top: calc(var(--top-h) + 48px);
  right: calc(var(--right-active-w) + 12px);
  display: none; /* shown via JS on switchToPlayback() */
  align-items: center;
  gap: 5px;
  z-index: 15;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--chrome-accent);
  pointer-events: none;
}

.rec-indicator .rec-dot {
  background: var(--chrome-accent);
  box-shadow: 0 0 6px var(--chrome-accent), 0 0 12px var(--chrome-accent-dim);
}

.rec-label {
  color: var(--chrome-accent);
  font-weight: bold;
}

.rec-time {
  color: rgba(0, 204, 204, 0.75);
}

/* Hide live REC display during playback; show it in live mode */
body[data-playback-mode="playback"] #hud-rec { display: none !important; }

/* ── TIMELINE BAR ───────────────────────────────────────── */
.timeline-bar {
  position: fixed;
  bottom: 68px;
  left: 0;
  right: 0;
  display: none; /* shown only in playback mode */
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--panel-solid);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 150;
  font-size: 11px;
  font-family: var(--font);
}

body[data-playback-mode="playback"] .timeline-bar {
  display: flex;
  bottom: 60px;
}

body[data-playback-mode="playback"] #tb-dd-goto {
  display: none;
}

.timeline-transport {
  flex-shrink: 0;
}

.tl-play-btn {
  width: 36px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.tl-play-btn:hover {
  background: var(--chrome-accent-glow);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
}

.tl-play-btn.playing {
  background: var(--chrome-accent-glow);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
}

.timeline-speeds {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.tl-speed {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.tl-speed.active {
  background: var(--chrome-accent-glow);
  border-color: var(--chrome-accent-dim);
  color: var(--chrome-accent);
}

.timeline-camera {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.2s;
}

.timeline-camera:hover {
  opacity: 1;
}

.tl-cam-btn, .tl-cam-preset {
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
  font-size: 9px;
  cursor: pointer;
  transition: all 0.2s;
}

.tl-cam-btn.active {
  background: var(--chrome-accent-glow);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
}

.tl-location-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 10px;
  padding: 3px 6px;
  max-width: 160px;
}

.tl-cam-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
  padding-left: 4px;
}

.timeline-scrubber {
  flex: 1;
  height: 24px;
  position: relative;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: visible;
}

.tl-playhead {
  position: absolute;
  top: -2px;
  left: 0;
  width: 12px;
  height: 28px;
  background: var(--chrome-accent);
  border-radius: 3px;
  cursor: grab;
  z-index: 10;
  transform: translateX(-50%);
  transition: left 0.1s linear;
  box-shadow: 0 0 6px var(--chrome-accent-dim);
}

.tl-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}

.tl-marker {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.tl-marker[data-type="kinetic"]        { background: #ff4444; }
.tl-marker[data-type="retaliation"]    { background: #ff8800; }
.tl-marker[data-type="civilian"]       { background: #ffcc00; }
.tl-marker[data-type="maritime"]       { background: #4488ff; }
.tl-marker[data-type="infrastructure"] { background: #aa44ff; }
.tl-marker[data-type="escalation"]     { background: #ff44aa; }
.tl-marker[data-type="airspace"]       { background: #44dddd; }

/* Card markers — orange tick at each scene card timestamp */
.tl-card-marker {
  position: absolute;
  width: 2px;
  top: 0;
  bottom: 0;
  background: #ff8c00;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.85;
}

.tl-chapters {
  position: absolute;
  bottom: -18px;
  left: 0;
  right: 0;
  height: 14px;
  pointer-events: none;
}

.tl-chapter {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 4px;
  font-family: var(--font);
}

.timeline-info {
  text-align: right;
  min-width: 200px;
  flex-shrink: 0;
}

.tl-timestamp {
  color: var(--chrome-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
}

.tl-entities {
  color: rgba(255, 255, 255, 0.4);
  font-size: 9px;
  letter-spacing: 0.5px;
}

/* .clean-ui: hides all chrome except globe */
body.clean-ui .hud-chrome       { display: none !important; }
body.clean-ui #vignette-overlay  { display: none !important; }
body.clean-ui #tb-dd-style,
body.clean-ui #tb-dd-goto       { display: none !important; }
body.clean-ui .mode-toggle      { display: none !important; }
body.clean-ui .rec-indicator    { display: none !important; }
body.clean-ui .timeline-bar     { display: none !important; }
body.clean-ui .scene-info-bar   { display: none !important; }
body.clean-ui .playback-layers  { display: none !important; }

/* ── PLAYBACK LAYER TOGGLE BAR ──────────────────────────── */
.playback-layers {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  padding: 4px 16px 6px;
  background: var(--panel-solid);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 160;
  font-size: 10px;
  font-family: var(--font);
}

body[data-playback-mode="playback"] .playback-layers {
  display: flex;
}

.pb-layer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.pb-layer-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 10px;
  font-family: var(--font);
  user-select: none;
}

.pb-layer-pill.active {
  border-color: var(--chrome-accent-dim);
  color: var(--chrome-accent);
  background: var(--chrome-accent-glow);
}

.pb-layer-pill .pb-layer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pb-legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 3px;
}

.pb-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 9px;
  letter-spacing: 0.3px;
}

.pb-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ── SCENE ACCORDION ROWS ───────────────────────────────── */
.scene-list {
  padding: 4px 0;
}

.scene-row {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.2s;
}

.scene-row:last-child {
  border-bottom: none;
}

.scene-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.scene-row.active {
  background: var(--chrome-accent-glow);
  border-left: 2px solid var(--chrome-accent-border);
  padding-left: 10px;
}

.scene-row-name {
  font-weight: 500;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.03em;
}

.scene-row-desc {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 1px;
  letter-spacing: 0.02em;
}

.scene-row-edit {
  flex-shrink: 0;
  margin-left: 6px;
  padding: 2px 5px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}
.scene-row-edit:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── SCENE INFO BAR ─────────────────────────────────────── */
/* Consolidated into the left end of .timeline-bar — shows/hides with it. */
.scene-info-bar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 12px 0 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-family: var(--font);
}

.scene-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scene-label {
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  font-size: 10px;
  white-space: nowrap;
}

.scene-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  max-width: 200px;
}

.scene-select option {
  background: #0a0e14;
  color: rgba(255, 255, 255, 0.8);
}

.scene-desc {
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── PERFORMANCE OVERLAY ───────────────────────────────── */
#hud-perf {
  bottom: 120px;
  right: calc(var(--right-active-w) + 12px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
  background: rgba(3, 8, 14, 0.55);
  padding: 6px 9px;
  border-radius: 2px;
}

.hud-perf-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.hud-perf-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(0, 204, 204, 0.72);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.90);
}

.hud-perf-val {
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(0, 204, 204, 0.92);
  min-width: 30px;
  text-align: right;
  transition: color 0.4s ease;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.90), 0 0 6px rgba(0, 204, 204, 0.40);
}

/* ── SCROLLBAR GLOBAL ──────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════
   CCTV POPUP — floating draggable/resizable feed viewer
   z-index 10000: above all panels, overlays, dock
   ═══════════════════════════════════════════════════════ */

.cctv-popup {
  position: fixed;
  z-index: 10000;
  background: rgba(5, 9, 15, 0.96);
  border: 1px solid var(--accent, #00e5ff);
  border-radius: 4px;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.12), 0 8px 32px rgba(0,0,0,0.70);
  min-width: 320px;
  min-height: 240px;
  display: none;
  flex-direction: column;
  font-family: var(--font-mono);
  overflow: hidden;
}

.cctv-popup.active { display: flex; }

.cctv-popup.fullscreen {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* ── Titlebar / drag handle ─────────────────────────── */
.cctv-popup-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(0, 229, 255, 0.06);
  border-bottom: 1px solid rgba(0, 229, 255, 0.18);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.cctv-popup-titlebar:active { cursor: grabbing; }

.cctv-popup-title {
  color: var(--accent, #00e5ff);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 270px;
}

.cctv-popup-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.cctv-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid rgba(0, 229, 255, 0.22);
  color: rgba(0, 229, 255, 0.65);
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.12s;
  font-family: inherit;
  padding: 0;
  line-height: 1;
}

.cctv-popup-btn:hover {
  background: rgba(0, 229, 255, 0.14);
  color: #00e5ff;
  border-color: rgba(0, 229, 255, 0.6);
}

/* ── Body / image area ──────────────────────────────── */
.cctv-popup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0;
  background: #000;
}

#cctv-popup-img {
  flex: 1;
  width: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  min-height: 0;
  transition: opacity 0.18s ease;
}

.cctv-popup-offline {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  background: rgba(255, 0, 0, 0.06);
  color: rgba(255, 55, 55, 0.80);
  font-size: 10px;
  letter-spacing: 0.16em;
  border: 1px solid rgba(255, 0, 0, 0.18);
  margin: 10px;
  border-radius: 2px;
}

/* ── Info bar ───────────────────────────────────────── */
.cctv-popup-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 9px;
  color: rgba(0, 229, 255, 0.55);
  border-top: 1px solid rgba(0, 229, 255, 0.10);
  flex-shrink: 0;
  background: rgba(0, 229, 255, 0.03);
}

.cctv-popup-meta {
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.cctv-city { color: rgba(0, 229, 255, 0.36); }

.cctv-popup-refresh {
  letter-spacing: 0.10em;
  margin-left: auto;
  color: rgba(0, 229, 255, 0.38);
  flex-shrink: 0;
}

/* ── Resize handle ──────────────────────────────────── */
.cctv-popup-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  z-index: 1;
}

.cctv-popup-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(0, 229, 255, 0.32);
  border-bottom: 2px solid rgba(0, 229, 255, 0.32);
  pointer-events: none;
}

/* ── Fullscreen hint overlay ────────────────────────── */
.cctv-fs-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.82);
  padding: 9px 18px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.12em;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10001;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.12);
}

/* ── Intel panel: POP OUT button + header row ───────── */
.intel-cam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.intel-popout-btn {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.10em;
  font-weight: bold;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.intel-popout-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════
   GROUND TRUTH CARDS — geolocated event overlays
   Appended to #cesiumContainer, positioned via Cesium
   cartesianToCanvasCoordinates on every postRender tick
   ═══════════════════════════════════════════════════════ */

.gt-card {
  position: absolute;
  /* Bottom-center anchors to the Cesium canvas coordinate */
  transform: translate(-50%, -100%);
  min-width: 180px;
  max-width: 280px;
  background: var(--panel-solid);
  /* border-color is set inline per-card to match event category */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  font-family: var(--font);
  color: rgba(255, 255, 255, 0.8);
  pointer-events: auto;
  z-index: 50;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(8px);
  /* Slight margin below the pin tip */
  margin-top: -6px;
  cursor: grab;
  user-select: none;
}

/* While dragging a card: lock cursor globally and prevent stray text selection */
body.gt-dragging,
body.gt-dragging * { cursor: grabbing !important; }

/* ✕ dismiss button — top-right corner of each card */
.gt-dismiss-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.gt-dismiss-btn:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
}

.gt-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.gt-actor {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.gt-attacker {
  background: rgba(255, 68, 68, 0.25);
  border: 1px solid rgba(255, 68, 68, 0.4);
  color: #ff6666;
}

.gt-target {
  background: rgba(100, 100, 255, 0.15);
  border: 1px solid rgba(100, 100, 255, 0.3);
  color: #8888ff;
}

.gt-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
}

.gt-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.gt-time {
  color: var(--chrome-accent);
  font-size: 10px;
  font-weight: 500;
}

.gt-category {
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
  letter-spacing: 0.5px;
}

.gt-tags {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.gt-tag {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

/* Tag color variants — matched to common scene event tags */
.gt-tag-verified,
.gt-tag-military {
  background: rgba(0, 200, 100, 0.15);
  color: #44cc88;
}

.gt-tag-exact {
  background: rgba(0, 200, 100, 0.2);
  color: #44dd88;
}

.gt-tag-approx-seq {
  background: rgba(255, 200, 0, 0.15);
  color: #ddaa44;
}

.gt-tag-geo-osint {
  background: rgba(0, 150, 200, 0.15);
  color: #44aacc;
}

.gt-title {
  font-weight: 500;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
  line-height: 1.3;
}

.gt-detail {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

.gt-image {
  margin-top: 6px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gt-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hide ground truth cards in clean UI mode */
body.clean-ui .gt-card { display: none !important; }

/* ══════════════════════════════════════════════════════════
   NARRATIVE SLIDES
   Full-screen infographic overlay for playback mode
   ══════════════════════════════════════════════════════════ */

.slide-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(5, 8, 12, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  transition: opacity 0.4s ease;
  /* Subtle scan-line texture */
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
}

.slide-overlay.visible {
  opacity: 1;
}

.slide-content {
  max-width: 1100px;
  width: 90%;
  text-align: center;
  padding: 0 20px;
}

.slide-subtitle {
  font-size: 11px;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-family: var(--font);
}

.slide-title {
  font-size: clamp(28px, 5vw, 54px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 4px;
  margin-bottom: 40px;
  font-family: var(--font);
  text-transform: uppercase;
  text-shadow: 0 0 40px rgba(0, 229, 255, 0.25);
}

.slide-body {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.7;
  font-family: var(--font);
}

.slide-dismiss-hint {
  margin-top: 48px;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  font-family: var(--font);
}

/* ── Navigation dots ───────────────────────────────────── */

.slide-nav-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
}

.slide-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.slide-nav-dot:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.3);
}

.slide-nav-dot.active {
  background: #00cccc;
  border-color: #00cccc;
  box-shadow: 0 0 6px rgba(0, 204, 204, 0.6);
}

/* ── Reusable stat-card grid ───────────────────────────── */

.slide-stats-grid {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.slide-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 22px 32px;
  min-width: 180px;
}

.slide-stat-number {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: 2px;
  font-family: var(--font);
  line-height: 1;
}

.slide-stat-number.red    { color: #ff4444; text-shadow: 0 0 20px rgba(255,68,68,0.4); }
.slide-stat-number.green  { color: #44cc88; text-shadow: 0 0 20px rgba(68,204,136,0.4); }
.slide-stat-number.cyan   { color: #00cccc; text-shadow: 0 0 20px rgba(0,204,204,0.4); }
.slide-stat-number.orange { color: #ff8844; text-shadow: 0 0 20px rgba(255,136,68,0.4); }
.slide-stat-number.white  { color: rgba(255,255,255,0.9); }

.slide-stat-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
  margin-top: 10px;
  text-transform: uppercase;
  font-family: var(--font);
}

/* ── Alert / warning block ─────────────────────────────── */

.slide-alert {
  background: rgba(255, 68, 68, 0.08);
  border: 1px solid rgba(255, 68, 68, 0.28);
  border-radius: 6px;
  padding: 14px 20px;
  margin-top: 20px;
  text-align: left;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.slide-alert-title {
  color: #ff6666;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-family: var(--font);
}

.slide-alert-body {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.6;
  font-family: var(--font);
}

/* ── Divider line between sections ────────────────────── */

.slide-divider {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 24px auto;
}

/* ── Info row (icon + text, left-aligned) ──────────────── */

.slide-info-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.slide-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.slide-info-row-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  min-width: 90px;
  flex-shrink: 0;
}

/* ── Clean UI: hide slides ─────────────────────────────── */
body.clean-ui .slide-overlay { display: none !important; }

/* ═══════════════════════════════════════════════════════
   NEWS POPUP — floating article iframe viewer
   ═══════════════════════════════════════════════════════ */

.news-popup {
  position: fixed;
  z-index: 10001;
  background: rgba(5, 9, 15, 0.97);
  border: 1px solid rgba(255, 208, 80, 0.45);
  border-radius: 4px;
  box-shadow: 0 0 22px rgba(255, 200, 60, 0.10), 0 8px 32px rgba(0,0,0,0.70);
  min-width: 360px;
  min-height: 320px;
  display: none;
  flex-direction: column;
  font-family: var(--font-ui);
  overflow: hidden;
}

.news-popup.active { display: flex; }

.news-popup.fullscreen {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.news-popup-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(255, 200, 60, 0.06);
  border-bottom: 1px solid rgba(255, 200, 60, 0.18);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}

.news-popup-titlebar:active { cursor: grabbing; }

.news-popup-title {
  color: rgba(255, 210, 80, 0.9);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.news-popup-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.news-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid rgba(255, 200, 60, 0.22);
  color: rgba(255, 200, 60, 0.65);
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.12s;
  font-family: inherit;
  padding: 0;
  line-height: 1;
}

.news-popup-btn:hover {
  background: rgba(255, 200, 60, 0.14);
  color: rgba(255, 210, 80, 1);
  border-color: rgba(255, 200, 60, 0.6);
}

.news-popup-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: 9px;
  border-bottom: 1px solid rgba(255, 200, 60, 0.10);
  background: rgba(255, 200, 60, 0.03);
  flex-shrink: 0;
  overflow: hidden;
}

.news-popup-theme-tag {
  color: rgba(255, 210, 80, 0.9);
  font-weight: bold;
  letter-spacing: 0.10em;
  flex-shrink: 0;
}

.news-popup-time {
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-popup-source {
  color: rgba(255, 255, 255, 0.35);
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 0.06em;
}

.news-popup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0;
  background: #fff;
}

.news-popup-block-hint {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(10, 14, 20, 0.88);
  border: 1px solid rgba(255, 200, 60, 0.4);
  color: rgba(255, 210, 80, 0.85);
  font-size: 10px;
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#news-popup-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  min-height: 0;
  display: block;
  background: #fff;
}

.news-popup-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 10px;
  border-top: 1px solid rgba(255, 200, 60, 0.10);
  background: rgba(255, 200, 60, 0.03);
  flex-shrink: 0;
  gap: 8px;
}

.news-popup-footer-btn {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.04em;
  font-weight: bold;
  padding: 3px 10px;
  background: rgba(255, 200, 60, 0.08);
  border: 1px solid rgba(255, 200, 60, 0.25);
  color: rgba(255, 210, 80, 0.75);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.news-popup-footer-btn:hover {
  background: rgba(255, 200, 60, 0.18);
  color: rgba(255, 210, 80, 1);
  border-color: rgba(255, 200, 60, 0.55);
}

.news-popup-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  z-index: 1;
}

.news-popup-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(255, 200, 60, 0.32);
  border-bottom: 2px solid rgba(255, 200, 60, 0.32);
  pointer-events: none;
}

/* ── Intel panel: news-specific ─────────────────────── */
.intel-url-link {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0, 229, 255, 0.65);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

.intel-url-link:hover {
  color: var(--accent, #00e5ff);
  text-decoration: underline;
}

.intel-news-action {
  display: flex;
  justify-content: flex-end;
  padding: 6px 4px 2px;
}

/* ── Intel Feed: entity action buttons (Watch + AI Investigate) ─── */
.intel-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 6px;
}

.intel-action-btn {
  flex: 1;
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.09em;
  font-weight: bold;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-align: center;
}

.intel-action-watch:hover {
  border-color: rgba(0, 204, 204, 0.50);
  color: #00cccc;
  background: rgba(0, 204, 204, 0.06);
}

.intel-action-ai:hover {
  border-color: rgba(255, 170, 0, 0.50);
  color: #ffaa00;
  background: rgba(255, 170, 0, 0.06);
}

/* ── Layer card: news row two-line layout ────────────── */
.layer-row[data-layer="news"] {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.news-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.news-row-sub {
  /* indent aligns with layer-info: 8px dot + 8px gap (icon is hidden) */
  padding-left: 16px;
  margin-top: 6px;
}

/* ── Layer card: news theme select ──────────────────── */
.news-theme-select {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  padding: 1px 6px;
  height: 18px;
  max-width: 180px;
  cursor: pointer;
  outline: none;
}

.news-theme-select:hover,
.news-theme-select:focus {
  border-color: rgba(255, 200, 60, 0.45);
  color: rgba(255, 210, 80, 0.85);
}

.news-theme-select option {
  background: #0a0e14;
  color: rgba(255, 255, 255, 0.75);
}

/* ── SETTINGS MODAL ─────────────────────────────────────── */
.settings-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 600;
  align-items: center;
  justify-content: center;
}

.settings-overlay.visible { display: flex; }

.settings-modal {
  width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(10, 14, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(16px);
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--chrome-accent);
}

.settings-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  cursor: pointer;
}

.settings-close:hover { color: rgba(255, 255, 255, 0.9); }

.settings-body { padding: 16px 20px; }

.settings-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-section:last-of-type { border-bottom: none; }

.settings-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 12px;
}

.settings-field { margin-bottom: 10px; }

.settings-label {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

.settings-input, .settings-select {
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: 12px;
  box-sizing: border-box;
}

.settings-input:focus, .settings-select:focus {
  outline: none;
  border-color: var(--chrome-accent-dim);
}

.settings-select option { background: #0a0e14; }

.settings-radio-group { display: flex; flex-direction: column; gap: 6px; }

.settings-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.settings-provider-fields { margin-top: 10px; }

.settings-btn {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.settings-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.9);
}

.settings-btn-primary {
  background: var(--chrome-accent-glow);
  border-color: var(--chrome-accent-border);
  color: var(--chrome-accent);
}

.settings-btn-primary:hover {
  background: var(--chrome-accent-dim);
  color: var(--chrome-accent-bright);
}

.settings-note {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 4px;
  margin-bottom: 10px;
}

.settings-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
}

.settings-status {
  font-size: 11px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── AI CHAT DRAWER ─────────────────────────────────────── */
.ai-chat-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  height: 100vh;
  background: rgba(10, 14, 20, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  z-index: 300;
  transition: right 0.3s ease;
  font-family: var(--font-mono);
}

.ai-chat-drawer.open {
  right: 0;
}

body.ai-chat-open #panel-right {
  right: 400px;
  transition: right 0.3s ease;
}

body.clean-ui .ai-chat-drawer {
  display: none !important;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.ai-chat-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--chrome-accent);
  flex: 1;
}

.ai-chat-provider {
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.3);
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.ai-chat-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}

.ai-chat-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-msg {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 95%;
  word-break: break-word;
}

.ai-msg-user {
  background: rgba(0, 200, 200, 0.1);
  border: 1px solid rgba(0, 200, 200, 0.2);
  color: rgba(255, 255, 255, 0.85);
  align-self: flex-end;
}

.ai-msg-assistant {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  align-self: flex-start;
  white-space: pre-wrap;
}

.ai-msg-system {
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  text-align: center;
  font-style: italic;
  align-self: center;
  max-width: 100%;
}

.ai-msg-error {
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.2);
  color: #ff6666;
  font-size: 11px;
  align-self: flex-start;
}

.ai-msg-loading {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  align-self: flex-start;
}

.ai-chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.ai-chat-input {
  flex: 1;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: 12px;
  resize: none;
  outline: none;
}

.ai-chat-input:focus {
  border-color: var(--chrome-accent-border);
}

.ai-chat-send {
  width: 40px;
  background: var(--chrome-accent-glow);
  border: 1px solid var(--chrome-accent-border);
  border-radius: 8px;
  color: var(--chrome-accent);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.ai-chat-send:hover {
  background: var(--chrome-accent-dim);
}

.ai-chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 16px 12px;
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ai-quick-btn {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-quick-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ── REC STUDIO MODAL ───────────────────────────────────── */
.rs-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 600;
  align-items: center;
  justify-content: center;
}

.rs-overlay.visible { display: flex; }

.rs-modal {
  width: 540px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: rgba(10, 14, 20, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.rs-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.rs-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.85);
  margin-right: auto;
}

.rs-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 2px;
}

.rs-tab {
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.rs-tab:hover { color: rgba(255, 255, 255, 0.7); }

.rs-tab.active {
  background: var(--chrome-accent-glow);
  color: var(--chrome-accent-bright);
}

.rs-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}

.rs-close:hover { color: rgba(255, 255, 255, 0.9); }

.rs-body {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 0;
}

.rs-panel { padding: 16px 20px; }
.rs-panel-hidden { display: none; }

.rs-section {
  margin-bottom: 14px;
}

.rs-section.rs-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
  padding-top: 4px;
}

.rs-label {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 5px;
}

.rs-input {
  width: 100%;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: 12px;
  box-sizing: border-box;
}

.rs-input:focus {
  outline: none;
  border-color: var(--chrome-accent-border);
}

.rs-select {
  width: 100%;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: 12px;
  box-sizing: border-box;
  cursor: pointer;
}

.rs-select:focus { outline: none; border-color: var(--chrome-accent-border); }
.rs-select option { background: #0a0e14; }

.rs-duration-row {
  display: flex;
  gap: 8px;
}

.rs-duration-input { flex: 0 0 100px; }
.rs-duration-unit  { flex: 1 1 auto; }

.rs-custom-bbox { margin-top: 10px; }

.rs-bbox-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}

.rs-bbox-input { font-size: 11px; }

.rs-layer-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rs-layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}

.rs-layer-row:hover { background: rgba(255, 255, 255, 0.04); }

.rs-layer-cb { flex-shrink: 0; accent-color: var(--chrome-accent); cursor: pointer; }

.rs-layer-name {
  flex: 1 1 auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.rs-layer-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.3px;
}

.rs-estimate {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}

.rs-warning {
  font-size: 10px;
  color: #ffaa00;
  margin-top: 4px;
}

.rs-warning-hidden, .rs-error-hidden { display: none; }

.rs-error {
  font-size: 10px;
  color: #ff4444;
  margin-top: 4px;
}

.rs-btn {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}

.rs-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.9);
}

.rs-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.rs-btn-primary {
  background: rgba(255, 50, 50, 0.15);
  border-color: rgba(255, 50, 50, 0.3);
  color: #ff6666;
}

.rs-btn-primary:hover:not(:disabled) {
  background: rgba(255, 50, 50, 0.25);
  color: #ff8888;
}

.rs-btn-stop {
  background: rgba(80, 80, 200, 0.15);
  border-color: rgba(80, 80, 200, 0.3);
  color: #8888ff;
}

.rs-btn-stop:hover:not(:disabled) {
  background: rgba(80, 80, 200, 0.25);
  color: #aaaaff;
}

.rs-btn-secondary {
  background: rgba(60, 120, 200, 0.12);
  border-color: rgba(60, 120, 200, 0.3);
  color: #6ab0ff;
}

.rs-btn-secondary:hover:not(:disabled) {
  background: rgba(60, 120, 200, 0.24);
  color: #90c8ff;
}

.rs-btn-danger {
  background: rgba(200, 40, 40, 0.15);
  border-color: rgba(200, 40, 40, 0.3);
  color: #ff4444;
}

.rs-btn-danger:hover:not(:disabled) {
  background: rgba(200, 40, 40, 0.28);
  color: #ff6666;
}

/* PICK REGION ON MAP — secondary action inside the REGION section */
.rs-pick-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  background: rgba(0, 204, 204, 0.06);
  border: 1px solid rgba(0, 204, 204, 0.25);
  border-radius: 3px;
  color: rgba(0, 204, 204, 0.75);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.rs-pick-btn:hover:not(:disabled) {
  background: rgba(0, 204, 204, 0.14);
  border-color: rgba(0, 204, 204, 0.50);
  color: rgba(0, 204, 204, 0.95);
}
.rs-pick-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Active tab */
.rs-active-header {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
}

.rs-active-elapsed {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 2px;
  color: #ff4444;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.rs-layer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.rs-layer-table th {
  text-align: left;
  padding: 4px 6px;
  font-size: 9px;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rs-layer-table td {
  padding: 5px 6px;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.rs-table-empty {
  text-align: center;
  opacity: 0.35;
  font-style: italic;
}

.rs-progress-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.rs-progress-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.rs-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}

.rs-progress-fill {
  height: 100%;
  background: #ff4444;
  border-radius: 2px;
  width: 0%;
  transition: width 0.5s ease;
}

/* Recordings tab */
.rs-import-row {
  display: flex;
  margin-bottom: 10px;
}

.rs-rec-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  max-height: 220px;
  overflow-y: auto;
}

.rs-rec-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all 0.12s;
}

.rs-rec-row:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.rs-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rs-dot-complete { background: #44cc88; }
.rs-dot-aborted  { background: #ff8844; }
.rs-dot-active   { background: #ff3333; animation: rec-pulse 1.2s ease-in-out infinite; }

.rs-rec-name {
  flex: 1 1 auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs-rec-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

.rs-rec-dur, .rs-rec-size {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

.rs-aborted-badge {
  font-size: 8px;
  letter-spacing: 0.8px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255, 120, 60, 0.2);
  color: #ff8844;
  border: 1px solid rgba(255, 120, 60, 0.25);
  flex-shrink: 0;
}

/* Inspect sub-panel */
.rs-inspect-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 12px;
  margin-top: 4px;
}

.rs-inspect-hidden { display: none; }

.rs-inspect-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}

.rs-inspect-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.rs-inspect-row {
  display: flex;
  gap: 12px;
  font-size: 11px;
}

.rs-inspect-key {
  color: rgba(255, 255, 255, 0.35);
  min-width: 80px;
  flex-shrink: 0;
}

.rs-empty-state {
  text-align: center;
  padding: 24px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  font-style: italic;
}

/* Orphan toast */
.rs-toast {
  position: fixed;
  bottom: 80px;
  left: 20px;
  z-index: 700;
  background: rgba(10, 14, 20, 0.95);
  border: 1px solid rgba(255, 160, 60, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 400px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(12px);
}

.rs-toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.rs-toast-out {
  opacity: 0;
  transform: translateY(12px);
}

.rs-toast-icon {
  font-size: 14px;
  color: #ffaa44;
  flex-shrink: 0;
}

.rs-toast-text {
  flex: 1 1 auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.rs-toast-text em {
  color: rgba(255, 255, 255, 0.9);
  font-style: normal;
}

.rs-toast-btn {
  padding: 4px 10px;
  border: 1px solid rgba(255, 160, 60, 0.4);
  border-radius: 4px;
  background: rgba(255, 160, 60, 0.12);
  color: #ffaa44;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.5px;
  cursor: pointer;
  flex-shrink: 0;
}

.rs-toast-btn:hover { background: rgba(255, 160, 60, 0.22); }

.rs-toast-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.rs-toast-dismiss:hover { color: rgba(255, 255, 255, 0.7); }

.rs-toast-error .rs-toast-icon { color: #ff4444; }

/* ── Archive request form ──────────────────────────────────── */
.rs-arc-form {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 14px 20px 6px;
}

.rs-arc-form-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--chrome-accent);
  margin-bottom: 12px;
}

.rs-arc-optional {
  font-size: 9px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.3);
}

.rs-arc-bbox-btns {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.rs-arc-bbox-inputs { margin-top: 4px; }

.rs-arc-note {
  width: 100%;
  resize: vertical;
  min-height: 44px;
}

.rs-arc-layer-checks {
  max-height: 110px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 2px;
}

.rs-arc-layer-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  user-select: none;
}

.rs-arc-layer-check input[type=checkbox] {
  cursor: pointer;
  accent-color: var(--chrome-accent);
}

.rs-arc-status {
  font-size: 11px;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.55);
}

.rs-arc-status-error { color: #ff8844; }

/* ── My Archive Requests section ──────────────────────────── */
.rs-arc-section {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 10px 20px 4px;
}

.rs-arc-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rs-arc-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.45);
}

.rs-arc-refresh-btn {
  font-size: 11px;
  padding: 2px 7px;
}

.rs-arc-req-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.rs-arc-req-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  flex-wrap: wrap;
}

.rs-arc-req-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.rs-arc-req-info {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs-arc-req-status {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.rs-arc-status-label {
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
}

.rs-arc-status-pending   { }
.rs-arc-status-approved  { color: var(--chrome-accent); background: rgba(0, 204, 204, 0.08); }
.rs-arc-status-rejected  { color: #ff8844; background: rgba(255, 120, 60, 0.1); }
.rs-arc-status-done      { color: #44cc88; background: rgba(68, 204, 136, 0.08); }

.rs-arc-action-btn {
  font-size: 10px;
  padding: 2px 7px;
  letter-spacing: 0.3px;
}

.rs-arc-job-badge {
  font-size: 9px;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
}

.rs-arc-job-running { color: #ffcc44; background: rgba(255, 200, 60, 0.08); }
.rs-arc-job-error   { color: #ff8844; background: rgba(255, 120, 60, 0.1); }

.rs-arc-rej-reason {
  width: 100%;
  font-size: 10px;
  color: rgba(255, 120, 60, 0.7);
  padding-left: 15px;
  margin-top: 2px;
}

.rs-arc-job-err-msg {
  font-size: 10px;
  color: rgba(255, 120, 60, 0.7);
  margin-top: 2px;
  word-break: break-word;
}

.rs-arc-time-hint {
  font-size: 10px;
  color: rgba(0, 204, 204, 0.7);
  margin-top: 4px;
  line-height: 1.4;
}

.rs-dot-pending  { background: rgba(255, 255, 255, 0.3); }
.rs-dot-approved { background: var(--chrome-accent); }

/* ── Settings: Archive Admin Panel ───────────────────────── */
.sa-filter-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.sa-filter-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.sa-filter-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

.sa-filter-active {
  color: var(--chrome-accent) !important;
  border-color: var(--chrome-accent) !important;
}

.sa-refresh-btn { margin-left: auto; }

.sa-req-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sa-req-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  padding: 10px 0;
}

.sa-req-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  flex-wrap: wrap;
}

.sa-req-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sa-req-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.sa-req-by {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.sa-req-date {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.sa-req-note {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
}

.sa-req-rej {
  font-size: 10px;
  color: #ff8844;
  width: 100%;
  padding-left: 15px;
  margin-top: 2px;
}

.sa-req-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.sa-act-btn {
  font-size: 10px !important;
  padding: 2px 8px !important;
}

.sa-act-reject {
  color: #ff8844 !important;
  border-color: rgba(255, 136, 68, 0.5) !important;
}

.sa-act-reject:hover {
  background: rgba(255, 136, 68, 0.08) !important;
}

.sa-job-info {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

.sa-arc-msg {
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 6px;
  padding: 4px 6px;
  border-radius: 2px;
  color: var(--chrome-accent);
}

.sa-arc-msg-error { color: #ff8844; }

/* ── Settings: Archive Retention Admin Panel ─────────────── */
.sa-ret-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sa-ret-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  padding: 10px 0;
}

.sa-ret-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  flex-wrap: wrap;
}

.sa-ret-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  min-width: 120px;
}

.sa-ret-class {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  min-width: 52px;
}

.sa-ret-input {
  width: 54px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.8);
  padding: 2px 5px;
}

.sa-ret-unit {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-left: -3px;
}

.sa-ret-save {
  font-size: 10px !important;
  padding: 2px 8px !important;
}

.sa-ret-purge {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-left: auto;
}

/* ⏺ icon rendered via ::before so active state can replace it with a pulsing dot */
#btnRecStudio::before {
  content: '⏺ ';
}

/* HUD button active state — replace ⏺ with blinking red dot on the LEFT */
#btnRecStudio.rs-active-dot::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff3333;
  margin-right: 6px;
  animation: rec-pulse 1.2s ease-in-out infinite;
  vertical-align: middle;
}

body.clean-ui #btnRecStudio { display: none; }

/* ── OPS FEED ACCORDION (left panel) ────────────────────── */
.ops-feed-summary {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
  padding: 5px 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ops-feed-summary-hit {
  color: #ffaa00;
}

/* Severity filter buttons */
.ops-feed-filters {
  display: flex;
  gap: 3px;
  padding: 4px 8px 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ops-filter-btn {
  padding: 2px 7px;
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.15s;
}

.ops-filter-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}

.ops-filter-btn.ops-filter-active {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
}

.ops-filter-btn.ops-filter-watch.ops-filter-active {
  color: #ffaa00;
  border-color: rgba(255, 170, 0, 0.35);
  background: rgba(255, 170, 0, 0.08);
}

.ops-filter-btn.ops-filter-alert.ops-filter-active {
  color: #ff4444;
  border-color: rgba(255, 68, 68, 0.35);
  background: rgba(255, 68, 68, 0.08);
}

.ops-feed-list {
  max-height: 480px;
  overflow-y: auto;
}

.ops-feed-list::-webkit-scrollbar        { width: 3px; }
.ops-feed-list::-webkit-scrollbar-track  { background: transparent; }
.ops-feed-list::-webkit-scrollbar-thumb  { background: rgba(255, 255, 255, 0.10); border-radius: 2px; }

.ops-feed-empty {
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.18);
  padding: 10px;
  text-align: center;
}

.ops-feed-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding: 3px 7px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
  border-left: 2px solid transparent;
}

.ops-feed-row-hit {
  border-left-color: #ffaa00;
  background: rgba(255, 170, 0, 0.06);
  cursor: pointer;
}

.ops-feed-row-hit:hover {
  background: rgba(255, 170, 0, 0.12);
}

.ops-feed-row-batch {
  background: rgba(255, 255, 255, 0.015);
}

.ops-feed-row-muted {
  opacity: 0.35;
}

.ops-feed-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.2;
}

.ops-feed-ts {
  flex-shrink: 0;
  font-size: 9px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.32);
  white-space: nowrap;
}

.ops-feed-tag {
  flex-shrink: 0;
  font-size: 9px;
  font-family: var(--font-mono);
  color: rgba(0, 204, 204, 0.85);
  white-space: nowrap;
}

.ops-feed-msg {
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ops-feed-pill {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 8px;
  font-family: var(--font-mono);
  font-weight: bold;
  letter-spacing: 0.04em;
  border-radius: 2px;
  padding: 1px 3px;
  text-align: center;
  white-space: nowrap;
}

.ops-pill-info  { color: rgba(0, 204, 204, 0.60); border: 1px solid rgba(0, 204, 204, 0.20); }
.ops-pill-watch { color: #ffaa00;                  border: 1px solid rgba(255, 170,  0, 0.35); }
.ops-pill-alert { color: #ff3b30;                  border: 1px solid rgba(255,  59, 48, 0.35); }

/* ── WATCHLIST PANEL (left-panel strip + modal) ──────────── */

/* Rules strip at the bottom of the OPS STREAM accordion body */
.wl-rules-strip {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.wl-strip-count {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.30);
}

.wl-strip-manage {
  font-size: 8px;
  font-family: var(--font-mono);
  font-weight: bold;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid rgba(0, 204, 204, 0.25);
  border-radius: 3px;
  color: rgba(0, 204, 204, 0.60);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.wl-strip-manage:hover {
  border-color: rgba(0, 204, 204, 0.55);
  color: rgba(0, 204, 204, 0.90);
}

/* Modal overlay — mirrors settings-overlay at z-index 601 */
.wl-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.70);
  z-index: 601;
  align-items: center;
  justify-content: center;
}

.wl-modal-overlay.visible { display: flex; }

.wl-modal {
  width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(10, 14, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.wl-modal::-webkit-scrollbar       { width: 3px; }
.wl-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }

.wl-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  background: rgba(10, 14, 20, 0.98);
  z-index: 1;
}

.wl-modal-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--chrome-accent);
}

.wl-modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.50);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.wl-modal-close:hover { color: rgba(255, 255, 255, 0.90); }

.wl-modal-body { padding: 14px 20px 20px; }

/* Section titles */
.wl-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.40);
  margin-bottom: 8px;
}

.wl-section-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 14px 0;
}

/* Rule list */
#wl-rule-list { min-height: 28px; }

.wl-empty {
  font-size: 11px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.18);
  padding: 8px 0;
  text-align: center;
}

.wl-rule-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.wl-rule-name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-rule-badge {
  flex-shrink: 0;
  font-size: 8px;
  font-family: var(--font-mono);
  font-weight: bold;
  letter-spacing: 0.04em;
  color: rgba(0, 204, 204, 0.55);
  border: 1px solid rgba(0, 204, 204, 0.20);
  border-radius: 2px;
  padding: 1px 4px;
  white-space: nowrap;
}

.wl-toggle-btn {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.10em;
  padding: 2px 7px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.30);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.wl-toggle-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.60);
}

.wl-toggle-btn.wl-toggle-on {
  border-color: rgba(0, 204, 204, 0.45);
  color: rgba(0, 204, 204, 0.85);
}

.wl-delete-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.20);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.15s ease;
}

.wl-delete-btn:hover { color: #ff3b30; }

.wl-edit-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.20);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.15s ease;
}

.wl-edit-btn:hover { color: rgba(0, 204, 204, 0.85); }

/* Create rule form */
.wl-form-field { margin-bottom: 10px; }

.wl-form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.wl-form-field-half,
.wl-form-field-third { flex: 1; }

.wl-form-label {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.40);
  margin-bottom: 4px;
}

.wl-form-hint {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.20);
  letter-spacing: 0;
  font-weight: normal;
}

.wl-form-input,
.wl-form-select {
  width: 100%;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.80);
  font-family: inherit;
  font-size: 12px;
  box-sizing: border-box;
}

.wl-form-input:focus,
.wl-form-select:focus {
  outline: none;
  border-color: rgba(0, 204, 204, 0.35);
}

.wl-form-select option { background: #0a0e14; }

/* Checkbox layer picker */
.wl-layer-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.wl-layer-list-header .wl-form-label { margin-bottom: 0; }

.wl-layer-list-actions {
  display: flex;
  gap: 4px;
}

.wl-layer-action {
  font-size: 8px;
  font-family: var(--font-mono);
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.30);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wl-layer-action:hover {
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.25);
}

.wl-layer-list {
  max-height: 130px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 2px 0;
  background: rgba(255, 255, 255, 0.06);
}

.wl-layer-list::-webkit-scrollbar        { width: 3px; }
.wl-layer-list::-webkit-scrollbar-track  { background: transparent; }
.wl-layer-list::-webkit-scrollbar-thumb  { background: rgba(255, 255, 255, 0.10); border-radius: 2px; }

.wl-layer-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.60);
  transition: background 0.1s ease;
  user-select: none;
}

.wl-layer-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.wl-layer-item input:checked ~ * {
  color: rgba(0, 204, 204, 0.90);
}

.wl-layer-item:has(input:checked) {
  background: rgba(0, 204, 204, 0.06);
  color: rgba(0, 204, 204, 0.90);
}

.wl-layer-check {
  accent-color: #00cccc;
  cursor: pointer;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.wl-layer-hint {
  font-size: 8px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.20);
  padding: 3px 1px 0;
}

/* Layer label in rule list row */
.wl-rule-layer {
  flex-shrink: 0;
  font-size: 8px;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.30);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

.wl-form-error {
  font-size: 11px;
  font-family: var(--font-mono);
  color: #ff3b30;
  padding: 4px 0 6px;
}

.wl-form-submit {
  width: 100%;
  padding: 9px;
  margin-top: 2px;
  background: rgba(0, 204, 204, 0.10);
  border: 1px solid rgba(0, 204, 204, 0.30);
  border-radius: 6px;
  color: rgba(0, 204, 204, 0.85);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.wl-form-submit:hover {
  background: rgba(0, 204, 204, 0.18);
  border-color: rgba(0, 204, 204, 0.50);
}

.wl-form-cancel {
  display: block;
  width: 100%;
  padding: 7px;
  margin-top: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.35);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.wl-form-cancel:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.65);
}

/* PICK ON MAP secondary action button inside #wl-group-geo */
.wl-pick-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  background: rgba(0, 204, 204, 0.06);
  border: 1px solid rgba(0, 204, 204, 0.25);
  border-radius: 3px;
  color: rgba(0, 204, 204, 0.75);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wl-pick-btn:hover {
  background: rgba(0, 204, 204, 0.14);
  border-color: rgba(0, 204, 204, 0.50);
  color: rgba(0, 204, 204, 0.95);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LAYER SETTINGS INFO MODAL  (Sprint E — WV.LayerSettings)
   Prefix: ls-
   z-index 601 (above settings-overlay at 600)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Gear button injected into each standard layer row ── */
.layer-gear {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.15);
  transition: color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layer-row:hover .layer-gear { color: rgba(255, 255, 255, 0.60); }

/* ── Overlay backdrop ── */
.ls-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 601;
  align-items: center;
  justify-content: center;
}

.ls-overlay.visible { display: flex; }

/* ── Modal card ── */
.ls-modal {
  width: 420px;
  max-height: 84vh;
  overflow-y: auto;
  background: rgba(8, 12, 18, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ── Header ── */
.ls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ls-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ls-title-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.ls-title-id {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.ls-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}

.ls-close:hover { color: rgba(255, 255, 255, 0.90); }

/* ── Body ── */
.ls-body { padding: 14px 18px; }

.ls-section {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ls-section:last-child { border-bottom: none; margin-bottom: 0; }

.ls-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.30);
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* ── Data source field rows ── */
.ls-field-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 5px;
}

.ls-field-key {
  font-size: 9px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.30);
  width: 92px;
  flex-shrink: 0;
  padding-top: 1px;
  text-transform: uppercase;
}

.ls-field-val {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
  word-break: break-word;
}

/* ── Capability rows ── */
.ls-cap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.ls-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  width: 122px;
  text-align: center;
}

.ls-badge-yes {
  background: rgba(0, 255, 102, 0.10);
  color: rgba(0, 255, 102, 0.80);
  border: 1px solid rgba(0, 255, 102, 0.22);
}

.ls-badge-no {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.ls-cap-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.32);
  line-height: 1.4;
}

/* ── Notes block ── */
.ls-notes {
  margin-top: 8px;
  padding: 7px 10px;
  background: rgba(255, 200, 0, 0.04);
  border-left: 2px solid rgba(255, 200, 0, 0.28);
  font-size: 10px;
  color: rgba(255, 200, 0, 0.55);
  line-height: 1.55;
}

/* ── No-entry fallback ── */
.ls-no-entry {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
  padding: 28px 0;
}

.ls-no-entry code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Trace settings (live-traces layer) ── */
.ls-trace-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ls-trace-row-check {
  justify-content: flex-start;
  gap: 8px;
}

.ls-trace-label {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  color: rgba(180, 190, 210, 0.70);
  flex: 1;
  cursor: default;
}

.ls-trace-hint {
  color: rgba(180, 190, 210, 0.40);
  font-size: 9px;
}

.ls-trace-input {
  width: 72px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  color: rgba(220, 230, 255, 0.85);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 6px;
  text-align: right;
  outline: none;
  flex-shrink: 0;
}

.ls-trace-input:focus {
  border-color: rgba(0, 204, 204, 0.50);
  background: rgba(0, 204, 204, 0.06);
}

.ls-trace-check {
  width: auto;
  margin: 0;
  accent-color: var(--chrome-accent);
  cursor: pointer;
  flex-shrink: 0;
}

.ls-trace-check-label {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  color: rgba(180, 190, 210, 0.70);
  cursor: pointer;
}

/* ── Density cap override controls ── */
.ls-density-reset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-bottom: 2px;
}

.ls-density-reset {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.40);
  font: 9px var(--font-mono);
  letter-spacing: .04em;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.ls-density-reset:hover:not(:disabled) {
  border-color: rgba(255, 200, 0, 0.45);
  color: rgba(255, 200, 0, 0.80);
}

.ls-density-reset:disabled {
  opacity: 0.28;
  cursor: default;
}

.ls-density-active {
  font: 9px var(--font-mono);
  letter-spacing: .04em;
  color: #ffcc44;
  text-transform: uppercase;
}

/* ── Color override controls ── */
.ls-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ls-color-picker {
  width: 32px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 3px;
  background: none;
  padding: 1px 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.ls-color-hex {
  font: 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: rgba(220, 230, 255, 0.72);
  flex: 1;
}

.ls-color-save {
  background: rgba(0, 204, 204, 0.08);
  border: 1px solid rgba(0, 204, 204, 0.32);
  border-radius: 2px;
  color: rgba(0, 204, 204, 0.72);
  font: 9px var(--font-mono);
  letter-spacing: .06em;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.ls-color-save:hover {
  background: rgba(0, 204, 204, 0.15);
  border-color: rgba(0, 204, 204, 0.55);
  color: rgba(0, 204, 204, 0.95);
}

.ls-color-reset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.ls-color-reset {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.40);
  font: 9px var(--font-mono);
  letter-spacing: .04em;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.ls-color-reset:hover:not(:disabled) {
  border-color: rgba(255, 200, 0, 0.45);
  color: rgba(255, 200, 0, 0.80);
}

.ls-color-reset:disabled {
  opacity: 0.28;
  cursor: default;
}

.ls-color-active {
  font: 9px var(--font-mono);
  letter-spacing: .04em;
  color: #ffcc44;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SPATIAL PICKER HUD  (Sprint G — WV.SpatialPicker)
   Fixed instruction tooltip — appears while picker is active, removed on close.
   z-index 700 (above all overlays at 601; above watchlist modal at 602).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── OSM SEARCH PANEL ─────────────────────────────────────────────────────────
   Tag-based Overpass area scan tool. Lives in the right panel HUD accordion
   as a collapsible <details> mod-card. 210px panel width — chips wrap 3-up.
   ══════════════════════════════════════════════════════════════════════════════ */

/* <details> container — reset default browser disclosure styles */
.osm-details {
  list-style: none;
}

.osm-details::-webkit-details-marker { display: none; }

/* Summary styled to match .mod-action-btn — same margin as mod-card-body (3px 10px 7px)
   so it sits identically to RUN DETECT / AI CHAT / REC STUDIO / SETTINGS. */
.osm-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 3px 10px 7px;
  padding: 6px;
  width: calc(100% - 20px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.40);
  font-family: var(--font);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.12em;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: all 0.2s ease;
}

.osm-summary::-webkit-details-marker { display: none; }

.osm-summary:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
}

.osm-details[open] .osm-summary {
  background: rgba(34, 211, 238, 0.08);
  border-color: rgba(34, 211, 238, 0.35);
  color: rgba(34, 211, 238, 0.85);
}

.osm-details[open] .osm-summary:hover {
  background: rgba(34, 211, 238, 0.13);
  border-color: rgba(34, 211, 238, 0.50);
}

/* Collapse caret — absolutely positioned so label stays centered */
.osm-summary::after {
  content: '▸';
  position: absolute;
  right: 8px;
  font-size: 7px;
  opacity: 0.55;
  transition: transform 0.15s;
  font-family: var(--font-mono);
}

.osm-details[open] .osm-summary::after {
  transform: rotate(90deg);
}

.osm-search-panel {
  padding: 6px 10px 8px;
}

.osm-search-row {
  display: flex;
  gap: 4px;
  margin-bottom: 5px;
}

.osm-search-btn {
  flex: 1;
  padding: 4px 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  font: 9px var(--font-mono);
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: 2px;
  text-align: center;
}

.osm-search-btn:hover {
  background: rgba(0, 204, 204, 0.10);
  border-color: rgba(0, 204, 204, 0.38);
  color: rgba(255, 255, 255, 0.90);
}

.osm-search-btn-ghost {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.35);
}

.osm-search-btn-ghost:hover {
  background: rgba(255, 80, 80, 0.08);
  border-color: rgba(255, 80, 80, 0.28);
  color: rgba(255, 150, 150, 0.90);
}

.osm-lock-active {
  border-color: rgba(0, 204, 204, 0.60) !important;
  color: var(--chrome-accent) !important;
  background: rgba(0, 204, 204, 0.09) !important;
}

.osm-draw-active {
  border-color: rgba(251, 191, 36, 0.60) !important;
  color: rgba(251, 191, 36, 0.90) !important;
  background: rgba(251, 191, 36, 0.09) !important;
}

.osm-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 5px;
}

.osm-chip {
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.40);
  font: 8px var(--font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.osm-chip:hover {
  background: rgba(0, 204, 204, 0.07);
  border-color: rgba(0, 204, 204, 0.28);
  color: rgba(255, 255, 255, 0.75);
}

.osm-chip-active {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(34, 211, 238, 0.50);
  color: #22d3ee;
}

.osm-search-input {
  flex: 1;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.80);
  font: 9px var(--font-mono);
  border-radius: 2px;
  outline: none;
  min-width: 0;
}

.osm-search-input:focus {
  border-color: rgba(0, 204, 204, 0.42);
}

.osm-search-input::placeholder {
  color: rgba(255, 255, 255, 0.20);
  font-size: 8px;
}

.osm-search-scan-btn {
  width: 100%;
  padding: 6px;
  background: rgba(34, 211, 238, 0.09);
  border: 1px solid rgba(34, 211, 238, 0.28);
  color: #22d3ee;
  font: 9px var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 2px;
  margin-bottom: 4px;
}

.osm-search-scan-btn:hover:not(:disabled) {
  background: rgba(34, 211, 238, 0.18);
  border-color: rgba(34, 211, 238, 0.55);
}

.osm-search-scan-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.osm-search-status {
  font: 10px var(--font-mono);
  color: rgba(255, 255, 255, 0.52);
  padding: 1px 0;
  min-height: 14px;
  line-height: 1.5;
}

/* OSM mode toggle active state */
.osm-mode-active {
  background: rgba(34, 211, 238, 0.12) !important;
  border-color: rgba(34, 211, 238, 0.50) !important;
  color: #22d3ee !important;
}

/* Proximity radius row elements */
.osm-prox-label,
.osm-prox-unit {
  font: 9px var(--font-mono);
  color: rgba(255, 255, 255, 0.35);
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 22px;
}

.osm-prox-input {
  width: 52px;
  flex: 0 0 52px;
  text-align: right;
}
.osm-prox-input::-webkit-outer-spin-button,
.osm-prox-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.osm-prox-input[type=number] {
  -moz-appearance: textfield;
}

/* ── OSM Search result list ─────────────────────────────────────────────────── */

.osm-result-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 0 10px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.osm-result-list:empty { display: none; }
.osm-result-list::-webkit-scrollbar { width: 3px; }
.osm-result-list::-webkit-scrollbar-track { background: transparent; }
.osm-result-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }

.osm-result-summary {
  font: 10px var(--font-mono);
  color: rgba(255,255,255,0.40);
  padding: 4px 0 3px;
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.osm-result-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 3px 3px 1px;
  cursor: pointer;
  border-radius: 2px;
}
.osm-result-row:hover {
  background: rgba(0,204,204,0.08);
}

.osm-result-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0.85;
  flex-shrink: 0;
}

.osm-result-cat {
  font: 10px var(--font-mono);
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  max-width: 110px;
}

.osm-result-name {
  font: 10px var(--font-mono);
  color: rgba(255,255,255,0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 0;
  min-width: 0;
}

.osm-result-cap {
  font: 9px var(--font-mono);
  color: rgba(255,255,255,0.30);
  padding: 3px 0 2px;
  font-style: italic;
}

/* ── OSM Search typeahead ─────────────────────────────────────────────────── */

.osm-input-wrap {
  position: relative;
  margin-bottom: 4px;
}

.osm-input-wrap .osm-search-input {
  width: 100%;
  box-sizing: border-box;
}

.osm-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  background: rgba(3, 8, 14, 0.97);
  border: 1px solid rgba(0, 204, 204, 0.28);
  border-radius: 2px;
  z-index: 200;
  overflow-y: auto;
  max-height: 176px;
}

.osm-suggestion-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  gap: 8px;
  cursor: pointer;
}

.osm-suggestion-row:hover {
  background: rgba(0, 204, 204, 0.10);
}

.osm-suggestion-label {
  font: 10px var(--font-ui);
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.osm-suggestion-tag {
  font: 9px var(--font-mono);
  color: rgba(0, 204, 204, 0.60);
  white-space: nowrap;
  flex-shrink: 0;
}

.osm-helper-text {
  font: 9px var(--font-mono);
  color: rgba(255, 255, 255, 0.20);
  padding: 0 0 5px;
  line-height: 1.4;
}

.osm-tray {
  display: none;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 5px;
}

.osm-tray-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px 2px 7px;
  background: rgba(34, 211, 238, 0.09);
  border: 1px solid rgba(34, 211, 238, 0.32);
  border-radius: 2px;
  white-space: nowrap;
}

.osm-tray-chip-label {
  font: 9px var(--font-mono);
  color: rgba(34, 211, 238, 0.85);
}

.osm-tray-chip-remove {
  font: 11px var(--font-mono);
  color: rgba(34, 211, 238, 0.45);
  cursor: pointer;
  line-height: 1;
  padding: 0 1px;
}

.osm-tray-chip-remove:hover {
  color: rgba(255, 120, 120, 0.85);
}

.sp-hud {
  position: fixed;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 12, 20, 0.88);
  border: 1px solid rgba(0, 204, 204, 0.45);
  color: rgba(0, 204, 204, 0.90);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  padding: 8px 18px;
  border-radius: 3px;
  z-index: 700;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* ═══════════════════════════════════════════════════════
   PLUGIN REGISTRY MODAL — SaaS Sprint 4
   Prefix: .pr-
   ═══════════════════════════════════════════════════════ */

.pr-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 610;
  align-items: center;
  justify-content: center;
}

.pr-overlay.visible { display: flex; }

.pr-modal {
  width: 660px;
  max-width: calc(100vw - 32px);
  height: 82vh;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: rgba(8, 14, 22, 0.97);
  border: 1px solid rgba(0, 204, 204, 0.22);
  border-radius: 10px;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.70);
  overflow: hidden;
}

/* ── Header ── */

.pr-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(0, 204, 204, 0.14);
  flex-shrink: 0;
}

.pr-title {
  font: 600 12px var(--font-mono);
  letter-spacing: 1.5px;
  color: var(--chrome-accent);
  flex: 1;
}

.pr-count {
  font: 10px var(--font-mono);
  color: rgba(0, 204, 204, 0.50);
  letter-spacing: .08em;
}

.pr-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.40);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}

.pr-close:hover { color: rgba(255, 255, 255, 0.85); }

/* ── Tabs ── */

.pr-tabs {
  display: flex;
  gap: 0;
  padding: 10px 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.pr-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.38);
  font: 600 10px var(--font-mono);
  letter-spacing: 1px;
  padding: 6px 14px 8px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.pr-tab:hover { color: rgba(0, 204, 204, 0.75); }

.pr-tab-active {
  color: var(--chrome-accent) !important;
  border-bottom-color: var(--chrome-accent);
}

/* ── Search ── */

.pr-search-row {
  padding: 10px 18px 6px;
  flex-shrink: 0;
}

.pr-search {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 204, 204, 0.18);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.82);
  font: 11px var(--font-mono);
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
}

.pr-search:focus { border-color: rgba(0, 204, 204, 0.45); }

.pr-search::placeholder { color: rgba(255, 255, 255, 0.25); }

/* ── Category chips ── */

.pr-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 18px 8px;
  flex-shrink: 0;
}

.pr-cat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.45);
  font: 9px var(--font-mono);
  letter-spacing: .08em;
  padding: 3px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.pr-cat:hover {
  background: rgba(0, 204, 204, 0.08);
  border-color: rgba(0, 204, 204, 0.30);
  color: rgba(0, 204, 204, 0.80);
}

.pr-cat-active {
  background: rgba(0, 204, 204, 0.12) !important;
  border-color: rgba(0, 204, 204, 0.45) !important;
  color: var(--chrome-accent) !important;
}

.pr-cat-n {
  font-size: 8px;
  opacity: 0.65;
}

/* ── Plugin list ── */

.pr-list {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 4px 18px 14px;
}

.pr-list::-webkit-scrollbar { width: 5px; }
.pr-list::-webkit-scrollbar-track { background: transparent; }
.pr-list::-webkit-scrollbar-thumb { background: rgba(0, 204, 204, 0.20); border-radius: 3px; }

.pr-empty {
  font: 11px var(--font-mono);
  color: rgba(255, 255, 255, 0.28);
  text-align: center;
  padding: 32px 0;
  letter-spacing: .06em;
}

/* ── Plugin card ── */

.pr-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 6px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.025);
  transition: background 0.12s, border-color 0.12s;
}

.pr-card:hover {
  background: rgba(0, 204, 204, 0.05);
  border-color: rgba(0, 204, 204, 0.18);
}

.pr-card-icon {
  font-size: 18px;
  line-height: 1;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  padding-top: 2px;
  opacity: 0.85;
}

.pr-card-body {
  flex: 1 1 0;
  min-width: 0;
}

.pr-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}

.pr-card-name {
  font: 600 11px var(--font-mono);
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-card-desc {
  font: 10px var(--font-ui);
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
  margin-bottom: 6px;
}

.pr-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.pr-card-cat {
  font: 8px var(--font-mono);
  letter-spacing: .10em;
  color: rgba(0, 204, 204, 0.65);
  background: rgba(0, 204, 204, 0.08);
  border: 1px solid rgba(0, 204, 204, 0.18);
  border-radius: 3px;
  padding: 1px 6px;
}

.pr-card-src {
  font: 9px var(--font-mono);
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: .04em;
}

/* ── Badges ── */

.pr-badge {
  font: 700 8px var(--font-mono);
  letter-spacing: .12em;
  border-radius: 3px;
  padding: 2px 5px;
  flex-shrink: 0;
}

.pr-badge-official {
  color: rgba(0, 204, 204, 0.85);
  background: rgba(0, 204, 204, 0.10);
  border: 1px solid rgba(0, 204, 204, 0.25);
}

.pr-badge-local {
  color: rgba(0, 255, 102, 0.80);
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.22);
}

.pr-badge-experimental {
  color: rgba(255, 160, 0, 0.85);
  background: rgba(255, 160, 0, 0.08);
  border: 1px solid rgba(255, 160, 0, 0.22);
}

/* ── Key-required tag ── */

.pr-tag {
  font: 700 7px var(--font-mono);
  letter-spacing: .10em;
  border-radius: 3px;
  padding: 2px 5px;
}

.pr-tag-key {
  color: rgba(255, 160, 0, 0.75);
  background: rgba(255, 160, 0, 0.07);
  border: 1px solid rgba(255, 160, 0, 0.18);
}

/* ── Card action area ── */

.pr-card-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-top: 2px;
}

.pr-btn-enable {
  background: rgba(0, 204, 204, 0.10);
  border: 1px solid rgba(0, 204, 204, 0.30);
  border-radius: 4px;
  color: var(--chrome-accent);
  font: 700 9px var(--font-mono);
  letter-spacing: .10em;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}

.pr-btn-enable:hover {
  background: rgba(0, 204, 204, 0.18);
  border-color: rgba(0, 204, 204, 0.55);
}

.pr-installed-badge {
  font: 700 9px var(--font-mono);
  letter-spacing: .10em;
  color: rgba(255, 255, 255, 0.28);
  padding: 5px 4px;
  white-space: nowrap;
}

.pr-btn-active {
  font: 700 9px var(--font-mono);
  letter-spacing: .10em;
  color: var(--chrome-accent);
  background: rgba(0, 204, 204, 0.08);
  border: 1px solid rgba(0, 204, 204, 0.25);
  border-radius: 4px;
  padding: 5px 10px;
  white-space: nowrap;
  cursor: default;
}

.pr-btn-locked {
  font: 700 9px var(--font-mono);
  letter-spacing: .10em;
  color: rgba(255, 80, 60, 0.60);
  background: rgba(255, 60, 40, 0.07);
  border: 1px solid rgba(255, 60, 40, 0.20);
  border-radius: 4px;
  padding: 5px 10px;
  white-space: nowrap;
  cursor: not-allowed;
}

/* Role-based restriction (Phase 1 hardening) — distinct from LOCKED (tenant entitlement).
   LOCKED = tenant has disabled the plugin.
   RESTRICTED = user's role does not permit this action (admin-only in SaaS). */
.pr-badge-restricted {
  font: 700 9px var(--font-mono);
  letter-spacing: .10em;
  color: rgba(255, 180, 40, 0.65);
  background: rgba(255, 160, 0, 0.07);
  border: 1px solid rgba(255, 160, 0, 0.22);
  border-radius: 4px;
  padding: 5px 10px;
  white-space: nowrap;
  cursor: not-allowed;
}

/* Subscription-expired badge (B4) — billing-managed lock + subscription past grace.
   Distinct from LOCKED (red, admin manual) and RESTRICTED (amber, role).
   Orange tint — between the two, conveys "was available, now unavailable due to billing". */
.pr-badge-expired {
  font: 700 9px var(--font-mono);
  letter-spacing: .10em;
  color: rgba(255, 140, 40, 0.70);
  background: rgba(255, 120, 20, 0.08);
  border: 1px solid rgba(255, 120, 20, 0.22);
  border-radius: 4px;
  padding: 5px 10px;
  white-space: nowrap;
  cursor: not-allowed;
}

/* ─── Plugin registry — marketplace packages (M3) ───────────────────────────
   .pr-badge-marketplace  — badge for non-bundled marketplace entries
   .pr-btn-install        — INSTALL action button (pre-install state)
   ─────────────────────────────────────────────────────────────────────────── */

.pr-badge-marketplace {
  background: rgba(0, 180, 255, 0.10);
  border: 1px solid rgba(0, 180, 255, 0.30);
  color: rgba(0, 210, 255, 0.85);
}

.pr-btn-install {
  font: 700 9px var(--font-mono);
  letter-spacing: .10em;
  color: rgba(0, 210, 200, 0.90);
  background: rgba(0, 200, 190, 0.08);
  border: 1px solid rgba(0, 200, 190, 0.28);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.pr-btn-install:hover {
  background: rgba(0, 200, 190, 0.18);
  color: rgba(0, 240, 220, 1.0);
}

.pr-btn-install:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ─── Plugin registry — data-pack import (M4C) ─────────────────────────────
   .pr-btn-import         — IMPORT action button for installed data-packs
   .pr-btn-import-disabled — disabled state when archive is off
   .pr-import-status      — per-card import result line (inside pr-card-body)
   .pr-import-status-error — error variant
   ─────────────────────────────────────────────────────────────────────────── */

.pr-btn-import {
  font: 700 9px var(--font-mono);
  letter-spacing: .10em;
  color: rgba(80, 220, 140, 0.90);
  background: rgba(60, 200, 120, 0.08);
  border: 1px solid rgba(60, 200, 120, 0.28);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.pr-btn-import:hover {
  background: rgba(60, 200, 120, 0.18);
  color: rgba(80, 255, 160, 1.0);
}

.pr-btn-import:disabled,
.pr-btn-import-disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.pr-import-status {
  font: 10px var(--font-mono);
  color: rgba(0, 210, 140, 0.85);
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  line-height: 1.35;
  word-break: break-word;
}

.pr-import-status-error {
  color: rgba(255, 100, 80, 0.85);
}

/* ─── Plugin registry — data-pack type tag ──────────────────────────────────
   .pr-tag-datapack — shown in card meta row for type=data-pack marketplace entries
   ─────────────────────────────────────────────────────────────────────────── */

.pr-tag-datapack {
  color: rgba(0, 180, 255, 0.75);
  background: rgba(0, 180, 255, 0.07);
  border: 1px solid rgba(0, 180, 255, 0.18);
}

/* ─── Plugin registry — remove installed package (Marketplace Polish) ───────
   .pr-btn-remove — muted destructive button; appears below primary action
                    for locally installed marketplace packages only.
                    Never shown for bundled first-party plugins.
   ─────────────────────────────────────────────────────────────────────────── */

.pr-btn-remove {
  font: 700 8px var(--font-mono);
  letter-spacing: .10em;
  color: rgba(220, 60, 50, 0.65);
  background: rgba(200, 40, 30, 0.06);
  border: 1px solid rgba(200, 40, 30, 0.20);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.pr-btn-remove:hover {
  background: rgba(200, 40, 30, 0.15);
  color: rgba(255, 80, 60, 0.90);
}

.pr-btn-remove:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ─── Admin plugin entitlements ─────────────────────────────────────────────
   Prefix: .sa-plugins-
   ─────────────────────────────────────────────────────────────────────────── */

.sa-plugins-empty {
  color: rgba(255, 255, 255, 0.30);
  font: 11px var(--font-mono);
  padding: 10px 0;
  text-align: center;
}

.sa-plugins-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* name + category stacked in the first grid cell */
.sa-plugins-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sa-plugins-name {
  font: 12px var(--font-ui);
  color: rgba(255, 255, 255, 0.78);
  overflow-wrap: break-word;
  word-break: break-word;
}

.sa-plugins-cat {
  font: 10px var(--font-mono);
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: .05em;
  white-space: nowrap;
}

.sa-plugins-state {
  font: 700 9px var(--font-mono);
  letter-spacing: .08em;
  white-space: nowrap;
}

.sa-plugins-on  { color: var(--chrome-accent); }
.sa-plugins-off { color: rgba(255, 80, 60, 0.70); }

.sa-plugins-roles {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}

/* tighter padding on the per-row toggle to keep the button column compact */
.sa-plugins-toggle {
  padding: 5px 10px !important;
  min-width: 54px;
}

.sa-plugins-role-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font: 700 8px var(--font-mono);
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.sa-plugins-role-label input[type="checkbox"] {
  accent-color: var(--chrome-accent);
  cursor: pointer;
  width: 11px;
  height: 11px;
  margin: 0;
}

.sa-plugins-role-label input[type="checkbox"]:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Manage Users admin panel ─────────────────────────────────────────────────
   Prefix: .sa-users-
   ──────────────────────────────────────────────────────────────────────────── */

.sa-users-list {
  margin-bottom: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.sa-users-empty {
  color: rgba(200, 210, 220, 0.45);
  font-size: 11px;
  padding: 8px 0;
}

.sa-users-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 180, 200, 0.08);
  flex-wrap: wrap;
}

.sa-users-email {
  flex: 1;
  min-width: 120px;
  font-size: 11px;
  color: rgba(200, 210, 230, 0.90);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-users-email em {
  color: rgba(200, 210, 230, 0.45);
  font-style: normal;
  font-size: 10px;
}

.sa-users-role {
  font-size: 10px;
  color: rgba(200, 210, 230, 0.55);
  min-width: 42px;
}

.sa-users-status {
  font-size: 10px;
  min-width: 52px;
  text-align: center;
}

.sa-users-status-active   { color: var(--chrome-accent); }
.sa-users-status-disabled { color: rgba(255, 80, 60, 0.70); }

.sa-users-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.sa-users-btn-role,
.sa-users-btn-pwd,
.sa-users-btn-dis,
.sa-users-btn-enable {
  font-size: 9px;
  padding: 2px 7px;
}

.sa-users-btn-dis {
  color: rgba(255, 120, 80, 0.85);
  border-color: rgba(255, 120, 80, 0.30);
}

.sa-users-btn-dis:hover {
  background: rgba(255, 80, 60, 0.12);
  color: rgba(255, 140, 100, 1.00);
}

.sa-users-btn-dis:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sa-users-btn-enable {
  color: var(--chrome-accent);
  border-color: rgba(0, 180, 200, 0.30);
}

.sa-users-create {
  border-top: 1px solid rgba(0, 180, 200, 0.15);
  padding-top: 10px;
  margin-top: 4px;
}

.sa-users-select {
  width: 100%;
  background: rgba(10, 20, 30, 0.80);
  color: rgba(200, 210, 230, 0.90);
  border: 1px solid rgba(0, 180, 200, 0.25);
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
}

/* Inline role select in user rows */
.sa-users-role-select {
  background: rgba(10, 20, 30, 0.80);
  color: rgba(200, 210, 230, 0.90);
  border: 1px solid rgba(0, 180, 200, 0.20);
  border-radius: 2px;
  padding: 2px 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  cursor: pointer;
  max-width: 90px;
}

/* ── Manage Roles admin panel ─────────────────────────────────────────────────
   Prefix: .sa-roles-
   ──────────────────────────────────────────────────────────────────────────── */

.sa-roles-list {
  margin-bottom: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.sa-roles-empty {
  color: rgba(200, 210, 220, 0.45);
  font-size: 11px;
  padding: 8px 0;
}

.sa-roles-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 180, 200, 0.08);
}

.sa-roles-slug {
  flex: 1;
  font-size: 11px;
  font-family: var(--font-mono);
  color: rgba(200, 210, 230, 0.88);
}

.sa-roles-label {
  font-size: 10px;
  color: rgba(200, 210, 230, 0.50);
  min-width: 60px;
}

.sa-roles-builtin {
  font-size: 8px;
  font-family: var(--font-mono);
  color: rgba(0, 200, 200, 0.55);
  letter-spacing: .06em;
  margin-left: 4px;
}

.sa-roles-create {
  border-top: 1px solid rgba(0, 180, 200, 0.15);
  padding-top: 10px;
  margin-top: 4px;
}

/* ── Account Self-Service (Phase 4) ─────────────────────────────────────────
   Prefix: .sa-acc-
*/
.sa-acc-info { margin-bottom: 10px; }

.sa-acc-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.sa-acc-key {
  color: rgba(200, 220, 255, 0.45);
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  min-width: 58px;
  flex-shrink: 0;
}

.sa-acc-val {
  color: rgba(200, 220, 255, 0.80);
  font-size: 11px;
  font-family: var(--font-mono);
}

.sa-acc-role-admin  { color: var(--chrome-accent); }
.sa-acc-role-member { color: rgba(200, 220, 255, 0.60); }
.sa-acc-active      { color: var(--chrome-accent); }
.sa-acc-disabled    { color: rgba(255, 80, 60, 0.70); }
.sa-acc-err         { color: rgba(255, 80, 60, 0.70); font-size: 11px; }

.sa-acc-changepwd {
  margin-top: 12px;
  border-top: 1px solid rgba(0, 204, 204, 0.10);
  padding-top: 10px;
}

.sa-acc-section-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(200, 220, 255, 0.38);
  margin-bottom: 8px;
}

.sa-acc-btn-others {
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.72;
}

.sa-acc-btn-others:hover { opacity: 1.0; }

.sa-acc-msg {
  display: block;
  font-size: 11px;
  margin-top: 6px;
  padding: 3px 0;
  color: var(--chrome-accent);
}

.sa-acc-msg-error { color: rgba(255, 90, 60, 0.90); }


/* ── Billing / Subscription Admin Panel ───────────────────────────────────────
   Prefix: .sa-billing-
*/

/* Alert box — past-due / expired / canceled state warning at top of section */
.sa-billing-alert {
  font-size: 10px;
  padding: 7px 10px;
  border-radius: 2px;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.sa-billing-alert-warn {
  color: rgba(255, 165, 0, 0.92);
  background: rgba(255, 140, 0, 0.09);
  border-left: 2px solid rgba(255, 140, 0, 0.55);
}
.sa-billing-alert-error {
  color: rgba(255, 100, 80, 0.92);
  background: rgba(255, 60, 60, 0.09);
  border-left: 2px solid rgba(255, 70, 60, 0.55);
}

.sa-billing-empty {
  color: rgba(200, 220, 255, 0.40);
  font-size: 11px;
  padding: 6px 0;
}

.sa-billing-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.sa-billing-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sa-billing-key {
  color: rgba(200, 220, 255, 0.45);
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  min-width: 100px;
  flex-shrink: 0;
}

.sa-billing-val {
  color: rgba(200, 220, 255, 0.80);
  font-size: 11px;
  font-family: var(--font-mono);
}

/* Provider tag spans injected inside .sa-billing-val */
.sa-billing-tag-mock    { color: rgba(255, 200, 80, 0.75);  font-size: 10px; }
.sa-billing-tag-sandbox { color: rgba(190, 170, 255, 0.65); font-size: 10px; }
.sa-billing-tag-uncfg   { color: rgba(200, 220, 255, 0.30); }

.sa-billing-status-active   { color: var(--chrome-accent); }
.sa-billing-status-trialing { color: var(--chrome-accent); }
.sa-billing-status-pastdue  { color: rgba(255, 170, 0, 0.85); }
.sa-billing-status-canceled { color: rgba(255, 80, 60, 0.70); }
.sa-billing-status-paused   { color: rgba(200, 220, 255, 0.45); }

.sa-billing-note {
  font-size: 10px;
  color: rgba(200, 220, 255, 0.38);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* Webhook health rows */
.sa-billing-webhook-warn {
  font-size: 10px;
  color: rgba(255, 140, 0, 0.90);
  background: rgba(255, 140, 0, 0.07);
  border-left: 2px solid rgba(255, 140, 0, 0.55);
  border-radius: 0 2px 2px 0;
  padding: 4px 7px;
  margin: 8px 0 6px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  word-break: break-word;
}
.sa-billing-webhook-ok {
  font-size: 10px;
  color: rgba(0, 200, 170, 0.65);
  margin: 6px 0 4px;
  letter-spacing: 0.02em;
}

.sa-billing-plan-header {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(200, 220, 255, 0.38);
  margin: 14px 0 8px;
}

.sa-billing-plan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 204, 204, 0.06);
}

/* Info column replaces separate name + users spans */
.sa-billing-plan-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}

.sa-billing-plan-name {
  font-size: 11px;
  color: rgba(200, 220, 255, 0.80);
}

.sa-billing-plan-meta {
  font-size: 10px;
  color: rgba(200, 220, 255, 0.35);
}

/* Keep .sa-billing-plan-users for any legacy references */
.sa-billing-plan-users {
  font-size: 10px;
  color: rgba(200, 220, 255, 0.38);
  flex: 1;
}

.sa-billing-plan-current {
  font-size: 9px;
  color: var(--chrome-accent);
  letter-spacing: 0.06em;
  border: 1px solid rgba(0, 204, 204, 0.35);
  padding: 1px 5px;
  border-radius: 2px;
  flex-shrink: 0;
}

.sa-billing-btn-checkout {
  font-size: 10px;
  padding: 3px 8px;
  min-width: 120px;
  text-align: center;
  flex-shrink: 0;
}

/* Portal section — now wraps an actions row + note */
.sa-billing-portal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 204, 204, 0.10);
}

/* Actions row: Manage Billing + View Invoices + Refresh side by side */
.sa-billing-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sa-billing-portal-note {
  font-size: 10px;
  color: rgba(200, 220, 255, 0.32);
}

.sa-billing-btn-portal {
  font-size: 10px;
  padding: 3px 8px;
  flex-shrink: 0;
}

.sa-billing-btn-invoices {
  font-size: 10px;
  padding: 3px 8px;
  flex-shrink: 0;
}

.sa-billing-msg {
  display: block;
  font-size: 11px;
  margin-top: 6px;
  padding: 3px 0;
  color: var(--chrome-accent);
  word-break: break-all;
}

.sa-billing-msg-error { color: rgba(255, 90, 60, 0.90); }

/* ── ENTITY HOVER POPUP ──────────────────────────────────── */
.wv-hover-popup {
  position: fixed;
  z-index: 9500;
  pointer-events: none;
  background: rgba(3, 8, 14, 0.88);
  border: 1px solid rgba(0, 204, 204, 0.28);
  border-radius: 4px;
  padding: 5px 9px;
  max-width: 200px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.wv-hover-type {
  font-size: 8px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--chrome-accent);
  opacity: 0.7;
  margin-bottom: 2px;
}

.wv-hover-line {
  font-size: 11px;
  font-family: var(--font-ui);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Run Detect: inherits .ai-quick-btn styles by default; accent only while firing */
.ai-quick-detect.is-firing {
  background: rgba(0, 204, 204, 0.18) !important;
  border-color: rgba(0, 204, 204, 0.5) !important;
  color: var(--chrome-accent) !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}