:root {
  /* === Tactical Glass Command UI ========================================
     Base tokens retuned toward blue glass (every panel reads var(--panel) /
     var(--line) / var(--blue), so shifting the VALUES recolours the whole UI
     at once). The warm sand accent (#c8a96a) is RETIRED — it is not to come
     back anywhere, in any opacity. --accent is the one highlight colour and it
     is blue; the working language is blue + thin cool hairlines. */
  --bg: #0b0f15;
  --panel: rgba(18, 26, 40, 0.84);
  --panel-strong: rgba(22, 31, 48, 0.94);
  --line: rgba(120, 184, 255, 0.18);
  --text: #e4eaf2;
  --muted: #8fa0b4;
  --accent: #6eb0ff;
  --blue: #5e9fe6;
  --green: #7aa06a;
  --red: #bd6759;
  --shadow: rgba(0, 0, 0, 0.42);

  /* Blue ramp — elite azure for primary actions, lighter stops for text/edges. */
  --blue-500: #3d8bff;
  --blue-400: #6eb0ff;
  --blue-200: #9fccff;
  --ink: #eaf4ff;               /* text on blue fills */

  /* Edges, glass gradients and glow — the command-surface kit. */
  --edge: rgba(120, 184, 255, 0.34);
  --edge-soft: rgba(120, 184, 255, 0.18);
  --glass: linear-gradient(180deg, rgba(20, 30, 46, 0.9), rgba(12, 18, 29, 0.86));
  --glass-strong: linear-gradient(180deg, rgba(24, 36, 56, 0.95), rgba(13, 20, 32, 0.92));
  --fill-blue: linear-gradient(180deg, rgba(61, 139, 255, 0.34), rgba(61, 139, 255, 0.16));
  --glow: 0 0 14px rgba(61, 139, 255, 0.45);
  --glow-soft: 0 0 0 1px rgba(120, 184, 255, 0.22), 0 0 12px rgba(61, 139, 255, 0.3);
  --glow-inset: inset 0 0 10px rgba(61, 139, 255, 0.28);

  /* Status hues — used ONLY as small dots / readiness bars, never panel fills.
     --warn is orange, deliberately clear of the retired sand tone. */
  --ok: #6fcf86;
  --warn: #e0913f;
  --bad: #d9655a;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(72, 139, 201, 0.72) rgba(3, 8, 14, 0.24);
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: rgba(3, 8, 14, 0.24);
}

*::-webkit-scrollbar-thumb {
  min-height: 24px;
  background: rgba(72, 139, 201, 0.68);
  border: 1px solid rgba(7, 15, 24, 0.55);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(94, 159, 230, 0.88);
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

canvas {
  display: block;
}

button,
select,
input {
  font: inherit;
}

.map-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  filter: brightness(1) contrast(1) saturate(1);
  transition: filter 1.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: filter;
}

/* Ease the world back a little while a raid is up so the chevrons and craters
   carry against satellite imagery. The old value of 0.52 hid the map entirely;
   this is a nudge, and the panel can switch it off. */
body.launch-control-live .map-canvas {
  filter: brightness(0.8) contrast(1.06) saturate(0.9);
}

@media (prefers-reduced-motion: reduce) {
  .map-canvas {
    transition: none;
  }
}

.strategy-shell {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.top-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: grid;
  grid-template-columns: minmax(390px, 1.35fr) minmax(320px, 1fr) 96px;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(12, 18, 28, 0.94), rgba(11, 16, 26, 0.74));
  border-bottom: 1px solid var(--edge-soft);
  box-shadow: 0 8px 24px var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  min-width: 0;
}

.strategy-shell.has-long-brand .top-status {
  grid-template-columns: minmax(360px, 1.45fr) minmax(280px, 1fr) 96px;
}

.brand-mark {
  width: 24px;
  height: 24px;
  border: 1px solid var(--accent);
  background:
    linear-gradient(135deg, rgba(110, 176, 255, 0.9), rgba(127, 167, 199, 0.35)),
    #1d2228;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.28);
}

.brand-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.brand-main {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-sub {
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.status-strip {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.status-strip strong {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* === Altitude ruler ====================================================
   Vertical scale anchored to the right edge of .side-panel (left=14px,
   width=260px → ruler starts at left=284px). Logarithmic ticks at every
   LOD-zone boundary; a gold dot slides up/down to mark where the camera
   currently is. Visualises exactly what altMinZoom is doing under the hood.
*/
.altitude-ruler {
  position: absolute;
  left: 284px;
  top: 64px;
  bottom: 70px;       /* keep clear of the bottom mode-dock */
  width: 96px;
  display: grid;
  grid-template-rows: auto 1fr;
  /* Passive readout: never intercepts pointer input and sits BENEATH every
     panel (negative z within the shell's stacking context) so any panel that
     reaches this strip simply covers it. Still paints above the map canvas
     because the whole shell stacks over it. No longer an always-on-top,
     click-blocking element. */
  pointer-events: none;
  z-index: -1;
  /* No panel backing ("подложка") — only the ruler labels + tick marks float
     over the globe. Text-shadows below keep them legible without a fill. */
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 10px;
  color: var(--muted);
}

.alt-ruler-head {
  min-height: 27px;
  padding: 5px 0 3px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.7);
}

.alt-ruler-track {
  position: relative;
  margin: 8px 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  /* tick marks position from `bottom: %` — flex/absolute happy */
}

.alt-tick {
  position: absolute;
  left: 0;
  transform: translateY(50%);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.alt-tick-line {
  display: inline-block;
  width: 8px;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
}

.alt-tick-ceiling .alt-tick-line { background: rgba(110, 176, 255, 0.5); }

.alt-tick-label {
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.8);
}

.alt-tick-label em {
  font-style: normal;
  color: rgba(110, 176, 255, 0.7);
  margin-left: 2px;
}

/* Marker — slides up/down as camera moves. Dot + horizontal line that
   crosses the entire track so the user can read off the value precisely. */
.alt-ruler-marker {
  position: absolute;
  left: 0;
  transform: translateY(50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  transition: bottom 0.18s ease-out;     /* smoothes marker travel */
}

.alt-ruler-marker-dot {
  width: 10px;
  height: 10px;
  background: var(--accent);
  border: 2px solid #171512;
  border-radius: 50%;
  margin-left: -5px;
  box-shadow: 0 0 8px rgba(110, 176, 255, 0.7);
}

.alt-ruler-marker-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  margin-left: 4px;
}

/* Current range replaces the old ALT caption at the top of the ruler. */
.alt-ruler-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.7);
}

.clock-readout {
  justify-self: end;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.workspace-dock {
  position: absolute;
  top: 64px;
  left: 50%;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 5px;
  width: min(440px, calc(100vw - 860px));
  min-width: 340px;
  padding: 5px;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(20, 30, 46, 0.9), rgba(13, 20, 32, 0.88));
  border: 1px solid var(--edge-soft);
  box-shadow: 0 18px 40px var(--shadow);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.workspace-button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(220, 213, 196, 0.12);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-button::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 3px;
  height: 2px;
  background: transparent;
}

.workspace-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-button em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.workspace-button:hover {
  border-color: var(--edge);
  background: rgba(61, 139, 255, 0.1);
}

.workspace-button.active {
  color: var(--ink);
  background: var(--fill-blue);
  border-color: rgba(120, 184, 255, 0.7);
  box-shadow: var(--glow);
}

.workspace-button.active::before {
  background: var(--blue-200);
  box-shadow: 0 0 8px var(--blue-400);
}

.workspace-button.active em {
  color: rgba(220, 235, 255, 0.7);
}

.workspace-settings-button {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  padding: 0;
  color: rgba(178, 199, 224, 0.7);
  background: rgba(12, 20, 32, 0.88);
  border: 1px solid rgba(120, 184, 255, 0.25);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition:
    top 0.18s ease,
    right 0.18s ease,
    width 0.18s ease,
    height 0.18s ease,
    border-radius 0.18s ease,
    color 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.workspace-settings-button::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #79b7ff;
  box-shadow: 0 0 7px rgba(61, 139, 255, 0.85);
  transition: opacity 0.12s ease, transform 0.16s ease;
}

.workspace-settings-button svg {
  position: absolute;
  opacity: 0;
  transform: scale(0.45) rotate(-12deg);
  transition: opacity 0.14s ease 0.03s, transform 0.18s ease;
}

.workspace-settings-button:hover,
.workspace-settings-button:focus-visible,
.workspace-settings-button.active {
  top: -11px;
  right: -11px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #8bc3ff;
  border-color: rgba(110, 176, 255, 0.62);
  background: rgba(42, 99, 162, 0.28);
  box-shadow: 0 0 12px rgba(61, 139, 255, 0.34);
}

.workspace-settings-button:hover::before,
.workspace-settings-button:focus-visible::before,
.workspace-settings-button.active::before { opacity: 0; transform: scale(0.3); }

.workspace-settings-button:hover svg,
.workspace-settings-button:focus-visible svg,
.workspace-settings-button.active svg { opacity: 1; transform: scale(1) rotate(0); }

.side-panel,
.right-panel {
  position: absolute;
  top: 64px;
  width: 260px;
  max-height: calc(100vh - 146px);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px var(--shadow);
  backdrop-filter: blur(10px);
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.side-panel {
  left: 14px;
  border-left: 2px solid rgba(61, 139, 255, 0.7);   /* assets rail — blue spine */
}

.right-panel {
  right: 14px;
  border-right: 2px solid rgba(110, 176, 255, 0.55); /* instruments rail — gold spine */
}

.panel-stack-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  background:
    linear-gradient(180deg, rgba(26, 38, 58, 0.96), rgba(16, 24, 38, 0.92));
  border-bottom: 1px solid var(--edge-soft);
}

.panel-stack-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.panel-stack-head strong {
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.panel-section {
  min-width: 0;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.panel-section[data-workspaces] {
  max-height: 1900px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    padding 0.24s ease,
    border-color 0.24s ease,
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.strategy-shell[data-workspace="tactical"] .panel-section[data-workspaces]:not([data-workspaces~="tactical"]),
.strategy-shell[data-workspace="globe"] .panel-section[data-workspaces]:not([data-workspaces~="globe"]),
.strategy-shell[data-workspace="data"] .panel-section[data-workspaces]:not([data-workspaces~="data"]),
.strategy-shell[data-workspace="stream"] .panel-section[data-workspaces]:not([data-workspaces~="stream"]) {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
  border-bottom-color: transparent;
  transform: translateX(-12px);
}

.strategy-shell[data-workspace="tactical"] .right-panel .panel-section[data-workspaces]:not([data-workspaces~="tactical"]),
.strategy-shell[data-workspace="globe"] .right-panel .panel-section[data-workspaces]:not([data-workspaces~="globe"]),
.strategy-shell[data-workspace="data"] .right-panel .panel-section[data-workspaces]:not([data-workspaces~="data"]),
.strategy-shell[data-workspace="stream"] .right-panel .panel-section[data-workspaces]:not([data-workspaces~="stream"]) {
  transform: translateX(12px);
}

.workspace-switching .side-panel {
  animation: ui-panel-left-cycle 0.42s ease both;
}

.workspace-switching .right-panel {
  animation: ui-panel-right-cycle 0.42s ease both;
}

@keyframes ui-panel-left-cycle {
  0% { transform: translateX(0); }
  42% { transform: translateX(-112%); opacity: 0.3; }
  58% { transform: translateX(-112%); opacity: 0.3; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes ui-panel-right-cycle {
  0% { transform: translateX(0); }
  42% { transform: translateX(112%); opacity: 0.3; }
  58% { transform: translateX(112%); opacity: 0.3; }
  100% { transform: translateX(0); opacity: 1; }
}

.panel-section:last-child {
  border-bottom: 0;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--blue-200);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Leading "command tick" — a small glowing bar that gives every section header
   a tactical read and (via the rail-scoped overrides below) tells assets from
   instruments at a glance. */
.panel-title::before {
  content: "";
  flex: none;
  width: 3px;
  height: 12px;
  background: var(--blue-500);
  box-shadow: 0 0 8px var(--blue-500);
}
/* Right rail = instruments → gold tick + gold-warm title. Left rail keeps blue. */
.right-panel .panel-title { color: #bcd8f5; }
.right-panel .panel-title::before {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(110, 176, 255, 0.6);
}

/* One plain sentence under a section title saying what the section is for.
   Cheaper than a tooltip and it survives being ignored. */
.panel-lede {
  margin: -3px 0 9px;
  color: rgba(200, 214, 232, 0.5);
  font-size: 10.5px;
  line-height: 1.45;
}

.panel-subtitle {
  margin: 10px 0 6px;
  color: rgba(180, 205, 235, 0.55);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-subtitle:first-of-type {
  margin-top: 0;
}

.panel-value {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.muted {
  color: var(--muted);
}

.layer-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.layer-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
}

.layer-row input {
  accent-color: var(--blue);
}

.layer-opacity {
  color: var(--muted);
  text-align: right;
  font-size: 11px;
}

/* Imagery source switcher — sibling of mode-button styling but compact
   enough to fit 3-4 provider buttons in the side panel without wrapping. */
.imagery-source {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.imagery-button {
  flex: 1 1 auto;
  min-width: 64px;
  height: 30px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.imagery-button:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.08);
}

.imagery-button.active {
  color: #171512;
  background: var(--accent);
}

.imagery-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 4px;
  font-size: 8px;
  letter-spacing: 0.06em;
  background: rgba(214, 166, 71, 0.15);
  border: 1px solid rgba(214, 166, 71, 0.4);
  color: #d6a647;
  vertical-align: middle;
}

.imagery-button.active .imagery-badge {
  background: rgba(23, 21, 18, 0.15);
  border-color: rgba(23, 21, 18, 0.3);
  color: #171512;
}

.protomaps-mode-panel {
  display: none;
  margin-top: 10px;
}

.mode-logistics .protomaps-mode-panel {
  display: block;
}

.protomaps-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(110, 176, 255, 0.22);
}

.protomaps-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.protomaps-layer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.protomaps-style-button {
  min-width: 0;
  height: 30px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(220, 213, 196, 0.12);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.protomaps-style-button:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.08);
}

.protomaps-style-button.active {
  color: #171512;
  background: var(--accent);
  border-color: transparent;
}

.protomaps-layer-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  cursor: pointer;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(220, 213, 196, 0.12);
  font-size: 11px;
  font-weight: 700;
}

.protomaps-layer-button:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.08);
}

.protomaps-layer-button.active {
  border-color: rgba(110, 176, 255, 0.46);
}

.protomaps-layer-state {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.protomaps-layer-button.active .protomaps-layer-state {
  color: var(--accent);
}

.protomaps-note {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.protomaps-orb {
  position: absolute;
  left: 50%;
  bottom: 74px;
  z-index: 34;
  display: none;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  pointer-events: auto;
}

.mode-logistics .protomaps-orb {
  display: block;
}

.protomaps-orb-toggle,
.protomaps-orb .proto-orb-button {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text);
  background: rgba(18, 20, 22, 0.82);
  border: 1px solid rgba(220, 213, 196, 0.22);
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.protomaps-orb-toggle {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.protomaps-orb-toggle:hover,
.protomaps-orb:focus-within .protomaps-orb-toggle {
  color: #171512;
  background: var(--accent);
  border-color: transparent;
}

.protomaps-orb-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(280px, calc(100vw - 32px));
  height: 160px;
  opacity: 0;
  transform: translateX(-50%) scale(0.96);
  transform-origin: 50% 100%;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.protomaps-orb:hover .protomaps-orb-panel,
.protomaps-orb:focus-within .protomaps-orb-panel {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

.protomaps-orb .protomaps-style-grid,
.protomaps-orb .protomaps-layer-grid {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.protomaps-orb .proto-orb-button {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, 0)
    rotate(var(--angle))
    translateY(calc(-1 * var(--radius)))
    rotate(calc(-1 * var(--angle)))
    scale(0.82);
  transition: opacity 0.16s ease, transform 0.18s ease, border-color 0.16s ease, background 0.16s ease;
}

.protomaps-orb:hover .proto-orb-button,
.protomaps-orb:focus-within .proto-orb-button {
  opacity: 1;
  pointer-events: auto;
  transform:
    translate(-50%, 0)
    rotate(var(--angle))
    translateY(calc(-1 * var(--radius)))
    rotate(calc(-1 * var(--angle)))
    scale(1);
}

.protomaps-orb .proto-orb-button:hover,
.protomaps-orb .proto-orb-button.active {
  border-color: rgba(110, 176, 255, 0.72);
  background: rgba(110, 176, 255, 0.18);
}

.protomaps-orb .protomaps-style-button.active {
  box-shadow: 0 0 0 2px rgba(110, 176, 255, 0.34), 0 14px 34px rgba(0, 0, 0, 0.35);
}

.protomaps-orb .protomaps-layer-state {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 7px;
  height: 7px;
  overflow: hidden;
  color: transparent;
  background: rgba(220, 213, 196, 0.22);
  border-radius: 50%;
}

.protomaps-orb .protomaps-layer-button.active .protomaps-layer-state {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(110, 176, 255, 0.7);
}

.proto-style-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.proto-style-dark .proto-style-swatch {
  background: linear-gradient(135deg, #111719 0 50%, #2a4323 50% 100%);
}

.proto-style-light .proto-style-swatch {
  background: linear-gradient(135deg, #d8d8c8 0 35%, #408449 35% 62%, #cbb258 62% 100%);
}

.proto-style-white .proto-style-swatch {
  background: linear-gradient(135deg, #f5f4ef 0 42%, #7e817e 42% 68%, #2d302f 68% 100%);
}

.proto-style-grayscale .proto-style-swatch {
  background:
    linear-gradient(135deg, transparent 0 43%, #171a19 43% 49%, transparent 49% 100%),
    linear-gradient(45deg, transparent 0 55%, #b48745 55% 61%, transparent 61% 100%),
    linear-gradient(135deg, #bfc5bf 0 40%, #496268 40% 68%, #363b3a 68% 100%);
}

.proto-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.proto-icon::before,
.proto-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.proto-icon-map::before {
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.proto-icon-map::after {
  left: 8px;
  top: 2px;
  width: 2px;
  height: 14px;
  background: currentColor;
  box-shadow: -5px 4px 0 -0.5px currentColor, 5px -4px 0 -0.5px currentColor;
}

.proto-icon-land::before {
  left: 2px;
  top: 9px;
  width: 14px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(35deg);
}

.proto-icon-water::before,
.proto-icon-water::after {
  left: 2px;
  width: 14px;
  height: 7px;
  border-bottom: 2px solid currentColor;
  border-radius: 50%;
}

.proto-icon-water::before { top: 2px; }
.proto-icon-water::after { top: 7px; opacity: 0.65; }

.proto-icon-borders::before {
  inset: 2px;
  border: 2px dashed currentColor;
  border-radius: 50%;
}

.proto-icon-roads::before,
.proto-icon-roads::after {
  top: 1px;
  width: 2px;
  height: 16px;
  background: currentColor;
  border-radius: 2px;
  transform: rotate(25deg);
}

.proto-icon-roads::before { left: 6px; }
.proto-icon-roads::after { left: 11px; opacity: 0.58; }

.proto-icon-buildings::before {
  left: 3px;
  top: 5px;
  width: 5px;
  height: 10px;
  background: currentColor;
  box-shadow: 7px -3px 0 0 currentColor;
}

.map-legend {
  position: absolute;
  left: min(calc(50% + 248px), calc(100vw - 326px));
  bottom: 82px;
  z-index: 33;
  display: none;
  width: min(302px, calc(100vw - 32px));
  color: rgba(244, 239, 226, 0.92);
  pointer-events: auto;
}

.mode-logistics .map-legend {
  display: block;
  animation: mapLegendIn 0.32s ease both;
}

.map-legend-peek,
.map-legend-panel {
  border: 1px solid rgba(220, 213, 196, 0.15);
  background:
    linear-gradient(135deg, rgba(24, 27, 28, 0.64), rgba(18, 19, 20, 0.36)),
    rgba(12, 13, 14, 0.34);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(13px) saturate(1.08);
}

.map-legend-peek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  width: auto;
  padding: 8px 11px;
  color: rgba(244, 239, 226, 0.7);
  border-radius: 999px;
  cursor: default;
  opacity: 0.48;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.map-legend:hover .map-legend-peek,
.map-legend:focus-within .map-legend-peek {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.map-legend-dots {
  display: flex;
  flex: 0 0 auto;
  max-width: 162px;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}

.map-legend-dot,
.map-legend-swatch {
  display: block;
  background: var(--legend-color);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 14px color-mix(in srgb, var(--legend-color) 38%, transparent);
}

.map-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.map-legend-panel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  padding: 11px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.2s ease, border-color 0.18s ease, background 0.18s ease;
}

.map-legend:hover .map-legend-panel,
.map-legend:focus-within .map-legend-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  border-color: rgba(110, 176, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(25, 27, 28, 0.86), rgba(16, 17, 18, 0.68)),
    rgba(10, 10, 10, 0.48);
}

.map-legend-list {
  display: grid;
  gap: 6px;
}

.map-legend-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 27px;
  opacity: 0.92;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.map-legend-row.muted {
  opacity: 0.28;
}

.map-legend-row.muted .map-legend-swatch {
  filter: grayscale(1);
}

.map-legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.map-legend-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.map-legend-copy strong,
.map-legend-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-legend-copy strong {
  color: rgba(248, 244, 232, 0.92);
  font-size: 11px;
  font-weight: 800;
}

.map-legend-copy em {
  color: rgba(232, 225, 210, 0.56);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

@keyframes mapLegendIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .map-legend {
    left: auto;
    right: 16px;
    bottom: 122px;
    width: min(300px, calc(100vw - 32px));
  }
}

/* Overlays panel — opt-in heavy features (3D buildings, future ones). */
.overlays {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.overlay-toggle {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.overlay-toggle input {
  accent-color: var(--blue);
}

.overlay-section-title {
  margin: 4px 0 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.overlay-texture-row {
  display: grid;
  gap: 2px;
}

.overlay-opacity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
}

.overlay-opacity-value {
  font-size: 10px;
  text-align: right;
}

.overlay-state {
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 1px 6px;
}

.overlay-state.on {
  background: rgba(95, 176, 117, 0.18);
  color: #5db075;
  border: 1px solid rgba(95, 176, 117, 0.4);
}

.overlay-state.off {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.overlay-opacity {
  width: 100%;
  margin: 2px 0 6px;
  accent-color: rgba(110, 176, 255, 0.85);
}

.overlay-opacity:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.overlay-hint {
  font-size: 10px;
  line-height: 1.3;
}

/* Quality, loading, the view queue and persistent tile storage are one stream
   pipeline, so the controls share a single container instead of separate cards. */
.stream-control-section .panel-title {
  color: #83caff;
}

.stream-control-section .panel-title::before {
  background: #3d8bff;
  box-shadow: 0 0 10px rgba(61, 139, 255, 0.72);
}

.stream-control-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.stream-control-heading,
.cache-tool-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.stream-control-heading > span,
.cache-tool-heading > span {
  min-width: 0;
  overflow: hidden;
  color: #8dd4ff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.stream-control-heading > strong,
.cache-tool-heading > strong {
  flex: none;
  color: rgba(101, 204, 255, 0.78);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stream-control-divider {
  height: 1px;
  margin: 3px 0 1px;
  background: linear-gradient(90deg, transparent, rgba(61, 139, 255, 0.42) 12%, rgba(101, 204, 255, 0.22) 88%, transparent);
}

.stream-control-card .lod-levels {
  padding-top: 1px;
}

.stream-quota-details {
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid rgba(120, 184, 255, 0.15);
}

.stream-quota-details summary {
  cursor: pointer;
  color: rgba(143, 196, 244, 0.68);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stream-quota-details[open] summary {
  margin-bottom: 8px;
}

.stream-control-section .cache-storage-row {
  border-top-color: rgba(120, 184, 255, 0.15);
}

.stream-control-section .cache-status-row strong {
  color: rgba(220, 237, 252, 0.88);
}

.stream-control-section .cache-status-row button,
.stream-control-section .cache-actions button,
.stream-control-section .lod-btn {
  color: rgba(211, 231, 249, 0.84);
  background: rgba(61, 139, 255, 0.055);
  border-color: rgba(120, 184, 255, 0.18);
}

.stream-control-section .cache-status-row button:hover,
.stream-control-section .cache-actions button:hover,
.stream-control-section .lod-btn:hover {
  color: #eaf6ff;
  background: rgba(61, 139, 255, 0.14);
  border-color: rgba(101, 204, 255, 0.48);
}

.stream-control-section .cache-track {
  background: rgba(61, 139, 255, 0.08);
  border-color: rgba(120, 184, 255, 0.12);
}

.stream-control-section .cache-bar {
  background: linear-gradient(90deg, #3d6dff, #35c8ff);
}

.stream-control-section .lod-debug {
  padding: 7px 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(120, 184, 255, 0.14);
  border-bottom: 1px solid rgba(120, 184, 255, 0.14);
}

.stream-control-section .lod-debug summary {
  color: rgba(191, 218, 243, 0.76);
}

.stream-control-section .lod-header {
  padding: 4px 0;
  background: none;
  border: 0;
}

.stream-control-section .lod-row.lod-active {
  background: rgba(61, 139, 255, 0.13);
  border-color: rgba(101, 204, 255, 0.38);
}

.stream-control-section .lod-bar-fill {
  background: linear-gradient(90deg, rgba(61, 109, 255, 0.72), rgba(53, 200, 255, 0.9));
}

/* Tile Quota — per-provider monthly request counter with status colours.
   Bar colour cascade: green→yellow→orange→red as quota gets eaten. */
.tile-quota {
  display: grid;
  gap: 8px;
}

.quota-month {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quota-row {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 11px;
}

.quota-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.quota-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quota-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.quota-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.quota-bar {
  height: 100%;
  background: #5db075;        /* green = ok */
  transition: width 0.6s ease, background-color 0.3s ease;
}

/* Status colour cascade. Selected on .quota-row so both bar AND label can
   tint together. */
.quota-info    .quota-bar { background: #6fb89a; }   /* still green-ish */
.quota-warning .quota-bar { background: #d6a647; }   /* yellow */
.quota-warning .quota-count { color: #d6a647; }
.quota-critical .quota-bar { background: #d97a3a; } /* orange */
.quota-critical .quota-count { color: #d97a3a; font-weight: 700; }
.quota-blocked .quota-bar { background: #c64545; }  /* red */
.quota-blocked .quota-count { color: #c64545; font-weight: 700; }
.quota-blocked .quota-name { color: #c64545; }

.quota-reset {
  margin-top: 4px;
  height: 26px;
  color: var(--muted);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quota-reset:hover {
  color: var(--text);
  border-color: rgba(110, 176, 255, 0.42);
}

/* Manual-sync row for reconciling our local counter with the provider's
   dashboard value (Mapbox stats lag 24-48h, our counter starts from 0
   each install — paste the dashboard number to align). */
.quota-sync {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.4;
}

.quota-sync-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
}

.quota-sync-input {
  height: 26px;
  padding: 0 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

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

.quota-sync-set {
  height: 26px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(110, 176, 255, 0.08);
  border: 1px solid rgba(110, 176, 255, 0.42);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quota-sync-set:hover {
  background: rgba(110, 176, 255, 0.18);
}

.quota-sync-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 4px;
}

.quota-dashboard {
  height: 26px;
  color: var(--muted);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quota-dashboard:hover {
  color: var(--text);
  border-color: rgba(110, 176, 255, 0.42);
}

.cache-grid {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cache-status-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.cache-status-row strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(232, 225, 210, 0.86);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cache-status-row button {
  height: 24px;
  padding: 0 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cache-tool {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(220, 213, 196, 0.09);
}

.cache-storage-row {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(220, 213, 196, 0.09);
}

.cache-actions.cache-actions-single {
  grid-template-columns: minmax(0, 1fr);
}

.cache-maintenance-actions {
  padding-top: 1px;
}

.cache-card,
.quota-tools,
.lod-debug {
  min-width: 0;
  padding: 7px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(220, 213, 196, 0.1);
}

.cache-card summary,
.quota-tools summary,
.lod-debug summary {
  cursor: pointer;
  color: rgba(232, 225, 210, 0.86);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cache-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.cache-field-grid .cache-field {
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 5px;
}

.cache-nested {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(220, 213, 196, 0.08);
}

.cache-nested .cache-field {
  margin-top: 5px;
}

.project-core,
.plaque-core {
  display: grid;
  gap: 8px;
}

.kml-core {
  display: grid;
  gap: 8px;
}

.project-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.plaque-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plaque-edit-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Centered input modal ("our window") for text / link plaques. */
.tms-input-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  place-items: center;
  background: rgba(6, 9, 12, 0.55);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.tms-input-modal[hidden] {
  display: none;
}

.tms-input-card {
  width: min(380px, 92vw);
  display: grid;
  gap: 10px;
  padding: 14px;
  background: rgba(20, 24, 28, 0.98);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.tms-input-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.tms-input-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tms-input-x {
  width: 26px;
  height: 26px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.tms-input-x:hover {
  color: var(--text);
  border-color: rgba(110, 176, 255, 0.5);
}

.tms-input-body {
  display: grid;
  gap: 8px;
}

.tms-input-field {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tms-input-field input {
  height: 32px;
  min-width: 0;
  padding: 0 9px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(220, 213, 196, 0.18);
  font-size: 12px;
}

.tms-input-field input:focus {
  outline: none;
  border-color: rgba(110, 176, 255, 0.6);
}

.tms-input-primary {
  height: 34px;
  color: #101317;
  background: linear-gradient(180deg, #f2d894, #6eb0ff);
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tms-input-hint {
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

/* === Snapshot / high-res screenshot panel ============================== */
.snapshot-launcher { font-size: 11px; }   /* inherits .observer-launcher look */

.snap-card {
  width: min(940px, 96vw);
  max-height: 94vh;
  gap: 16px;
  padding: 18px;
  background:
    radial-gradient(circle at 78% 12%, rgba(72, 142, 205, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(17, 25, 33, 0.985), rgba(9, 15, 20, 0.985));
  border-color: rgba(112, 169, 220, 0.28);
  overflow-y: auto;
}

.snap-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 432px;
  align-items: start;
  gap: 18px;
}

.snap-preview {
  --snap-preview-max-h: clamp(300px, 52vh, 620px);
  --snap-preview-ratio: 16 / 9;
  --snap-preview-ratio-value: 1.7778;
  position: relative;
  width: min(100%, calc(var(--snap-preview-max-h) * var(--snap-preview-ratio-value)));
  max-height: var(--snap-preview-max-h);
  aspect-ratio: var(--snap-preview-ratio);
  justify-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    repeating-conic-gradient(rgba(255, 255, 255, 0.035) 0% 25%, transparent 0% 50%) 50% / 22px 22px,
    #060a0e;
  border: 1px solid rgba(165, 186, 204, 0.28);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}
.snap-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.snap-wm-handle {
  position: absolute;
  z-index: 2;
  display: block;
  object-fit: contain;
  border: 1px solid rgba(242, 216, 148, 0.72);
  box-shadow: 0 0 0 1px rgba(8, 12, 18, 0.72), 0 8px 22px rgba(0, 0, 0, 0.38);
  cursor: move;
  touch-action: none;
  user-select: none;
}

.snap-wm-handle[hidden] {
  display: none;
}

.snap-preview-note {
  position: absolute;
  z-index: 3;
  padding: 4px 10px;
  color: var(--text);
  background: rgba(6, 10, 16, 0.7);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.snap-controls,
.snap-group {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.snap-controls {
  align-content: start;
  padding-left: 2px;
}

.snap-group-title {
  color: rgba(139, 188, 232, 0.88);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.snap-image-group {
  padding-top: 14px;
  border-top: 1px solid rgba(220, 213, 196, 0.11);
}

.snap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.snap-res { gap: 6px; }

.snap-chip {
  height: 30px;
  min-width: 48px;
  padding: 0 11px;
  color: var(--text);
  background: rgba(69, 132, 190, 0.13);
  border: 1px solid rgba(116, 174, 228, 0.26);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.01em;
}
.snap-chip:hover { border-color: rgba(129, 193, 255, 0.58); background: rgba(88, 162, 226, 0.2); }
.snap-chip.active {
  color: #eef6ff;
  background: rgba(56, 127, 208, 0.34);
  border-color: rgba(117, 188, 255, 0.9);
  box-shadow: 0 0 16px rgba(68, 146, 232, 0.22), inset 0 0 0 1px rgba(147, 205, 255, 0.18);
}

.snap-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 0;
  height: 30px;
  border: none;
  border-radius: 4px;
}
.snap-custom.active {
  background: transparent;
}
.snap-custom-input {
  width: 66px;
  height: 23px;
  padding: 0 6px;
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(116, 174, 228, 0.34);
  border-radius: 3px;
  font-size: 12px;
}
.snap-custom-input:focus { outline: none; border-color: var(--blue-400); }

.snap-ratio-custom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0;
  color: var(--muted);
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.snap-ratio-custom.active {
  background: transparent;
}

.snap-ratio-custom input {
  width: 42px;
  height: 23px;
  padding: 0 5px;
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(116, 174, 228, 0.34);
  border-radius: 3px;
  font-size: 12px;
}

.snap-ratio-custom input:focus {
  outline: none;
  border-color: var(--blue-400);
}

.snap-dims { color: var(--muted); font-size: 11px; letter-spacing: 0.02em; }
.snap-dims strong { color: var(--text); }
.snap-warn { color: var(--warn); }

.snap-opts { justify-content: flex-start; }
.snap-seg { display: inline-flex; gap: 0; }
.snap-seg .snap-chip { border-radius: 0; }
.snap-seg .snap-chip:first-child { border-radius: 4px 0 0 4px; }
.snap-seg .snap-chip:last-child { border-radius: 0 4px 4px 0; border-left: none; }

.snap-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.snap-check input { accent-color: var(--blue-500); }

.snap-opacity {
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.01em;
}
.snap-opacity span { white-space: nowrap; }
.snap-op { flex: 1; min-width: 100px; accent-color: var(--blue-500); }
.snap-op-val { color: var(--text); font-weight: 700; min-width: 36px; text-align: right; font-style: normal; }

.snap-image-tools {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.snap-file-button,
.snap-mini-btn {
  height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  color: var(--text);
  background: rgba(69, 132, 190, 0.13);
  border: 1px solid rgba(116, 174, 228, 0.26);
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.snap-file-button:hover,
.snap-mini-btn:hover {
  border-color: rgba(129, 193, 255, 0.58);
  background: rgba(88, 162, 226, 0.2);
}

.snap-file-button input {
  display: none;
}

.snap-file-name {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snap-image-sliders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

.snap-control {
  display: grid;
  grid-template-columns: 70px minmax(90px, 1fr) 42px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.03em;
}

.snap-control input {
  min-width: 0;
  accent-color: var(--blue-500);
}

.snap-control em {
  color: var(--text);
  font-weight: 700;
  text-align: right;
  font-style: normal;
}

.snap-actions { justify-content: flex-end; gap: 8px; }
.snap-btn {
  height: 34px;
  min-width: 88px;
  padding: 0 14px;
  color: var(--text);
  background: rgba(69, 132, 190, 0.13);
  border: 1px solid rgba(116, 174, 228, 0.28);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.snap-btn:hover:not(:disabled) { border-color: rgba(129, 193, 255, 0.6); background: rgba(88, 162, 226, 0.2); }
.snap-btn:disabled { opacity: 0.5; cursor: progress; }
.snap-primary {
  color: #101317;
  min-width: 124px;
  background: linear-gradient(180deg, #ecd389, #c7a55c);
  border: none;
}
.snap-primary:hover:not(:disabled) { background: linear-gradient(180deg, #f3dc9d, #d0b16c); }

.snap-status { color: var(--muted); font-size: 10px; letter-spacing: 0.03em; text-align: center; }

@media (max-width: 860px) {
  .snap-layout {
    grid-template-columns: 1fr;
  }

  .snap-preview {
    --snap-preview-max-h: min(58vh, 420px);
  }

  .snap-image-tools,
  .snap-image-sliders {
    grid-template-columns: 1fr;
  }

  .snap-actions {
    justify-content: stretch;
  }

  .snap-btn {
    flex: 1;
  }
}

.plaque-fields {
  display: grid;
  gap: 6px;
}

.plaque-fields label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.plaque-fields span {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plaque-fields input {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 7px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(220, 213, 196, 0.16);
  font-size: 11px;
}

.project-actions button,
.save-row {
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-actions button:hover,
.save-row:hover,
.save-row.active {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.1);
}

.map-canvas.object-placement-armed {
  cursor: crosshair;
}

.plaque-list {
  display: grid;
  gap: 5px;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 2px;
}

.plaque-row {
  display: grid;
  gap: 5px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.1);
}

.plaque-row-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.plaque-row-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plaque-kind {
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: #14120d;
  background: var(--accent);
  border: 1px solid rgba(23, 21, 18, 0.36);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.plaque-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plaque-row-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
  gap: 4px;
}

.plaque-row-actions button {
  min-width: 0;
  height: 24px;
  padding: 0 4px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.12);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.plaque-row-actions button:hover {
  border-color: rgba(127, 167, 199, 0.48);
  background: rgba(127, 167, 199, 0.11);
}

.plaque-image-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.68);
  pointer-events: auto;
}

.plaque-image-modal-card {
  width: min(1120px, 86vw);
  max-height: 86vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: rgba(13, 16, 19, 0.96);
  border: 1px solid rgba(220, 213, 196, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
}

.plaque-image-modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid rgba(220, 213, 196, 0.13);
}

.plaque-image-modal-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plaque-image-modal-head button {
  width: 28px;
  height: 26px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(220, 213, 196, 0.16);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.plaque-image-modal img {
  width: 100%;
  max-height: calc(86vh - 42px);
  object-fit: contain;
  background: #050607;
}

.project-name {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.project-name input {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 7px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(220, 213, 196, 0.16);
}

.save-list {
  display: grid;
  gap: 4px;
  max-height: 116px;
  overflow-y: auto;
  padding-right: 2px;
}

.kml-list {
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

.kml-row {
  display: grid;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.1);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.kml-row.active {
  background: rgba(110, 176, 255, 0.095);
  border-color: rgba(110, 176, 255, 0.38);
}

.kml-row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 40px 34px;
  gap: 4px;
  align-items: center;
}

.kml-toggle {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--text);
  font-size: 11px;
}

.kml-toggle input {
  accent-color: var(--blue);
}

.kml-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kml-row button {
  min-width: 0;
  height: 22px;
  padding: 0 4px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kml-row button:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.1);
}

.kml-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kml-inspector {
  position: fixed;
  left: 390px;
  top: 156px;
  width: 338px;
  max-height: min(620px, calc(100vh - 210px));
  overflow-y: auto;
  padding: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-14px) scale(0.985);
  background:
    linear-gradient(180deg, rgba(34, 38, 42, 0.96), rgba(19, 22, 25, 0.94)),
    rgba(22, 25, 28, 0.96);
  border: 1px solid rgba(110, 176, 255, 0.34);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(14px);
  transition: opacity 0.18s ease, transform 0.2s ease;
  z-index: 12;
}

.kml-inspector.open {
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0) scale(1);
}

.kml-inspector-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(220, 213, 196, 0.12);
}

.kml-inspector-title {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kml-inspector-sub {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kml-inspector-close {
  min-width: 0;
  height: 24px;
  padding: 0 5px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kml-inspector-close:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.1);
}

.kml-mode-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.kml-mode-strip .kml-chip { flex: 1 1 0; }

/* COMPARE — holding two maps of the same ground against each other. It sits at
   the top of the style window because it is a mode, not a colour: it overrides
   what the layer draws and leaves everything saved underneath it alone. */
.kml-compare-block {
  margin-top: 12px;
  padding: 9px;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 7px;
}
.kml-compare-block.is-on {
  background: rgba(0, 229, 255, 0.1);
  border-color: rgba(0, 229, 255, 0.5);
}
.kml-compare-block > p {
  margin: 7px 0 0;
  color: rgba(200, 214, 232, 0.5);
  font-size: 9px;
  line-height: 1.4;
}
.kml-compare-block > p b { color: rgba(226, 237, 246, 0.8); font-weight: 700; }
.kml-compare-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text);
}
.kml-compare-toggle b {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.kml-compare-toggle i {
  font-style: normal;
  padding: 2px 6px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(200, 214, 232, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 4px;
}
.kml-compare-block.is-on .kml-compare-toggle i {
  color: #041a1f;
  background: #00e5ff;
  border-color: transparent;
}
.kml-overlay-modes {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.kml-overlay-modes .kml-chip { flex: 1 1 0; height: 26px; }
.kml-compare-block .kml-overlay-why {
  margin: 7px 0 0;
  color: rgba(0, 229, 255, 0.72);
  font-size: 9px;
  line-height: 1.4;
}

.kml-compare-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.kml-compare-row label { display: flex; align-items: center; gap: 5px; }
.kml-compare-row span { color: rgba(200, 214, 232, 0.55); font-size: 9px; }
.kml-compare-row input[type="color"] {
  width: 34px;
  height: 20px;
  padding: 0;
  background: none;
  border: 1px solid rgba(220, 213, 196, 0.2);
  cursor: pointer;
}
.kml-compare-count { flex: 1; text-align: right; }

/* While compare drives the layer, its own styling still shows but reads as
   parked — otherwise changing a colour that nothing uses looks like a bug. */
.kml-style-body.is-muted { opacity: 0.5; }
.kml-style-veil {
  margin-top: 10px;
  color: rgba(0, 229, 255, 0.75);
  font-size: 9px;
  line-height: 1.35;
}
.kml-color-grid.is-off { opacity: 0.45; }
.kml-inspector-more > summary {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(220, 213, 196, 0.1);
  color: rgba(232, 225, 210, 0.6);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}
.kml-inspector-more > summary::-webkit-details-marker { display: none; }
.kml-inspector-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: rgba(200, 214, 232, 0.65);
  font-size: 9px;
}

/* The one-click version of the same idea, over a whole map's files, plus the
   legend that answers "what is laid over what". */
.kml-list-bar {
  display: grid;
  gap: 5px;
  margin-bottom: 7px;
}
.kml-list-bar-head { display: flex; align-items: center; gap: 7px; }
.kml-overlay-legend { display: grid; gap: 3px; }
.kml-overlay-legend:empty { display: none; }
.kml-overlay-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: rgba(214, 228, 240, 0.72);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kml-overlay-legend-item i {
  flex: 0 0 auto;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
.kml-overlay-legend-item b {
  color: rgba(200, 214, 232, 0.45);
  font-weight: 700;
}

/* The change map's readout: the areas a cartographer would quote, with the
   hatch swatch that matches what is drawn on the ground. */
.kml-diff-readout {
  display: grid;
  gap: 3px;
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.12);
  border-radius: 6px;
}
.kml-diff-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(214, 228, 240, 0.75);
  font-size: 9px;
}
.kml-diff-row.is-quiet { color: rgba(200, 214, 232, 0.4); }
.kml-diff-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kml-diff-row b { color: rgba(226, 237, 246, 0.9); font-weight: 700; }
.kml-diff-row em {
  margin-left: auto;
  color: var(--text);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.kml-diff-row i {
  flex: 0 0 auto;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}
.kml-diff-hatch {
  background: repeating-linear-gradient(
    -45deg,
    var(--c) 0 2px,
    transparent 2px 4px
  );
  outline: 1px solid rgba(255, 255, 255, 0.12);
}
.kml-diff-foot {
  margin-top: 2px;
  color: rgba(200, 214, 232, 0.38);
  font-size: 8.5px;
  line-height: 1.35;
}
.kml-list-bar button:disabled { opacity: 0.4; cursor: default; }
.kml-list-bar button {
  flex: 0 0 auto;
  height: 21px;
  padding: 0 8px;
  color: rgba(200, 214, 232, 0.7);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  border-radius: 5px;
  cursor: pointer;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kml-list-bar button:hover { border-color: rgba(0, 229, 255, 0.45); }
.kml-list-bar button.active {
  color: #041a1f;
  background: #00e5ff;
  border-color: transparent;
}
.kml-list-bar span { color: rgba(200, 214, 232, 0.42); font-size: 9px; line-height: 1.3; }
.kml-compare-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-radius: 50%;
  vertical-align: middle;
}

.kml-chip {
  min-width: 0;
  height: 28px;
  padding: 0 5px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.12);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.kml-chip:hover {
  border-color: rgba(110, 176, 255, 0.38);
}

.kml-chip.active {
  color: #171512;
  background: var(--accent);
  border-color: transparent;
}

.kml-inspector-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(220, 213, 196, 0.1);
}

.kml-inspector-label {
  color: rgba(232, 225, 210, 0.64);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kml-inspector-actions label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.kml-inspector-actions input {
  accent-color: var(--blue);
}

.kml-color-grid,
.kml-number-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.kml-number-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kml-color-grid label,
.kml-number-grid label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.kml-color-grid input,
.kml-number-grid input {
  width: 100%;
  min-width: 0;
  height: 24px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(220, 213, 196, 0.14);
}

.kml-color-grid input {
  padding: 1px 3px;
}

.kml-number-grid input {
  padding: 0 4px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.kml-slider-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.kml-slider-row input {
  width: 100%;
  min-width: 0;
  accent-color: var(--blue);
}

.kml-slider-row b {
  color: var(--text);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.kml-inspector-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}

.kml-reset-style {
  min-width: 0;
  height: 22px;
  padding: 0 4px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kml-reset-style:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.1);
}

.save-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  text-transform: none;
}

.save-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-row time,
.save-empty,
.project-status {
  color: var(--muted);
  font-size: 10px;
}

.save-empty {
  padding: 7px;
  border: 1px solid rgba(220, 213, 196, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

.project-status {
  min-height: 28px;
  overflow: hidden;
  line-height: 1.35;
}

.cache-field {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.cache-field input {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 7px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(220, 213, 196, 0.16);
}

.cache-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.cache-actions.secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cache-actions button {
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  overflow: hidden;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cache-actions button:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.1);
}

.cache-status {
  min-height: 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cache-meter {
  min-height: 14px;
  overflow: hidden;
  color: rgba(232, 225, 210, 0.72);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cache-track {
  height: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cache-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  transition: width 0.18s ease;
}

.operation-core {
  display: grid;
  gap: 8px;
}

.measure-tools {
  display: grid;
  gap: 6px;
}

.measure-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.measure-actions.measure-arrows {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.measure-attach-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 23px;
  padding: 3px 7px;
  color: var(--text);
  background: rgba(127, 167, 199, 0.07);
  border: 1px solid rgba(127, 167, 199, 0.25);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.measure-attach-badge[hidden] {
  display: none;
}

.measure-attach-badge i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
}

.measure-attach-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.measure-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.measure-label-size {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.measure-label-size input[type="range"] {
  width: 100%;
  accent-color: var(--blue);
}

.measure-arrow-style {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.measure-arrow-style label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.measure-arrow-style input[type="color"] {
  width: 30px;
  height: 22px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.16);
  cursor: pointer;
}

.measure-arrow-style input[type="range"] {
  width: 100%;
  accent-color: var(--blue);
}

.measure-actions button {
  height: 28px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.measure-actions button:hover {
  border-color: rgba(127, 167, 199, 0.48);
  background: rgba(127, 167, 199, 0.11);
}

.measure-actions button.active {
  color: #101317;
  background: var(--blue);
  border-color: rgba(232, 225, 210, 0.28);
}

.measure-select {
  width: 100%;
  height: 28px;
  min-width: 0;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  font-size: 10px;
  text-transform: uppercase;
}

select option,
.measure-select option,
.unit-field select option {
  color: #e8e1d2;
  background: #15191d;
}

.measure-select[hidden] {
  display: none;
}

.measure-status {
  min-height: 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fate-launcher {
  position: relative;
  z-index: 12;
  width: 48px;
  height: 22px;
  color: #171512;
  background: var(--accent);
  border: 1px solid rgba(23, 21, 18, 0.4);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  pointer-events: auto;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fate-launcher:hover {
  filter: brightness(1.12);
}

.fate-popover {
  position: absolute;
  right: 310px;
  bottom: 60px;
  z-index: 12;
  width: min(330px, calc(100vw - 620px));
  min-width: 280px;
  pointer-events: auto;
  background: rgba(18, 21, 24, 0.94);
  border: 1px solid rgba(220, 213, 196, 0.18);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  animation: fate-popover-in 0.22s ease both;
}

.fate-popover[hidden] {
  display: none;
}

.fate-popover-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  min-height: 32px;
  padding-left: 10px;
  color: var(--text);
  border-bottom: 1px solid rgba(220, 213, 196, 0.14);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fate-popover-head button {
  height: 28px;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
}

.fate-popover-head button:hover {
  color: var(--accent);
}

.nuclear-roulette {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.roulette-machine {
  position: relative;
  display: grid;
  gap: 7px;
  overflow: hidden;
  padding: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.16));
  border: 1px solid rgba(220, 213, 196, 0.15);
}

.roulette-reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.roulette-reel {
  display: grid;
  place-items: center;
  height: 44px;
  color: var(--accent);
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.08), transparent 42%),
    rgba(6, 8, 10, 0.74);
  border: 1px solid rgba(110, 176, 255, 0.28);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.34);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 12px rgba(110, 176, 255, 0.42);
}

.roulette-reel.spinning {
  animation: roulette-reel-spin 0.16s steps(2, end) infinite;
}

.roulette-reel.jackpot {
  color: #101317;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 242, 166, 0.96), rgba(236, 109, 66, 0.72) 48%, rgba(44, 22, 14, 0.9) 82%);
  border-color: rgba(255, 242, 166, 0.78);
  box-shadow: 0 0 22px rgba(236, 109, 66, 0.42), inset 0 0 18px rgba(255, 255, 255, 0.28);
  animation: roulette-jackpot-pulse 0.72s ease-in-out infinite alternate;
}

.roulette-spin,
.roulette-secret button {
  height: 28px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.roulette-spin:hover,
.roulette-secret button:hover {
  border-color: rgba(110, 176, 255, 0.54);
  background: rgba(110, 176, 255, 0.12);
}

.roulette-spin:disabled {
  cursor: wait;
  opacity: 0.48;
}

.roulette-status {
  min-height: 14px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roulette-prize-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.roulette-prize-list span {
  display: grid;
  place-items: center;
  height: 18px;
  color: rgba(232, 225, 210, 0.68);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.09);
  font-size: 11px;
  font-weight: 800;
}

.roulette-secret-dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  padding: 0;
  opacity: 0.14;
  background: rgba(110, 176, 255, 0.38);
  border: 1px solid transparent;
  cursor: pointer;
}

.roulette-secret-dot:hover,
.roulette-secret-dot:focus-visible {
  opacity: 0.82;
  border-color: rgba(110, 176, 255, 0.55);
}

.roulette-secret {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.roulette-secret[hidden] {
  display: none;
}

@keyframes roulette-reel-spin {
  0% { transform: translateY(-3px); filter: blur(0); }
  50% { transform: translateY(3px); filter: blur(1px); }
  100% { transform: translateY(-3px); filter: blur(0); }
}

@keyframes roulette-jackpot-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

@keyframes fate-popover-in {
  from { opacity: 0; transform: translate(8px, 10px) scale(0.98); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}

@media (max-width: 1180px) {
  .fate-popover {
    right: 18px;
    width: min(330px, calc(100vw - 36px));
  }
}

.map-canvas.measurement-armed {
  cursor: crosshair;
}

.map-canvas.measurement-editing {
  cursor: grabbing !important;
}

.view-switch,
.operation-profiles {
  display: grid;
  gap: 5px;
}

.view-switch {
  grid-template-columns: repeat(2, 1fr);
}

.operation-profiles {
  grid-template-columns: repeat(2, 1fr);
}

.view-switch button,
.operation-profiles button,
.operation-zone-row button,
.operation-draw,
.operation-pegman {
  height: 28px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.view-switch button:hover,
.operation-profiles button:hover,
.operation-zone-row button:hover,
.operation-draw:hover,
.operation-pegman:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.1);
}

.view-switch button.active,
.operation-profiles button.active {
  color: #171512;
  background: var(--accent);
}

.operation-draw {
  width: 100%;
  height: 32px;
}

/* ===== Battle Zones — create block ======================================
   The old flow was "press a button, drag an unlabelled ghost, hope". This is
   a single armable button that says what it is about to do and, once armed,
   becomes its own Cancel. */
.bz-new {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--edge-soft);
  border-radius: 9px;
  background: rgba(120, 160, 210, 0.045);
}
.bz-new.is-armed {
  border-color: rgba(110, 176, 255, 0.55);
  background: rgba(110, 176, 255, 0.08);
}

.bz-place {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bz-place:hover { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.1); }
.bz-place-glyph { width: 24px; height: 24px; color: var(--accent); justify-self: center; }
.bz-place-glyph svg { width: 100%; height: 100%; }
.bz-place-text { display: grid; gap: 1px; min-width: 0; }
.bz-place-text b {
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
.bz-place-text em {
  font-style: normal; font-size: 9.5px; color: rgba(200, 214, 232, 0.5);
}
/* Armed: the button IS the escape hatch. */
.bz-place.is-armed {
  border-color: rgba(110, 176, 255, 0.85);
  background: rgba(110, 176, 255, 0.16);
  animation: bz-armed-pulse 1.6s ease-in-out infinite;
}
.bz-place.is-armed .bz-place-glyph { color: rgba(159, 204, 255, 1); }
.bz-place.is-armed .bz-place-text em { color: rgba(159, 204, 255, 0.85); }
@keyframes bz-armed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 176, 255, 0); }
  50% { box-shadow: 0 0 0 3px rgba(110, 176, 255, 0.14); }
}

.bz-size-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.bz-size-picker button {
  height: 26px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  border-radius: 5px;
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bz-size-picker button:hover { border-color: rgba(110, 176, 255, 0.42); background: rgba(110, 176, 255, 0.1); }
.bz-size-picker button.active { color: #171512; background: var(--accent); border-color: var(--accent); }

.bz-size-field { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
.bz-size-input { position: relative; margin-left: auto; display: inline-flex; align-items: center; }
.bz-size-input input {
  width: 84px;
  height: 26px;
  padding: 0 22px 0 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 5px;
  font-family: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.bz-size-input em { position: absolute; right: 7px; font-style: normal; font-size: 9px; color: var(--muted); pointer-events: none; }

.bz-dates { display: grid; gap: 3px; }
.bz-dates-label { color: var(--muted); font-size: 10px; }
.bz-dates-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; }
.bz-dates-row > span { color: var(--muted); font-size: 10px; }
.bz-dates-row input {
  height: 26px; min-width: 0; padding: 0 6px;
  color: var(--text); background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16); border-radius: 5px;
  font-family: inherit; font-size: 10px;
}

.bz-more { margin-top: 0; }
.bz-draw.is-armed {
  color: #171512;
  background: rgba(110, 176, 255, 0.9);
  border-color: rgba(110, 176, 255, 0.9);
}
.bz-draw-finish {
  width: 100%;
  height: 30px;
  margin-top: 4px;
  color: #171512;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bz-hint { margin-top: 4px; font-size: 9.5px; line-height: 1.4; color: rgba(200, 214, 232, 0.45); }

/* Placement cursor: the map itself says "you are about to drop something". */
canvas.is-placing-zone { cursor: crosshair; }

/* The battle window. A zone is a place AND a stretch of time, so the dates are
   asked for once (in .bz-dates), travel with the zone, and set the V9 ruler. */
.operation-zone-dates input {
  height: 26px;
  min-width: 0;
  padding: 0 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  font-family: inherit;
  font-size: 10px;
}

.operation-zone-dates {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px;
}

.operation-zone-dates span {
  color: var(--muted);
  font-size: 10px;
}

.operation-status {
  min-height: 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-zone-list {
  display: grid;
  gap: 6px;
  max-height: min(52vh, 480px);
  overflow: auto;
}

.operation-zone-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.1);
  cursor: pointer;
}

.operation-zone-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(30px, auto);
  align-items: stretch;
  gap: 4px;
}

.operation-zone-actions button.bz-danger {
  color: #fff;
  background: rgba(255, 92, 92, 0.3);
  border-color: rgba(255, 122, 122, 0.7);
}

.operation-zone-actions button {
  min-width: 0;
  cursor: pointer;
}

.operation-zone-row.active {
  border-color: rgba(127, 167, 199, 0.55);
  background: rgba(127, 167, 199, 0.11);
}

.operation-zone-text,
.operation-zone-name,
.operation-zone-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-zone-name {
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}

.operation-zone-meta,
.operation-empty {
  color: var(--muted);
  font-size: 10px;
}

.operation-zone-inspector {
  min-height: 0;
}

/* === Battle zones panel (TURNS) =========================================== */

.bz-battle {
  display: grid;
  gap: 8px;
}

/* Explicit display would defeat the [hidden] attribute — restore it. */
.bz-battle[hidden],
.bz-manager[hidden] {
  display: none;
}

.bz-battle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Grid items default to min-width:auto — a long zone name would stretch
     the row past the panel and push Leave Zone out of view. */
  min-width: 0;
}

.bz-battle-zone {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#bz-leave {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(255, 92, 92, 0.12);
  border: 1px solid rgba(255, 122, 122, 0.4);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#bz-leave:hover {
  background: rgba(255, 92, 92, 0.24);
}

.bz-manager {
  display: grid;
  gap: 8px;
}

.bz-enter {
  height: 32px;
  color: #171512;
  background: var(--accent);
  border: 1px solid rgba(110, 176, 255, 0.7);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bz-enter:hover {
  filter: brightness(1.12);
}

.bz-zone-name-input {
  width: 100%;
  height: 26px;
  padding: 0 7px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  font-size: 11px;
  font-weight: 700;
}

.bz-size {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 2px;
}

.bz-size span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
}

.bz-size button {
  height: 28px;
  cursor: pointer;
}

.operation-zone-card {
  display: grid;
  gap: 7px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(110, 176, 255, 0.18);
}

.operation-zone-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
}

.operation-zone-card-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-zone-card-head strong {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.operation-zone-title-field {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.operation-zone-title-field input {
  min-width: 0;
  height: 24px;
  padding: 0 7px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  font-size: 11px;
  font-weight: 700;
}

.operation-zone-progress {
  height: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.operation-zone-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width 0.18s ease;
}

.operation-zone-facts {
  display: grid;
  grid-template-columns: minmax(62px, 0.8fr) minmax(0, 1.2fr);
  gap: 4px 8px;
  font-size: 10px;
  line-height: 1.25;
}

.operation-zone-facts span {
  color: var(--muted);
}

.operation-zone-facts strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-core {
  display: grid;
  gap: 8px;
}

/* Tactical Units flows inside the single right-panel scroll — no nested
   scroll container of its own (that produced the "card-in-card" look with a
   second scrollbar). */
.right-panel .unit-core {
  padding-right: 0;
}

.unit-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.unit-placement-altitude {
  grid-column: 1 / -1;
  padding: 6px 7px;
  background: rgba(127, 167, 199, 0.06);
  border: 1px solid rgba(127, 167, 199, 0.2);
}

.unit-placement-altitude[hidden] {
  display: none;
}

.unit-altitude-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.unit-altitude-label output {
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.unit-side-control {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 28px;
  gap: 4px;
}

.unit-field {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.unit-side-palette {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.unit-side-palette::-webkit-scrollbar {
  display: none;
}

.unit-side-swatch {
  display: grid;
  flex: 0 0 18px;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}

.unit-side-swatch i {
  width: 11px;
  height: 11px;
  background: var(--side-color);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 6px color-mix(in srgb, var(--side-color) 34%, transparent);
}

.unit-side-swatch:hover {
  transform: scale(1.12);
}

.unit-side-swatch.active {
  border-color: rgba(232, 238, 245, 0.88);
}

.unit-side-swatch.active i {
  width: 9px;
  height: 9px;
}

.unit-side-edit {
  display: grid;
  flex: 0 0 24px;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
}

.unit-side-edit svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.unit-side-edit:hover,
.unit-side-edit.active {
  color: var(--accent);
  border-color: rgba(110, 176, 255, 0.48);
  background: rgba(110, 176, 255, 0.1);
}

.unit-side-dialog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px 26px;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(14, 18, 22, 0.92);
  border: 1px solid rgba(220, 213, 196, 0.14);
}

.unit-side-dialog[hidden] {
  display: none;
}

.unit-side-editor-list {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.unit-side-editor-list::-webkit-scrollbar {
  display: none;
}

.unit-side-editor-swatch {
  position: relative;
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.unit-side-editor-swatch::before {
  position: absolute;
  inset: 4px;
  background: var(--side-color);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  content: "";
}

.unit-side-editor-swatch.active {
  border-color: rgba(232, 238, 245, 0.7);
}

.unit-side-editor-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.unit-side-editor-action {
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.unit-side-editor-action:hover {
  color: var(--text);
  border-color: rgba(110, 176, 255, 0.42);
}

.unit-side-create {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) 34px 28px 28px;
  gap: 4px;
  padding-top: 2px;
}

.unit-side-create[hidden] {
  display: none;
}

.unit-side-create input[type="text"] {
  min-width: 0;
  height: 26px;
  padding: 0 7px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(220, 213, 196, 0.14);
  font-size: 10px;
}

.unit-side-create input[type="color"] {
  width: 34px;
  height: 26px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
}

.unit-side-create button {
  height: 26px;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.unit-field select {
  height: 28px;
  min-width: 0;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  font-size: 10px;
}

.unit-size-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.unit-real-size {
  width: 18px;
  height: 18px;
  padding: 0;
  color: var(--muted);
  background:
    linear-gradient(90deg, transparent 7px, currentColor 7px, currentColor 9px, transparent 9px),
    linear-gradient(0deg, transparent 7px, currentColor 7px, currentColor 9px, transparent 9px);
  border: 1px solid rgba(220, 213, 196, 0.22);
  cursor: pointer;
}

.unit-real-size::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 4px;
  border: 1px solid currentColor;
}

.unit-real-size.active {
  color: #101317;
  background:
    linear-gradient(90deg, transparent 7px, currentColor 7px, currentColor 9px, transparent 9px),
    linear-gradient(0deg, transparent 7px, currentColor 7px, currentColor 9px, transparent 9px),
    var(--accent);
  border-color: rgba(232, 225, 210, 0.36);
}

.unit-field input[type="range"] {
  width: 100%;
  accent-color: var(--blue);
}

.unit-field input[type="range"]:disabled {
  opacity: 0.35;
}

/* Expand to the full menu height — the unit palette no longer lives in its own
   inner scroll box. */
.unit-type-groups {
  display: grid;
  gap: 7px;
}

.unit-category {
  display: grid;
  gap: 4px;
}

.unit-category-title {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.unit-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.unit-type-grid button,
.unit-actions button,
.unit-selected-actions button,
.unit-selected-head button,
.unit-row button {
  height: 26px;
  padding: 0 5px;
  overflow: hidden;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.unit-type-grid button:hover,
.unit-actions button:hover,
.unit-selected-actions button:hover,
.unit-selected-head button:hover,
.unit-row button:hover {
  border-color: rgba(127, 167, 199, 0.48);
  background: rgba(127, 167, 199, 0.11);
}

.unit-actions button:disabled,
.unit-selected-actions button:disabled,
.unit-row button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.unit-type-grid button.active {
  color: #101317;
  background: var(--blue);
}

.unit-selected-actions button.active,
.unit-row button.active {
  color: #101317;
  background: var(--accent);
  border-color: transparent;
}

.unit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.unit-status {
  min-height: 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-selected {
  min-height: 24px;
}

.unit-inspector {
  position: absolute;
  top: 110px;
  right: 288px;
  z-index: 9;
  width: 280px;
  max-height: calc(100vh - 196px);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(20, 30, 46, 0.96), rgba(13, 20, 32, 0.94));
  border: 1px solid rgba(127, 167, 199, 0.32);
  border-left: 2px solid rgba(61, 139, 255, 0.72);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.44), 0 0 18px rgba(61, 139, 255, 0.08);
  backdrop-filter: blur(12px);
  animation: unit-inspector-in 0.18s ease-out both;
}

.unit-inspector[hidden],
.strategy-shell:not([data-workspace="tactical"]) .unit-inspector {
  display: none;
}

@keyframes unit-inspector-in {
  from { opacity: 0; transform: translateX(10px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width: 1180px) and (min-width: 921px) {
  .unit-inspector {
    right: 286px;
    width: 252px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .unit-inspector { animation: none; }
}

.unit-selected-card {
  display: grid;
  gap: 7px;
  padding: 7px;
  background: rgba(127, 167, 199, 0.075);
  border: 1px solid rgba(127, 167, 199, 0.3);
}

.unit-selected-card.targeting {
  background: rgba(110, 176, 255, 0.105);
  border-color: rgba(110, 176, 255, 0.48);
}

.unit-selected-card.looping {
  background: rgba(122, 160, 106, 0.105);
  border-color: rgba(122, 160, 106, 0.48);
}

.unit-inspector .unit-selected-card {
  padding: 11px;
  background: transparent;
  border: 0;
}

.unit-inspector .unit-selected-card.targeting {
  background: rgba(110, 176, 255, 0.105);
}

.unit-inspector .unit-selected-card.looping {
  background: rgba(122, 160, 106, 0.105);
}

.unit-selected-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  gap: 6px;
}

.unit-selected-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-selected-grid {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 3px 7px;
  font-size: 10px;
}

.unit-selected-grid span {
  color: var(--muted);
  text-transform: uppercase;
}

.unit-selected-grid strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(232, 225, 210, 0.88);
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-attached-tools {
  display: grid;
  gap: 5px;
  padding: 7px;
  background: rgba(8, 15, 21, 0.44);
  border: 1px solid rgba(127, 167, 199, 0.2);
}

.unit-attached-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.unit-attached-tools-head b {
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.unit-attached-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 24px;
  align-items: stretch;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(220, 213, 196, 0.1);
  border-left-color: var(--attached-tool-color, rgba(220, 213, 196, 0.1));
}

.unit-attached-tool.active {
  background: rgba(127, 167, 199, 0.1);
  border-color: rgba(127, 167, 199, 0.42);
}

.unit-attached-tool button {
  min-width: 0;
  padding: 0 4px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.1);
  cursor: pointer;
  font-size: 8px;
}

.unit-attached-tool button:hover {
  color: var(--text);
  border-color: rgba(127, 167, 199, 0.42);
}

.unit-attached-tool .unit-attached-tool-main {
  display: grid;
  gap: 1px;
  padding: 3px 5px;
  overflow: hidden;
  color: var(--text);
  background: transparent;
  border: 0;
  text-align: left;
}

.unit-attached-tool-main strong,
.unit-attached-tool-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-attached-tool-main strong {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
}

.unit-attached-tool-main strong i {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: var(--attached-tool-color, #7dd3fc);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--attached-tool-color, #7dd3fc);
}

.unit-attached-tool-main span,
.unit-attached-tools-empty {
  color: var(--muted);
  font-size: 8px;
}

.unit-altitude-control {
  display: grid;
  gap: 6px;
  padding: 7px;
  background: rgba(8, 15, 21, 0.44);
  border: 1px solid rgba(127, 167, 199, 0.2);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.unit-altitude-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  align-items: center;
  gap: 7px;
}

.unit-altitude-inputs > input[type="range"] {
  width: 100%;
  accent-color: var(--blue);
}

.unit-altitude-inputs label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 2px;
  height: 25px;
  padding: 0 4px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
}

.unit-altitude-inputs input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.unit-altitude-inputs label span {
  color: var(--muted);
  font-size: 8px;
}

.unit-altitude-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.unit-altitude-presets button {
  height: 24px;
  min-width: 0;
  padding: 0 3px;
  overflow: hidden;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 8px;
  font-weight: 750;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.unit-altitude-presets button:hover {
  border-color: rgba(127, 167, 199, 0.48);
  background: rgba(127, 167, 199, 0.11);
}

.unit-selected-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
  gap: 5px;
}

.unit-action-groups {
  display: grid;
  gap: 6px;
}

.unit-action-group {
  display: grid;
  gap: 4px;
}

.unit-action-title {
  color: rgba(232, 225, 210, 0.58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unit-admin-actions {
  grid-template-columns: minmax(0, 1fr);
}

/* Roster is already capped to the last 8 units in JS, so no inner scrollbar is
   needed — let the rows flow in the single panel scroll. */
.unit-list {
  display: grid;
  gap: 5px;
}

.unit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 5px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.1);
}

.unit-row.active {
  border-color: rgba(127, 167, 199, 0.5);
  background: rgba(127, 167, 199, 0.105);
}

.unit-row.targeting {
  border-color: rgba(110, 176, 255, 0.5);
  background: rgba(110, 176, 255, 0.105);
}

.unit-row.looping {
  border-color: rgba(122, 160, 106, 0.48);
  background: rgba(122, 160, 106, 0.095);
}

.unit-row-text,
.unit-row-name,
.unit-row-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-row-name {
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}

.unit-row-meta,
.unit-empty {
  color: var(--muted);
  font-size: 10px;
}

.map-canvas.unit-placement-armed {
  cursor: crosshair;
}

.map-canvas.unit-drag-pending,
.map-canvas.unit-dragging {
  cursor: grabbing !important;
}

.unit-drag-hint {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.scenario-core {
  display: grid;
  gap: 8px;
}

.scenario-name {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.scenario-name input {
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(220, 213, 196, 0.13);
}

.scenario-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.scenario-actions button,
.scenario-row button {
  height: 28px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-actions button:hover,
.scenario-row button:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.1);
}

.scenario-status {
  min-height: 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-list {
  display: grid;
  gap: 6px;
  max-height: 136px;
  overflow: auto;
}

.scenario-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 42px 34px;
  align-items: center;
  gap: 5px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.1);
}

.scenario-row-text,
.scenario-row-name,
.scenario-row-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-row-name {
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}

.scenario-row-meta,
.scenario-empty {
  color: var(--muted);
  font-size: 10px;
}

.tactical-core {
  display: grid;
  gap: 8px;
}

.tactical-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.tactical-actions #tactical-enter {
  grid-column: 1 / -1;
}

.tactical-actions.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tactical-subtitle {
  margin: 8px 0 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tactical-actions button,
.tactical-order-card button,
.tactical-turn-bar button {
  height: 28px;
  padding: 0 7px;
  overflow: hidden;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tactical-actions button:hover,
.tactical-order-card button:hover,
.tactical-turn-bar button:hover {
  border-color: rgba(127, 167, 199, 0.48);
  background: rgba(127, 167, 199, 0.11);
}

.tactical-actions button:disabled,
.tactical-turn-bar button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.tactical-status,
.tactical-order-current,
.tactical-empty {
  min-height: 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactical-order-card,
.tactical-section {
  display: grid;
  gap: 7px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.12);
}

.tactical-section summary {
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tactical-order-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.tactical-order-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactical-order-head span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tactical-order-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.tactical-order-grid input,
.tactical-order-grid select {
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  font-size: 10px;
}

.tactical-log {
  display: grid;
  gap: 5px;
  max-height: 128px;
  overflow: auto;
}

.tactical-log-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 6px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.035);
  border-left: 2px solid rgba(127, 167, 199, 0.5);
}

.tactical-log-row.attack {
  border-left-color: rgba(189, 103, 89, 0.78);
}

.tactical-log-row.destroyed {
  border-left-color: rgba(240, 198, 107, 0.88);
}

.tactical-log-row strong {
  color: var(--accent);
  font-size: 9px;
  text-transform: uppercase;
}

.tactical-log-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-order-radial {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 34;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.unit-order-radial[hidden] {
  display: none;
}

.unit-order-radial::before {
  content: "";
  position: absolute;
  left: -28px;
  top: -28px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(110, 176, 255, 0.22), rgba(13, 17, 21, 0.1) 70%, transparent 72%);
  border: 1px solid rgba(110, 176, 255, 0.22);
  box-shadow: 0 0 34px rgba(110, 176, 255, 0.16);
  animation: unit-radial-core 0.26s ease both;
}

.unit-order-radial button {
  position: absolute;
  left: -32px;
  top: -16px;
  width: 86px;
  height: 32px;
  padding: 0 8px;
  pointer-events: auto;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(42, 47, 52, 0.96), rgba(18, 22, 27, 0.94));
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36);
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  opacity: 0;
  text-transform: uppercase;
  transform:
    rotate(var(--angle))
    translateX(var(--radius))
    rotate(calc(var(--angle) * -1))
    scale(0.72);
  white-space: nowrap;
  animation: unit-radial-pop 0.34s cubic-bezier(0.18, 0.9, 0.2, 1.18) both;
  animation-delay: calc(var(--i) * 24ms);
}

.unit-order-radial button.unit-side {
  width: 42px;
  height: 30px;
  color: #071016;
  background: var(--side-color);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.34),
    0 0 18px color-mix(in srgb, var(--side-color), transparent 55%);
}

.unit-order-radial button:hover,
.unit-order-radial button.active {
  color: #15120d;
  background: var(--accent);
  border-color: transparent;
}

.unit-order-radial button[data-kind="direct_fire"],
.unit-order-radial button[data-kind="area_fire"] {
  border-color: rgba(248, 113, 113, 0.34);
}

.unit-order-radial button[data-kind="move"] {
  border-color: rgba(125, 211, 252, 0.32);
}

.unit-order-radial button[data-kind="aim_cone"],
.unit-order-radial button[data-kind="disabled"] {
  border-color: rgba(240, 198, 107, 0.32);
}

@keyframes unit-radial-pop {
  from {
    opacity: 0;
    transform:
      rotate(var(--angle))
      translateX(28px)
      rotate(calc(var(--angle) * -1))
      scale(0.55);
  }
  to {
    opacity: 1;
    transform:
      rotate(var(--angle))
      translateX(var(--radius))
      rotate(calc(var(--angle) * -1))
      scale(1);
  }
}

@keyframes unit-radial-core {
  from { opacity: 0; transform: scale(0.35); }
  to { opacity: 1; transform: scale(1); }
}

.tactical-turn-bar {
  position: absolute;
  left: 50%;
  bottom: 70px;
  z-index: 7;
  width: min(720px, calc(100vw - 640px));
  min-width: 480px;
  pointer-events: auto;
  opacity: 0;
  transform: translate(-50%, 18px);
  transition:
    opacity 0.24s ease,
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tactical-turn-bar[hidden] {
  display: none;
}

.strategy-shell[data-workspace="tactical"] .tactical-turn-bar {
  opacity: 1;
  transform: translate(-50%, 0);
}

.turn-bar-main {
  display: grid;
  grid-template-columns: 34px minmax(180px, 1fr) 54px 118px 34px 54px 64px 54px;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: rgba(18, 21, 24, 0.88);
  border: 1px solid rgba(220, 213, 196, 0.16);
  box-shadow: 0 18px 40px var(--shadow);
  backdrop-filter: blur(10px);
}

.turnbar-state,
.turnbar-minutes {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.turnbar-minutes span {
  color: var(--accent);
  font-size: 8px;
}

.turnbar-state {
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turnbar-minutes input {
  width: 48px;
  height: 22px;
  padding: 0 5px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  font-size: 10px;
}

.turnbar-timeline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 2px;
  scrollbar-width: thin;
}

.turnbar-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.turnbar-node.active {
  color: #15120d;
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 0 24px rgba(240, 198, 107, 0.32);
}

.turnbar-node.past {
  color: #071016;
  background: var(--blue);
}

.turnbar-node i {
  position: absolute;
  right: -4px;
  top: -5px;
  display: grid;
  place-items: center;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  color: #111;
  background: #f87171;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
}

.turnbar-link {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.turnbar-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-100%);
  animation: turnbar-flow 1.1s linear infinite;
}

.turnbar-link.filled {
  background: rgba(125, 211, 252, 0.46);
}

@keyframes turnbar-flow {
  to { transform: translateX(100%); }
}


.mode-dock {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: flex;
  gap: 6px;
  padding: 6px;
  transform: translateX(-50%);
  pointer-events: auto;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px var(--shadow);
}

/* Intel grid picker — absolutely CENTRED in the top header bar, shown only in
   Intel. A single arrow toggle slides the icon buttons + size slider in/out.
   z-index keeps it above the map canvas so the buttons are clickable. */
.intel-grid-pick {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
.intel-grid-pick[hidden] { display: none; }
/* Always-visible arrow that expands/collapses the controls. */
.intel-grid-pick .igp-toggle {
  width: 28px;
  height: 26px;
  flex: none;
  color: var(--text);
  background: rgba(20, 22, 26, 0.65);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.18s ease, color 0.18s ease;
}
.intel-grid-pick .igp-toggle:hover { color: var(--accent); }
.intel-grid-pick.expanded .igp-toggle { transform: rotate(180deg); color: var(--accent); }
/* Collapsible strip: icon buttons + slider. Hidden until .expanded. */
.intel-grid-pick .igp-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-width 0.22s ease, opacity 0.18s ease;
}
.intel-grid-pick.expanded .igp-panel {
  max-width: 260px;
  opacity: 1;
  pointer-events: auto;
}
.intel-grid-pick .igp-btn {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.intel-grid-pick .igp-btn:hover {
  color: var(--accent);
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.10);
}
.intel-grid-pick .igp-btn.active {
  color: #171512;
  background: var(--accent);
  border-color: var(--accent);
}
.intel-grid-pick .igp-size {
  width: 84px;
  flex: none;
  accent-color: var(--blue);
  cursor: pointer;
}

.mode-button {
  min-width: 108px;
  height: 38px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mode-button:hover {
  border-color: var(--edge);
  background: rgba(61, 139, 255, 0.1);
}

.mode-button.active {
  color: var(--ink);
  background: var(--fill-blue);
  border-color: rgba(120, 184, 255, 0.7);
  box-shadow: var(--glow);
}

.night-source-switch {
  display: flex;
  gap: 4px;
  align-items: center;
}

.night-source-switch[hidden] {
  display: none;
}

.night-source-switch button {
  width: 54px;
  height: 38px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.night-source-switch button:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.08);
}

.night-source-switch button.active {
  color: #171512;
  background: var(--accent);
}

.map-hint {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  color: rgba(232, 225, 210, 0.58);
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* Live background work. This deliberately has no enclosing window: individual
   translucent rows float between the left rail and the bottom map-mode dock. */
.background-activity {
  position: absolute;
  left: 290px;
  bottom: 16px;
  z-index: 18;
  display: grid;
  gap: 5px;
  width: 330px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.background-activity[hidden] { display: none; }
.background-activity.is-visible { opacity: 1; transform: translateY(0); }

.background-activity-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px 2px;
  color: rgba(226, 234, 244, 0.82);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  text-transform: uppercase;
}

.background-activity-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-300);
  box-shadow: 0 0 0 0 rgba(120, 184, 255, 0.65);
  animation: background-activity-pulse 1.7s ease-out infinite;
}

.background-activity-list { display: grid; gap: 4px; }

.background-activity-row {
  --activity-color: var(--blue-300);
  position: relative;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 39px;
  max-height: 52px;
  overflow: hidden;
  padding: 6px 9px 7px;
  background: linear-gradient(90deg, rgba(9, 16, 26, 0.86), rgba(9, 16, 26, 0.6) 78%, rgba(9, 16, 26, 0.08));
  border-left: 1px solid color-mix(in srgb, var(--activity-color) 58%, transparent);
  backdrop-filter: blur(7px);
  animation: background-activity-enter 0.25s ease both;
  transition:
    min-height 0.22s ease,
    max-height 0.22s ease,
    padding 0.22s ease,
    opacity 0.2s ease,
    transform 0.22s ease;
}

.background-activity-row[data-tone="cyan"] { --activity-color: #65d7df; }
.background-activity-row[data-tone="gold"] { --activity-color: var(--accent); }
.background-activity-row[data-tone="red"] { --activity-color: #e7776c; }

.background-activity-row.is-finishing {
  opacity: 0.7;
}

.background-activity-row.is-finishing .background-activity-spinner {
  animation: none;
  border-color: color-mix(in srgb, var(--activity-color) 62%, transparent);
  box-shadow: inset 0 0 0 3px rgba(9, 16, 26, 0.78);
  background: var(--activity-color);
}

.background-activity-row.is-leaving {
  min-height: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateX(-8px);
}

.background-activity-spinner {
  width: 13px;
  height: 13px;
  border: 1px solid color-mix(in srgb, var(--activity-color) 28%, transparent);
  border-top-color: var(--activity-color);
  border-radius: 50%;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--activity-color) 45%, transparent));
  animation: background-activity-spin 0.9s linear infinite;
}

.background-activity-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.background-activity-label {
  overflow: hidden;
  color: rgba(239, 244, 250, 0.94);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.background-activity-copy small {
  overflow: hidden;
  color: rgba(196, 210, 227, 0.8);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.background-activity-row > b {
  min-width: 20px;
  color: var(--activity-color);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.background-activity-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
}

.background-activity-track i {
  display: block;
  width: calc(var(--activity-progress) * 100%);
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--activity-color));
  box-shadow: 0 0 7px var(--activity-color);
  transition: width 0.2s ease-out;
}

.background-activity-track.is-indeterminate i {
  width: 38%;
  animation: background-activity-scan 1.25s ease-in-out infinite;
}

.background-activity-more {
  padding: 1px 8px 0;
  color: rgba(184, 199, 218, 0.66);
  font-size: 9px;
  text-shadow: 0 1px 4px #000;
}

@keyframes background-activity-spin { to { transform: rotate(360deg); } }
@keyframes background-activity-pulse {
  65%, 100% { box-shadow: 0 0 0 7px rgba(120, 184, 255, 0); }
}
@keyframes background-activity-scan {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(275%); }
}
@keyframes background-activity-enter {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1600px) {
  .background-activity {
    bottom: 78px;
    width: 300px;
  }
}

.map-source-progress {
  position: absolute;
  right: 292px;
  top: 64px;
  width: 260px;
  padding: 10px;
  pointer-events: auto;
  background: rgba(20, 23, 26, 0.9);
  border: 1px solid rgba(110, 176, 255, 0.32);
  box-shadow: 0 14px 34px var(--shadow);
  backdrop-filter: blur(10px);
}

.map-source-progress[hidden] {
  display: none;
}

.map-source-progress-title {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-source-progress-title strong {
  color: var(--text);
}

.map-source-progress-row {
  display: grid;
  gap: 4px;
  margin-top: 7px;
}

.map-source-progress-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.map-source-progress-line strong {
  color: var(--accent);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.map-source-progress-track {
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
}

.map-source-progress-track > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  transition: width 0.16s ease-out;
}

.map-job-overlay {
  position: fixed;
  inset: 50px 0 0;
  z-index: 35;
  display: grid;
  place-items: center;
  pointer-events: auto;
  background: rgba(8, 10, 12, 0.48);
  backdrop-filter: blur(2px);
}

.map-job-overlay[hidden] {
  display: none;
}

.map-job-card {
  width: min(460px, calc(100vw - 36px));
  padding: 16px;
  background: rgba(20, 23, 26, 0.94);
  border: 1px solid rgba(110, 176, 255, 0.4);
  box-shadow: 0 22px 60px var(--shadow);
}

.map-job-kicker {
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.map-job-title {
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
}

.map-job-subtitle {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.map-job-track {
  height: 8px;
  margin-top: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.map-job-track > div {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  transition: width 0.16s ease-out;
}

.map-job-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

.map-job-line strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.map-job-cancel {
  width: 100%;
  height: 30px;
  margin-top: 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.16);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.map-job-cancel:hover {
  border-color: rgba(110, 176, 255, 0.48);
  background: rgba(110, 176, 255, 0.1);
}

/* ============================================================
   Boot splash — "Orbital Command" cinematic sigil.
   A single refined emblem (faceted hex-core planet + orbital
   ring inside a targeting reticle) framed like a title card.
   All motion is transform/opacity only, so it keeps breathing
   while the WebGL/scene constructors block the main thread.
   ============================================================ */
.loading-splash {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #dce8f6;
  background:
    radial-gradient(115% 85% at 50% 40%, rgba(64, 116, 188, 0.10), transparent 55%),
    radial-gradient(150% 130% at 50% 122%, rgba(18, 38, 64, 0.55), transparent 60%),
    #05080d;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}

/* Fine engineering grid, pooled softly at the centre. */
.loading-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(132, 176, 226, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 176, 226, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 45%, black 0%, transparent 62%);
}

/* Cinematic vignette. */
.loading-splash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(135% 125% at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
}

/* Framed HUD: hairline letterbox + corner brackets. */
.boot-frame {
  position: absolute;
  inset: clamp(14px, 3.2vw, 40px);
  z-index: 0;
  pointer-events: none;
}
.boot-frame::before,
.boot-frame::after {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150, 180, 215, 0.16) 20%, rgba(150, 180, 215, 0.16) 80%, transparent);
}
.boot-frame::before { top: 0; }
.boot-frame::after { bottom: 0; }
.boot-frame > span {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(160, 190, 225, 0.26);
}
.boot-frame > span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.boot-frame > span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.boot-frame > span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.boot-frame > span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.boot-cinema {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(920px, calc(100vw - 24px));
  padding: 12px;
}

/* === The emblem =================================================== */
.boot-emblem {
  position: relative;
  width: min(300px, 42vw, 60vh);
  min-width: 176px;
  aspect-ratio: 1;
  filter: drop-shadow(0 22px 46px rgba(0, 0, 0, 0.5));
  animation: boot-emblem-in 1200ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}
.boot-emblem svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.boot-aura {
  transform-box: fill-box;
  transform-origin: center;
  animation: boot-aura-pulse 4.4s ease-in-out infinite;
}

/* Slowly rotating outer graduation assembly. */
.boot-grad {
  transform-origin: 160px 160px;
  animation: boot-spin 64s linear infinite;
}
.boot-grad-ring {
  fill: none;
  stroke: rgba(150, 178, 212, 0.16);
  stroke-width: 0.75;
}
.boot-grad-tick {
  stroke: rgba(150, 178, 212, 0.3);
  stroke-width: 0.7;
  transform-origin: 160px 160px;
}
.boot-grad-tick.is-major {
  stroke: rgba(206, 224, 246, 0.5);
  stroke-width: 1;
}

/* Reticle progress ring — the live boot indicator. */
.boot-reticle-track {
  fill: none;
  stroke: rgba(150, 178, 212, 0.16);
  stroke-width: 1.4;
}
.boot-progress-orbit {
  fill: none;
  stroke: url(#boot-arc);
  stroke-width: 2.3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 160px 160px;
  filter: drop-shadow(0 0 5px rgba(120, 180, 255, 0.5));
  transition: stroke-dashoffset 0.42s cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* Sigil linework: top/bottom stems, chevron, end caps. */
.boot-reticle {
  fill: none;
  stroke: url(#boot-plat);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boot-reticle .boot-cap {
  stroke-width: 1.2;
  opacity: 0.72;
}
.boot-reticle .boot-chevron { stroke-width: 1.7; }

/* Ringed planet: faint full orbit ring (behind), faceted core, bright front arc. */
.boot-orbit-ring {
  fill: none;
  stroke: rgba(176, 200, 228, 0.3);
  stroke-width: 1;
}
.boot-orbit-ring--front {
  fill: none;
  stroke: url(#boot-plat);
  stroke-width: 1.7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(150, 190, 255, 0.4));
}
.boot-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: boot-core-breathe 3.8s ease-in-out infinite;
}
.boot-core-hex {
  fill: rgba(120, 165, 225, 0.06);
  stroke: url(#boot-plat);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.boot-core-facet {
  fill: url(#boot-facet);
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 0.6;
  filter: drop-shadow(0 0 7px rgba(150, 195, 255, 0.6));
}

/* Slow radar sweep. */
.boot-sweep {
  transform-origin: 160px 160px;
  animation: boot-spin 7.5s linear infinite;
}
.boot-sweep path {
  fill: none;
  stroke: rgba(150, 195, 255, 0.5);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.5;
  filter: url(#boot-soft);
}

/* === Readout ====================================================== */
.boot-readout {
  display: grid;
  justify-items: center;
  margin-top: clamp(12px, 3vh, 28px);
  text-align: center;
  animation: boot-rise 900ms ease 0.24s both;
}

.boot-eyebrow {
  color: rgba(168, 190, 216, 0.58);
  font: 700 9px/1 "Bahnschrift", "Segoe UI", sans-serif;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
}

.boot-figure {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 15px;
  color: #eef6ff;
  line-height: 0.9;
}
.boot-figure .boot-percent {
  font: 200 clamp(46px, 7vw, 76px)/0.9 "Segoe UI", "Bahnschrift", sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.01em;
  text-shadow: 0 0 28px rgba(120, 175, 255, 0.24);
  transform: translateX(var(--boot-optical-shift, 0px));
}
.boot-figure i {
  margin: 0.42em 0 0 7px;
  color: var(--blue-200);
  font: 700 clamp(13px, 1.6vw, 17px)/1 "Bahnschrift", "Segoe UI", sans-serif;
  font-style: normal;
}

.boot-caption {
  margin-top: 7px;
  color: rgba(179, 199, 223, 0.72);
  font: 800 8.5px/1 "Bahnschrift", "Segoe UI", sans-serif;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
}

.boot-meter {
  position: relative;
  width: min(340px, 66vw);
  height: 1px;
  margin-top: 22px;
  background: rgba(150, 178, 212, 0.16);
}
.boot-meter-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-200));
  box-shadow: 0 0 8px rgba(150, 195, 255, 0.5);
  transition: width 0.42s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.boot-meter-fill::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(61, 139, 255, 0.8);
}

.boot-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1.6vw, 18px);
  max-width: min(560px, 92vw);
  margin-top: 21px;
}
.boot-stages > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(150, 174, 202, 0.4);
  font: 750 8px/1 "Bahnschrift", "Segoe UI", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.boot-stages em { font-style: normal; }
.boot-stages > span i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.boot-stages > span.is-complete { color: rgba(179, 205, 232, 0.82); }
.boot-stages > span.is-active { color: var(--blue-200); }
.boot-stages > span.is-active i {
  background: var(--blue-400);
  box-shadow: 0 0 8px 1px rgba(61, 139, 255, 0.85);
  animation: boot-pip 1.3s ease-in-out infinite;
}

.loading-text {
  min-height: 16px;
  max-width: min(420px, 90vw);
  margin-top: 17px;
  color: rgba(176, 197, 222, 0.6);
  font: 400 9px/1.5 "Segoe UI", sans-serif;
  letter-spacing: 0.06em;
  white-space: pre-line;
  transition: opacity 0.2s ease;
}
.loading-text.is-multiline { font-size: 8.5px; }

/* Completion bloom before the splash fades out. */
.loading-splash.is-complete .boot-core-facet { filter: drop-shadow(0 0 15px rgba(180, 215, 255, 0.9)); }
.loading-splash.is-complete .boot-progress-orbit { filter: drop-shadow(0 0 11px rgba(160, 205, 255, 0.85)); }

@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-aura-pulse {
  0%, 100% { opacity: 0.68; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes boot-core-breathe {
  0%, 100% { transform: scale(0.97); }
  50% { transform: scale(1.03); }
}
@keyframes boot-pip {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes boot-emblem-in {
  from { opacity: 0; transform: scale(0.92) translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes boot-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .boot-emblem { width: min(210px, 64vw); min-width: 150px; }
  .boot-figure .boot-percent { font-size: clamp(40px, 13vw, 54px); }
  .boot-meter { width: min(280px, 78vw); }
  .boot-stages { gap: 10px; }
  .boot-stages > span em { display: none; }
}

@media (max-height: 480px) and (min-width: 621px) {
  .boot-emblem { width: min(158px, 42vh); min-width: 132px; }
  .boot-readout { margin-top: 8px; }
  .boot-figure { margin-top: 9px; }
  .boot-meter, .boot-stages { margin-top: 13px; }
  .loading-text { margin-top: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-emblem,
  .boot-readout,
  .boot-aura,
  .boot-grad,
  .boot-core,
  .boot-sweep,
  .boot-meter-fill,
  .boot-stages > span.is-active i { animation: none; }
  .boot-emblem,
  .boot-readout { opacity: 1; transform: none; }
}

.boot-error {
  position: fixed;
  top: 56px;
  left: 16px;
  right: 16px;
  z-index: 50;
  padding: 16px;
  white-space: pre-wrap;
  color: #ffd6d2;
  background: #3a1212;
  border: 1px solid #bd6759;
}

@media (max-width: 920px) {
  .top-status {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 48px;
  }

  .status-strip,
  .clock-readout {
    display: none;
  }

  .side-panel,
  .right-panel,
  .unit-inspector,
  .unit-order-radial,
  .tactical-turn-bar,
  .workspace-dock,
  .kml-inspector {
    display: none;
  }

  .mode-dock {
    left: 8px;
    right: 8px;
    overflow-x: auto;
    transform: none;
  }

  .map-action-dock {
    left: 50% !important;
    bottom: 70px !important;
  }

  .background-activity {
    left: 8px;
    right: 8px;
    bottom: 76px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .background-activity,
  .background-activity-row,
  .background-activity-spinner,
  .background-activity-pulse,
  .background-activity-track.is-indeterminate i {
    animation: none;
    transition: none;
  }
}

/* === Unified quality studio ============================================
 * Four complete policies plus an optional expert sharpness override. The
 * visual grammar deliberately mirrors Stream X-Ray on the left rail.
 */
.quality-studio {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.quality-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.quality-profile {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 56px;
  padding: 7px;
  color: rgba(213, 226, 242, 0.84);
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(120, 184, 255, 0.13);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.quality-profile:hover {
  background: rgba(61, 139, 255, 0.09);
  border-color: rgba(101, 204, 255, 0.38);
}

.quality-profile:focus-visible,
.cache-primary-action:focus-visible {
  outline: none;
  border-color: rgba(101, 204, 255, 0.78);
  box-shadow: 0 0 0 1px rgba(61, 139, 255, 0.6), 0 0 12px rgba(53, 200, 255, 0.22);
}

.quality-profile.is-active {
  color: #eaf6ff;
  background:
    linear-gradient(135deg, rgba(61, 139, 255, 0.22), rgba(53, 200, 255, 0.07)),
    rgba(7, 18, 32, 0.72);
  border-color: rgba(101, 204, 255, 0.62);
  box-shadow: inset 2px 0 0 #47bfff, inset 0 0 14px rgba(53, 200, 255, 0.08);
}

.quality-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
}

.quality-profile-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-profile-head em {
  flex: none;
  color: rgba(101, 204, 255, 0.72);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.quality-profile-track {
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: rgba(120, 184, 255, 0.08);
}

.quality-profile-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3d6dff, #35c8ff);
  box-shadow: 0 0 7px rgba(53, 200, 255, 0.42);
}

.quality-profile small {
  overflow: hidden;
  color: rgba(154, 177, 204, 0.68);
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-profile.is-active small {
  color: rgba(197, 224, 247, 0.8);
}

.quality-readout {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 0 0 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(91, 167, 222, 0.18);
  box-shadow: none;
}

.quality-readout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quality-readout-head > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.quality-readout-head small {
  color: rgba(151, 177, 207, 0.58);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quality-readout-head strong {
  overflow: hidden;
  color: #dff4ff;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality-readout-head em {
  flex: none;
  padding: 2px 5px;
  color: #8be4ff;
  background: rgba(53, 200, 255, 0.1);
  border: 1px solid rgba(53, 200, 255, 0.28);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.quality-readout > p {
  margin: 0;
  color: rgba(168, 190, 216, 0.72);
  font-size: 9px;
  line-height: 1.35;
}

.quality-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.quality-metrics > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 5px 2px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(120, 184, 255, 0.1);
}

.quality-metrics small {
  overflow: hidden;
  color: rgba(145, 169, 198, 0.62);
  font-size: 7px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.quality-metrics b {
  color: #8bdcff;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.quality-tuning {
  min-width: 0;
  padding: 7px 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(120, 184, 255, 0.12);
  border-bottom: 1px solid rgba(120, 184, 255, 0.12);
}

.quality-tuning summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  color: rgba(194, 216, 238, 0.78);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  list-style: none;
  text-transform: uppercase;
}

.quality-tuning summary::-webkit-details-marker { display: none; }
.quality-tuning summary::before { content: "▸"; color: #54c9f8; }
.quality-tuning[open] summary::before { content: "▾"; }

.quality-tuning summary:focus-visible {
  outline: 1px solid rgba(101, 204, 255, 0.68);
  outline-offset: 3px;
}

.quality-tuning summary span {
  flex: 1 1 auto;
}

.quality-tuning summary strong {
  color: rgba(101, 204, 255, 0.72);
  font-size: 7px;
}

.quality-sharpness-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.quality-sharpness-row label {
  color: rgba(218, 232, 246, 0.86);
  font-size: 10px;
  font-weight: 650;
}

.quality-sharpness-row b {
  color: #8be4ff;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.quality-sharpness-slider {
  width: 100%;
  margin: 5px 0 0;
  accent-color: #54c9f8;
  cursor: ew-resize;
}

.quality-sharpness-axis {
  display: flex;
  justify-content: space-between;
  color: rgba(145, 169, 198, 0.62);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.quality-tuning-hint {
  margin: 7px 0 0;
  color: rgba(163, 184, 209, 0.68);
  font-size: 8.5px;
  line-height: 1.35;
}

.quality-technical {
  margin-top: 6px;
  padding-top: 6px;
  color: rgba(119, 160, 201, 0.68);
  border-top: 1px solid rgba(120, 184, 255, 0.1);
  font-size: 8px;
  line-height: 1.3;
}

.cache-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.cache-primary-action {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 36px;
  padding: 5px 6px;
  color: #dff4ff;
  text-align: left;
  border: 1px solid;
  cursor: pointer;
}

.cache-primary-action > span {
  font-size: 17px;
  line-height: 1;
  text-align: center;
}

.cache-primary-action strong {
  min-width: 0;
  overflow: hidden;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1.15;
  text-transform: uppercase;
}

.cache-download-action {
  color: #dcfff0;
  background: linear-gradient(135deg, rgba(25, 155, 102, 0.28), rgba(57, 218, 151, 0.08));
  border-color: rgba(79, 218, 159, 0.45);
  box-shadow: inset 2px 0 0 rgba(79, 218, 159, 0.72);
}

.cache-download-action > span {
  color: #61e6ad;
  text-shadow: 0 0 8px rgba(69, 220, 156, 0.55);
}

.cache-download-action:hover {
  background: linear-gradient(135deg, rgba(25, 155, 102, 0.42), rgba(57, 218, 151, 0.13));
  border-color: rgba(99, 236, 177, 0.75);
}

.cache-refocus-action {
  color: #e4f5ff;
  background: linear-gradient(135deg, rgba(61, 139, 255, 0.28), rgba(53, 200, 255, 0.08));
  border-color: rgba(101, 204, 255, 0.45);
  box-shadow: inset 2px 0 0 rgba(71, 191, 255, 0.72);
}

.cache-refocus-action > span {
  color: #68d5ff;
  text-shadow: 0 0 8px rgba(101, 215, 255, 0.55);
}

.cache-refocus-action:hover {
  background: linear-gradient(135deg, rgba(61, 139, 255, 0.42), rgba(53, 200, 255, 0.14));
  border-color: rgba(116, 216, 255, 0.76);
}

/* Selects inside the map downloader modal reuse this compact control. */
.qp-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(7, 16, 28, 0.92);
  border: 1px solid rgba(101, 204, 255, 0.34);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.qp-select:hover {
  border-color: rgba(101, 204, 255, 0.68);
}

/* Map downloader overlay. The old first-run quality prompt was removed. */
.quality-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.74);
  backdrop-filter: blur(2px);
}

.quality-prompt-card {
  width: min(440px, 92vw);
  padding: 20px;
  display: grid;
  gap: 12px;
  background:
    linear-gradient(145deg, rgba(42, 99, 170, 0.12), transparent 38%),
    rgba(13, 22, 36, 0.98);
  border: 1px solid rgba(101, 204, 255, 0.42);
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}

.qpr-title {
  font-size: 16px;
  font-weight: 700;
  color: #dff4ff;
}

.qpr-sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted, #9aa0ab);
}

.qpr-skip {
  justify-self: center;
  margin-top: 2px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--muted, #9aa0ab);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.qpr-skip:hover {
  color: var(--text);
}

/* Ultra prefetch picker (extends the quality-prompt modal). */
.ultra-prefetch-card {
  width: min(520px, calc(100vw - 32px));
}

.up-form {
  display: grid;
  gap: 8px;
}

.up-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
}

.up-row[hidden],
.up-point[hidden],
.up-progress[hidden],
.up-actions [hidden] {
  display: none !important;
}

.up-row > span {
  flex: 0 0 92px;
  color: var(--muted, #9aa0ab);
}

.up-row .qp-select {
  flex: 1 1 auto;
}

.up-zoom-range .up-num {
  max-width: 84px;
}

.up-num {
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(7, 16, 28, 0.92);
  border: 1px solid rgba(101, 204, 255, 0.26);
  border-radius: 2px;
  font-size: 12px;
}

.up-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted, #9aa0ab);
}

.up-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.up-danger {
  color: #d6a647;
}

.up-estimate {
  padding: 7px 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(220, 213, 196, 0.14);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.up-estimate.warning {
  color: #e7c36f;
  border-color: rgba(214, 166, 71, 0.45);
  background: rgba(214, 166, 71, 0.09);
}

.up-progress {
  display: grid;
  gap: 4px;
}

.up-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.up-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3d6dff, #35c8ff);
  transition: width 0.2s ease;
}

.up-status {
  font-size: 11px;
}

.up-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.up-start {
  height: 30px;
  padding: 0 14px;
  color: #eaf6ff;
  background: linear-gradient(180deg, rgba(61, 139, 255, 0.9), rgba(39, 104, 198, 0.92));
  border: 1px solid rgba(101, 204, 255, 0.68);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.up-start:hover {
  filter: brightness(1.08);
}

.up-start:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

/* === LOD Levels panel ===================================================
 * Per-zoom-level toggles + live counters. Rows are dense (18px high) so
 * all 18 levels fit without scrolling. Active zone is highlighted; off
 * levels grey out; empty levels fade. Bar = fraction of busiest level.
 */
.lod-levels {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 10px;
}

.lod-header {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(220, 213, 196, 0.1);
}

.lod-zone {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(125, 211, 252, 0.92);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lod-meta {
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lod-rows {
  display: grid;
  gap: 1px;
  min-width: 0;
  margin-top: 7px;
}

.lod-row {
  display: grid;
  grid-template-columns: 14px 31px 46px minmax(42px, 1fr) 24px 26px;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 3px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

.lod-row.lod-active {
  background: rgba(110, 176, 255, 0.13);
  border-color: rgba(110, 176, 255, 0.42);
}

.lod-row.lod-in-window {
  background: rgba(125, 211, 252, 0.07);
  border-color: rgba(125, 211, 252, 0.2);
}

.lod-row.lod-off {
  opacity: 0.4;
  color: rgba(255, 90, 90, 0.85);
}

.lod-row.lod-empty {
  color: var(--muted);
}

.lod-check {
  margin: 0;
  cursor: pointer;
}

.lod-check:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.lod-z {
  font-weight: 700;
  color: rgba(220, 213, 196, 0.9);
}

.lod-zone-tag {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lod-count {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lod-count b {
  color: rgba(125, 211, 252, 0.95);
  font-weight: 700;
}

.lod-loading {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 200, 120, 0.95);
  font-size: 9px;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}

.lod-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1px;
  overflow: hidden;
}

.lod-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(125, 211, 252, 0.6), rgba(110, 176, 255, 0.85));
  transition: width 0.25s ease;
}

.lod-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 2px;
}

.lod-btn {
  min-width: 0;
  height: 22px;
  padding: 0 4px;
  overflow: hidden;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(220, 213, 196, 0.14);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lod-btn:hover {
  border-color: rgba(110, 176, 255, 0.42);
  background: rgba(110, 176, 255, 0.1);
}

.stream-xray {
  display: grid;
  gap: 7px;
  min-width: 0;
  font-size: 10px;
}

.sx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px;
  background:
    linear-gradient(120deg, rgba(42, 99, 170, 0.16), rgba(216, 180, 90, 0.08)),
    rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(77, 163, 237, 0.24);
}

.sx-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-head strong {
  color: #65ccff;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sx-head span {
  color: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.sx-head span b { color: rgba(220, 231, 244, 0.92); }

.sx-toggle {
  width: 42px;
  height: 24px;
  color: rgba(180, 190, 205, 0.72);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.15);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.sx-toggle.is-on {
  color: #8be4ff;
  background: rgba(53, 200, 255, 0.13);
  border-color: rgba(53, 200, 255, 0.5);
  box-shadow: inset 0 0 12px rgba(53, 200, 255, 0.08);
}

.sx-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.sx-pipeline > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 6px 4px;
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(220, 213, 196, 0.1);
}

.sx-pipeline span {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.sx-pipeline b {
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.sx-pipeline [data-stage="queue"] b { color: #6388ff; }
.sx-pipeline [data-stage="network"] b { color: #65d7ff; }
.sx-pipeline [data-stage="gpu"] b { color: #ffb15a; }
.sx-pipeline [data-stage="ready"] b { color: #e4c570; }

.sx-strength {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sx-strength input {
  width: 100%;
  accent-color: #54c9f8;
}

.sx-strength b {
  color: rgba(220, 231, 244, 0.9);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sx-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(220, 213, 196, 0.09);
}

.sx-legend span {
  display: flex;
  align-items: center;
  min-width: 0;
  color: rgba(190, 202, 218, 0.76);
  font-size: 9px;
  white-space: nowrap;
}

.sx-legend i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  background: #26384f;
  box-shadow: 0 0 6px currentColor;
}

.sx-legend [data-state="queued"] i { color: #3d6dff; background: #3d6dff; }
.sx-legend [data-state="fetching"] i { color: #35c8ff; background: #35c8ff; }
.sx-legend [data-state="upload"] i { color: #ffa43a; background: #ffa43a; }
.sx-legend [data-state="ready"] i { color: #d8b45a; background: #d8b45a; }
.sx-legend [data-state="cache"] i { color: #55d6a0; background: #55d6a0; }
.sx-legend [data-state="fallback"] i { color: #66779b; background: #66779b; }
.sx-legend [data-state="error"] i { color: #ff5263; background: #ff5263; }

.sx-note {
  color: rgba(166, 183, 204, 0.62);
  font-size: 9px;
  text-align: center;
}

.sx-note b { color: rgba(211, 223, 238, 0.82); font-weight: 650; }
.stream-xray[data-active="false"] .sx-head strong { color: rgba(170, 183, 200, 0.72); }

.strategy-shell.stream-xray-pickable .map-canvas { cursor: crosshair; }

.sx-inspector {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  background:
    linear-gradient(135deg, rgba(50, 111, 160, 0.1), transparent 46%),
    rgba(3, 10, 20, 0.56);
  border: 1px solid rgba(91, 167, 222, 0.22);
  box-shadow: inset 2px 0 0 rgba(69, 192, 255, 0.55);
}

.sx-inspector.has-error {
  background:
    linear-gradient(135deg, rgba(255, 82, 99, 0.14), transparent 48%),
    rgba(16, 7, 13, 0.62);
  border-color: rgba(255, 82, 99, 0.36);
  box-shadow: inset 2px 0 0 #ff5263;
}

.sx-inspector.is-empty {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: rgba(172, 191, 214, 0.62);
  border-style: dashed;
  box-shadow: none;
}

.sx-inspector.is-empty > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sx-inspector.is-empty b {
  color: rgba(210, 223, 238, 0.82);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sx-inspector.is-empty em {
  overflow: hidden;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-pick-mark {
  color: #65ccff;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 8px rgba(101, 204, 255, 0.7);
}

.sx-inspector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.sx-inspector-head > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sx-inspector-head span {
  color: #65ccff;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sx-inspector.has-error .sx-inspector-head span { color: #ff7381; }

.sx-inspector-head strong {
  overflow: hidden;
  color: rgba(231, 239, 248, 0.94);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-inspector-head button {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  color: rgba(189, 205, 224, 0.7);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 230, 242, 0.12);
  cursor: pointer;
  font-size: 14px;
  line-height: 16px;
}

.sx-inspector-head button:hover {
  color: #fff;
  border-color: rgba(101, 204, 255, 0.48);
}

.sx-inspector-grid {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 3px 7px;
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(220, 230, 242, 0.09);
}

.sx-inspector-grid > span {
  color: rgba(158, 177, 199, 0.62);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sx-inspector-grid > b {
  overflow: hidden;
  color: rgba(214, 225, 239, 0.88);
  font-size: 9px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-inspector-grid [data-state="error"],
.sx-inspector-grid [data-state="unavailable"] { color: #ff6676; }
.sx-inspector-grid [data-state="fetching"],
.sx-inspector-grid [data-state="queued"] { color: #61d2ff; }
.sx-inspector-grid [data-state="upload"] { color: #ffb15a; }
.sx-inspector-grid [data-state="ready"] { color: #e4c570; }
.sx-inspector-grid [data-state="cache"] { color: #64dda9; }
.sx-inspector-grid [data-state="fallback"],
.sx-inspector-grid [data-state="inherited"] { color: #8fa1c5; }

.sx-error-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px;
  background: rgba(255, 82, 99, 0.09);
  border: 1px solid rgba(255, 82, 99, 0.28);
}

.sx-error-card span {
  color: #ff7381;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sx-error-card strong {
  color: rgba(255, 219, 224, 0.94);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sx-error-card em {
  color: rgba(220, 168, 178, 0.68);
  font-size: 8px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.sx-request-key {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-request-key span,
.sx-stack {
  color: rgba(150, 169, 191, 0.58);
  font-size: 8px;
  letter-spacing: 0.03em;
}

.sx-request-key code {
  color: rgba(188, 208, 229, 0.78);
  font-family: var(--font-mono, Consolas, monospace);
  font-size: 8px;
  overflow-wrap: anywhere;
}

.sx-stack {
  padding-top: 5px;
  border-top: 1px solid rgba(220, 230, 242, 0.08);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tile-debug {
  display: grid;
  gap: 7px;
  min-width: 0;
  font-size: 10px;
}

.td-head {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(220, 213, 196, 0.1);
}

.td-head strong {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.td-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-ok strong { color: var(--ok); }
.td-busy strong { color: var(--accent); }
.td-warn strong { color: var(--bad); }

.td-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.td-card,
.td-row,
.td-alert,
.td-levels {
  min-width: 0;
  padding: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(220, 213, 196, 0.1);
}

.td-card {
  display: grid;
  gap: 3px;
}

.td-label,
.td-row span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.td-card b,
.td-row b {
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.td-card em,
.td-row em {
  min-width: 0;
  overflow: hidden;
  color: rgba(180, 205, 235, 0.68);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-row {
  display: grid;
  grid-template-columns: 68px 52px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.td-bar {
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.055);
}

.td-bar span {
  display: block;
  height: 100%;
  min-width: 1px;
  background: rgba(125, 211, 252, 0.82);
  transition: width 0.25s ease;
}

.td-net span { background: rgba(94, 159, 230, 0.92); }
.td-gpu span { background: rgba(217, 122, 58, 0.92); }
.td-warm span { background: rgba(111, 207, 134, 0.82); }
.td-live span { background: linear-gradient(90deg, rgba(125, 211, 252, 0.82), rgba(110, 176, 255, 0.9)); }

.td-alert {
  color: #ffd0ca;
  background: rgba(217, 101, 90, 0.12);
  border-color: rgba(217, 101, 90, 0.34);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.td-levels summary {
  cursor: pointer;
  color: rgba(232, 225, 210, 0.86);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.td-z-row {
  display: grid;
  grid-template-columns: 30px 54px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-width: 0;
  margin-top: 5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.td-z-row span {
  color: var(--accent);
  font-weight: 800;
}

.td-z-row b {
  color: var(--text);
  font-size: 10px;
}

.td-z-row em,
.td-empty {
  min-width: 0;
  overflow: hidden;
  color: rgba(180, 205, 235, 0.68);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Observer mode — multi-map compare overlay ======================== */

/* While Observer is open, hide the normal chrome (side panels, docks, ruler).
   The overlay sits above everything, but the tms pane is a transparent window
   onto the WebGL canvas — without this, chrome below the overlay bleeds through
   that hole. The canvas itself is a separate sibling and stays visible. */
body.observer-active .strategy-shell { display: none; }

/* Top status-strip launcher (sits next to the Fate button). */
.observer-launcher {
  height: 22px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(127, 167, 199, 0.12);
  border: 1px solid rgba(127, 167, 199, 0.34);
  border-radius: 4px;
  /* The status strip is pointer-events:none for click-through; interactive
     buttons (like .fate-launcher) must re-enable it. */
  pointer-events: auto;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.observer-launcher:hover {
  border-color: rgba(127, 167, 199, 0.7);
  background: rgba(127, 167, 199, 0.22);
}
.observer-launcher.active {
  color: #0c1014;
  background: #7fa7c7;
  border-color: #7fa7c7;
}

/* Overlay is transparent + pointer-transparent by default so the tms pane is a
   true "window" onto the scissored globe and its drags reach the canvas. The
   toolbar, pane headers and iframe panes re-enable pointer events. */
.observer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.observer-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(8, 12, 18, 0.97);
  border-bottom: 1px solid rgba(220, 213, 196, 0.16);
  pointer-events: auto;
}
.observer-brand {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6eb0ff;
}
.observer-toolbar__spacer { flex: 1; }
.observer-layouts { display: flex; gap: 4px; }
.observer-layout-btn,
.observer-tool-btn {
  height: 24px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.observer-layout-btn:hover,
.observer-tool-btn:hover {
  border-color: rgba(110, 176, 255, 0.5);
  background: rgba(110, 176, 255, 0.12);
}
.observer-layout-btn.active {
  color: #0c1014;
  background: #6eb0ff;
  border-color: #6eb0ff;
}
.observer-close { font-size: 13px; }

/* Grid of panes. Background stays transparent — the render loop clears the
   canvas to dark, so gaps read as dark and the tms pane shows the globe. */
.observer-grid {
  flex: 1;
  display: grid;
  gap: 6px;
  padding: 6px;
  min-height: 0;
  pointer-events: none;
}
.observer-grid.is-single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.observer-grid.is-split  { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.observer-grid.is-tri    { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.observer-grid.is-quad   { grid-template-columns: 2.2fr 1fr; grid-template-rows: repeat(3, 1fr); }
.observer-grid.is-grid   { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
/* The first pane is the big one in the focus layouts. */
.observer-grid.is-tri  .observer-pane:first-child { grid-column: 1; grid-row: 1 / span 2; }
.observer-grid.is-quad .observer-pane:first-child { grid-column: 1; grid-row: 1 / span 3; }

.observer-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
}
.observer-pane--iframe {
  background: #0c1014;
  border: 1px solid rgba(220, 213, 196, 0.16);
}
/* tms pane: transparent window; the pane (and its body) are pointer-transparent
   so drags reach the canvas. Only the head re-enables pointer events. */
.observer-pane--tms { background: transparent; pointer-events: none; }
.observer-pane--tms .observer-pane__head {
  pointer-events: auto;
  border: 1px solid rgba(127, 167, 199, 0.4);
  border-bottom: none;
  background: rgba(8, 12, 18, 0.82);
}

.observer-pane__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(8, 12, 18, 0.92);
  border-bottom: 1px solid rgba(220, 213, 196, 0.12);
  pointer-events: auto;
}
.observer-pane__source {
  flex: 0 0 auto;
  max-width: 48%;
  height: 22px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.observer-pane__url {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 4px;
  font-size: 11px;
}
.observer-pane__actions {
  margin-left: auto;
  display: flex;
  gap: 3px;
}
.observer-pane__btn {
  width: 24px;
  height: 22px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.observer-pane__btn:hover {
  border-color: rgba(110, 176, 255, 0.5);
  background: rgba(110, 176, 255, 0.12);
}
.observer-pane__btn:disabled { opacity: 0.3; cursor: default; }
/* Active toggle buttons (link when following, crop when "map only"). */
.observer-pane--linked .observer-pane__btn[data-act="link"],
.observer-pane__btn.is-on {
  color: #0c1014;
  background: #7fa7c7;
  border-color: #7fa7c7;
}

.observer-pane__body {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;   /* clip the over-wide iframe used by "show map only" */
  background: #0c1014;
}
.observer-pane__body--tms {
  background: transparent;
  pointer-events: none;   /* clicks/drag fall through to the WebGL canvas */
}
.observer-pane__frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #0c1014;
  pointer-events: auto;
}
.observer-tool-btn.active {
  color: #0c1014;
  background: #7fa7c7;
  border-color: #7fa7c7;
}

/* ===== Draw layer — paint-on-the-map annotation ========================= */

.draw-launcher { font-size: 10px; }   /* inherits .observer-launcher look */

.draw-canvas {
  position: fixed;
  inset: 0;
  z-index: 9600;          /* above the Observer overlay (9500) */
  pointer-events: none;   /* strokes visible, but map/iframes stay interactive */
}
.draw-canvas.is-active { pointer-events: auto; cursor: crosshair; }
.draw-canvas.is-active.is-eraser { cursor: cell; }

.draw-toolbar {
  position: fixed;
  bottom: 76px;            /* above the bottom mode dock (Terrain/Charts/Map…) */
  left: 50%;
  z-index: 9700;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 96vw;
  padding: 6px 10px;
  background: rgba(8, 12, 18, 0.97);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 8px;
  /* hidden by default; the pencil toggles .is-open with a slide/fade */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.draw-toolbar.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
/* In Observer the panel docks to the right edge as a straight, long thin strip. */
.draw-toolbar.is-observer-mode {
  top: 50%;
  bottom: auto;
  right: 10px;
  left: auto;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: none;
  transform: translateX(16px) translateY(-50%);   /* closed: slid off right */
}
.draw-toolbar.is-observer-mode.is-open { transform: translateY(-50%); }
.draw-toolbar.is-observer-mode .draw-group { flex-direction: column; gap: 4px; }
.draw-toolbar.is-observer-mode .draw-swatches { flex-direction: column; flex-wrap: nowrap; max-width: none; }
.draw-toolbar.is-observer-mode .draw-size { width: 60px; }
.draw-group { display: flex; align-items: center; gap: 4px; }
.draw-swatches { gap: 3px; }
.draw-btn {
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.draw-btn:hover { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.12); }
.draw-btn.is-on { color: #0c1014; background: #7fa7c7; border-color: #7fa7c7; }
.draw-swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
}
.draw-swatch.is-on { border-color: #fff; box-shadow: 0 0 0 2px #7fa7c7; }
.draw-color { width: 28px; height: 24px; padding: 0; border: none; background: none; cursor: pointer; }
.draw-size { width: 90px; }
.draw-close { font-size: 13px; }

.draw-notes-wrap { position: relative; }
.draw-notes {
  position: absolute;
  bottom: 34px;            /* panel sits at the bottom → notes open upward */
  right: 0;
  width: 250px;
  max-height: 50vh;
  overflow: auto;
  padding: 8px;
  background: rgba(8, 12, 18, 0.98);
  border: 1px solid rgba(220, 213, 196, 0.2);
  border-radius: 8px;
}
.draw-notes-save { display: flex; gap: 4px; margin-bottom: 6px; }
.draw-note-name {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 4px;
  font-size: 12px;
}
.draw-notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.draw-notes-list li { display: flex; gap: 4px; align-items: center; }
.draw-note-load {
  flex: 1;
  text-align: left;
  height: 24px;
  padding: 0 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(220, 213, 196, 0.14);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw-note-load:hover { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.12); }
.draw-note-del {
  width: 24px;
  height: 24px;
  color: var(--text);
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.3);
  border-radius: 4px;
  cursor: pointer;
}
.draw-notes-empty { color: rgba(220, 213, 196, 0.5); font-size: 11px; padding: 4px; }
/* When docked right-vertical (Observer), notes open to the LEFT of the panel. */
.draw-toolbar.is-observer-mode .draw-notes { bottom: auto; top: 0; right: calc(100% + 8px); }

/* ===== On-screen quick controls — independent HUD sliders, no backing plate ===== */
.screen-quick-controls {
  position: fixed;
  top: 116px;
  right: 286px;
  z-index: 29;
  display: grid;
  gap: 8px;
  width: 214px;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.16s ease, visibility 0s linear, transform 0.16s ease;
}

.screen-quick-controls.is-menu-open,
.desk-settings-open .screen-quick-controls {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
}

.sqc-control {
  --sqc-accent: rgba(151, 189, 224, 0.9);
  display: grid;
  grid-template-columns: 44px minmax(96px, 1fr) 38px;
  align-items: center;
  gap: 8px;
  height: 22px;
  pointer-events: auto;
  color: rgba(213, 223, 234, 0.82);
  cursor: ew-resize;
  opacity: 0.3;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.sqc-control[data-sqc="brightness"] { --sqc-accent: rgba(225, 191, 119, 0.94); }
.sqc-control[data-sqc="dem"] { --sqc-accent: rgba(116, 184, 237, 0.94); }
.sqc-control[data-sqc="units"] { --sqc-accent: rgba(120, 211, 159, 0.92); }
.sqc-control[data-sqc="kml"] { --sqc-accent: rgba(188, 151, 224, 0.92); }
.sqc-control[data-sqc="roads"] { --sqc-accent: rgba(226, 163, 128, 0.92); }
.sqc-control[data-sqc="labels"] { --sqc-accent: rgba(151, 189, 224, 0.92); }

.sqc-control:hover,
.sqc-control:focus-within {
  opacity: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.82));
}

.is-menu-open .sqc-control,
.desk-settings-open .sqc-control { pointer-events: none; }

.sqc-label,
.sqc-control output {
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.96), 0 0 4px rgba(0, 0, 0, 0.72);
  transition: color 0.18s ease, opacity 0.18s ease;
}

.sqc-label {
  color: rgba(205, 216, 228, 0.75);
  font: 800 8px/1 sans-serif;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.sqc-control output {
  color: var(--sqc-accent);
  font: 700 8.5px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  opacity: 0;
}

.sqc-control:hover .sqc-label,
.sqc-control:focus-within .sqc-label { color: var(--sqc-accent); }
.sqc-control:hover output,
.sqc-control:focus-within output { opacity: 0.92; }

/* Double-click the name → default. The pointer cursor over the name says the
   word is a button, not just a caption for the track next to it. */
.sqc-label { cursor: pointer; user-select: none; }
.sqc-control.is-reset { animation: sqc-reset-flash 0.42s ease-out; }
.sqc-control.is-reset .sqc-label,
.sqc-control.is-reset output { animation: sqc-reset-glow 0.42s ease-out; }

@keyframes sqc-reset-flash {
  0% { opacity: 1; filter: drop-shadow(0 0 6px var(--sqc-accent)); }
  100% { filter: none; }
}

@keyframes sqc-reset-glow {
  0%, 40% { color: var(--sqc-accent); opacity: 1; }
}

.sqc-control input[type="range"] {
  --sqc-progress: 50%;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.sqc-control input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--sqc-accent) 0 var(--sqc-progress),
    rgba(174, 194, 214, 0.28) var(--sqc-progress) 100%
  );
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
}

.sqc-control input[type="range"]::-webkit-slider-thumb {
  width: 8px;
  height: 8px;
  margin-top: -3px;
  -webkit-appearance: none;
  background: var(--sqc-accent);
  border: 1px solid rgba(7, 13, 20, 0.82);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(225, 235, 245, 0.12), 0 0 6px var(--sqc-accent);
}

.sqc-control input[type="range"]::-moz-range-track {
  height: 2px;
  background: rgba(174, 194, 214, 0.28);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
}

.sqc-control input[type="range"]::-moz-range-progress {
  height: 2px;
  background: var(--sqc-accent);
  border-radius: 2px;
}

.sqc-control input[type="range"]::-moz-range-thumb {
  width: 8px;
  height: 8px;
  background: var(--sqc-accent);
  border: 1px solid rgba(7, 13, 20, 0.82);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(225, 235, 245, 0.12), 0 0 6px var(--sqc-accent);
}

.sqc-control input[type="range"]:focus-visible {
  outline: 1px solid var(--sqc-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .screen-quick-controls,
  .sqc-control,
  .sqc-label,
  .sqc-control output { transition: none; }
  .sqc-control.is-reset,
  .sqc-control.is-reset .sqc-label,
  .sqc-control.is-reset output { animation: none; }
}

@media (max-width: 920px) {
  .screen-quick-controls { display: none; }
}

/* ===== Quick controls — Brightness + DEM Height (top-right floating) ===== */
.quick-controls {
  position: fixed;
  top: 64px;
  right: 286px;            /* sits to the LEFT of the 260px right panel (right:14px) */
  width: 212px;
  z-index: 30;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 40px var(--shadow);
  backdrop-filter: blur(10px);
  /* Hidden by default; the ☀ status-strip button toggles .is-open (animated).
     Keeps it off the download HUD that appears top-right during transitions. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.quick-controls.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.qc-block + .qc-block { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.qc-row { display: flex; align-items: center; gap: 8px; }
.qc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--text); white-space: nowrap; }
/* Same gesture as the on-screen strip: a block's name resets that block. */
.qc-label, .qc-check span { cursor: pointer; user-select: none; }
.qc-label.is-reset, .qc-check span.is-reset { animation: qc-reset-glow 0.42s ease-out; }
@keyframes qc-reset-glow {
  0%, 40% { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .qc-label.is-reset, .qc-check span.is-reset { animation: none; }
}
.qc-value { margin-left: auto; font-size: 11px; color: rgba(220, 213, 196, 0.6); }
.qc-slider { width: 100%; margin: 6px 0 4px; }
.qc-mini {
  height: 22px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 4px;
  cursor: pointer;
}
.qc-mini:hover { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.12); }
.qc-reset {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 50%;
  cursor: pointer;
}
.qc-reset:hover { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.12); color: #6eb0ff; }
.qc-scrub-field {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 5px;
}
.qc-scrub {
  width: 44px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  cursor: ew-resize;     /* hint: drag to scrub */
}
.qc-scrub:focus { outline: none; cursor: text; }
.qc-suffix { font-size: 11px; color: rgba(220, 213, 196, 0.6); }
.qc-hint { margin-top: 4px; font-size: 9.5px; line-height: 1.3; color: rgba(220, 213, 196, 0.45); }
.qc-sec {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.qc-tex + .qc-tex { margin-top: 6px; }
.qc-tex .qc-slider { margin: 4px 0 0; }
.qc-tex .qc-slider:disabled { opacity: 0.35; }
.qc-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.qc-check input { accent-color: #6eb0ff; }

/* ===== Desk Settings (⚙) — per-desk brightness master panel ===== */
/* Replaces the side panels while open: the shell gets .desk-settings-open and
   the left/right stacks + quick controls fade out of the way. */
.desk-settings {
  position: absolute;
  top: 64px;
  right: 14px;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-height: calc(100vh - 146px);
  z-index: 34;
  background: var(--panel);
  border: 1px solid var(--line);
  border-right: 2px solid rgba(110, 176, 255, 0.55);
  box-shadow: 0 18px 40px var(--shadow);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(16px);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.22s;
}
.desk-settings.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.desk-settings-open .side-panel,
.desk-settings-open .right-panel,
.desk-settings-open .quick-controls,
.desk-settings-open .kml-inspector {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.ds-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(26, 38, 58, 0.96), rgba(16, 24, 38, 0.92));
  border-bottom: 1px solid var(--edge-soft);
}
.ds-close {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 6px;
  cursor: pointer;
}
.ds-close:hover { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.12); color: #6eb0ff; }
.ds-titles { min-width: 0; }
.ds-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.ds-sub {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.ds-dirty {
  margin-left: auto;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e0b357;
  border: 1px solid rgba(224, 179, 87, 0.45);
  border-radius: 999px;
}
.ds-body {
  padding: 10px 12px 12px;
  overflow-x: hidden;
  overflow-y: auto;
}
.ds-sec {
  margin: 14px 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.ds-body .ds-sec:first-child { margin-top: 0; }
.ds-row { display: flex; align-items: center; gap: 8px; }
.ds-label { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--text); white-space: nowrap; }
.ds-value { margin-left: auto; font-size: 11px; color: rgba(220, 213, 196, 0.6); }
.ds-slider { width: 100%; margin: 4px 0 8px; }
.ds-auto {
  height: 20px;
  padding: 0 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 4px;
  cursor: pointer;
}
.ds-auto:hover { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.12); }
.ds-auto.is-on { color: #6eb0ff; border-color: rgba(110, 176, 255, 0.55); background: rgba(110, 176, 255, 0.14); }
.ds-layer {
  margin: 8px 0;
  padding: 8px 9px 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ds-layer-name {
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-row-sub .ds-label { font-weight: 600; color: rgba(220, 213, 196, 0.8); }
.ds-hint { font-size: 9.5px; line-height: 1.35; color: rgba(220, 213, 196, 0.45); }
.ds-foot {
  display: flex;
  gap: 6px;
  padding: 10px 12px 4px;
  border-top: 1px solid var(--edge-soft);
}
.ds-btn {
  flex: 1;
  height: 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 6px;
  cursor: pointer;
}
.ds-btn:hover:not(:disabled) { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.12); }
.ds-btn:disabled { opacity: 0.4; cursor: default; }
.ds-btn-save { color: #0e1520; background: rgba(110, 176, 255, 0.85); border-color: rgba(110, 176, 255, 0.9); }
.ds-btn-save:hover:not(:disabled) { background: rgba(216, 186, 122, 0.95); color: #0e1520; }
.ds-btn-save:disabled { color: rgba(14, 21, 32, 0.7); }
.ds-foot-hint {
  padding: 0 12px 10px;
  font-size: 9.5px;
  line-height: 1.35;
  color: rgba(220, 213, 196, 0.45);
}

/* Bottom-centred visual profile console. The earlier rules provide a compact
   fallback; these overrides establish the horizontal command-dock layout. */
.desk-settings {
  top: auto;
  right: auto;
  left: 50%;
  bottom: 76px;
  width: min(1120px, calc(100vw - 64px));
  max-height: min(370px, calc(100vh - 156px));
  z-index: 36;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(36, 55, 81, 0.18), transparent 38%),
    rgba(9, 15, 25, 0.94);
  border: 1px solid rgba(120, 184, 255, 0.34);
  border-right-width: 1px;
  border-radius: 14px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(7, 12, 20, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(1.15);
  transform: translate(-50%, 18px) scale(0.985);
  transform-origin: 50% 100%;
}

.desk-settings.is-open { transform: translate(-50%, 0) scale(1); }

.desk-settings-open .theater-dash,
.desk-settings-open .theater-dash-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.ds-head {
  position: relative;
  top: auto;
  gap: 11px;
  min-height: 53px;
  padding: 8px 12px 8px 14px;
  background: linear-gradient(180deg, rgba(30, 45, 68, 0.82), rgba(17, 27, 43, 0.62));
}

.ds-emblem {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid rgba(110, 176, 255, 0.44);
  border-radius: 8px;
  background: rgba(61, 139, 255, 0.1);
  box-shadow: inset 0 0 12px rgba(61, 139, 255, 0.12);
}

.ds-emblem::before,
.ds-emblem::after,
.ds-emblem span {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  background: #80bcff;
  border-radius: 2px;
  box-shadow: 0 0 7px rgba(94, 159, 230, 0.75);
}

.ds-emblem::before { top: 8px; }
.ds-emblem span { top: 13px; }
.ds-emblem::after { top: 18px; }

.ds-close {
  width: 30px;
  height: 30px;
  margin-left: 2px;
  font-size: 18px;
  color: rgba(228, 234, 242, 0.72);
  background: transparent;
  border-color: rgba(220, 230, 244, 0.12);
  border-radius: 8px;
}

.ds-dirty[hidden] + .ds-close { margin-left: auto; }

.ds-close:hover {
  color: #fff;
  background: rgba(61, 139, 255, 0.12);
  border-color: rgba(110, 176, 255, 0.55);
}

.ds-title { font-size: 12px; letter-spacing: 0.11em; }

.ds-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: rgba(143, 160, 180, 0.78);
}

.ds-sub span { color: #79b7ff; }
.ds-sub i { width: 3px; height: 3px; border-radius: 50%; background: rgba(143, 160, 180, 0.5); }

.ds-dirty {
  padding: 3px 8px;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: #f2c86e;
  background: rgba(224, 179, 87, 0.08);
  border-color: rgba(224, 179, 87, 0.36);
}

.ds-body {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(210px, 1fr) minmax(210px, 1fr) minmax(310px, 1.55fr);
  gap: 8px;
  height: 255px;
  min-height: 0;
  padding: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.ds-group {
  min-width: 0;
  padding: 10px 11px 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(120, 184, 255, 0.13);
  border-radius: 9px;
}

.ds-group:hover { border-color: rgba(120, 184, 255, 0.22); }
.ds-group-layers { display: flex; flex-direction: column; padding-right: 8px; }
.ds-group-map,
.ds-group-textures { overflow-y: auto; scrollbar-width: thin; }

.ds-sec,
.ds-body .ds-sec:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(202, 218, 238, 0.82);
}

.ds-sec > span {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 16px;
  color: #70adf5;
  font-size: 8px;
  border: 1px solid rgba(94, 159, 230, 0.26);
  border-radius: 4px;
  background: rgba(61, 139, 255, 0.08);
}

.ds-sec small {
  margin-left: auto;
  min-width: 18px;
  padding: 2px 5px;
  color: rgba(143, 160, 180, 0.85);
  font-size: 8px;
  text-align: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.ds-control + .ds-control { margin-top: 9px; }
.ds-label { font-size: 10.5px; font-weight: 650; color: rgba(228, 234, 242, 0.9); }
.ds-value { font-size: 10px; font-variant-numeric: tabular-nums; color: rgba(159, 204, 255, 0.72); }

.ds-slider {
  width: 100%;
  height: 13px;
  margin: 3px 0 0;
  accent-color: #4f9bf1;
  cursor: pointer;
}

.ds-slider::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(190, 207, 229, 0.24);
  border-radius: 999px;
}

.ds-slider::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  appearance: none;
  border: 2px solid #0e1928;
  border-radius: 50%;
  background: #65abfa;
  box-shadow: 0 0 0 1px rgba(117, 184, 255, 0.45), 0 0 8px rgba(61, 139, 255, 0.55);
}

.ds-auto {
  height: 18px;
  padding: 0 6px;
  font-size: 8px;
  letter-spacing: 0.07em;
  color: rgba(228, 234, 242, 0.72);
  border-color: rgba(120, 184, 255, 0.18);
}

.ds-auto:hover { border-color: rgba(110, 176, 255, 0.55); background: rgba(61, 139, 255, 0.12); }
.ds-auto.is-on { color: #8bc3ff; border-color: rgba(110, 176, 255, 0.5); background: rgba(61, 139, 255, 0.13); }

.ds-master-toggle {
  width: 100%;
  height: 27px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -2px 0 9px;
  padding: 0 7px 0 9px;
  color: rgba(176, 190, 208, .62);
  background: rgba(3, 8, 15, .2);
  border: 1px solid rgba(120, 184, 255, .11);
  border-radius: 6px;
  cursor: pointer;
  font: 700 9px/1 "Segoe UI", sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}

.ds-master-toggle > span { margin-right: auto; }
.ds-master-toggle > em { min-width: 20px; color: inherit; font-size: 7.5px; font-style: normal; text-align: right; }
.ds-master-toggle > i {
  position: relative;
  width: 25px;
  height: 12px;
  border: 1px solid rgba(143, 160, 180, .28);
  border-radius: 999px;
  background: rgba(143, 160, 180, .12);
}
.ds-master-toggle > i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(176, 190, 208, .58);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.ds-master-toggle:hover { color: rgba(225, 237, 250, .84); border-color: rgba(120, 184, 255, .28); }
.ds-master-toggle.is-on { color: #8bc3ff; border-color: rgba(90, 165, 245, .28); background: rgba(61, 139, 255, .08); }
.ds-master-toggle.is-on > i { border-color: rgba(101, 171, 250, .5); background: rgba(61, 139, 255, .2); }
.ds-master-toggle.is-on > i::after { transform: translateX(13px); background: #65abfa; box-shadow: 0 0 7px rgba(61, 139, 255, .72); }

.ds-inline-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 5px;
  padding-top: 7px;
  color: rgba(166, 184, 205, 0.7);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-top: 1px solid rgba(120, 184, 255, 0.1);
}

.ds-inline-heading small { margin-left: auto; font-size: 8px; color: #70adf5; }
.ds-toggle-list { display: grid; gap: 4px; }
.ds-overlay-item { padding-bottom: 5px; border-bottom: 1px solid rgba(120, 184, 255, 0.08); }
.ds-overlay-item:last-child { border-bottom: 0; }
.ds-overlay-item .ds-control { margin: 4px 2px 0; }
.ds-overlay-item .ds-label { font-size: 8.5px; color: rgba(176, 190, 208, 0.72); }

.ds-layer-toggle {
  width: 100%;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px 0 7px;
  color: rgba(176, 190, 208, 0.62);
  background: rgba(3, 8, 15, 0.2);
  border: 1px solid rgba(120, 184, 255, 0.11);
  border-radius: 5px;
  cursor: pointer;
  font: 650 8.5px/1.15 "Segoe UI", sans-serif;
  text-align: left;
}

.ds-layer-toggle > span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-layer-toggle > small {
  padding: 2px 4px;
  color: #f2c86e;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  background: rgba(224, 179, 87, 0.09);
}

.ds-layer-toggle > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border: 1px solid rgba(143, 160, 180, 0.42);
  border-radius: 50%;
  background: rgba(143, 160, 180, 0.18);
}

.ds-layer-toggle > em {
  width: 18px;
  color: inherit;
  font-size: 7px;
  font-style: normal;
  text-align: right;
}

.ds-layer-toggle:hover { color: rgba(225, 237, 250, 0.85); border-color: rgba(120, 184, 255, 0.3); }
.ds-layer-toggle.is-on { color: #8bc3ff; border-color: rgba(90, 165, 245, 0.25); background: rgba(61, 139, 255, 0.07); }
.ds-layer-toggle.is-on > i { border-color: #65abfa; background: #65abfa; box-shadow: 0 0 6px rgba(61, 139, 255, 0.65); }
.layer-row.is-master-muted { opacity: 0.5; }

.ds-layer-list {
  display: flex;
  gap: 7px;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 3px 0;
}

.ds-layer {
  flex: 0 0 min(230px, 85%);
  min-width: 0;
  margin: 0;
  padding: 8px 9px;
  background: rgba(3, 8, 15, 0.26);
  border-color: rgba(120, 184, 255, 0.14);
  border-radius: 7px;
}

.ds-layer-name {
  margin-bottom: 7px;
  padding-bottom: 6px;
  font-size: 9.5px;
  color: rgba(228, 234, 242, 0.88);
  border-bottom: 1px solid rgba(120, 184, 255, 0.1);
}

.ds-control-sub + .ds-control-sub { margin-top: 5px; }
.ds-hint { align-self: center; }

.ds-footbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 7px 10px 8px 14px;
  background: rgba(5, 10, 18, 0.34);
  border-top: 1px solid var(--edge-soft);
}

.ds-foot {
  gap: 7px;
  margin-left: auto;
  padding: 0;
  border: 0;
}

.ds-btn {
  flex: none;
  min-width: 92px;
  height: 30px;
  padding: 0 14px;
  font-size: 10px;
  letter-spacing: 0.055em;
  border-color: rgba(120, 184, 255, 0.18);
  border-radius: 7px;
}

.ds-btn:hover:not(:disabled) { border-color: rgba(110, 176, 255, 0.55); background: rgba(61, 139, 255, 0.12); }
.ds-btn-reset { color: rgba(228, 234, 242, 0.62); background: transparent; }
.ds-btn-save { min-width: 132px; color: #eef7ff; background: linear-gradient(180deg, #368fe9, #216ab8); border-color: rgba(122, 190, 255, 0.75); box-shadow: 0 4px 15px rgba(26, 104, 185, 0.25); }
.ds-btn-save:hover:not(:disabled) { color: #fff; background: linear-gradient(180deg, #4da2f5, #2879cc); }
.ds-btn-save:disabled { color: rgba(220, 235, 250, 0.62); }

.ds-foot-hint {
  padding: 0;
  font-size: 9px;
  letter-spacing: 0.035em;
  color: rgba(143, 160, 180, 0.62);
}

.ds-foot-hint span { margin-right: 6px; color: rgba(110, 176, 255, 0.72); font-size: 7px; }

.ds-portable {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ds-btn-compact { min-width: 58px; height: 27px; padding: 0 9px; font-size: 9px; }
.ds-btn-base { min-width: 88px; color: #8bc3ff; border-color: rgba(110, 176, 255, .36); background: rgba(61, 139, 255, .09); }
.ds-base-status { max-width: 170px; overflow: hidden; color: rgba(143, 160, 180, .72); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.ds-base-status[data-tone="ok"] { color: #8ee6bb; }
.ds-base-status[data-tone="warn"] { color: #f2c86e; }
.ds-base-status[data-tone="error"] { color: #f29a91; }

@media (max-width: 920px) {
  .desk-settings {
    bottom: 74px;
    width: calc(100vw - 16px);
    max-height: min(350px, calc(100vh - 138px));
    border-radius: 11px;
  }

  .ds-body { grid-template-columns: 190px 210px 210px 310px; height: 235px; }
  .ds-foot-hint { display: none; }
  .ds-footbar { gap: 7px; }
  .ds-portable { flex: 0 0 auto; }
  .ds-base-status { display: none; }
  .ds-foot { width: auto; flex: 1; }
  .ds-btn { flex: 1; min-width: 0; padding: 0 9px; }
  .ds-btn-save { min-width: 112px; }
}

/* Weather ops: forecast summary + trafficability tiles */
.qcw-summary { margin: 5px 0 6px; font-size: 10.5px; line-height: 1.35; color: rgba(220, 213, 196, 0.78); }
.qcw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.qcw-tile {
  display: flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 7px;
  font-size: 10px; font-weight: 700; color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 5px; cursor: pointer; white-space: nowrap;
}
.qcw-tile:hover { border-color: rgba(110, 176, 255, 0.5); }
.qcw-tile.is-open { background: rgba(110, 176, 255, 0.12); border-color: rgba(110, 176, 255, 0.55); }
.qcw-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #6dd47e; box-shadow: 0 0 6px rgba(109, 212, 126, 0.7); }
.qcw-tile[data-level="limited"] .qcw-dot { background: #f2c14e; box-shadow: 0 0 6px rgba(242, 193, 78, 0.7); }
.qcw-tile[data-level="poor"] .qcw-dot { background: #ff6a5c; box-shadow: 0 0 6px rgba(255, 106, 92, 0.75); }
.qcw-reasons { margin-top: 5px; font-size: 9.8px; line-height: 1.45; color: rgba(220, 213, 196, 0.68); }
.qcw-mode {
  width: 100%; margin-top: 6px; height: 24px;
  font-size: 10.5px; color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 5px;
}
.qcw-mode option { background: #101820; color: #dcd5c4; }

/* ===== Roulette won-prize highlight ===================================== */
.roulette-prize-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.roulette-prize {
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(220, 213, 196, 0.45);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(220, 213, 196, 0.16);
  opacity: 0.55;
  transition: all 0.2s ease;
}
.roulette-prize.won {
  color: #0c1014;
  background: #6eb0ff;
  border-color: #6eb0ff;
  opacity: 1;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(110, 176, 255, 0.6);
}
/* Locked final prize (NUK) — hidden behind a padlock until all others are won. */
.roulette-prize--locked {
  opacity: 0.5;
  color: rgba(220, 213, 196, 0.6);
}
/* Unlocked NUK jackpot — casino-style conic RAINBOW: a sharp ring + a blurred
   halo around, plus a blurred rainbow shimmer inside. @property lets the conic
   angle animate smoothly (a plain conic angle can't be transitioned). */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
/* Higher specificity than the generic `.roulette-prize-list span` rule (which
   otherwise forces height:18px/grid on this chip and pushes the text out). */
.roulette-prize-list .roulette-prize--nuke {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  line-height: 1;
  opacity: 1;
  padding: 3px 11px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: visible;
  transition: none;
  background:
    linear-gradient(#0c0f14, #0c0f14) padding-box,
    conic-gradient(from var(--gradient-angle),
      #ff004c, #ff8a00, #ffe600, #14d100, #00e5ff, #2b6bff, #b14cff, #ff004c) border-box;
  animation: nuke-rotate 5s linear infinite;   /* drives --gradient-angle for all layers */
}
/* outer rainbow halo glow */
.roulette-prize--nuke::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 10px;
  background: conic-gradient(from var(--gradient-angle),
    #ff004c, #ff8a00, #ffe600, #14d100, #00e5ff, #2b6bff, #b14cff, #ff004c);
  filter: blur(12px);
  opacity: 0.85;
}
/* inner blurred rainbow shimmer, clipped to the chip */
.roulette-prize--nuke .nuke-shimmer {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 4px;
  overflow: hidden;
}
.roulette-prize--nuke .nuke-shimmer::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from var(--gradient-angle),
    #ff004c, #ff8a00, #ffe600, #14d100, #00e5ff, #2b6bff, #b14cff, #ff004c);
  filter: blur(7px);
  opacity: 0.5;
}
.roulette-prize--nuke .nuke-txt {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
@keyframes nuke-rotate {
  to { --gradient-angle: 360deg; }
}

/* ===== Zone editor — handles, card, panel ============================== */
.zone-edit-overlay { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.zone-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(12, 16, 20, 0.9);
  border: 2px solid #e7c36f;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: grab;
  pointer-events: auto;       /* only the dots capture input → map still pans */
}
.zone-handle:hover { width: 15px; height: 15px; border-color: #fff; }
.zone-handle.is-selected { background: #7fa7c7; border-color: #fff; }
.zone-handle:active { cursor: grabbing; }

.zone-card {
  position: fixed;
  z-index: 9000;
  width: 220px;
  padding: 8px 10px;
  background: rgba(8, 12, 18, 0.97);
  border: 1px solid rgba(220, 213, 196, 0.22);
  border-radius: 8px;
  box-shadow: 0 18px 40px var(--shadow);
  color: var(--text);
  font-size: 12px;
  pointer-events: auto;
}
.zone-card__head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; margin-bottom: 4px; }
.zone-card__close { width: 20px; height: 20px; background: none; border: none; color: var(--text); cursor: pointer; font-size: 15px; }
.zone-card__row { color: rgba(220, 213, 196, 0.7); font-size: 11px; }
.zone-card__note { margin-top: 4px; font-size: 11px; }
.zone-card__actions { margin-top: 6px; }
.zone-card__actions button { height: 24px; padding: 0 10px; font-size: 11px; color: var(--text); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(220, 213, 196, 0.18); border-radius: 4px; cursor: pointer; }
.zone-card__name {
  flex: 1; min-width: 0; margin-right: 6px;
  background: rgba(255, 255, 255, 0.05); color: var(--text);
  border: 1px solid rgba(220, 213, 196, 0.18); border-radius: 4px;
  padding: 2px 6px; font: inherit; font-weight: 800;
}
.zone-card__name:focus { outline: none; border-color: rgba(120, 200, 255, 0.6); }

/* Zone style picker in the select card — colour swatches + pattern buttons. */
.zone-card__swatches { display: flex; gap: 5px; margin-top: 6px; }
.zone-swatch {
  width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--sw); border: 2px solid rgba(255, 255, 255, 0.25);
}
.zone-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 2px rgba(120, 200, 255, 0.6); }
.zone-card__patterns { display: flex; gap: 4px; margin-top: 5px; }
.zone-pat {
  flex: 1; height: 22px; padding: 0; font-size: 12px; line-height: 1; cursor: pointer;
  color: var(--text); background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.18); border-radius: 4px;
}
.zone-pat.is-active { border-color: rgba(120, 200, 255, 0.7); background: rgba(120, 200, 255, 0.16); }

/* ===== Boids — logistics swarm ========================================= */
.boids-node-overlay { position: fixed; inset: 0; z-index: 19; pointer-events: none; }
.boids-node-handle {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 5px;
  pointer-events: none;            /* pure label unless editing is armed */
  white-space: nowrap;
}
.boids-node-handle.is-armed { pointer-events: auto; cursor: grab; }
.boids-node-handle.is-armed:active { cursor: grabbing; }
.boids-node-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--side, #8cc4ff);
  border: 1.5px solid rgba(8, 12, 18, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 8px var(--side, #8cc4ff);
  flex: none;
}
.boids-node-handle.is-armed:hover .boids-node-dot { transform: scale(1.25); }
.boids-node-handle.is-selected .boids-node-dot { box-shadow: 0 0 0 2px #fff, 0 0 10px var(--side, #8cc4ff); }
.boids-node-name {
  display: none;
  font-size: 10px; font-weight: 700; color: var(--text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
}
.boids-node-handle.show-label .boids-node-name { display: inline; }

.boids-toggle { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text); cursor: pointer; }
.boids-hint { font-size: 10px; color: rgba(220, 213, 196, 0.7); margin: 5px 0; line-height: 1.35; }
.boids-tool { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.boids-tool button {
  height: 24px; padding: 0 9px; font-size: 10px; font-weight: 700;
  color: var(--text); background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16); border-radius: 4px; cursor: pointer;
}
.boids-tool button:hover { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.12); }
.boids-tool button.active { border-color: rgba(110, 176, 255, 0.8); background: rgba(110, 176, 255, 0.2); }
.boids-sides button[data-side="blue"].active { border-color: #66b2ff; background: rgba(102, 178, 255, 0.2); }
.boids-sides button[data-side="red"].active { border-color: #ff6a5c; background: rgba(255, 106, 92, 0.2); }

.boids-card { margin: 4px 0 6px; padding: 7px; border: 1px solid rgba(127, 167, 199, 0.3); border-radius: 6px; background: rgba(127, 167, 199, 0.07); display: flex; flex-direction: column; gap: 5px; }
.boids-card input[type="text"] { height: 24px; padding: 0 6px; font-size: 11px; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(220, 213, 196, 0.18); border-radius: 4px; }
.boids-card-row { display: flex; gap: 4px; }
.boids-card-row select { flex: 1; height: 24px; font-size: 10px; color: var(--text); background: rgba(20, 24, 28, 0.9); border: 1px solid rgba(220, 213, 196, 0.18); border-radius: 4px; }
.boids-card-weight { font-size: 10px; color: rgba(220, 213, 196, 0.8); display: flex; align-items: center; gap: 6px; }
.boids-card-weight input { flex: 1; }
.boids-card #bsel-del { height: 24px; font-size: 10px; font-weight: 700; color: var(--text); background: rgba(255, 80, 80, 0.12); border: 1px solid rgba(255, 80, 80, 0.3); border-radius: 4px; cursor: pointer; }

.boids-url-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 4px; margin: 5px 0 7px; }
.boids-url-row input { min-width: 0; height: 24px; padding: 0 6px; font-size: 10px; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(220, 213, 196, 0.18); border-radius: 4px; }
.boids-url-row button { height: 24px; font-size: 10px; font-weight: 800; color: var(--text); background: rgba(127, 167, 199, 0.12); border: 1px solid rgba(127, 167, 199, 0.32); border-radius: 4px; cursor: pointer; }
.boids-url-row button:hover { background: rgba(127, 167, 199, 0.24); }

.boids-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.boids-actions button {
  height: 24px; padding: 0 9px; font-size: 10px; font-weight: 700;
  color: var(--text); background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16); border-radius: 4px; cursor: pointer;
}
.boids-actions button:hover { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.12); }
.boids-actions button.active { border-color: rgba(120, 220, 140, 0.7); background: rgba(120, 220, 140, 0.16); }
.boids-slider { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; color: rgba(220, 213, 196, 0.85); margin-top: 6px; }
.boids-slider input { flex: 1; }
.boids-status { margin-top: 6px; font-size: 10px; color: rgba(220, 213, 196, 0.7); }
.boids-c-blue { color: #8cc4ff; font-weight: 700; }
.boids-c-red { color: #ff8a7e; font-weight: 700; }

/* Multi-type swarm controls (Data workspace) */
.boids-subhead { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(220, 213, 196, 0.55); margin: 7px 0 3px; }
.boids-types button em { font-style: normal; color: rgba(220, 213, 196, 0.5); font-size: 9px; }
.boids-types button.active em { color: rgba(255, 255, 255, 0.85); }
.boids-drone-kinds { display: flex; flex-wrap: wrap; gap: 4px; margin: -1px 0 6px; }
.boids-drone-kinds span { padding: 3px 5px; border-radius: 5px; border: 1px solid rgba(127, 167, 199, 0.24); background: rgba(127, 167, 199, 0.06); color: rgba(220, 213, 196, 0.64); font-size: 9px; }
.boids-drone-kinds b { color: rgba(245, 247, 250, 0.88); }
.boids-drone-kinds span[data-drone="fpv"] { border-color: rgba(255, 122, 92, 0.28); background: rgba(255, 122, 92, 0.08); }
.boids-drone-kinds span[data-drone="recon"] { border-color: rgba(116, 197, 255, 0.28); background: rgba(116, 197, 255, 0.08); }
.boids-drone-kinds span[data-drone="interceptor"] { border-color: rgba(140, 238, 255, 0.32); background: rgba(140, 238, 255, 0.08); }
.boids-check { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: rgba(220, 213, 196, 0.85); margin-top: 7px; cursor: pointer; }
.boids-terrain-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.boids-terrain-row #bsw-terrain {
  height: 24px; padding: 0 10px; font-size: 10px; font-weight: 700;
  color: var(--text); background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16); border-radius: 4px; cursor: pointer;
}
.boids-terrain-row #bsw-terrain:hover:not(:disabled) { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.12); }
.boids-terrain-row #bsw-terrain.active, .boids-terrain-row #bsw-terrain:disabled { border-color: rgba(120, 220, 140, 0.6); background: rgba(120, 220, 140, 0.14); cursor: default; opacity: 0.9; }
.boids-terrain-state { font-size: 10px; color: rgba(120, 220, 140, 0.85); font-weight: 700; }

/* Slide-out Boids dock (🐝 top-strip button / "B") — replaces the side-panel
   Boids sections; swarm controls + network editing in one floating panel. */
.boids-dock {
  position: fixed;
  top: 64px;
  right: 286px;
  width: 256px;
  max-height: calc(100vh - 150px);
  z-index: 31;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 40px var(--shadow);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.boids-dock.is-open {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.boids-dock-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 12px; color: var(--text); }
.boids-dock-head button { width: 22px; height: 22px; background: none; border: none; color: var(--text); cursor: pointer; font-size: 16px; line-height: 1; }
.boids-dock-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.boids-dock-tabs button { min-width: 0; height: 25px; padding: 0 5px; border: 1px solid rgba(220, 213, 196, 0.14); border-radius: 5px; background: rgba(255, 255, 255, 0.04); color: rgba(220, 213, 196, 0.72); font-size: 9px; font-weight: 800; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boids-dock-tabs button:hover { border-color: rgba(110, 176, 255, 0.45); color: var(--text); }
.boids-dock-tabs button.active { border-color: rgba(110, 176, 255, 0.75); background: rgba(110, 176, 255, 0.17); color: var(--text); }
.boids-dock-body { padding: 10px 12px; overflow-y: auto; }
.boids-pane[hidden] { display: none; }
.boids-dock-title { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent, #e7c36f); margin: 12px 0 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 9px; }
.boids-dock-title:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ===== Theater desk ======================================================
   The tactical swarm lives in the desk panels now. The Theater-intel
   dashboard (ground command + actors) slides down from under the workspace
   dock; its toggle chip only exists on the Theater desk. */
/* Two chips, two pop-outs: Intel (read-only) and Swarm (background machinery).
   Neither belongs in a rail you have to scroll past all day. */
.theater-toggles {
  position: absolute;
  top: 104px;
  left: 50%;
  z-index: 25;
  transform: translateX(-50%);
  display: none;
  gap: 5px;
  pointer-events: none;
}
.strategy-shell[data-workspace="data"] .theater-toggles { display: flex; }

.theater-dash-toggle {
  position: relative;
  height: 24px;
  padding: 0 14px;
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(220, 213, 196, 0.78);
  background: linear-gradient(180deg, rgba(20, 30, 46, 0.92), rgba(13, 20, 32, 0.9));
  border: 1px solid var(--edge-soft);
  border-radius: 0 0 8px 8px;
  border-top: none;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(10px);
}
.strategy-shell[data-workspace="data"] .theater-dash-toggle { display: inline-flex; }
.theater-dash-toggle:hover { color: var(--text); border-color: rgba(110, 176, 255, 0.5); }
.theater-dash-toggle.active { color: var(--accent); border-color: rgba(110, 176, 255, 0.7); background: rgba(110, 176, 255, 0.14); }

.theater-dash {
  position: absolute;
  top: 132px;
  left: 50%;
  z-index: 24;
  width: min(620px, calc(100vw - 600px));
  min-width: 420px;
  max-height: calc(100vh - 260px);
  display: none;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 40px var(--shadow);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.strategy-shell[data-workspace="data"] .theater-dash { display: flex; }
.strategy-shell[data-workspace="data"] .theater-dash.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.theater-dash-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  font-size: 12px;
  color: var(--text);
}
.theater-dash-head > span { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; color: var(--accent); }
.theater-dash-ai { margin-left: auto; display: flex; gap: 4px; }
.theater-dash-ai button {
  height: 22px; padding: 0 8px; font-size: 9.5px; font-weight: 800;
  color: rgba(220, 213, 196, 0.8); background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(220, 213, 196, 0.16); border-radius: 5px; cursor: pointer;
}
.theater-dash-ai button:hover { border-color: rgba(110, 176, 255, 0.5); color: var(--text); }
.theater-dash-head #td-close { width: 22px; height: 22px; background: none; border: none; color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; }
.theater-dash-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  padding: 10px 12px;
  overflow-y: auto;
}
.theater-dash-body .td-col { min-width: 0; }
.theater-dash-body .boids-status { margin: 6px 0; }

/* The Swarm column's automatic half — reported, not controlled. */
#theater-swarm .tsw-auto { color: rgba(200, 214, 232, 0.45); }

/* ===== MAPS — the workspace the three drop zones file into =================
   Not a visibility widget: the picked map owns every file below it and is what
   the whole theater runs on. The maps are equal, so nothing here ranks them —
   one is simply the one you are working on. */
.tsrc-maps {
  display: grid;
  gap: 5px;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--edge-soft, rgba(220, 213, 196, 0.12));
}
.tsrc-maps-head { display: flex; align-items: center; gap: 8px; }
.tsrc-maps-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(200, 214, 232, 0.6);
}
.tsrc-maps-add {
  margin-left: auto;
  height: 19px;
  padding: 0 7px;
  color: rgba(200, 214, 232, 0.62);
  background: none;
  border: 1px solid var(--edge-soft, rgba(220, 213, 196, 0.14));
  border-radius: 5px;
  cursor: pointer;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tsrc-maps-add:hover {
  color: var(--blue-200, #a9cdff);
  border-color: rgba(120, 190, 255, 0.5);
  background: rgba(120, 175, 235, 0.09);
}
.tsrc-maps-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tsrc-maps-foot {
  color: rgba(200, 214, 232, 0.42);
  font-size: 9px;
  line-height: 1.35;
}
.tsrc-maps-foot:empty { display: none; }

.tsrc-map {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 5px 3px 6px;
  border: 1px solid rgba(150, 180, 215, 0.2);
  border-radius: 7px;
  background: rgba(120, 160, 210, 0.05);
  transition: border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}
.tsrc-map.is-current {
  border-color: rgba(120, 190, 255, 0.62);
  background: rgba(120, 175, 235, 0.13);
}
/* Hidden = not drawn on the globe. It keeps its files and can still be the map
   you work on, so it dims rather than disappears. */
.tsrc-map.is-hidden { opacity: 0.55; }
.tsrc-map-eye { display: grid; place-items: center; cursor: pointer; }
.tsrc-map-eye input { accent-color: var(--blue, #5aa6f6); cursor: pointer; }
.tsrc-map-pick {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 1px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.tsrc-map-pick b {
  overflow: hidden;
  color: rgba(226, 237, 246, 0.9);
  font-size: 10.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tsrc-map.is-current .tsrc-map-pick b { color: var(--blue-200, #a9cdff); }
.tsrc-map-pick span {
  color: rgba(200, 214, 232, 0.45);
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
}
.tsrc-map-acts { display: flex; gap: 2px; opacity: 0; transition: opacity 0.14s ease; }
.tsrc-map:hover .tsrc-map-acts,
.tsrc-map.is-current .tsrc-map-acts { opacity: 1; }
.tsrc-map-acts button {
  width: 17px;
  height: 17px;
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(200, 214, 232, 0.45);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
}
.tsrc-map-acts button:hover {
  color: var(--blue-200, #a9cdff);
  border-color: rgba(120, 190, 255, 0.4);
  background: rgba(120, 175, 235, 0.12);
}
.tsrc-map-acts button[data-act="delete"]:hover {
  color: #ff9b9b;
  border-color: rgba(255, 120, 120, 0.4);
  background: rgba(255, 110, 110, 0.12);
}

/* A file whose map is hidden: its own switch is still on, the map's is not. */
.kml-row.is-preset-hidden { opacity: 0.58; }
.kml-inspector-map select {
  width: 100%;
  padding: 3px 5px;
  color: var(--text);
  background: rgba(10, 18, 30, 0.7);
  border: 1px solid var(--edge-soft, rgba(220, 213, 196, 0.14));
  border-radius: 5px;
  font-size: 10px;
}

/* ===== SOURCES — the three drop zones ==================================== */
.tsrc { display: flex; flex-direction: column; gap: 9px; }
.tsrc-zone { position: relative; }

.tsrc-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.tsrc-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(200, 214, 232, 0.6);
}
.tsrc-count {
  margin-left: auto;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.tsrc-drop {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 1px dashed rgba(150, 180, 215, 0.28);
  border-radius: 9px;
  background: rgba(120, 160, 210, 0.04);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.tsrc-drop:hover,
.tsrc-drop:focus-visible {
  border-color: rgba(120, 190, 255, 0.6);
  background: rgba(120, 175, 235, 0.09);
  outline: none;
}
.tsrc-drop.is-over {
  border-style: solid;
  border-color: var(--blue-300, #7fbcff);
  background: rgba(120, 190, 255, 0.16);
  box-shadow: inset 0 0 22px rgba(120, 190, 255, 0.22);
}
/* A loaded slot stops advertising itself ENTIRELY: the invitation collapses to
   nothing and the file list gets the space. The target does not go away — it
   becomes an overlay that only materialises while a file is being dragged
   (.tsrc.is-filedrag), laid over the slot's own content. The ＋ in the header
   covers the browse-instead-of-drag case. */
.tsrc-zone.is-loaded .tsrc-drop {
  position: absolute;
  inset: 18px -3px -3px;      /* below the header row, bleeding over the files */
  z-index: 6;
  padding: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  border-style: dashed;
  border-color: rgba(120, 190, 255, 0.75);
  background: rgba(14, 24, 38, 0.9);
  backdrop-filter: blur(3px);
  transform: scale(0.99);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.tsrc-zone.is-loaded .tsrc-sub { display: none; }
.tsrc-zone.is-loaded .tsrc-face { grid-template-columns: auto auto; gap: 8px; }
.tsrc-zone.is-loaded .tsrc-face b { font-size: 10.5px; color: var(--blue-200); font-weight: 700; }
.tsrc-zone.is-loaded .tsrc-icon { grid-row: auto; width: 18px; height: 18px; opacity: 0.9; }

/* Dragging a file anywhere over the window lights every slot at once, so you
   can see all three targets and choose — including the ones already filled. */
.tsrc.is-filedrag .tsrc-zone.is-loaded .tsrc-drop {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.tsrc.is-filedrag .tsrc-zone:not(.is-loaded) .tsrc-drop {
  border-color: rgba(120, 190, 255, 0.6);
  background: rgba(120, 175, 235, 0.1);
}

/* ＋ — the collapsed slot's only permanent affordance. */
.tsrc-add {
  width: 18px;
  height: 18px;
  padding: 0;
  display: none;
  place-items: center;
  color: rgba(200, 214, 232, 0.5);
  background: none;
  border: 1px solid var(--edge-soft);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.tsrc-zone.is-loaded .tsrc-add { display: grid; }
.tsrc-add:hover { color: var(--blue-200); border-color: rgba(120, 190, 255, 0.55); }

.tsrc-face {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 9px;
}
.tsrc-icon { grid-row: span 2; width: 22px; height: 22px; color: var(--blue-300, #7fbcff); opacity: 0.75; }
.tsrc-icon svg { width: 100%; height: 100%; }
.tsrc-face b { font-size: 11.5px; color: var(--text); font-weight: 700; }
.tsrc-sub { font-size: 9.5px; line-height: 1.4; color: rgba(200, 214, 232, 0.45); }

/* The scan sweep + sparks: proof that the file was actually eaten. */
.tsrc-scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(140, 205, 255, 0.28) 50%, transparent 80%);
  transform: translateX(-100%);
}
.tsrc-zone.is-ingesting .tsrc-drop {
  border-style: solid;
  border-color: rgba(120, 200, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.25), inset 0 0 26px rgba(120, 190, 255, 0.2);
}
.tsrc-zone.is-ingesting .tsrc-scan { opacity: 1; animation: tsrc-sweep 1s linear infinite; }
@keyframes tsrc-sweep { to { transform: translateX(100%); } }

.tsrc-spark { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tsrc-spark i {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #9fd6ff;
  box-shadow: 0 0 7px rgba(140, 205, 255, 0.9);
  animation: tsrc-spark 1.1s ease-out var(--delay, 0ms) forwards;
  opacity: 0;
}
@keyframes tsrc-spark {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -30px)) scale(0.2); opacity: 0; }
}

.tsrc-zone.is-landed .tsrc-drop {
  border-color: rgba(120, 220, 150, 0.75);
  box-shadow: 0 0 0 1px rgba(120, 220, 150, 0.3), inset 0 0 22px rgba(120, 220, 150, 0.16);
}
.tsrc-zone.is-rejected .tsrc-drop {
  border-color: rgba(110, 176, 255, 0.8);
  animation: tsrc-nudge 0.36s ease;
}
/* Points at the slot that already has the file, so a refused drop has an answer. */
.tsrc-zone.is-pointed .tsrc-drop {
  border-color: rgba(110, 176, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(110, 176, 255, 0.35), inset 0 0 22px rgba(110, 176, 255, 0.14);
}
@keyframes tsrc-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  70% { transform: translateX(3px); }
}

.tsrc-note {
  min-height: 0;
  margin-top: 4px;
  font-size: 9.5px;
  line-height: 1.4;
  color: rgba(200, 214, 232, 0.55);
}
.tsrc-note:empty { display: none; }
.tsrc-note[data-tone="ok"] { color: rgba(130, 220, 155, 0.92); }
.tsrc-note[data-tone="dupe"] { color: rgba(224, 145, 63, 0.95); }
.tsrc-note[data-tone="warn"] { color: rgba(235, 145, 120, 0.95); }
.tsrc-note[data-tone="busy"] { color: rgba(150, 205, 255, 0.9); }

.tsrc-files { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.tsrc-files:empty { display: none; }
.tsrc-file {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 6px;
  padding: 5px 7px;
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}
.tsrc-file-on { display: flex; align-items: center; gap: 5px; min-width: 0; cursor: pointer; }
.tsrc-file-on b {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tsrc-file-meta {
  grid-column: 1 / -1;
  font-size: 9px;
  color: rgba(200, 214, 232, 0.5);
  font-variant-numeric: tabular-nums;
}
.tsrc-file-flags { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 2px; }
.tsrc-file-flags button {
  height: 18px;
  padding: 0 7px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(200, 214, 232, 0.5);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--edge-soft);
  border-radius: 4px;
  cursor: pointer;
}
.tsrc-file-flags button.active {
  color: var(--accent);
  border-color: rgba(110, 176, 255, 0.6);
  background: rgba(110, 176, 255, 0.14);
}
.tsrc-file-x {
  grid-row: 1;
  grid-column: 2;
  width: 18px;
  height: 18px;
  font-size: 13px;
  line-height: 1;
  color: rgba(200, 214, 232, 0.45);
  background: none;
  border: none;
  cursor: pointer;
}
.tsrc-file-x:hover { color: rgba(235, 145, 120, 0.95); }
.tsrc-file-auto { border-style: dashed; background: none; }
.tsrc-file-auto .tsrc-file-meta { grid-column: 1 / -1; }

/* The Map data slot hosts the KML layer list; on Globe it is the only slot. */
.tsrc-files .kml-list { gap: 4px; }
.strategy-shell[data-workspace="globe"] .tsrc-zone[data-zone="units"],
.strategy-shell[data-workspace="globe"] .tsrc-zone[data-zone="fort"] { display: none; }

/* ===== shared "one click down" overflow ================================== */
.boids-more { margin-top: 7px; }
.boids-more > summary {
  list-style: none;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(200, 214, 232, 0.4);
  padding: 3px 0;
}
.boids-more > summary::-webkit-details-marker { display: none; }
.boids-more > summary::before { content: "⋯ "; }
.boids-more > summary:hover { color: rgba(200, 214, 232, 0.75); }
.boids-more[open] > summary { color: rgba(200, 214, 232, 0.7); margin-bottom: 5px; }
.boids-more > *:not(summary) { margin-bottom: 5px; }

/* ===== Supply network panel ============================================== */

/* The master switch for everything that drives and flies. It sits above every
   other control here because it is the one people reach for when they want the
   theatre to hold still — and the one that used not to exist, which is why
   pausing the swarm never seemed to hold. */
.boids-movers {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 7px;
  padding: 7px 9px;
  color: var(--text);
  background: rgba(96, 200, 140, 0.1);
  border: 1px solid rgba(96, 200, 140, 0.4);
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.boids-movers:hover { background: rgba(96, 200, 140, 0.16); }
.boids-movers > span { display: grid; gap: 2px; min-width: 0; }
.boids-movers b {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(226, 237, 246, 0.92);
}
.boids-movers i {
  font-style: normal;
  font-size: 9px;
  line-height: 1.3;
  color: rgba(200, 214, 232, 0.5);
}
.boids-movers em {
  flex: 0 0 auto;
  padding: 3px 7px;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #7ee0a8;
  background: rgba(96, 200, 140, 0.16);
  border: 1px solid rgba(96, 200, 140, 0.4);
  border-radius: 4px;
}
.boids-movers.is-off {
  background: rgba(255, 120, 120, 0.08);
  border-color: rgba(255, 120, 120, 0.4);
}
.boids-movers.is-off:hover { background: rgba(255, 120, 120, 0.14); }
.boids-movers.is-off em {
  color: #ff9b9b;
  background: rgba(255, 110, 110, 0.14);
  border-color: rgba(255, 120, 120, 0.4);
}

.boids-net-bar { display: flex; gap: 5px; align-items: center; }
.boids-net-edit {
  flex: 1;
  height: 26px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(220, 213, 196, 0.8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
  cursor: pointer;
}
.boids-net-edit.active {
  color: var(--accent);
  border-color: rgba(110, 176, 255, 0.75);
  background: rgba(110, 176, 255, 0.18);
}
.boids-net-eye {
  width: 28px;
  height: 26px;
  font-size: 12px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
  cursor: pointer;
}
.boids-net-eye.is-off { opacity: 0.35; }
.boids-editing[hidden] { display: none; }
.boids-editing { margin-top: 7px; }
.boids-empty {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(200, 214, 232, 0.45);
}
.boids-empty[hidden] { display: none; }
.boids-linkish {
  padding: 0;
  font: inherit;
  color: var(--blue-300, #7fbcff);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

/* Who is driving the network. The swarm controls moved to a pop-out, so the
   panel that owns the roads carries the traffic count and the way back. */
.boids-net-traffic {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
  font-size: 10px;
  color: rgba(220, 213, 196, 0.55);
}
.boids-net-traffic .boids-linkish { font-size: 10px; font-weight: 700; white-space: nowrap; }

/* Armed destructive action: one click to mean it, a second to do it. */
.boids-actions button.is-armed {
  color: #fff;
  border-color: rgba(255, 120, 120, 0.9);
  background: rgba(255, 80, 80, 0.35);
}

/* ===== Boid inspector card =============================================== */
/* Lives in the boids overlay (fixed, pointer-events:none) and is glued to the
   thing it describes, so it has to claim its own pointer events back. Sits
   ABOVE the target rather than on it — you clicked a moving object and you
   should still be able to see it. */
.boid-card {
  position: absolute;
  z-index: 3;
  width: 236px;
  transform: translate(-50%, calc(-100% - 16px));
  pointer-events: auto;
  color: var(--text, #dcd5c4);
  background: rgba(9, 14, 22, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}
/* The stalk down to the target, so the card never floats free of its subject. */
.boid-card::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 14px;
  background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
.boid-card-body { padding: 8px 9px 9px; }
.boid-card-body:empty { display: none; }

.bc-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.bc-kind {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-head.bc-blue .bc-kind { color: #8cc4ff; }
.bc-head.bc-red .bc-kind { color: #ff8f82; }
.bc-side {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(200, 214, 232, 0.4);
}
.bc-close {
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: rgba(200, 214, 232, 0.55);
  background: none;
  border: none;
  cursor: pointer;
}
.bc-close:hover { color: #fff; }

/* What it is doing, in words — the answer to the question the click asked. */
.bc-task {
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(220, 213, 196, 0.9);
}
.bc-objective {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 3px;
  font-size: 10px;
  color: rgba(200, 214, 232, 0.62);
}
.bc-objective i { font-style: normal; color: rgba(255, 212, 121, 0.85); }
.bc-objective em {
  margin-left: auto;
  font-style: normal;
  font-weight: 700;
  color: rgba(255, 212, 121, 0.85);
  white-space: nowrap;
}

.bc-gauges { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.bc-gauge { display: flex; align-items: center; gap: 6px; font-size: 8.5px; }
.bc-gauge i { width: 42px; font-style: normal; color: rgba(200, 214, 232, 0.42); }
.bc-gauge-track {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.bc-gauge-track b { display: block; height: 100%; background: #6fb4ff; }
.bc-gauge-track b[data-level='good'] { background: #8fd080; }
.bc-gauge-track b[data-level='thin'] { background: #f2d07e; }
.bc-gauge-track b[data-level='bad'] { background: #ff8c82; }
.bc-gauge em { width: 26px; font-style: normal; text-align: right; color: rgba(200, 214, 232, 0.5); }

.bc-grid {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 2px 8px;
  margin-top: 7px;
  font-size: 9px;
  line-height: 1.4;
}
.bc-grid span { color: rgba(200, 214, 232, 0.4); }
.bc-grid b { font-weight: 600; color: rgba(220, 213, 196, 0.82); }

.bc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.bc-actions span {
  padding: 1px 5px;
  font-size: 8px;
  letter-spacing: 0.03em;
  color: rgba(200, 214, 232, 0.5);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

/* ===== Convoys panel ===================================================== */
/* Roads first: the panel has to answer "is there road data where they are"
   before it answers "who is out there", because the second is meaningless
   without the first. */
.cv-roads {
  padding: 7px 8px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--edge-soft);
  border-radius: 7px;
}
.cv-road-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cv-road-source {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(220, 213, 196, 0.8);
}
.cv-road-source[data-kind='map'] { color: #f2d07e; }
.cv-road-source[data-kind='none'] { color: rgba(255, 140, 130, 0.8); }
.cv-road-size {
  font-size: 9.5px;
  color: rgba(200, 214, 232, 0.45);
  white-space: nowrap;
}
.cv-meter {
  height: 4px;
  margin: 6px 0 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  overflow: hidden;
}
.cv-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: #6fb4ff;
  transition: width 0.4s ease;
}
.cv-meter-fill[data-level='good'] { background: #8fd080; }
.cv-meter-fill[data-level='thin'] { background: #f2d07e; }
.cv-meter-fill[data-level='bad'] { background: #ff8c82; }
.cv-road-note {
  font-size: 10px;
  line-height: 1.4;
  color: rgba(200, 214, 232, 0.6);
}
.cv-road-route {
  margin-top: 3px;
  font-size: 9.5px;
  line-height: 1.4;
  color: rgba(200, 214, 232, 0.45);
}
.cv-road-route:empty { display: none; }
.cv-road-actions {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}
.cv-chip {
  height: 24px;
  padding: 0 9px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(220, 213, 196, 0.8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
  cursor: pointer;
}
.cv-chip.active {
  color: var(--accent);
  border-color: rgba(110, 176, 255, 0.75);
  background: rgba(110, 176, 255, 0.18);
}
.cv-chip[disabled] { opacity: 0.4; cursor: default; }
.cv-chip-quiet { margin-left: auto; opacity: 0.6; }
.cv-road-status {
  margin-top: 6px;
  font-size: 9.5px;
  line-height: 1.45;
  color: rgba(200, 214, 232, 0.45);
}
.cv-pull { margin-top: 7px; }

.cv-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 9px 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(220, 213, 196, 0.7);
}
.cv-list-head .boids-linkish { font-size: 9.5px; font-weight: 700; }
.cv-list-head [hidden] { display: none; }

.cv-why {
  margin: 0 0 5px;
  font-size: 9.5px;
  line-height: 1.45;
  color: rgba(255, 200, 130, 0.75);
}
.cv-why:empty { display: none; }
.cv-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
/* A row is a handle on a vehicle, so it reads as a control, not a table cell. */
.cv-row {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) 6px;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 6px;
  font: inherit;
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
/* Two lines, because the rail is ~220 px: identity on top, progress under it.
   One line left the leg — the only part that says WHERE this run goes — with
   eleven pixels to render in. */
.cv-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cv-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cv-row:hover { background: rgba(255, 255, 255, 0.06); }
.cv-row.is-stalled { background: rgba(255, 140, 130, 0.1); }
.cv-row.is-focus {
  border-color: rgba(255, 212, 121, 0.6);
  background: rgba(255, 212, 121, 0.12);
}
.cv-dot { width: 6px; height: 6px; border-radius: 50%; }
.cv-dot.cv-blue { background: #6fb4ff; }
.cv-dot.cv-red { background: #ff6f60; }
.cv-cargo {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--cv-cargo, #dcd5c4);
  white-space: nowrap;
}
.cv-leg {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  color: rgba(220, 213, 196, 0.75);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-leg i { font-style: normal; color: rgba(200, 214, 232, 0.35); }
.cv-bar { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.cv-bar i { display: block; height: 100%; background: rgba(143, 208, 128, 0.85); }
.cv-eta {
  width: 52px;
  font-size: 9px;
  color: rgba(200, 214, 232, 0.5);
  text-align: right;
  white-space: nowrap;
}
/* The one thing the whole panel exists for: is this one ON a road right now. */
.cv-road { width: 6px; height: 6px; border-radius: 50%; }
.cv-road.on { background: #f2d07e; box-shadow: 0 0 5px rgba(242, 208, 126, 0.8); }
.cv-road.routed { background: rgba(242, 208, 126, 0.35); }
.cv-road.off { background: rgba(255, 255, 255, 0.14); }

.cv-card:empty { display: none; }
.cv-card-in {
  margin-top: 7px;
  padding: 8px;
  background: rgba(255, 212, 121, 0.07);
  border: 1px solid rgba(255, 212, 121, 0.28);
  border-radius: 7px;
}
.cv-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cv-card-head b { font-size: 11px; color: var(--cv-cargo, #dcd5c4); }
.cv-card-head span { font-size: 9.5px; color: rgba(200, 214, 232, 0.5); }
.cv-card-leg {
  margin: 3px 0 6px;
  font-size: 10px;
  color: rgba(220, 213, 196, 0.7);
}
.cv-card-leg i { font-style: normal; color: rgba(200, 214, 232, 0.35); }
.cv-card-grid {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 3px 8px;
  font-size: 9.5px;
}
.cv-card-grid span { color: rgba(200, 214, 232, 0.42); }
.cv-card-grid b { font-weight: 600; color: rgba(220, 213, 196, 0.85); }

/* ===== Operation file =================================================== */
.project-save-row { display: flex; gap: 5px; }
.project-save-row input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
}
.project-save-row button {
  height: 26px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(220, 213, 196, 0.85);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
  cursor: pointer;
}
.project-save-row button:hover { border-color: rgba(110, 176, 255, 0.55); color: var(--text); }

.tu-edit-row { margin-top: 7px; }

/* Operations: three ops up front, the missile rack only when it is needed. */
.bscn-ops { margin-top: 5px; }
.bscn-ops button { flex: 1 1 auto; }
.bscn-air-box[hidden] { display: none; }
.bscn-air-box {
  margin-top: 6px;
  padding: 7px 8px 8px;
  border: 1px solid rgba(110, 176, 255, 0.28);
  border-radius: 7px;
  background: rgba(110, 176, 255, 0.05);
}
.bscn-air-box .boids-subhead:first-child { margin-top: 0; }

/* Forces panel: the selected-badge card. (Source rows moved to SOURCES.) */
.tu-sel-card { display: grid; gap: 5px; }
.tu-sel-card .tu-sel-meta { font-size: 10px; color: rgba(220, 213, 196, 0.68); }
.tu-sel-card .tu-sel-note {
  font-size: 10px; line-height: 1.4; color: rgba(220, 213, 196, 0.82);
  padding: 5px 6px; border-left: 2px solid rgba(110, 176, 255, 0.45);
  background: rgba(110, 176, 255, 0.06); border-radius: 0 4px 4px 0;
}
.tu-sel-card [data-uact="reset"] {
  height: 22px; font-size: 10px; font-weight: 700; color: var(--text);
  background: rgba(255, 176, 76, 0.1); border: 1px solid rgba(255, 176, 76, 0.4);
  border-radius: 4px; cursor: pointer;
}
body.tms-badge-edit canvas { cursor: move !important; }

/* the `hidden` attribute must beat any flex/grid display rule above */
.boids-actions[hidden] { display: none; }

/* Network editor — the node catalogue.
   Placing a node used to be eleven two-letter buttons with a tooltip each. It
   is now a grid of cards: the drawing is the building the map will actually
   put down, and the card says what the kind is, why it exists and what it does
   to the units. Editing takes the whole desk over (.is-network-editing at the
   bottom of this block) so the cards have room to say it. */
.nodeshop-bar {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 0 8px; padding-bottom: 7px;
  border-bottom: 1px solid rgba(110, 176, 255, 0.18);
}
.nodeshop-lede { min-width: 0; }
.nodeshop-lede b {
  display: block; color: var(--text);
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.nodeshop-lede span {
  display: block; margin-top: 2px;
  font-size: 9.5px; line-height: 1.35; color: rgba(220, 213, 196, 0.6);
}
.nodeshop-sides { display: flex; flex: 0 0 auto; gap: 4px; }
.nodeshop-sides button {
  height: 22px; padding: 0 9px;
  font-size: 10px; font-weight: 800; color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 5px; cursor: pointer;
}
.nodeshop-sides button[data-side="blue"].active { border-color: rgba(110, 176, 255, 0.85); background: rgba(110, 176, 255, 0.22); }
.nodeshop-sides button[data-side="red"].active { border-color: rgba(255, 122, 92, 0.85); background: rgba(255, 122, 92, 0.22); }

.nodeshop-grid { display: grid; gap: 6px; }
.nodeshop-card {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 9px;
  align-items: start; min-width: 0; padding: 8px 9px;
  text-align: left; color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.14);
  border-radius: 7px; cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.nodeshop-card:hover { border-color: rgba(110, 176, 255, 0.5); background: rgba(110, 176, 255, 0.08); transform: translateY(-1px); }
.nodeshop-card.active { border-color: rgba(110, 176, 255, 0.85); background: rgba(110, 176, 255, 0.16); }
.nodeshop-grid[data-side="red"] .nodeshop-card:hover { border-color: rgba(255, 122, 92, 0.5); background: rgba(255, 122, 92, 0.08); }
.nodeshop-grid[data-side="red"] .nodeshop-card.active { border-color: rgba(255, 122, 92, 0.85); background: rgba(255, 122, 92, 0.16); }

.nodeshop-body { display: grid; gap: 4px; min-width: 0; }
.nodeshop-icon {
  display: block; width: 40px; height: 27px; margin-top: 1px;
  color: #8cc4ff; opacity: 0.9;
}
.nodeshop-icon svg { display: block; width: 100%; height: 100%; }
.nodeshop-grid[data-side="red"] .nodeshop-icon { color: #ff8a7e; }
.nodeshop-card.active .nodeshop-icon { opacity: 1; }
.nodeshop-name { min-width: 0; }
.nodeshop-name b { display: block; font-size: 11px; line-height: 1.2; color: var(--text); }
.nodeshop-name i {
  display: block; margin-top: 1px; font-style: normal;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(220, 213, 196, 0.5);
}
.nodeshop-what { font-size: 10px; line-height: 1.35; color: rgba(220, 213, 196, 0.86); }
.nodeshop-why { font-size: 9.5px; line-height: 1.3; color: rgba(220, 213, 196, 0.52); }
.nodeshop-effect {
  margin-top: 1px; padding: 5px 6px;
  font-size: 9.5px; line-height: 1.35; color: rgba(220, 213, 196, 0.82);
  background: rgba(110, 176, 255, 0.07);
  border-left: 2px solid rgba(110, 176, 255, 0.45);
  border-radius: 0 4px 4px 0;
}
.nodeshop-grid[data-side="red"] .nodeshop-effect { background: rgba(255, 122, 92, 0.07); border-left-color: rgba(255, 122, 92, 0.45); }
.nodeshop-effect i {
  display: block; margin-bottom: 2px; font-style: normal;
  font-size: 8px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(140, 196, 255, 0.9);
}
.nodeshop-grid[data-side="red"] .nodeshop-effect i { color: rgba(255, 138, 126, 0.9); }

/* ===== Object card ======================================================= */
/* The card that opens when you pick something on the map: a drawer that slides
   out from behind the right rail and stands alongside it, full rail height, so
   everything it has to say fits without a scrollbar. Bottom-docked was worse —
   it was short, so the estimate and the two text fields were always half a
   scroll away from each other.
   No backdrop on purpose: only the card takes pointer events, so the globe
   keeps dragging behind it while you edit. */
.object-card {
  position: fixed;
  /* Below the workspace dock, not level with it: the dock is centred, the
     drawer is right-aligned, and on a 1600-wide screen they cross. */
  top: 116px;
  right: 282px;                        /* clear of the right rail: 14 + 260 + 8 */
  z-index: 60;
  width: 380px;
  max-height: calc(100vh - 198px);
  overflow-y: auto;
  padding: 0 0 12px;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(20, 30, 47, 0.97), rgba(13, 20, 33, 0.97));
  border: 1px solid rgba(110, 176, 255, 0.34);
  border-right: 2px solid rgba(110, 176, 255, 0.85);   /* the spine it pulls out of */
  border-radius: 10px 0 0 10px;
  box-shadow: -22px 18px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  animation: oc-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* In the network workbench the right rail is wider, so the drawer starts further in. */
.strategy-shell.is-network-editing .object-card { right: 358px; }
.object-card[data-tone="red"] { border-color: rgba(255, 122, 92, 0.34); border-right-color: rgba(255, 122, 92, 0.85); }
.object-card[hidden] { display: none !important; }
@keyframes oc-in {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(0); }
}
/* Narrow screens have no room to stand beside the rail — sit on top of it. */
@media (max-width: 1180px) {
  .object-card,
  .strategy-shell.is-network-editing .object-card { right: 14px; width: min(380px, calc(100vw - 28px)); }
}
.oc-head {
  position: sticky; top: 0; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start;
  padding: 10px 12px 9px;
  background: linear-gradient(180deg, rgba(26, 38, 58, 0.98), rgba(18, 27, 43, 0.96));
  border-bottom: 1px solid rgba(110, 176, 255, 0.2);
}
.oc-title { min-width: 0; }
.oc-title b {
  display: block; color: var(--text); font-size: 13px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oc-title i {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(220, 213, 196, 0.5);
}
.oc-close {
  width: 22px; height: 22px; padding: 0;
  color: var(--text); font-size: 14px; line-height: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 5px; cursor: pointer;
}
.oc-close:hover { background: rgba(255, 80, 80, 0.22); border-color: rgba(255, 80, 80, 0.4); }
.oc-body { display: grid; gap: 7px; padding: 10px 12px 0; }
.oc-hero {
  display: flex; align-items: center; justify-content: center;
  height: 52px; color: #8cc4ff;
  background: rgba(110, 176, 255, 0.07);
  border: 1px solid rgba(110, 176, 255, 0.18);
  border-radius: 7px;
}
.object-card[data-tone="red"] .oc-hero { color: #ff8a7e; background: rgba(255, 122, 92, 0.07); border-color: rgba(255, 122, 92, 0.18); }
.oc-hero svg { width: 78px; height: 52px; }
.oc-line { font-size: 10.5px; line-height: 1.4; color: rgba(220, 213, 196, 0.86); }
.oc-line i {
  display: block; margin-bottom: 2px; font-style: normal;
  font-size: 8px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(220, 213, 196, 0.45);
}
.oc-line.is-effect {
  padding: 6px 7px;
  background: rgba(110, 176, 255, 0.07);
  border-left: 2px solid rgba(110, 176, 255, 0.45);
  border-radius: 0 4px 4px 0;
}
.object-card[data-tone="red"] .oc-line.is-effect { background: rgba(255, 122, 92, 0.07); border-left-color: rgba(255, 122, 92, 0.45); }
.oc-line.is-effect i { color: rgba(140, 196, 255, 0.9); }
.object-card[data-tone="red"] .oc-line.is-effect i { color: rgba(255, 138, 126, 0.9); }
/* An estimate, not a reading — it has to look different from the lines that
   come off the engine, or it reads as fact. */
.oc-line.is-guess {
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.035);
  border-left: 2px dashed rgba(220, 213, 196, 0.3);
  border-radius: 0 4px 4px 0;
  color: rgba(220, 213, 196, 0.72);
}
.oc-line.is-guess i { display: flex; align-items: baseline; gap: 6px; color: rgba(220, 213, 196, 0.5); }
.oc-line.is-guess em {
  font-style: normal; font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 1px 4px; border-radius: 3px;
  color: rgba(255, 196, 120, 0.9); background: rgba(255, 176, 76, 0.12);
  border: 1px solid rgba(255, 176, 76, 0.3);
  text-transform: uppercase;
}

/* Name and description: the two fields a person actually fills in. */
.oc-field {
  display: grid; gap: 3px;
  font-size: 8px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(220, 213, 196, 0.45);
}
.oc-field input, .oc-field textarea {
  width: 100%; padding: 5px 7px;
  color: var(--text); font: inherit;
  font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 5px;
}
.oc-field input { height: 26px; font-weight: 700; }
.oc-field textarea { min-height: 48px; line-height: 1.35; resize: vertical; }
.oc-field input:focus, .oc-field textarea:focus {
  outline: none; border-color: rgba(110, 176, 255, 0.7); background: rgba(110, 176, 255, 0.08);
}
.oc-field input::placeholder, .oc-field textarea::placeholder { color: rgba(220, 213, 196, 0.3); }

.oc-sub {
  margin-top: 3px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(220, 213, 196, 0.45);
}
.oc-profiles { display: grid; gap: 5px; }
.oc-profile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 6px;
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(220, 213, 196, 0.12);
  border-radius: 6px;
}
.oc-profile b { min-width: 0; color: var(--text); font-size: 10.5px; }
.oc-profile em { font-style: normal; font-size: 9px; font-weight: 800; color: rgba(140, 196, 255, 0.85); }
.oc-profile span { grid-column: 1 / -1; font-size: 9.5px; line-height: 1.35; color: rgba(220, 213, 196, 0.68); }
.oc-body .boids-card { margin-top: 2px; }

/* ===== Swarm column ===================================================== */
.swarm-bar {
  display: grid; gap: 7px;
  margin-bottom: 4px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(110, 176, 255, 0.18);
}
/* The section's own SWARM title is the heading; this is just the lede under it. */
.swarm-lede { font-size: 9.5px; line-height: 1.4; color: rgba(220, 213, 196, 0.62); }
.swarm-actions { display: flex; gap: 4px; }
.swarm-actions button {
  flex: 1; height: 22px;
  font-size: 10px; font-weight: 700; color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 5px; cursor: pointer;
}
.swarm-actions button:hover { border-color: rgba(110, 176, 255, 0.5); }
.swarm-actions button.active { border-color: rgba(255, 176, 76, 0.6); background: rgba(255, 176, 76, 0.14); }

.swarm-grid { display: grid; gap: 5px; }
.swarm-card {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 3px 8px; align-items: start;
  min-width: 0; padding: 7px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(220, 213, 196, 0.12);
  border-radius: 7px; cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.swarm-card.is-on { opacity: 1; border-color: rgba(110, 176, 255, 0.34); background: rgba(110, 176, 255, 0.07); }
.swarm-card:hover { border-color: rgba(110, 176, 255, 0.6); }
.swarm-card.is-orders { cursor: default; border-style: dashed; }
.swarm-card.is-orders:hover { border-color: rgba(220, 213, 196, 0.2); }
.swarm-icon { display: block; width: 34px; height: 23px; margin-top: 1px; color: #8cc4ff; }
.swarm-icon svg { display: block; width: 100%; height: 100%; }
.swarm-body { display: grid; gap: 2px; min-width: 0; }
.swarm-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.swarm-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 11px; }
.swarm-name em {
  margin-left: auto; flex: 0 0 auto; font-style: normal;
  font-size: 11px; font-weight: 800; color: rgba(140, 196, 255, 0.95);
}
.swarm-meta {
  display: block; font-style: normal;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(220, 213, 196, 0.45);
}
.swarm-what { font-size: 9.5px; line-height: 1.35; color: rgba(220, 213, 196, 0.78); }
.swarm-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.swarm-state { font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.swarm-state[data-on="yes"] { color: rgba(120, 220, 140, 0.85); }
.swarm-state[data-on="no"] { color: rgba(220, 213, 196, 0.4); }
.swarm-state[data-on="orders"] { color: rgba(255, 176, 76, 0.8); }
.swarm-foot .boids-linkish { font-size: 9.5px; font-weight: 700; }

/* The caption riding with the drop preview — the model on the ground can be a
   few pixels across at theater range, the word never is. */
.boids-place-ghost-label {
  position: fixed; z-index: 41;
  transform: translate(14px, 14px);
  padding: 2px 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap;
  color: #0d1421; background: #8cc4ff;
  border-radius: 4px; pointer-events: none;
}
.boids-place-ghost-label[data-side="red"] { background: #ff8a7e; }
.boids-place-ghost-label[hidden] { display: none; }

/* Escape / right-click put the tool down: the picker has to show it did. */
.nodeshop-grid.is-disarmed .nodeshop-card { opacity: 0.62; }
.nodeshop-esc {
  padding: 0 3px; border-radius: 3px;
  color: rgba(220, 213, 196, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(220, 213, 196, 0.22);
  font-size: 9px; font-weight: 700;
}

/* "Swarm…" in the network panel walks the eye over to the column */
.panel-section.is-pinged { animation: section-ping 1.1s ease 1; }
@keyframes section-ping {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(110, 176, 255, 0); }
  25% { box-shadow: inset 2px 0 0 0 rgba(110, 176, 255, 0.9), inset 0 0 34px rgba(110, 176, 255, 0.14); }
  60% { box-shadow: inset 2px 0 0 0 rgba(110, 176, 255, 0.6), inset 0 0 20px rgba(110, 176, 255, 0.08); }
}

/* --- the takeover ------------------------------------------------------- */
/* While the network is being edited the desk is a workbench with two benches:
   what you can BUILD on the right (the node catalogue, at the width it needs),
   and on the left what already stands and what MOVES through it — the sections
   marked data-network-bench (Forces, Swarm). Every other instrument steps out,
   whichever workspace happens to be selected. */
.strategy-shell.is-network-editing .side-panel .panel-section[data-ui-section]:not([data-network-bench]) {
  max-height: 0; padding-top: 0; padding-bottom: 0;
  overflow: hidden; opacity: 0; pointer-events: none;
  border-bottom-color: transparent;
}
.strategy-shell.is-network-editing .side-panel .panel-section[data-network-bench] {
  display: block;
  max-height: none; padding: 12px;
  opacity: 1; pointer-events: auto; transform: none;
}

/* ...and OUT of that mode the rail carries neither. They belong to the network
   you are editing, not to the ordinary desk, and between the swarm's eight
   cards and the crowd's statistics they turned the rail into a wall to scroll
   past on the way to anything else. */
.side-panel .panel-section[data-network-bench] { display: none; }
.strategy-shell.is-network-editing .right-panel { width: 336px; }
.strategy-shell.is-network-editing .right-panel .panel-section[data-ui-section]:not([data-ui-section="theater-network"]) {
  max-height: 0; padding-top: 0; padding-bottom: 0;
  overflow: hidden; opacity: 0; pointer-events: none;
  border-bottom-color: transparent;
}
.strategy-shell.is-network-editing .right-panel .panel-section[data-ui-section="theater-network"] {
  max-height: none; padding: 12px;
  opacity: 1; pointer-events: auto; transform: none;
}

/* Tactical actors */
.boids-actor-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 7px; }
.boids-actor-stats div { min-width: 0; padding: 6px 7px; border: 1px solid rgba(127, 167, 199, 0.24); border-radius: 6px; background: rgba(127, 167, 199, 0.06); }
.boids-actor-stats b { display: block; font-size: 15px; line-height: 1; color: var(--text); }
.boids-actor-stats span { display: block; margin-top: 3px; font-size: 9px; font-weight: 800; text-transform: uppercase; color: rgba(220, 213, 196, 0.55); }
.boids-actor-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.boids-actor-side { min-width: 0; padding: 6px 7px; border-radius: 6px; border: 1px solid rgba(220, 213, 196, 0.14); background: rgba(255, 255, 255, 0.035); font-size: 10px; }
.boids-actor-side b { display: block; font-size: 11px; color: var(--text); }
.boids-actor-side span { display: block; margin-top: 2px; color: rgba(220, 213, 196, 0.68); line-height: 1.25; }
.boids-actor-side.blue { border-color: rgba(102, 178, 255, 0.34); background: rgba(102, 178, 255, 0.08); }
.boids-actor-side.red { border-color: rgba(255, 106, 92, 0.34); background: rgba(255, 106, 92, 0.08); }
.boids-actor-readiness { display: flex; flex-wrap: wrap; gap: 4px; }
.boids-actor-readiness span { padding: 4px 6px; border-radius: 5px; border: 1px solid rgba(220, 213, 196, 0.14); background: rgba(255, 255, 255, 0.04); font-size: 10px; color: rgba(220, 213, 196, 0.68); }
.boids-actor-readiness b { color: var(--text); }
.boids-actor-readiness span[data-state="active"] { border-color: rgba(120, 220, 140, 0.35); background: rgba(120, 220, 140, 0.08); }
.boids-actor-readiness span[data-state="under_crewed"] { border-color: rgba(255, 122, 92, 0.32); background: rgba(255, 122, 92, 0.08); }
.boids-actor-list { display: flex; flex-direction: column; gap: 4px; }
.boids-actor-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 10px; }
.boids-actor-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.boids-actor-row span, .boids-actor-empty { color: rgba(220, 213, 196, 0.65); font-size: 10px; line-height: 1.3; }

/* Scenario cards (drone attack / assault) */
.boids-scn-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.boids-scn-card { padding: 7px 8px; border: 1px solid rgba(255, 120, 90, 0.32); border-radius: 6px; background: rgba(255, 120, 90, 0.06); display: flex; flex-direction: column; gap: 4px; }
.boids-scn-head { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.boids-scn-head b { flex: 0 0 auto; color: var(--text); }
.boids-scn-head .boids-scn-x { margin-left: auto; width: 20px; height: 20px; padding: 0; border-radius: 4px; border: 1px solid rgba(255, 80, 80, 0.3); background: rgba(255, 80, 80, 0.12); color: var(--text); font-size: 11px; cursor: pointer; }
.boids-scn-head .boids-scn-x:hover { background: rgba(255, 80, 80, 0.26); }
.boids-scn-meta { font-size: 10px; color: rgba(220, 213, 196, 0.7); }
.boids-scn-addsrc { height: 24px; font-size: 10px; font-weight: 700; color: var(--text); background: rgba(127, 167, 199, 0.12); border: 1px solid rgba(127, 167, 199, 0.32); border-radius: 4px; cursor: pointer; }
.boids-scn-addsrc:hover { background: rgba(127, 167, 199, 0.24); }
.boids-scn-addsrc.active { border-color: rgba(120, 220, 140, 0.58); background: rgba(120, 220, 140, 0.16); }
body.boids-scn-arming, body.boids-scn-arming canvas { cursor: crosshair !important; }

/* Air attack: weapon picker + salvo params */
.bscn-weapons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin: 4px 0; }
.bscn-weapons button {
  display: flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 6px; overflow: hidden;
  font-size: 9.5px; font-weight: 700; color: var(--text); white-space: nowrap;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 5px; cursor: pointer;
}
.bscn-weapons button:hover { border-color: rgba(110, 176, 255, 0.5); }
.bscn-weapons button.active { background: rgba(110, 176, 255, 0.14); border-color: rgba(110, 176, 255, 0.6); }
.bscn-wdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.bscn-air-params { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.bscn-air-params input[type="number"] { width: 52px; height: 20px; background: rgba(255,255,255,0.06); border: 1px solid rgba(220,213,196,0.18); border-radius: 4px; color: var(--text); font-size: 10.5px; padding: 0 5px; }
.bscn-air-params em, .boids-scn-card em { font-style: normal; font-size: 9.5px; color: rgba(220, 213, 196, 0.55); }
.boids-scn-card.is-air { border-color: rgba(255, 176, 76, 0.4); background: rgba(255, 176, 76, 0.05); }
.boids-scn-card.is-air .boids-scn-head b { display: inline-flex; align-items: center; gap: 5px; }
.boids-scn-card input[type="number"] { width: 52px; height: 20px; background: rgba(255,255,255,0.06); border: 1px solid rgba(220,213,196,0.18); border-radius: 4px; color: var(--text); font-size: 10.5px; padding: 0 5px; }
.bscn-air-actions { display: flex; gap: 4px; }
.bscn-air-actions .boids-scn-addsrc { flex: 1; }


/* ===== ГОЙДА win burst ================================================== */
.goyda-burst {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
  pointer-events: none;
  font-weight: 900;
  /* sized so the whole word fits one line within the viewport (no overflow) */
  font-size: min(9vw, 150px);
  line-height: 1;
  color: #ffd84a;
  -webkit-text-stroke: 2px #7a2b0c;
  text-shadow: 0 0 24px rgba(255, 180, 0, 0.9), 0 6px 30px rgba(0, 0, 0, 0.8);
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: uppercase;
  animation: goyda-pop 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes goyda-pop {
  0%   { transform: scale(0.2) rotate(-5deg); opacity: 0; }
  15%  { transform: scale(1.06) rotate(2deg); opacity: 1; }
  30%  { transform: scale(0.97) rotate(-1deg); }
  45%  { transform: scale(1.02) rotate(0deg); }
  75%  { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.1) rotate(0deg); opacity: 0; }
}

/* Sad sticker shown above the roulette window on a miss. */
.roulette-sad {
  position: absolute;
  top: -58px;
  left: 50%;
  font-size: 42px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  animation: roulette-sad-pop 2.2s ease forwards;
}
@keyframes roulette-sad-pop {
  0%   { transform: translateX(-50%) translateY(14px) scale(0.4); opacity: 0; }
  18%  { transform: translateX(-50%) translateY(0) scale(1.12); opacity: 1; }
  32%  { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
  80%  { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-8px) scale(1); opacity: 0; }
}

/* === Detail spotlight — in-scene scanner HUD ============================
   Lives low on the map, to the right (between the mode dock and the right
   rail). A bare semi-transparent scanner GLYPH (no backing plate) toggles the
   spotlight; while it's ON, hovering it pops the .spot-hud-flyout ABOVE it —
   radius slider (nearest the glyph) then the Pin/Grid icon toggles, all with
   NO panel backing — which auto-fades after a few idle seconds. While OFF,
   hover only lights the glyph.
   The container is pointer-transparent and the flyout is absolutely positioned
   so that when it's hidden it neither reserves layout space nor intercepts
   clicks (the old "invisible plate blocks the map" bug). */
.map-action-dock {
  position: fixed;
  left: var(--map-action-center-x, 72%);
  right: auto;
  bottom: 22px;
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
  transform: translateX(-50%);
}

.map-action-dock > * { flex: 0 0 auto; }

.spot-hud {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: auto;
  /* The flyout is position:absolute, so this box is only the 40px glyph — no
     large reserved area to swallow map clicks. pointer-events stays auto so the
     glyph's own pointerenter (hover-to-pop) keeps working. */
  pointer-events: auto;
}

.spot-hud-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: rgba(176, 202, 232, 0.7);    /* semi-transparent glyph, no plate */
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;          /* ...only the glyph itself is clickable */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
  transition: color 0.16s ease, filter 0.16s ease, transform 0.1s ease;
}
.spot-hud-main:hover { color: #eaf4ff; filter: drop-shadow(0 0 7px rgba(61, 139, 255, 0.75)); }
.spot-hud-main:active { transform: scale(0.92); }
.spot-hud-main.is-on { color: #74b4ff; filter: drop-shadow(0 0 9px rgba(61, 139, 255, 0.9)); }

.spot-hud-flyout {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);     /* floats above the glyph, out of flow */
  display: flex;
  flex-direction: column-reverse; /* slider ends up nearest the glyph, icons above */
  align-items: center;
  gap: 10px;
  /* No backing plate — bare controls float over the map. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px) scale(0.96);
  transform-origin: bottom center;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.spot-hud-flyout.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.spot-hud-slider { display: flex; align-items: center; gap: 9px; }
.spot-hud-slider input[type="range"] {
  width: 124px;
  accent-color: var(--blue);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.spot-hud-km {
  min-width: 44px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #dcebff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.spot-hud-icons { display: flex; gap: 8px; }
.spot-hud-ic {
  width: 32px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cfe0f2;
  background: rgba(14, 22, 34, 0.5);
  border: 1px solid var(--edge-soft);
  border-radius: 7px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.spot-hud-ic:hover { color: #eaf4ff; background: rgba(61, 139, 255, 0.22); border-color: var(--edge); }
.spot-hud-ic.is-on {
  color: var(--ink);
  background: var(--fill-blue);
  border-color: rgba(128, 188, 255, 0.82);
  box-shadow: var(--glow-inset);
}

/* === Tactical Glass Command UI — design-system primitives ================
   Reusable command vocabulary (additive — opt-in classes). These are the
   building blocks for the next redesign slices (deploy cards, tactical
   controls): a button family, a segmented control, status dots/readiness,
   and a corner-frame helper. All states pull from the token layer at :root. */

/* Command buttons --------------------------------------------------------- */
.cmd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  cursor: pointer;
  color: #cfe0f2;
  background: rgba(120, 184, 255, 0.07);
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease,
    box-shadow 0.14s ease, transform 0.08s ease;
}
.cmd-btn:hover { background: rgba(120, 184, 255, 0.16); border-color: var(--edge); }
.cmd-btn:active { transform: scale(0.98); }
.cmd-btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--blue-500), var(--glow); }
.cmd-btn[disabled],
.cmd-btn.is-disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* Primary — filled blue gradient + glow, for the one main action per panel. */
.cmd-btn--primary {
  color: var(--ink);
  background: var(--fill-blue);
  border-color: rgba(120, 184, 255, 0.7);
}
.cmd-btn--primary:hover {
  background: linear-gradient(180deg, rgba(61, 139, 255, 0.46), rgba(61, 139, 255, 0.22));
  box-shadow: var(--glow);
}
/* Toggle — active state carries the steady "on" glow. */
.cmd-btn.is-on {
  color: var(--ink);
  background: var(--fill-blue);
  border-color: rgba(128, 188, 255, 0.82);
  box-shadow: var(--glow-inset);
}
/* Destructive — gold/red only on the rare irreversible control. */
.cmd-btn--danger { color: #e7a59b; border-color: rgba(217, 101, 90, 0.4); background: rgba(217, 101, 90, 0.08); }
.cmd-btn--danger:hover { background: rgba(217, 101, 90, 0.16); border-color: rgba(217, 101, 90, 0.7); }

/* Segmented control ------------------------------------------------------- */
.tg-seg {
  display: inline-flex;
  border: 1px solid var(--edge-soft);
  border-radius: 7px;
  overflow: hidden;
}
.tg-seg > button {
  padding: 7px 14px;
  cursor: pointer;
  color: #9fb3c8;
  background: transparent;
  border: none;
  border-left: 1px solid var(--edge-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.14s ease, color 0.14s ease;
}
.tg-seg > button:first-child { border-left: none; }
.tg-seg > button:hover { background: rgba(61, 139, 255, 0.1); color: #cfe0f2; }
.tg-seg > button.is-on {
  color: var(--ink);
  background: var(--fill-blue);
}

/* Status dots + readiness bar (faction colour ONLY here) ------------------ */
.tg-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tg-dot--ok { background: var(--ok); box-shadow: 0 0 7px var(--ok); }
.tg-dot--warn { background: var(--warn); box-shadow: 0 0 7px var(--warn); }
.tg-dot--bad { background: var(--bad); box-shadow: 0 0 7px var(--bad); }
.tg-readiness { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tg-readiness > span { display: block; height: 100%; background: linear-gradient(90deg, #2f6fd4, var(--blue-400)); }

/* Corner-frame helper — wrap a panel in this to get the tactical L/⌐ ticks. */
.tg-cornered { position: relative; }
.tg-cornered::before,
.tg-cornered::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
  border: 1px solid var(--edge);
}
.tg-cornered::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.tg-cornered::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ============================================================
   Measure HUD — bare numbers under the workspace dock (no panel,
   no icons: readings appear only while measuring or selecting)
   ============================================================ */
.measure-hud-slot {
  position: absolute;
  top: 112px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: top .18s ease;
}

/* The Theater-intel chip occupies the normal readout line. Keep live
   measurement values below it instead of letting the chip cover the text. */
.strategy-shell[data-workspace="data"] .measure-hud-slot { top: 136px; }

.measure-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.measure-hud.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }

.mh-text {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.6px;
  color: #eaf3fd;
  text-shadow: 0 0 10px rgba(120, 180, 255, 0.55), 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}
.measure-hud.is-selected .mh-text {
  color: #ffd166;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.5), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.mh-x {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: rgba(255, 130, 130, 0.85);
  font-size: 13px;
  line-height: 1;
}
.mh-x:hover { color: #ff5566; text-shadow: 0 0 8px rgba(255, 85, 102, 0.7); }

/* LOS elevation-profile window */
.measure-profile {
  position: relative;
  pointer-events: auto;
  padding: 4px 4px 2px;
  background: rgba(8, 14, 24, 0.72);
  border: 1px solid rgba(90, 150, 220, 0.25);
  backdrop-filter: blur(6px);
}
.measure-profile canvas { display: block; }
.mh-profile-close { position: absolute; top: 0; right: 0; font-size: 11px; }

/* ============================================================
   Fading pencil — glyph next to the Detail spotlight
   ============================================================ */
.pencil-hud {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: auto;
  pointer-events: auto;
}

.pencil-main.is-live {
  color: #ffe9b0;
  border-color: rgba(255, 209, 102, 0.6);
  animation: pencil-live 0.9s ease-in-out infinite;
}
@keyframes pencil-live {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 209, 102, 0.3); }
  50% { box-shadow: 0 0 22px rgba(255, 209, 102, 0.65); }
}

.pencil-flyout {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(16, 26, 42, 0.92), rgba(10, 17, 28, 0.9));
  border: 1px solid rgba(90, 150, 220, 0.28);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.pencil-flyout.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.pencil-colors { display: flex; gap: 8px; }
.pencil-colors label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(150, 190, 235, 0.6);
  cursor: pointer;
}
.pencil-colors input[type="color"] {
  width: 22px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(90, 150, 220, 0.35);
  background: none;
  cursor: pointer;
}
.pencil-fades { display: flex; gap: 4px; }
.pencil-fades > button {
  padding: 3px 9px;
  font-size: 10px;
  color: #a9c6e4;
  background: rgba(61, 139, 255, 0.07);
  border: 1px solid rgba(90, 150, 220, 0.25);
  cursor: pointer;
}
.pencil-fades > button:hover { color: #dbe9f8; border-color: rgba(120, 180, 255, 0.5); }
.pencil-fades > button.is-on {
  color: #ffd166;
  border-color: rgba(255, 209, 102, 0.55);
  background: rgba(255, 209, 102, 0.1);
}
.pencil-hint { font-size: 9px; letter-spacing: 1.4px; color: rgba(150, 190, 235, 0.5); white-space: nowrap; }
.pencil-hint b { color: #ffd166; }

.pencil-canvas {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
}
.pencil-canvas.is-live { pointer-events: auto; cursor: crosshair; }

/* ============================================================
   "Load what I see" — leftmost glyph of the map-action dock.
   Reuses .spot-hud / .spot-hud-main geometry (the container carries both
   classes); only the flyout is its own, because it's a readout panel and
   needs a backing plate to stay legible over bright imagery.
   ============================================================ */
.lfocus-flyout {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  background: linear-gradient(180deg, rgba(16, 26, 42, 0.92), rgba(10, 17, 28, 0.9));
  border: 1px solid rgba(90, 150, 220, 0.28);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px) scale(0.97);
  transform-origin: bottom center;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.lfocus-flyout.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lfocus-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(150, 190, 235, 0.72);
}
.lfocus-stat {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #dcebff;
}
/* Lit while the priority burst is still holding the on-screen tiles up front. */
.lfocus-stat.is-focused { color: #ffd166; }
.lfocus-last {
  font-size: 9.5px;
  letter-spacing: 0.4px;
  color: rgba(150, 190, 235, 0.62);
  font-variant-numeric: tabular-nums;
}
.lfocus-opts { display: flex; align-items: center; gap: 7px; }
.lfocus-ic { width: 28px; height: 26px; }
.lfocus-opt-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(150, 190, 235, 0.5);
}
.lfocus-hint { font-size: 9px; letter-spacing: 1.4px; color: rgba(150, 190, 235, 0.5); }
.lfocus-hint b { color: #ffd166; }

.lfocus-main.is-pulsing { animation: lfocus-pulse 0.55s ease-out; }
@keyframes lfocus-pulse {
  0%   { color: #ffd166; filter: drop-shadow(0 0 2px rgba(255, 209, 102, 0.9)); transform: scale(0.9); }
  45%  { color: #ffd166; filter: drop-shadow(0 0 16px rgba(255, 209, 102, 0.95)); transform: scale(1.1); }
  100% { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65)); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lfocus-main.is-pulsing { animation-duration: 0.01ms; }
}

/* ============================================================
   Zones — relief · max detail · fresh imagery (map-action dock glyph).
   One panel above the glyph, opened by a click (never by hover: it holds
   inputs). Dark glass, blue for actions, gold only for work in progress.
   ============================================================ */
.zp {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 312px;
  max-height: min(72vh, 660px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(15, 24, 39, 0.95), rgba(9, 15, 25, 0.94));
  border: 1px solid rgba(96, 156, 226, 0.3);
  border-radius: 10px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(160, 205, 255, 0.06);
  backdrop-filter: blur(10px);
  color: #dcebff;
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px) scale(0.98);
  transform-origin: bottom center;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.zp.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.zp [hidden] { display: none !important; }
.zp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px 14px;
  border-bottom: 1px solid rgba(96, 156, 226, 0.14);
}
.zp-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #eaf4ff;
}
.zp-subtitle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  color: rgba(150, 190, 235, 0.55);
}
.zp-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zp-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: rgba(205, 225, 248, 0.75);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.zp-icon:hover { color: #fff; background: rgba(61, 139, 255, 0.16); border-color: var(--edge-soft); }
.zp-icon.is-on { color: #74b4ff; }
.zp-icon.is-danger:hover { color: #ff8a8a; border-color: rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.1); }
/* Zones hidden: the eye goes dim with a strike so the state reads at a glance. */
.zp-icon.is-off { color: rgba(205, 225, 248, 0.35); position: relative; }
.zp-icon.is-off::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-35deg);
}

/* Zone view: Map | Intel */
.zp-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  background: rgba(6, 11, 19, 0.7);
  border: 1px solid rgba(96, 156, 226, 0.18);
  border-radius: 7px;
}
.zp-seg {
  height: 24px;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(205, 225, 248, 0.7);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.zp-seg:hover { color: #fff; background: rgba(61, 139, 255, 0.14); }
.zp-seg.is-on { color: var(--ink); background: var(--fill-blue); box-shadow: var(--glow-inset); }
.zp-seg[data-view="intel"].is-on { background: linear-gradient(180deg, #2fa873, #1b7a52); color: #eafff4; }

.zp-create {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  background: rgba(61, 139, 255, 0.06);
  border: 1px solid rgba(96, 156, 226, 0.16);
  border-radius: 8px;
}
.zp-size { display: flex; align-items: center; gap: 6px; }
.zp-step, .zp-chip {
  height: 26px;
  min-width: 28px;
  padding: 0 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #cfe0f2;
  background: rgba(14, 22, 34, 0.7);
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
  cursor: pointer;
}
.zp-chip { margin-left: auto; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; }
.zp-step:hover, .zp-chip:hover { color: #fff; border-color: var(--edge); background: rgba(61, 139, 255, 0.2); }
.zp-chip.is-on { color: var(--ink); background: var(--fill-blue); border-color: rgba(128, 188, 255, 0.82); }
.zp-side {
  min-width: 70px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.zp-plan { font-size: 10px; color: rgba(190, 215, 245, 0.75); font-variant-numeric: tabular-nums; }
.zp-primary, .zp-secondary {
  height: 30px;
  padding: 0 12px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-radius: 7px;
  cursor: pointer;
  transition: filter 0.14s ease, transform 0.1s ease, background 0.14s ease;
}
.zp-primary { color: var(--ink); background: var(--fill-blue); border: 1px solid rgba(128, 188, 255, 0.82); box-shadow: var(--glow-inset); }
.zp-secondary { color: #dcebff; background: rgba(14, 22, 34, 0.7); border: 1px solid var(--edge-soft); }
.zp-primary:hover { filter: brightness(1.15); }
.zp-secondary:hover { border-color: var(--edge); background: rgba(61, 139, 255, 0.16); }
.zp-primary:active, .zp-secondary:active { transform: scale(0.98); }
.zp-secondary:disabled { opacity: 0.6; cursor: progress; }
.zp-note, .zp-zone-note { font-size: 10px; color: #ffd166; }

.zp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.zp-list:empty { display: none; }
.zp-card-main {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  padding: 7px 9px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: rgba(14, 22, 34, 0.55);
  border: 1px solid rgba(96, 156, 226, 0.12);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.zp-card-main:hover { border-color: var(--edge); background: rgba(61, 139, 255, 0.1); }
.zp-card-name { font-size: 11.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-card-meta { font-size: 9.5px; color: rgba(150, 190, 235, 0.6); font-variant-numeric: tabular-nums; }
.zp-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.zp-tag {
  padding: 1px 6px;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.3px;
  border-radius: 4px;
  background: rgba(111, 211, 255, 0.1);
  color: #9fdcff;
  font-variant-numeric: tabular-nums;
}
.zp-tag.is-busy { color: #ffd166; background: rgba(255, 209, 102, 0.1); }
.zp-tag.is-bad { color: #ff8a8a; background: rgba(255, 107, 107, 0.1); }
.zp-tag.is-off { color: rgba(205, 225, 248, 0.5); background: rgba(205, 225, 248, 0.06); }

.zp-zone { display: flex; flex-direction: column; gap: 8px; }
.zp-zone-head { display: flex; align-items: center; gap: 4px; }
.zp-name, .zp-comment, .zp-settings input {
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  font: inherit;
  color: #fff;
  background: rgba(6, 11, 19, 0.7);
  border: 1px solid rgba(96, 156, 226, 0.18);
  border-radius: 6px;
  outline: none;
}
.zp-name { flex: 1 1 auto; font-size: 12px; font-weight: 700; }
.zp-comment { width: 100%; box-sizing: border-box; font-size: 10.5px; color: #cfe0f2; }
.zp-name:focus, .zp-comment:focus, .zp-settings input:focus { border-color: rgba(116, 180, 255, 0.7); }
.zp-facts { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: rgba(190, 215, 245, 0.75); }
.zp-facts .is-busy { color: #ffd166; }
.zp-facts .is-bad { color: #ff8a8a; }
.zp-link { padding: 0; font: inherit; color: #74b4ff; background: none; border: none; text-decoration: underline; cursor: pointer; }
.zp-check { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: rgba(215, 232, 250, 0.85); cursor: pointer; user-select: none; }
.zp-check input { margin: 0; accent-color: var(--blue); }
.zp-section-title {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(150, 190, 235, 0.7);
}

.zp-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: rgba(61, 139, 255, 0.08);
  border: 1px solid rgba(96, 156, 226, 0.2);
  border-radius: 7px;
}
.zp-current-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zp-current-text strong, .zp-result-text strong { font-size: 11px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-current-text small, .zp-result-text small { font-size: 9.5px; color: rgba(150, 190, 235, 0.7); }
.zp-progress { height: 3px; margin-top: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.zp-progress i { display: block; height: 100%; background: #ffd166; transition: width 0.2s ease; }
.zp-badge {
  flex: 0 0 auto;
  width: 30px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  border-radius: 5px;
  color: #06121f;
  background: #6fd3ff;
}
.zp-badge.tone-radar { background: #ffc65a; }
.zp-badge.tone-esri { background: #9ad1a0; }

.zp-results { display: flex; flex-direction: column; gap: 3px; }
.zp-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: rgba(14, 22, 34, 0.55);
  border: 1px solid rgba(96, 156, 226, 0.1);
  border-radius: 7px;
  cursor: pointer;
}
.zp-result:hover { border-color: var(--edge); background: rgba(61, 139, 255, 0.1); }
.zp-result.is-active { border-color: rgba(116, 180, 255, 0.6); }
.zp-result.is-locked { opacity: 0.6; }
.zp-result-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zp-result-go { flex: 0 0 auto; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #74b4ff; }
.zp-result.is-locked .zp-result-go { color: #ffd166; }
.zp-empty { margin: 2px 0; font-size: 10px; color: rgba(190, 215, 245, 0.6); }
.zp-layer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 5px; }
.zp-layer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 5px;
  font: inherit;
  color: inherit;
  background: rgba(14, 22, 34, 0.6);
  border: 1px solid rgba(96, 156, 226, 0.14);
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
}
.zp-layer:hover { border-color: rgba(116, 180, 255, 0.7); }
.zp-layer-thumb {
  position: relative;
  height: 52px;
  background: linear-gradient(135deg, rgba(61, 139, 255, 0.18), rgba(10, 18, 30, 0.9));
}
.zp-layer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zp-layer-thumb i {
  position: absolute;
  left: 5px;
  bottom: 4px;
  font-size: 9px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.zp-layer-name { padding: 0 6px; font-size: 9.5px; text-align: left; color: #dcebff; }

.zp-knobs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px 11px;
  border-top: 1px solid rgba(96, 156, 226, 0.14);
}
.zp-knob { display: flex; align-items: center; gap: 8px; }
.zp-knob span {
  width: 44px;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(150, 190, 235, 0.7);
}
.zp-knob input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--blue); }
.zp-knob output { width: 38px; text-align: right; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.zp-settings { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; border-top: 1px solid rgba(96, 156, 226, 0.14); }
.zp-settings p { margin: 0; font-size: 10px; line-height: 1.4; color: rgba(190, 215, 245, 0.7); }
.zp-settings label { display: flex; flex-direction: column; gap: 3px; font-size: 9.5px; color: rgba(150, 190, 235, 0.8); }
.zp-settings-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; }

/* The glyph: lit while the panel is open, breathing while anything streams. */
.relief-main.is-pinned { color: #eaf4ff; filter: drop-shadow(0 0 9px rgba(116, 180, 255, 0.95)); }
.relief-main.is-loading { animation: relief-breathe 1.1s ease-in-out infinite; }
.relief-main.is-pulsing { animation: lfocus-pulse 0.55s ease-out; }
@keyframes relief-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .relief-main.is-loading { animation: none; }
}

/* ===== Weather ops dock (⛅) — inherits .boids-dock geometry ===== */
.weather-dock { right: 552px; width: 244px; }
.wops-date-row { display: flex; align-items: center; gap: 6px; }
.wops-date-row input[type="date"] {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(220, 213, 196, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 10px;
  color-scheme: dark;
}
.wops-hour { display: flex; align-items: center; gap: 3px; font-size: 10px; color: rgba(220, 213, 196, 0.7); }
.wops-hour input {
  width: 40px;
  height: 24px;
  padding: 0 4px;
  border: 1px solid rgba(220, 213, 196, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 10px;
}
.weather-dock .boids-actions button.active {
  border-color: rgba(110, 176, 255, 0.75);
  background: rgba(110, 176, 255, 0.17);
}
.weather-launcher.active, .launchpad-launcher.active {
  border-color: rgba(110, 176, 255, 0.7);
  background: rgba(110, 176, 255, 0.18);
}

/* ===== Weather ops redesign — opt-in, local, close-up ===== */
.weather-dock { right: 552px; width: 252px; }
.wx-now {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(96, 165, 250, 0.55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.30), rgba(37, 99, 235, 0.18));
  color: #eaf2ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.wx-now:hover { border-color: rgba(96, 165, 250, 0.9); box-shadow: 0 0 16px rgba(59, 130, 246, 0.35); }
.wx-now.is-active { border-color: rgba(110, 176, 255, 0.8); background: linear-gradient(180deg, rgba(110, 176, 255, 0.24), rgba(110, 176, 255, 0.12)); color: #f6ecd6; }
.wx-active-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.wx-active-row[hidden] { display: none; }
.wx-active-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: #9fd0ff; padding: 2px 6px; border: 1px solid rgba(96, 165, 250, 0.4); border-radius: 4px; }
.wx-active-when { font-size: 10px; color: rgba(220, 213, 196, 0.7); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-off { color: #ffb4a8 !important; border-color: rgba(255, 106, 92, 0.4) !important; }

/* calendar */
.wx-cal { margin-top: 4px; }
.wx-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wx-cal-month { font-size: 11px; font-weight: 800; color: var(--text); }
.wx-cal-nav { width: 22px; height: 22px; border: 1px solid rgba(220, 213, 196, 0.2); border-radius: 5px; background: rgba(255, 255, 255, 0.05); color: var(--text); cursor: pointer; font-size: 13px; line-height: 1; }
.wx-cal-nav:hover:not(:disabled) { border-color: rgba(110, 176, 255, 0.5); }
.wx-cal-nav:disabled { opacity: 0.3; cursor: default; }
.wx-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.wx-cal-wd { margin-bottom: 3px; }
.wx-cal-wdc { text-align: center; font-size: 8px; font-weight: 700; color: rgba(220, 213, 196, 0.45); text-transform: uppercase; }
.wx-cal-cell { height: 26px; border: 1px solid rgba(220, 213, 196, 0.12); border-radius: 5px; background: rgba(255, 255, 255, 0.03); color: rgba(220, 213, 196, 0.85); font-size: 11px; cursor: pointer; padding: 0; }
.wx-cal-cell:hover:not(:disabled) { border-color: rgba(96, 165, 250, 0.6); background: rgba(59, 130, 246, 0.12); }
.wx-cal-cell.is-sel { border-color: rgba(96, 165, 250, 0.9); background: rgba(59, 130, 246, 0.28); color: #eaf2ff; font-weight: 800; }
.wx-cal-cell:disabled { opacity: 0.22; cursor: default; }
.wx-cal-empty { border: none; background: none; cursor: default; }
.wx-cal-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wx-hour { display: flex; align-items: center; gap: 4px; font-size: 10px; color: rgba(220, 213, 196, 0.7); }
.wx-hour input { width: 44px; height: 26px; padding: 0 5px; border: 1px solid rgba(220, 213, 196, 0.2); border-radius: 5px; background: rgba(255, 255, 255, 0.05); color: var(--text); font-size: 11px; }
.wx-cal-foot .cmd-btn { flex: 1; }

/* secondary blocks */
.wx-more { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 8px; }
.wx-more > summary { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(220, 213, 196, 0.6); cursor: pointer; list-style: none; }
.wx-more > summary::-webkit-details-marker { display: none; }
.wx-more > summary::before { content: '▸ '; color: rgba(110, 176, 255, 0.7); }
.wx-more[open] > summary::before { content: '▾ '; }
.wx-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wx-preset { text-transform: capitalize; }

/* weather readings — floating window */
.wx-table-window {
  position: fixed;
  left: 360px;
  top: 84px;
  width: 300px;
  z-index: 33;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 44px var(--shadow);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.wx-table-window.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 0.16s ease, transform 0.16s ease; }
.wx-table-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.wx-table-title { font-weight: 800; font-size: 12px; color: var(--text); }
.wx-table-src { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: #9fd0ff; flex: 1; }
.wx-table-x { width: 22px; height: 22px; background: none; border: none; color: var(--text); cursor: pointer; font-size: 16px; line-height: 1; }
.wx-table-body { padding: 12px; }
.wx-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.wx-hero-temp { font-size: 36px; font-weight: 800; line-height: 1; color: var(--text); }
.wx-hero-desc { font-size: 13px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.wx-hero-sub { font-size: 10px; color: rgba(220, 213, 196, 0.6); margin-top: 3px; }
.wx-table { width: 100%; border-collapse: collapse; }
.wx-table th, .wx-table td { padding: 4px 0; font-size: 11px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.wx-table th { text-align: left; font-weight: 600; color: rgba(220, 213, 196, 0.6); }
.wx-table td { text-align: right; color: var(--text); font-weight: 600; }
.wx-table-sub { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent, #e7c36f); margin: 12px 0 6px; }
.wx-traffic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.wx-traffic-tile { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(220, 213, 196, 0.14); border-radius: 6px; background: rgba(255, 255, 255, 0.03); }
.wx-traffic-name { font-size: 10px; color: var(--text); flex: 1; }
.wx-traffic-dot { width: 8px; height: 8px; border-radius: 50%; background: #57d38a; box-shadow: 0 0 6px rgba(87, 211, 138, 0.7); }
.wx-traffic-lvl { font-size: 8px; font-weight: 800; letter-spacing: 0.05em; color: rgba(220, 213, 196, 0.7); }
.wx-traffic-lvl[data-lvl="limited"] { color: #f2c14e; }
.wx-traffic-lvl[data-lvl="poor"] { color: #ff6a5c; }
.wx-traffic-tile:has(.wx-traffic-lvl[data-lvl="limited"]) .wx-traffic-dot { background: #f2c14e; box-shadow: 0 0 6px rgba(242, 193, 78, 0.7); }
.wx-traffic-tile:has(.wx-traffic-lvl[data-lvl="poor"]) .wx-traffic-dot { background: #ff6a5c; box-shadow: 0 0 6px rgba(255, 106, 92, 0.75); }
@media (max-width: 900px) { .wx-table-window { left: 12px; right: 12px; width: auto; } }

/* ===== Launch control — edge rails, map left alone ======================= */
/*
 * The panel is a full-screen shell that does not take the pointer: only the two
 * rails and the bottom bar do. Everything between them is map, which is the
 * whole reason the layout looks like this.
 */
.launch-panel {
  position: fixed;
  inset: 0;
  z-index: 32;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.launch-panel.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}
/* the app's own rails fold away — three columns of chrome per edge is how you
   end up planning a strike on a letterbox of map */
body.launch-control-open .side-panel,
body.launch-control-open .right-panel {
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--lc-shove, 0));
  transition: opacity 0.18s ease, transform 0.22s ease;
}
body.launch-control-open .side-panel { --lc-shove: -24px; }
body.launch-control-open .right-panel { --lc-shove: 24px; }

/* The app keeps its mode dock and map tools in the bottom ~70 px. Everything
   here sits above that line rather than on top of it. */
.lc-rail {
  position: absolute;
  top: 96px;
  bottom: var(--lc-floor, 78px);
  width: 236px;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  border: 1px solid rgba(120, 180, 255, 0.2);
  border-radius: 10px;
  background: rgba(8, 14, 22, 0.9);
  backdrop-filter: blur(9px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.lc-left { left: 14px; }
.lc-right { right: 14px; width: 300px; }
.lc-left { width: 236px; }
.lc-left.is-folded { transform: translateX(calc(-100% + 30px)); opacity: 0.55; }
.lc-right.is-folded { transform: translateX(calc(100% - 30px)); opacity: 0.55; }
.lc-rail.is-folded .lc-scroll { visibility: hidden; }
.lc-rail.is-folded { cursor: pointer; }
.lc-rail.is-folded .lc-head > *:not(.lc-fold) { opacity: 0; pointer-events: none; }
/* the fold control sits on the rail's inner edge — the part still on screen */
.lc-right .lc-head .lc-fold { order: -1; }

.lc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 11px;
  border-bottom: 1px solid rgba(120, 180, 255, 0.16);
  flex: none;
}
.lc-title {
  flex: 1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #cfe3ff;
  white-space: nowrap;
}
.lc-fold, .lc-close {
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid rgba(220, 213, 196, 0.16);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(220, 213, 196, 0.8);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.lc-fold:hover, .lc-close:hover { border-color: rgba(110, 176, 255, 0.6); color: #ffd166; }
.lc-close { font-size: 15px; }
.lc-side { display: flex; gap: 3px; flex: none; }
.lc-side button {
  height: 20px;
  padding: 0 8px;
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(220, 213, 196, 0.72);
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
}
.lc-side button[data-side="blue"].active { border-color: rgba(111, 180, 255, 0.8); background: rgba(111, 180, 255, 0.16); color: #cfe3ff; }
.lc-side button[data-side="red"].active { border-color: rgba(255, 111, 96, 0.8); background: rgba(255, 111, 96, 0.16); color: #ffd7d2; }

.lc-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 4px 0 8px; }
.lc-sec { border-bottom: 1px solid rgba(120, 180, 255, 0.08); }
.lc-sec:last-child { border-bottom: none; }
.lc-sec > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(110, 176, 255, 0.9);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lc-sec > summary::-webkit-details-marker { display: none; }
.lc-sec > summary::before { content: '▾'; font-size: 8px; opacity: 0.7; }
.lc-sec:not([open]) > summary::before { content: '▸'; }
.lc-sec > summary > *:not(.lc-note) { margin-left: auto; }
.lc-note {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(220, 213, 196, 0.45);
  font-size: 10px;
}
.lc-sec > *:not(summary) { padding: 0 11px 8px; }

/* --- arsenal ------------------------------------------------------------- */
.lp-weapons { display: flex; flex-direction: column; gap: 3px; }
.lp-weapons button {
  display: grid;
  grid-template-areas: 'dot label' 'dot meta';
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 0 7px;
  padding: 4px 7px;
  border: 1px solid rgba(220, 213, 196, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lp-weapons button:hover { border-color: rgba(110, 176, 255, 0.5); }
.lp-weapons button.active { border-color: #ffd166; background: rgba(255, 209, 102, 0.12); }
.lp-weapons .lp-dot { grid-area: dot; }
.lp-wlabel { grid-area: label; font-size: 12px; font-weight: 700; }
.lp-wmeta { grid-area: meta; font-size: 9.5px; color: rgba(220, 213, 196, 0.55); }
.lp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lc, #9fc4ff);
  box-shadow: 0 0 7px var(--lc, #9fc4ff);
  flex: none;
}

/* --- flights ------------------------------------------------------------- */
.lp-flights { display: flex; flex-direction: column; gap: 5px; }
.lp-row {
  padding: 5px 7px;
  border: 1px solid rgba(120, 180, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  cursor: grab;
}
.lp-row.lp-drop, .lp-trow.lp-drop { border-color: #ffd166; background: rgba(255, 209, 102, 0.1); }
.lp-row-main { display: flex; align-items: center; gap: 5px; }
.lp-wname { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--lc, #cfe3ff); flex: 1; min-width: 0; }
.lp-salvo { display: flex; align-items: center; gap: 1px; font-size: 9.5px; color: rgba(220, 213, 196, 0.7); }
.lp-salvo input, .lp-adrow input, .lp-hard input {
  width: 38px;
  height: 19px;
  padding: 0 3px;
  border: 1px solid rgba(220, 213, 196, 0.18);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 10px;
}
.lp-chip, .lp-adrow select {
  height: 20px;
  max-width: 88px;
  padding: 0 3px;
  border: 1px solid rgba(120, 180, 255, 0.3);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: #cfe3ff;
  font-size: 10px;
}
.lp-chip.is-empty { border-style: dashed; color: rgba(220, 213, 196, 0.5); background: none; }
.lp-chip option, .lp-adrow select option, .lc-clock option { background: #101820; color: #dcd5c4; }
.lp-x { width: 18px; height: 18px; flex: none; border: none; background: none; color: rgba(255, 130, 120, 0.75); font-size: 11px; cursor: pointer; }
.lp-x:hover { color: #ff8a7e; }
.lp-mini {
  height: 17px;
  padding: 0 6px;
  border: 1px solid rgba(159, 228, 255, 0.35);
  border-radius: 4px;
  background: rgba(159, 228, 255, 0.08);
  color: #9fe4ff;
  font-size: 8.5px;
  font-weight: 700;
  cursor: pointer;
}
.lp-mini:hover { background: rgba(159, 228, 255, 0.2); }
.lp-flight { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.lp-threat { margin-top: 4px; font-size: 10.5px; line-height: 1.45; color: rgba(220, 213, 196, 0.6); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.lp-live { margin-top: 4px; font-size: 11px; color: #ffe6b0; }
.lp-warn { color: #ff8a7e; }
.lp-ok { color: #8fe0a4; }
.lp-muted { color: rgba(220, 213, 196, 0.45); }
.lp-empty { font-size: 10.5px; padding: 5px 0; }

/* --- targets ------------------------------------------------------------- */
.lp-targets, .lp-ad { display: flex; flex-direction: column; gap: 4px; }
.lp-trow, .lp-adrow {
  padding: 4px 7px;
  border: 1px solid rgba(255, 210, 74, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
}
.lp-trow { cursor: grab; }
.lp-trow-main { display: flex; align-items: center; gap: 6px; }
.lp-trow b { color: #ffd24a; font-size: 12px; }
.lp-trow span { flex: 1; color: rgba(220, 213, 196, 0.55); font-size: 10px; }
.lp-hard { display: flex; align-items: center; gap: 2px; font-size: 8.5px; color: rgba(220, 213, 196, 0.45); }
.lp-dmg {
  height: 4px;
  margin-top: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.lp-dmg i { display: block; height: 100%; background: linear-gradient(90deg, #ffb14a, #ff7a3c); }
.lp-dmg.is-down i { background: linear-gradient(90deg, #8fe0a4, #4fd06a); }
.lp-dmgtxt { display: block; margin-top: 2px; font-size: 8.5px; color: rgba(220, 213, 196, 0.55); }

/* --- air defence --------------------------------------------------------- */
.lp-adrow { border-color: rgba(159, 228, 255, 0.28); display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.lp-adrow b { color: #9fe4ff; font-size: 12px; }
.lp-admeta { flex-basis: 100%; font-size: 9.5px; color: rgba(220, 213, 196, 0.42); }
.lp-adlive { flex-basis: 100%; display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #ffe6b0; }
.lp-adlive:empty { display: none; }
/* how much is left in the launcher, at a glance */
.lp-mag {
  width: 34px;
  height: 4px;
  flex: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.lp-mag i { display: block; height: 100%; background: #9fe4ff; }
.lp-adpick { display: flex; gap: 2px; }
.lp-adpick button {
  height: 16px;
  padding: 0 4px;
  border: 1px solid rgba(159, 228, 255, 0.25);
  border-radius: 4px;
  background: rgba(159, 228, 255, 0.07);
  color: rgba(200, 235, 255, 0.75);
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}
.lp-adpick button:hover { border-color: rgba(159, 228, 255, 0.6); }
.lp-adpick button.active { border-color: #9fe4ff; background: rgba(159, 228, 255, 0.24); color: #eaf9ff; }
.lp-add {
  height: 17px;
  padding: 0 7px;
  border: 1px solid rgba(110, 176, 255, 0.4);
  border-radius: 4px;
  background: rgba(110, 176, 255, 0.12);
  color: #e8d9b0;
  font-size: 8.5px;
  font-weight: 700;
  cursor: pointer;
}
.lp-add.active { border-color: #ffd166; background: rgba(255, 209, 102, 0.22); color: #ffd166; }

/* --- tracks + command ---------------------------------------------------- */
/* Rows grouped under the flight that fired them: thirty-six identical weapon
   names in a flat list is not a list, it is a wall. */
.lp-tgroup {
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(120, 180, 255, 0.09);
  cursor: default;
}
.lp-tgroup:hover { background: rgba(120, 180, 255, 0.05); border-radius: 5px; }
.lp-tgroup-head { display: flex; align-items: baseline; gap: 5px; font-size: 11px; }
.lp-tgroup-head b { color: var(--lc, #cfe3ff); }
.lp-tgroup-head span { color: rgba(220, 213, 196, 0.6); }
.lp-tgroup-n { margin-left: auto; color: #ffe6b0 !important; font-weight: 700; }
.lp-tag {
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(255, 209, 102, 0.18);
  color: #ffd166;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.lp-tgroup-sum { font-size: 9.5px; color: rgba(220, 213, 196, 0.5); margin: 1px 0 2px 2px; }
.lp-tgroup .lp-track { padding-left: 6px; cursor: pointer; }
.lp-tgroup .lp-track:hover { background: rgba(255, 209, 102, 0.1); }

.lp-track {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 10.5px;
  color: rgba(220, 213, 196, 0.78);
  border-bottom: 1px solid rgba(120, 180, 255, 0.05);
}
.lp-track b { min-width: 62px; color: #cfe3ff; font-size: 11px; }
.lp-track span { white-space: nowrap; }
.lp-eng { color: #9fe4ff; }
.lp-advice-row, .lp-cmdrow {
  padding: 3px 0 3px 7px;
  margin-bottom: 2px;
  border-left: 2px solid transparent;
  font-size: 10.5px;
  line-height: 1.4;
  color: rgba(220, 213, 196, 0.78);
}
.lp-adv-warn { border-left-color: #ff8a7e; color: #ffd7d2; }
.lp-adv-info { border-left-color: rgba(159, 228, 255, 0.7); }
.lp-adv-ok { border-left-color: #8fe0a4; color: #d6f2de; }
.lc-cmdlog { margin-top: 5px; border-top: 1px solid rgba(120, 180, 255, 0.1); padding-top: 4px; }
.lc-cmdlog:empty { display: none; }
.lp-cmdrow { opacity: 0.85; font-size: 10px; }

/* labelled stat chips — the same numbers, but you can tell which is which */
.lp-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(120, 180, 255, 0.09);
  font-size: 11px;
  color: #cfe3ff;
  white-space: nowrap;
}
.lp-stat i {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220, 213, 196, 0.45);
}
.lp-stat.is-ok { background: rgba(143, 224, 164, 0.14); color: #b7ecc4; }
.lp-btn.is-on { border-color: #ffd166; background: rgba(255, 209, 102, 0.2); color: #ffd166; }

/* --- after-action -------------------------------------------------------- */
/* When the last round has resolved the panel stops being a control surface and
   becomes a record. */
.lc-aar {
  margin-bottom: 8px;
  border: 1px solid rgba(255, 209, 102, 0.4);
  border-radius: 8px;
  background: rgba(40, 30, 12, 0.5);
  overflow: hidden;
}
.lc-aar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: rgba(255, 209, 102, 0.1);
  font-size: 11.5px;
  color: #ffe6b0;
}
.lc-aar-head > b { letter-spacing: 0.05em; text-transform: uppercase; font-size: 10.5px; }
.lc-aar-head > span { flex: 1; }
.lc-aar-body { padding: 5px 9px 7px; display: flex; flex-direction: column; gap: 3px; }
.lc-aar-row {
  display: grid;
  grid-template-columns: 62px 1fr 1fr;
  gap: 4px 8px;
  align-items: baseline;
  font-size: 10.5px;
  color: rgba(220, 213, 196, 0.8);
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 209, 102, 0.08);
}
.lc-aar-row > b { color: #ffd166; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.lc-aar-row > span:last-child { grid-column: 2 / -1; font-size: 10px; }
.lc-aar-row.is-down > b { color: #8fe0a4; }
.lc-aar-row.is-flyable { cursor: pointer; }
.lc-aar-row.is-flyable:hover { background: rgba(255, 209, 102, 0.1); border-radius: 4px; }
.lc-aar-flight > b { color: #cfe3ff; }
.lc-aar-note { font-size: 9.5px; color: rgba(220, 213, 196, 0.4); margin-bottom: 2px; }

/* --- centre: the flights ------------------------------------------------- */
/*
 * The list you actually work in, so it goes where you are looking and spreads
 * across the width instead of down a column. Sized to sit between the two
 * rails; folds to its own header.
 */
.lc-centre {
  position: absolute;
  left: 50%;
  bottom: calc(var(--lc-floor, 78px) + 48px);
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 580px));
  min-width: 440px;
  max-height: 40vh;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  border: 1px solid rgba(120, 180, 255, 0.2);
  border-radius: 10px;
  background: rgba(8, 14, 22, 0.9);
  backdrop-filter: blur(9px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  transition: max-height 0.18s ease;
}
.lc-centre .lc-scroll { padding: 8px 10px; }
.lc-centre.is-folded { max-height: 34px; cursor: pointer; }
.lc-centre.is-folded .lc-scroll { display: none; }
/* One after another. Side-by-side columns fit more rows on screen and made
   every one of them harder to read, which is the wrong trade for the list you
   spend the whole time in. */
.lc-centre .lp-flights {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- bottom bar ---------------------------------------------------------- */
.lc-bar {
  position: absolute;
  left: 50%;
  bottom: var(--lc-floor, 78px);
  transform: translateX(-50%);
  max-width: calc(100vw - 28px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  pointer-events: auto;
  border: 1px solid rgba(120, 180, 255, 0.2);
  border-radius: 9px;
  background: rgba(8, 14, 22, 0.92);
  backdrop-filter: blur(9px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
.lc-summary { font-size: 11.5px; color: rgba(200, 225, 255, 0.88); white-space: nowrap; }
.lc-hint { font-size: 11px; color: #ffd166; white-space: nowrap; }
.lc-hint:empty { display: none; }
.lc-mclock {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffe6b0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lc-mclock:empty { display: none; }
.lc-toggle { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: rgba(220, 213, 196, 0.6); cursor: pointer; }
.lc-toggle input { width: 11px; height: 11px; accent-color: #ffd166; }
.lc-clock { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: rgba(220, 213, 196, 0.6); }
.lc-clock select {
  height: 19px;
  border: 1px solid rgba(220, 213, 196, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: #cfe3ff;
  font-size: 10px;
}
.lp-btn {
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(220, 213, 196, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.lp-btn:hover { border-color: rgba(110, 176, 255, 0.5); }
.lp-launch {
  height: 26px;
  padding: 0 16px;
  border: 1px solid rgba(255, 122, 82, 0.6);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 122, 82, 0.28), rgba(200, 60, 40, 0.28));
  color: #ffd9c8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
}
.lp-launch:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255, 122, 82, 0.42), rgba(200, 60, 40, 0.42)); }
.lp-launch:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 1180px) {
  .lc-rail, .lc-left { width: 208px; }
  .lc-right { width: 242px; }
  .lc-centre { width: min(660px, calc(100vw - 450px)); }
}
@media (max-height: 760px) {
  .lc-rail { top: 70px; }
  .lc-centre { max-height: 30vh; }
}

/* ===== Air marks — what the raid puts on the map ========================== */
/* Falling wreckage. Small, dim, and there are a lot of them, so they read as a
   shower rather than as a set of objects. */
.air-debris {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(226, 208, 176, 0.85);
  box-shadow: 0 0 3px rgba(255, 220, 170, 0.7);
  will-change: transform;
}
.air-debris.is-warhead {
  width: 6px;
  height: 6px;
  background: #ff8a3c;
  box-shadow: 0 0 8px rgba(255, 138, 60, 0.9);
}
.air-mark-hits, .air-mark-debris, .air-mark-tracks { position: absolute; inset: 0; }
/* Proximity tooltip. The overlay never takes a pointer event, so the map stays
   draggable from anywhere; this simply follows the cursor to the nearest mark. */
.air-mark-tip {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  max-width: 280px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 209, 102, 0.4);
  border-radius: 6px;
  background: rgba(8, 14, 22, 0.95);
  color: #ffe6b0;
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  will-change: transform;
}

/*
 * A four-metre missile at continental zoom is a fraction of a pixel, so tracks
 * are drawn in screen space where they cannot shrink. Craters stay put: the
 * record of what the raid actually did is the thing worth looking at after.
 */
.air-mark-overlay { position: fixed; inset: 0; z-index: 23; pointer-events: none; }

.air-track { position: absolute; will-change: transform; }
.air-track-arrow {
  position: absolute;
  left: -6px;
  top: -7px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 14px solid var(--tc, #9fc4ff);
  /* a dark outline under the glow, so a chevron stays readable over bright
     satellite ground as well as over night imagery */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 5px var(--tc, #9fc4ff));
  transition: transform 0.08s linear;
}
.air-track.is-lit .air-track-arrow {
  border-bottom-color: #fff;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px var(--tc, #9fc4ff));
  transform-origin: 50% 60%;
}
.air-track.is-lit::after {
  content: '';
  position: absolute;
  left: -13px;
  top: -13px;
  width: 26px;
  height: 26px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  opacity: 0.85;
  animation: air-track-ping 1s ease-out infinite;
}
@keyframes air-track-ping {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
.air-track.is-dimmed { opacity: 0.25; }
/* a stalk that grows with altitude — a terrain-follower and something at forty
   kilometres read as different silhouettes without needing a number */
.air-track-stalk {
  position: absolute;
  left: -1px;
  bottom: -2px;
  width: 2px;
  height: var(--stalk, 0px);
  background: linear-gradient(180deg, var(--tc, #9fc4ff), rgba(255, 255, 255, 0));
  opacity: 0.55;
}
.air-track.is-engaged .air-track-arrow { animation: air-track-pulse 0.75s ease-in-out infinite; }
.air-track.is-dark .air-track-arrow { opacity: 0.45; filter: none; }
@keyframes air-track-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--tc)); }
  50% { filter: drop-shadow(0 0 11px #fff); }
}
.air-mark {
  position: absolute;
  font-size: 13px;
  line-height: 1;
  color: var(--mc, #ff7a3c);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  will-change: transform;
}
.air-mark-impact .air-mark-glyph { color: #ff8a3c; }
.air-mark-kill .air-mark-glyph { color: #9fe4ff; font-size: 11px; opacity: 0.8; }
.air-mark.is-fresh .air-mark-glyph { animation: air-mark-pop 0.9s ease-out infinite; }
@keyframes air-mark-pop {
  0% { transform: scale(1); opacity: 1; }
  60% { transform: scale(1.7); opacity: 0.55; }
  100% { transform: scale(1); opacity: 1; }
}

/* Launch-plan markers on the map (DOM labels over the globe) */
.launch-node-overlay { position: fixed; inset: 0; z-index: 24; pointer-events: none; }
.launch-handle {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
}
.launch-handle:active { cursor: grabbing; }
.launch-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lc, #9fc4ff);
  box-shadow: 0 0 8px var(--lc, #9fc4ff);
  border: 1.5px solid rgba(6, 10, 16, 0.9);
}
.launch-handle-target .launch-dot { border-radius: 2px; transform: rotate(45deg); }
.launch-name {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--lc, #cfe3ff);
  background: rgba(6, 10, 16, 0.72);
  border: 1px solid rgba(120, 180, 255, 0.2);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
body.launch-arming, body.launch-arming canvas { cursor: crosshair !important; }

/* ===== Minimal tactical quick tools — Q ================================ */
.tactical-tools-launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: rgba(176, 202, 232, .7);
  background: none;
  border: 0;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .65));
  transition: color .16s ease, filter .16s ease, transform .1s ease;
}
.tactical-tools-launcher:hover,
.tactical-tools-launcher.active {
  color: #74b4ff;
  background: none;
  filter: drop-shadow(0 0 9px rgba(61, 139, 255, .9));
}
.tactical-tools-launcher:hover { color: #eaf4ff; filter: drop-shadow(0 0 7px rgba(61, 139, 255, .75)); }
.tactical-tools-launcher:active { transform: scale(.92); }

.tactical-toolbelt {
  --tt-accent: var(--blue);
  position: fixed;
  z-index: 80;
  top: auto;
  bottom: 92px;
  left: 50%;
  width: clamp(350px, calc(100vw - 620px), 720px);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .8));
  transform: translate(-50%, -10px) scale(.985);
  transform-origin: center top;
  transition: opacity .14s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s;
}
.tactical-toolbelt.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%);
  transition: opacity .14s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.tactical-toolbelt.is-open.is-placement-mode {
  opacity: .55;
  filter: saturate(.7) drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.tactical-toolbelt.is-placement-mode .tt-surface { pointer-events: none; }
.tactical-toolbelt.is-placement-mode .tt-sidebar { pointer-events: none; }
.tactical-toolbelt.is-placement-mode .tt-topline { pointer-events: auto; }
.tactical-toolbelt.is-placement-mode .tt-clear-action { pointer-events: none; }
.tt-rail,
.tt-signal,
.tt-group-code { display: none; }
.tt-sidebar {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 46px;
  margin: 0 auto 6px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  color: var(--text);
}
.tt-side-choice {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px;
  border-radius: 5px;
  transition: background .14s ease, box-shadow .14s ease;
}
.tt-side-choice.is-active {
  background: color-mix(in srgb, var(--tt-side-color) 13%, transparent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--tt-side-color) 18%, transparent);
}
.tt-side-button {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: rgba(232, 225, 210, .68);
  background: rgba(8, 15, 22, .28);
  border: 1px solid rgba(127, 167, 199, .26);
  border-radius: 2px;
  cursor: pointer;
  font: 800 7px/1 monospace;
  letter-spacing: .06em;
}
.tt-side-button i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--tt-side-color);
  box-shadow: 0 0 6px color-mix(in srgb, var(--tt-side-color) 72%, transparent);
}
.tt-side-button:hover { color: #fff; border-color: color-mix(in srgb, var(--tt-side-color) 65%, rgba(127, 167, 199, .3)); }
.tt-side-button.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--tt-side-color) 20%, rgba(8, 15, 22, .38));
  border-color: color-mix(in srgb, var(--tt-side-color) 80%, white 8%);
}
.tt-side-choice input[type="color"] {
  width: 21px;
  height: 21px;
  padding: 2px;
  background: rgba(8, 15, 22, .34);
  border: 1px solid rgba(127, 167, 199, .28);
  border-radius: 2px;
  cursor: pointer;
}
.tt-surface {
  position: relative;
  overflow: visible;
  padding: 22px 14px 8px;
  background:
    linear-gradient(90deg, rgba(20, 47, 66, .3), rgba(8, 16, 27, .18) 48%, rgba(24, 21, 47, .28)),
    rgba(7, 13, 22, .62);
  border: 1px solid rgba(127, 167, 199, .18);
  border-bottom-color: rgba(91, 217, 241, .72);
  border-radius: 7px 7px 2px 2px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(182, 216, 244, .09);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  backdrop-filter: blur(22px) saturate(1.18);
}
.tt-surface::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, rgba(91, 217, 241, 0), #5bd9f1 34%, rgba(91, 217, 241, .5));
  box-shadow: 0 0 9px rgba(91, 217, 241, .38);
  pointer-events: none;
}
.tt-topline {
  position: absolute;
  z-index: 5;
  top: 4px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 18px;
  pointer-events: none;
}
.tt-focus {
  max-width: 180px;
  color: rgba(220, 213, 196, .58);
  overflow: hidden;
  font: 800 8px/1 "Segoe UI", sans-serif;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px #05080b;
}
.tt-close {
  width: 18px;
  height: 18px;
  padding: 0;
  color: rgba(220, 213, 196, .65);
  background: none;
  border: 0;
  pointer-events: auto;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.tt-close:hover { color: var(--accent); }
.tt-groups { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; }
.tt-group { position: relative; min-width: 0; padding-top: 14px; }
.tt-group::before {
  position: absolute;
  top: 0;
  left: 2px;
  color: rgba(220, 213, 196, .52);
  font: 800 7px/1 "Segoe UI", sans-serif;
  letter-spacing: .14em;
  text-shadow: 0 1px 3px #05080b;
}
.tt-group--measure::before { content: "MEASURE"; color: rgba(111, 190, 255, .8); }
.tt-group--plaques {
  padding-left: 14px;
  border-left: 1px solid rgba(155, 181, 213, .24);
}
.tt-group--plaques::after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 2px;
  left: -1px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(132, 186, 235, .6) 20%, rgba(155, 181, 213, .26) 72%, transparent);
  box-shadow: 0 0 8px rgba(91, 173, 241, .18);
  pointer-events: none;
}
.tt-group--plaques::before { content: "PLAQUES"; left: 16px; color: rgba(244, 204, 102, .88); }
.tactical-toolbelt .measure-tools { position: relative; display: grid; gap: 4px; }
.tactical-toolbelt .measure-actions { display: grid; grid-template-columns: repeat(4, minmax(48px, 1fr)); gap: 2px 5px; }
.tactical-toolbelt .measure-actions.measure-arrows { grid-template-columns: repeat(3, minmax(58px, 1fr)); }
.tactical-toolbelt .measure-subtitle {
  margin: 3px 0 -1px 2px;
  color: rgba(220, 213, 196, .42);
  font-size: 7px;
  letter-spacing: .12em;
  text-shadow: 0 1px 3px #05080b;
}
.tactical-toolbelt .measure-arrow-style,
.tactical-toolbelt .measure-label-size { display: none; }
.tactical-toolbelt .measure-attach-badge {
  width: max-content;
  max-width: 100%;
  min-height: 18px;
  margin: 0 0 1px 0;
  padding: 2px 4px;
  background: rgba(61, 139, 255, .045);
  border: 1px solid rgba(91, 173, 241, .14);
  font-size: 7.5px;
  letter-spacing: .05em;
}
.tt-tool,
.tactical-toolbelt .measure-actions button,
.tactical-toolbelt .plaque-actions button {
  position: relative;
  min-width: 0;
  height: 38px;
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: visible;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-shadow: 0 1px 3px #05080b, 0 0 7px rgba(5, 8, 11, .9);
}
.tt-tool::after,
.tactical-toolbelt .measure-actions button::after,
.tactical-toolbelt .plaque-actions button::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: 0;
  width: 56%;
  height: 1px;
  opacity: 0;
  background: var(--blue);
  transform: scaleX(.2);
  transition: opacity .14s ease, transform .18s ease;
}
.tt-tool i,
.tactical-toolbelt .measure-actions button i,
.tactical-toolbelt .plaque-actions button i { color: var(--blue); font: normal 18px/1 "Segoe UI Symbol", "Segoe UI", sans-serif; text-shadow: 0 1px 3px #05080b; }
.tt-tool span,
.tactical-toolbelt .measure-actions button span,
.tactical-toolbelt .plaque-actions button span { color: rgba(232, 225, 210, .82); font: 800 7.5px/1 "Segoe UI", sans-serif; letter-spacing: .04em; white-space: nowrap; }
.tt-tool:hover,
.tactical-toolbelt .measure-actions button:hover,
.tactical-toolbelt .plaque-actions button:hover,
.tt-tool.active,
.tactical-toolbelt .measure-actions button.active { color: var(--text); background: none; border: 0; box-shadow: none; }
.tt-tool:hover::after,
.tactical-toolbelt .measure-actions button:hover::after,
.tactical-toolbelt .plaque-actions button:hover::after,
.tt-tool.active::after,
.tactical-toolbelt .measure-actions button.active::after { opacity: 1; transform: scaleX(1); }
.tt-tool:hover i,
.tactical-toolbelt .measure-actions button:hover i { color: var(--accent); }
.tt-tool.active::after,
.tactical-toolbelt .measure-actions button.active::after { background: var(--accent); }
.tt-tool.active i,
.tactical-toolbelt .measure-actions button.active i { color: var(--accent); text-shadow: 0 0 7px rgba(110, 176, 255, .35); }
.tactical-toolbelt .measure-select {
  width: min(170px, 100%);
  height: 20px;
  justify-self: center;
  color: rgba(220, 213, 196, .72);
  background: rgba(12, 16, 20, .58);
  border: 0;
  border-bottom: 1px solid rgba(220, 213, 196, .22);
  font-size: 8px;
}
.tt-clear-action {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 3px;
  padding: 0;
  color: rgba(220, 213, 196, .45);
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  font: 700 7px/1 "Segoe UI", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px #05080b;
}
.tt-clear-action::before { content: "×"; margin-right: 4px; color: rgba(110, 176, 255, .7); font-size: 11px; }
.tt-clear-action:hover { color: var(--accent); }
.tactical-toolbelt .plaque-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(38px, 1fr));
  gap: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(224, 179, 87, .055), transparent);
}
.tactical-toolbelt .plaque-actions button i { color: #f0c75e; text-shadow: 0 0 7px rgba(224, 179, 87, .2), 0 1px 3px #05080b; }
.tactical-toolbelt .plaque-actions button span { color: rgba(246, 224, 166, .88); }
.tactical-toolbelt .plaque-actions button::after { background: #f0c75e; }
.tactical-toolbelt .plaque-actions button:hover i,
.tactical-toolbelt .plaque-actions button.active i { color: #ffe18b; text-shadow: 0 0 9px rgba(240, 199, 94, .48); }
.tt-arrow-dock {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(164, 116, 255, .28);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .075), transparent);
}
.tt-arrow-dock .measure-subtitle { margin-bottom: 1px; color: rgba(190, 157, 255, .9); }
.tt-arrow-dock .measure-actions button i { color: #aa7cff; text-shadow: 0 0 7px rgba(139, 92, 246, .24), 0 1px 3px #05080b; }
.tt-arrow-dock .measure-actions button span { color: rgba(221, 205, 255, .88); }
.tt-arrow-dock .measure-actions button::after,
.tt-arrow-dock .measure-actions button.active::after { background: #aa7cff; }
.tt-arrow-dock .measure-actions button:hover i,
.tt-arrow-dock .measure-actions button.active i { color: #c8a9ff; text-shadow: 0 0 10px rgba(170, 124, 255, .56); }
/* No list in the dock: it fought the horizontal layout and there is nothing
   left for it to do — a plaque is selected by clicking it on the map, and its
   own bar underneath owns open / resize / edit / move / delete. */
.tactical-toolbelt .plaque-list,
.tactical-toolbelt .plaque-status { display: none; }

/* Strip for the plaque you just clicked on the map. */
.plaque-chip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(640px, 92vw);
  padding: 5px 7px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(11, 18, 27, .95), rgba(8, 13, 20, .95));
  border: 1px solid rgba(120, 173, 231, .34);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(2, 6, 12, .6), 0 0 0 1px rgba(4, 8, 13, .5);
  color: var(--text);
  font-size: 10px;
  backdrop-filter: blur(6px);
}
.plaque-chip-kind {
  padding: 2px 4px;
  color: #14120d;
  background: var(--accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.plaque-chip-name {
  max-width: 210px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plaque-chip-size { color: rgba(220, 235, 255, .55); font-size: 9px; font-variant-numeric: tabular-nums; }
.plaque-chip button {
  min-width: 26px;
  min-height: 22px;
  padding: 0 8px;
  color: rgba(226, 239, 255, .9);
  background: rgba(94, 160, 235, .12);
  border: 1px solid rgba(120, 173, 231, .3);
  border-radius: 4px;
  font: 700 9.5px/1 "Segoe UI", sans-serif;
  letter-spacing: .05em;
  cursor: pointer;
}
.plaque-chip button:hover { background: rgba(94, 160, 235, .24); border-color: rgba(150, 200, 255, .5); }
.plaque-chip button.is-danger {
  color: #ffd0cb;
  background: rgba(255, 92, 78, .14);
  border-color: rgba(255, 108, 92, .38);
}
.plaque-chip button.is-danger:hover { background: rgba(255, 92, 78, .28); }
.plaque-chip-close { padding: 0 6px !important; font-size: 12px !important; }
.plaque-chip[hidden] { display: none; }

/* "Somebody just nuked a place you are not looking at." */
.goyda-card {
  position: fixed;
  right: 18px;
  bottom: 96px;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: linear-gradient(180deg, rgba(28, 17, 6, .96), rgba(14, 10, 6, .96));
  border: 1px solid rgba(255, 186, 60, .45);
  border-radius: 7px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 160, 40, .16);
  color: #ffe8bd;
  animation: goyda-card-in .28s ease-out both;
}
.goyda-card-icon { font-size: 20px; filter: drop-shadow(0 0 8px rgba(255, 180, 40, .7)); }
.goyda-card-body { display: grid; gap: 2px; }
.goyda-card-body b { font-size: 11px; letter-spacing: .04em; }
.goyda-card-body em {
  color: rgba(255, 226, 178, .62);
  font-size: 9px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.goyda-card button {
  min-height: 24px;
  padding: 0 9px;
  color: #2a1a05;
  background: linear-gradient(180deg, #ffd06a, #f0a52e);
  border: 0;
  border-radius: 4px;
  font: 800 9px/1 "Segoe UI", sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
}
.goyda-card .goyda-card-go { background: linear-gradient(180deg, #ffd06a, #f0a52e); }
.goyda-card .goyda-card-go:hover { background: linear-gradient(180deg, #ffe08e, #ffb540); }
.goyda-card .goyda-card-close {
  padding: 0 7px;
  color: rgba(255, 226, 178, .7);
  background: rgba(255, 255, 255, .07);
  font-size: 13px;
}
@keyframes goyda-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* The handle you pull when there is no jackpot and you want one anyway. */
.roulette-goyda {
  min-height: 24px;
  margin-top: 4px;
  color: #2a1704;
  background: linear-gradient(180deg, #ffd777, #eda42b);
  border: 1px solid rgba(120, 68, 8, .5);
  border-radius: 5px;
  font: 900 11px/1 "Segoe UI", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 170, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.roulette-goyda:hover { background: linear-gradient(180deg, #ffe79c, #ffbb45); }
.roulette-goyda:active { transform: translateY(1px); }
.tt-stylebar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding-top: 5px;
}
.tt-stylebar::before { content: ""; position: absolute; top: 0; left: 8%; width: 84%; height: 1px; background: linear-gradient(90deg, transparent, rgba(127, 167, 199, .25), transparent); }
.tt-style { min-width: 0; display: grid; grid-template-columns: 28px minmax(35px, 1fr) 30px; align-items: center; gap: 6px; }
.tt-style-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: rgba(220, 229, 240, .78);
  font: 900 12px/1 "Segoe UI", sans-serif;
  letter-spacing: -.04em;
  text-shadow: 0 1px 3px #05080b, 0 0 7px rgba(91, 173, 241, .22);
}
.tt-style-icon svg { width: 20px; height: 20px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tt-style-icon .tt-icon-fill { fill: currentColor; stroke: none; opacity: .5; }
.tt-style-icon .tt-icon-mid { stroke-width: 2.6; }
.tt-style-icon .tt-icon-wide { stroke-width: 4.2; }
.tt-style input[type="range"] { width: 100%; min-width: 0; height: 18px; accent-color: var(--blue); }
.tt-style output { color: rgba(220, 229, 240, .7); font: 800 9px/1 monospace; text-align: right; text-shadow: 0 1px 3px #05080b; }

@media (max-width: 1120px) {
  .tactical-toolbelt { bottom: 82px; width: clamp(340px, calc(100vw - 570px), 520px); }
  .tt-groups { grid-template-columns: minmax(0, 1fr) 220px; gap: 8px; }
  .tt-stylebar { grid-template-columns: repeat(3, minmax(58px, 1fr)); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .tactical-toolbelt,
  .tactical-toolbelt.is-open { transition-duration: .01ms; }
}

/* === Live sync (multiplayer) ============================================== */

/* Remote cursors / camera beacons / live strokes — drawn on a 2D canvas above
   the draw layer (9600) but below the toolbars (9700+). Never interactive. */
.sync-presence-canvas {
  position: fixed;
  inset: 0;
  z-index: 9640;
  pointer-events: none;
}

.sync-launcher { position: relative; }
.sync-launcher.is-live {
  color: #eaf6ff;
  border-color: rgba(77, 163, 255, 0.85);
  background: rgba(77, 163, 255, 0.24);
  box-shadow: 0 0 10px rgba(77, 163, 255, 0.35);
}
.sync-launcher.is-live::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6ee77e;
  box-shadow: 0 0 6px rgba(110, 231, 126, 0.9);
  animation: sync-live-pulse 1.6s ease-in-out infinite;
}
@keyframes sync-live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.72); opacity: 0.55; }
}

.sync-panel {
  position: fixed;
  top: 46px;
  right: 12px;
  z-index: 9800;
  width: 268px;
  padding: 12px 14px 14px;
  background: linear-gradient(165deg, rgba(10, 18, 30, 0.97), rgba(7, 12, 20, 0.97));
  border: 1px solid rgba(77, 163, 255, 0.28);
  border-radius: 10px;
  box-shadow: 0 22px 48px rgba(2, 6, 12, 0.7), inset 0 1px 0 rgba(150, 200, 255, 0.08);
  color: var(--text, #e8e1d2);
  font-size: 12px;
}
.sync-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.sync-title {
  font: 800 11px/1 monospace;
  letter-spacing: 0.14em;
  color: #9fc6ef;
}
.sync-chip {
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid rgba(150, 170, 190, 0.3);
  color: rgba(200, 214, 228, 0.75);
  font: 700 8px/1.4 monospace;
  letter-spacing: 0.08em;
}
.sync-chip.is-live {
  color: #7be98a;
  border-color: rgba(110, 231, 126, 0.55);
  background: rgba(110, 231, 126, 0.1);
}
.sync-chip.is-wait { color: #ffd166; border-color: rgba(255, 209, 102, 0.5); }
.sync-chip.is-error { color: #ff7d7d; border-color: rgba(255, 125, 125, 0.5); }
.sync-close {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(220, 213, 196, 0.6);
  font-size: 15px;
  cursor: pointer;
}
.sync-close:hover { color: #fff; background: rgba(127, 167, 199, 0.18); }

.sync-field { display: grid; gap: 4px; margin-bottom: 9px; }
.sync-field span {
  font: 700 8px/1 monospace;
  letter-spacing: 0.1em;
  color: rgba(159, 198, 239, 0.75);
}
.sync-field input,
.sync-join-row input {
  height: 26px;
  padding: 0 8px;
  background: rgba(10, 16, 26, 0.9);
  border: 1px solid rgba(127, 167, 199, 0.3);
  border-radius: 5px;
  color: var(--text, #e8e1d2);
  font: 600 12px/1 'Segoe UI', sans-serif;
}
.sync-join-row input { text-transform: uppercase; letter-spacing: 0.18em; font-family: monospace; }
.sync-field input:focus,
.sync-join-row input:focus { outline: none; border-color: rgba(77, 163, 255, 0.7); }

.sync-transport {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 9px;
}
.sync-transport button {
  height: 22px;
  border: 1px solid rgba(127, 167, 199, 0.3);
  border-radius: 5px;
  background: rgba(127, 167, 199, 0.08);
  color: rgba(220, 213, 196, 0.72);
  font: 700 9px/1 monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.sync-transport button.is-on {
  color: #eaf6ff;
  border-color: rgba(77, 163, 255, 0.75);
  background: rgba(77, 163, 255, 0.2);
}

.sync-primary {
  width: 100%;
  height: 30px;
  border: 1px solid rgba(77, 163, 255, 0.6);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(77, 163, 255, 0.32), rgba(47, 108, 178, 0.28));
  color: #eaf6ff;
  font: 700 11px/1 'Segoe UI', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.sync-primary:hover:not(:disabled) { background: linear-gradient(180deg, rgba(77, 163, 255, 0.45), rgba(47, 108, 178, 0.4)); }
.sync-primary:disabled { opacity: 0.55; cursor: wait; }

.sync-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  color: rgba(159, 198, 239, 0.5);
  font: 700 8px/1 monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sync-divider::before,
.sync-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(127, 167, 199, 0.22);
}

.sync-join-row {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 6px;
}
.sync-join-row button {
  border: 1px solid rgba(127, 167, 199, 0.4);
  border-radius: 5px;
  background: rgba(127, 167, 199, 0.14);
  color: var(--text, #e8e1d2);
  font: 700 10px/1 'Segoe UI', sans-serif;
  cursor: pointer;
}
.sync-join-row button:hover:not(:disabled) { background: rgba(127, 167, 199, 0.26); }

.sync-error {
  margin-top: 9px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 125, 125, 0.4);
  border-radius: 5px;
  background: rgba(255, 90, 90, 0.08);
  color: #ffb3b3;
  font-size: 11px;
}
.sync-hint {
  margin-top: 10px;
  color: rgba(200, 214, 228, 0.5);
  font-size: 10px;
  line-height: 1.45;
}

.sync-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sync-code {
  flex: 1;
  padding: 7px 10px;
  border: 1px dashed rgba(77, 163, 255, 0.5);
  border-radius: 6px;
  background: rgba(77, 163, 255, 0.08);
  color: #cfe7ff;
  font: 800 16px/1 monospace;
  letter-spacing: 0.22em;
  text-align: center;
  user-select: all;
}
.sync-code-row button {
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(127, 167, 199, 0.4);
  border-radius: 5px;
  background: rgba(127, 167, 199, 0.14);
  color: var(--text, #e8e1d2);
  font: 700 9px/1 monospace;
  cursor: pointer;
}
.sync-code-row button:hover { background: rgba(127, 167, 199, 0.26); }
.sync-sub {
  margin: 7px 0 4px;
  color: rgba(200, 214, 228, 0.55);
  font-size: 10px;
}

.sync-roster {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}
.sync-roster li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid rgba(127, 167, 199, 0.16);
  border-radius: 5px;
  background: rgba(16, 24, 36, 0.55);
}
.sync-roster i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}
.sync-peer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 11.5px;
}
.sync-peer-name b {
  margin-left: 5px;
  color: #ffd166;
  font: 800 7.5px/1 monospace;
  letter-spacing: 0.1em;
}
.sync-peer-name em {
  margin-left: 5px;
  color: rgba(200, 214, 228, 0.5);
  font: 600 9px/1 'Segoe UI', sans-serif;
  font-style: normal;
}
.sync-ping {
  color: rgba(123, 233, 138, 0.8);
  font: 700 9px/1 monospace;
}
.sync-roster button {
  flex: none;
  width: 24px;
  height: 22px;
  border: 1px solid rgba(127, 167, 199, 0.3);
  border-radius: 4px;
  background: rgba(127, 167, 199, 0.1);
  color: rgba(220, 213, 196, 0.85);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.sync-roster button:hover { background: rgba(127, 167, 199, 0.24); }
.sync-roster button.is-on {
  color: #0c1014;
  border-color: #4da3ff;
  background: #4da3ff;
  box-shadow: 0 0 8px rgba(77, 163, 255, 0.55);
}

.sync-leave {
  width: 100%;
  height: 26px;
  margin-top: 10px;
  border: 1px solid rgba(255, 125, 125, 0.35);
  border-radius: 5px;
  background: rgba(255, 90, 90, 0.07);
  color: #ffb3b3;
  font: 700 10px/1 'Segoe UI', sans-serif;
  cursor: pointer;
}
.sync-leave:hover { background: rgba(255, 90, 90, 0.16); }

/* Room or stream — picked when opening, named once open. */
.sync-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 9px;
}
.sync-mode button {
  display: grid;
  gap: 2px;
  padding: 6px 4px;
  border: 1px solid rgba(127, 167, 199, 0.3);
  border-radius: 6px;
  background: rgba(127, 167, 199, 0.08);
  color: rgba(220, 213, 196, 0.78);
  cursor: pointer;
}
.sync-mode b { font: 700 11px/1 'Segoe UI', sans-serif; }
.sync-mode small { color: rgba(200, 214, 228, 0.55); font-size: 9.5px; }
.sync-mode button.is-on {
  color: #eaf6ff;
  border-color: rgba(77, 163, 255, 0.75);
  background: rgba(77, 163, 255, 0.2);
}
.sync-kind { display: flex; align-items: center; gap: 7px; margin: 2px 0 6px; font-size: 11px; }
.sync-kind-chip {
  padding: 2px 6px;
  border-radius: 3px;
  font: 800 8px/1.2 monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfe7ff;
  background: rgba(77, 163, 255, 0.2);
  border: 1px solid rgba(77, 163, 255, 0.5);
}
.sync-kind-chip.is-stream { color: #ffd9d9; background: rgba(255, 93, 93, 0.18); border-color: rgba(255, 93, 93, 0.55); }

/* A watcher: what is going on, and a way to look where the host looks. */
.sync-watch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 6px;
  background: rgba(255, 209, 102, 0.07);
  color: rgba(240, 228, 200, 0.86);
  font-size: 10.5px;
  line-height: 1.4;
}
.sync-watch button {
  flex: none;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(255, 209, 102, 0.5);
  border-radius: 5px;
  background: rgba(255, 209, 102, 0.1);
  color: #ffe6a8;
  font: 700 10px/1 'Segoe UI', sans-serif;
  cursor: pointer;
}
.sync-watch button.is-on { color: #14110a; background: #ffd166; }

/* The host's pen: everyone / only me, then person by person in the roster. */
.sync-pen {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 5px;
  margin: 4px 0 2px;
}
.sync-pen span { color: rgba(200, 214, 228, 0.6); font: 700 8.5px/1 monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.sync-pen button {
  height: 22px;
  border: 1px solid rgba(127, 167, 199, 0.3);
  border-radius: 5px;
  background: rgba(127, 167, 199, 0.08);
  color: rgba(220, 213, 196, 0.78);
  font: 700 10px/1 'Segoe UI', sans-serif;
  cursor: pointer;
}
.sync-pen button.is-on { color: #eaf6ff; border-color: rgba(77, 163, 255, 0.75); background: rgba(77, 163, 255, 0.2); }
.sync-pen button:disabled { opacity: 0.45; cursor: default; }
.sync-roster button.sync-pen-one { font-size: 11px; }
.sync-roster button.sync-pen-one.is-on {
  color: #14110a;
  border-color: #ffd166;
  background: #ffd166;
  box-shadow: 0 0 8px rgba(255, 209, 102, 0.5);
}
.sync-pen-mark { color: #ffd166; font-size: 11px; }
.sync-roster button.sync-kick { color: #ffb3b3; border-color: rgba(255, 125, 125, 0.35); background: rgba(255, 90, 90, 0.07); }
.sync-roster button.sync-kick:hover { background: rgba(255, 90, 90, 0.2); }

/* Your own map, put aside while you were in someone's room. */
.sync-backup {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid rgba(123, 233, 138, 0.38);
  border-radius: 7px;
  background: rgba(123, 233, 138, 0.07);
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(220, 232, 214, 0.85);
}
.sync-backup b { color: #c9f5cf; font-size: 11.5px; }
.sync-backup small { color: rgba(255, 209, 102, 0.85); }
.sync-backup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sync-backup-row button {
  height: 28px;
  border: 1px solid rgba(127, 167, 199, 0.4);
  border-radius: 6px;
  background: rgba(127, 167, 199, 0.12);
  color: var(--text, #e8e1d2);
  font: 700 10.5px/1 'Segoe UI', sans-serif;
  cursor: pointer;
}
.sync-backup-row .sync-primary { width: auto; height: 28px; }