/* Leaflet critical layout fallback.
   This prevents tile scattering if the external Leaflet CSS fails to load,
   is blocked, or is cached incorrectly. */
.leaflet-container {
  overflow: hidden;
  position: relative;
  outline-style: none;
  touch-action: pan-x pan-y;
}

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}

.leaflet-tile {
  user-select: none;
  -webkit-user-drag: none;
  filter: inherit;
  visibility: inherit;
  border: 0;
  margin: 0;
  padding: 0;
  max-width: none !important;
  max-height: none !important;
}

.leaflet-tile-loaded {
  visibility: inherit;
}

.leaflet-marker-icon,
.leaflet-marker-shadow {
  display: block;
}

.leaflet-container .leaflet-overlay-pane svg {
  max-width: none !important;
  max-height: none !important;
}

.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
  max-width: none !important;
  max-height: none !important;
}

.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: auto;
}

.leaflet-top,
.leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}

.leaflet-top {
  top: 0;
}

.leaflet-right {
  right: 0;
}

.leaflet-bottom {
  bottom: 0;
}

.leaflet-left {
  left: 0;
}

.leaflet-top .leaflet-control {
  margin-top: 10px;
}

.leaflet-left .leaflet-control {
  margin-left: 10px;
}

.leaflet-right .leaflet-control {
  margin-right: 10px;
}

.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}

.leaflet-control-container .leaflet-control {
  float: left;
  clear: both;
}

.leaflet-right .leaflet-control {
  float: right;
}

.leaflet-bottom .leaflet-control {
  margin-top: 0;
}

.leaflet-popup-pane,
.leaflet-control {
  cursor: auto;
}

.leaflet-zoom-animated {
  transform-origin: 0 0;
}

.leaflet-interactive {
  cursor: pointer;
}

.leaflet-grab {
  cursor: grab;
}

.leaflet-dragging .leaflet-grab {
  cursor: grabbing;
}

:root {
  --bg: #070c14;
  --bg2: #0b1320;
  --panel: #101a2a;
  --panel2: #142033;
  --surface: #18263a;
  --line: #2c3b52;
  --text: #eef2f7;
  --muted: #9aa8bb;
  --green: #7dd073;
  --yellow: #dbae5b;
  --red: #e07070;
  --blue: #79a9ff;
  --shadow: rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(44, 68, 100, .32), transparent 35%),
    radial-gradient(circle at 90% 5%, rgba(90, 45, 58, .22), transparent 30%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shell { min-height: 100%; padding: 18px; }

.topbar {
  max-width: 1560px;
  margin: 0 auto 14px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.eyebrow {
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.03em;
}

.top-actions { display: flex; align-items: center; gap: 10px; }

.status-pill {
  border: 1px solid rgba(125,208,115,.35);
  background: rgba(125,208,115,.08);
  color: var(--green);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
}

.layout {
  max-width: 1560px;
  margin: 0 auto;
  min-height: calc(100vh - 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 16px;
}

.map-card, .side-panel .card, .stat {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(160deg, rgba(18,30,48,.96), rgba(9,15,25,.96));
  box-shadow: 0 22px 65px var(--shadow);
}

.map-card {
  position: relative;
  min-height: calc(100vh - 88px);
  border-radius: 28px;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
  position: relative;
  min-height: calc(100vh - 88px);
  background: #0b1018;
}

.map-overlay {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 500;
  max-width: 360px;
  padding: 13px 15px;
  border-radius: 18px;
  background: rgba(7, 12, 20, .76);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.overlay-title { font-weight: 900; font-size: 16px; }
.overlay-subtitle { color: var(--muted); font-size: 13px; margin-top: 3px; }

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.card { border-radius: 22px; padding: 16px; }

.card-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 12px;
}

.file-label {
  display: block;
  cursor: pointer;
  border: 1px dashed rgba(255,255,255,.25);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 13px;
  color: var(--text);
  font-weight: 750;
}

.file-label input { display: none; }

.hint, .muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 10px;
}

button {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(160deg, #1a2a40, #0d1522);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 10px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

button.primary {
  background: linear-gradient(160deg, rgba(125,208,115,.22), rgba(30,65,48,.9));
  border-color: rgba(125,208,115,.35);
}

button.danger {
  background: linear-gradient(160deg, rgba(224,112,112,.20), rgba(65,26,32,.9));
  border-color: rgba(224,112,112,.35);
}

button.ghost {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
}

button:disabled { opacity: .42; cursor: not-allowed; }

.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.button-row.compact { grid-template-columns: 1fr 1fr 1fr; }

.timeline {
  margin: 14px 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

input[type=range] { width: 100%; accent-color: var(--green); }

.time-row {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
}

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stat { border-radius: 18px; padding: 13px; }

.stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.stat strong {
  display: block;
  font-size: 21px;
  line-height: 1.05;
}

.chart-card canvas {
  display: block;
  width: 100%;
  height: 170px;
}

.event-list { max-height: 150px; overflow: auto; }

.event-item {
  padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.event-item:first-child { border-top: 0; }

.event-type { font-weight: 900; }
.event-time { color: var(--muted); font-size: 12px; }

.track-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #00b84f;
  border: 3px solid white;
  box-shadow: 0 0 0 8px rgba(125,208,115,.22), 0 0 24px rgba(125,208,115,.8);
}

.event-marker {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid white;
  box-shadow: 0 0 18px rgba(219,174,91,.9);
}

.leaflet-container { background: #dfe7ee; }

.leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255,255,255,.75) !important;
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .map-card, #map { min-height: 62vh; }
}

@media (max-width: 560px) {
  .shell { padding: 10px; }
  .topbar { align-items: start; flex-direction: column; }
  .top-actions { width: 100%; justify-content: space-between; }
  h1 { font-size: 27px; }
}


.leaflet-control-layers {
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.20) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.leaflet-control-layers-expanded {
  padding: 10px 12px !important;
}

.leaflet-control-layers label {
  font-size: 13px;
  line-height: 1.5;
}

.tail-control {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  padding: 12px;
}

.tail-control label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.tail-control select {
  width: 100%;
  color: var(--text);
  background: #0f1826;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  padding: 10px 12px;
  font-weight: 800;
}

.tail-control select:disabled {
  opacity: .45;
}


/* Leaflet pane z-index fix for local CSS fallback.
   Without these values, tiles can cover SVG/polyline overlays. */
.leaflet-map-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }

.leaflet-pane.vt-route-pane {
  z-index: 620;
}

.leaflet-pane.vt-marker-pane {
  z-index: 660;
}

.leaflet-pane.vt-route-pane svg {
  overflow: visible;
}

.check-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 11px 12px;
  cursor: pointer;
}

.check-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.check-row input:disabled + span {
  opacity: .45;
}


.auto-event-marker {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #7b61ff;
  border: 3px solid white;
  box-shadow:
    0 0 0 7px rgba(123,97,255,.25),
    0 0 20px rgba(123,97,255,.90);
}

.spot-label {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(7, 12, 20, .86) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 5px 8px !important;
}

.event-source {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(123,97,255,.14);
  color: #b9adff;
  font-size: 11px;
  vertical-align: 1px;
}


.canopy-card {
  border-color: rgba(125,208,115,.18) !important;
}

.canopy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.canopy-grid + .canopy-grid {
  margin-top: 10px;
}

.canopy-grid div {
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  padding: 12px;
}

.canopy-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.canopy-grid strong {
  display: block;
  font-size: 19px;
  line-height: 1.05;
}

.canopy-grid.secondary strong {
  font-size: 16px;
}


.annotation-control {
  margin-top: 10px;
  border-radius: 18px;
  border: 1px solid rgba(219,174,91,.18);
  background: rgba(219,174,91,.055);
  padding: 12px;
}

.annotation-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 10px;
}

.annotation-control .button-row {
  grid-template-columns: 1.7fr .8fr;
}

.annotation-control button {
  min-height: 38px;
}

.annotation-note {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.canopy-open-marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dbae5b;
  border: 3px solid white;
  box-shadow:
    0 0 0 7px rgba(219,174,91,.22),
    0 0 20px rgba(219,174,91,.88);
}

.canopy-label {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(30, 22, 8, .88) !important;
  color: #fff1cf !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 5px 8px !important;
}


.metric-button {
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.metric-button small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.metric-button.active {
  border-color: rgba(219,174,91,.38) !important;
  background: rgba(219,174,91,.09) !important;
  box-shadow: 0 0 0 1px rgba(219,174,91,.10) inset;
}

.metric-button:disabled {
  cursor: default;
  opacity: .55;
}


:root {
  --jumper-color: #2f86ff;
  --jumper-color-soft: rgba(47,134,255,.34);
}

.paper-plane-marker {
  width: 28px;
  height: 28px;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
}

.paper-plane-marker svg {
  display: block;
  width: 28px;
  height: 28px;
  overflow: visible;
}

.paper-plane-marker .plane-fill {
  fill: var(--marker-color, #2f86ff);
}

.paper-plane-marker .plane-shine {
  fill: rgba(255,255,255,.34);
}

.paper-plane-marker .plane-stroke {
  stroke: #ffffff;
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
}

.exit-marker {
  width: 22px;
  height: 22px;
  position: relative;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}

.exit-marker::before,
.exit-marker::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 1px;
  width: 3px;
  height: 20px;
  border-radius: 3px;
  background: var(--marker-color, #2f86ff);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.92);
}

.exit-marker::before { transform: rotate(45deg); }
.exit-marker::after { transform: rotate(-45deg); }

.landing-target-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 3px solid var(--marker-color, #2f86ff);
  background:
    radial-gradient(circle at center,
      var(--marker-color, #2f86ff) 0 3px,
      rgba(255,255,255,.96) 3px 5px,
      transparent 5px 8px,
      rgba(255,255,255,.96) 8px 10px,
      transparent 10px 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.85),
    0 0 0 7px color-mix(in srgb, var(--marker-color, #2f86ff) 24%, transparent),
    0 6px 14px rgba(0,0,0,.38);
}

.canopy-open-marker {
  background: #dbae5b;
}

.map-legend {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1200;
  min-width: 178px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,12,20,.76);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 12px 13px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display: grid;
  gap: 8px;
  font-size: 12px;
  font-weight: 750;
}

.map-legend div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: center;
}

.legend-plane {
  width: 25px;
  height: 25px;
  display: inline-block;
  background: var(--jumper-color);
  clip-path: polygon(50% 0%, 90% 90%, 50% 68%, 10% 90%);
  filter: drop-shadow(0 0 0 white);
  transform: rotate(38deg);
  border-radius: 2px;
}

.legend-exit {
  color: var(--jumper-color);
  font-size: 28px;
  line-height: 18px;
  font-weight: 900;
  text-shadow: 0 0 2px #fff;
}

.legend-target {
  width: 22px;
  height: 22px;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid var(--jumper-color);
  background:
    radial-gradient(circle at center,
      var(--jumper-color) 0 2px,
      rgba(255,255,255,.95) 2px 4px,
      transparent 4px 7px,
      rgba(255,255,255,.95) 7px 9px,
      transparent 9px 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85);
}

.legend-line {
  width: 27px;
  height: 0;
  border-top: 3px solid var(--jumper-color);
  display: inline-block;
}

.legend-line.full {
  opacity: .5;
  border-top-width: 2px;
}

.legend-line.active {
  border-top-width: 5px;
}

.legend-line.direct {
  border-top-style: dashed;
}


.canopy-open-symbol {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 4px 9px rgba(0,0,0,.48));
}

.canopy-open-symbol svg {
  display: block;
  width: 30px;
  height: 30px;
  overflow: visible;
}

.canopy-open-symbol .canopy-arc {
  fill: none;
  stroke: var(--marker-color, #2f86ff);
  stroke-width: 5;
  stroke-linecap: round;
}

.canopy-open-symbol .canopy-lines {
  fill: none;
  stroke: rgba(255,255,255,.94);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.canopy-open-symbol .canopy-body {
  fill: var(--marker-color, #2f86ff);
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linejoin: round;
}


.track-select-wrap {
  margin-top: 12px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 10px;
  align-items: center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  padding: 10px 12px;
}

.track-select-wrap label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.track-select-wrap select {
  width: 100%;
  color: var(--text);
  background: #0f1826;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  padding: 9px 11px;
  font-weight: 800;
}

.track-select-wrap select:disabled {
  opacity: .45;
}

.multi-jumper-label {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(7, 12, 20, .76) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
  font-weight: 900;
  padding: 3px 7px !important;
}


.top-link{margin-left:14px;color:#7db6ff;text-decoration:none;font-size:13px;font-weight:850}.live-body{min-height:100vh;background:#08111d;color:var(--text,#eef5ff)}.live-shell{width:min(1500px,calc(100vw - 28px));margin:0 auto;padding:14px}.live-shell.narrow{width:min(900px,calc(100vw - 28px))}.live-header{min-height:64px;display:flex;justify-content:space-between;gap:16px;align-items:center}.brand{font-size:22px;font-weight:950;letter-spacing:.06em}.brand span{color:#7db6ff}.live-actions{display:flex;flex-wrap:wrap;gap:10px}.live-actions button,.ghost-link{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);color:var(--text,#eef5ff);border-radius:13px;padding:10px 13px;font-weight:850;text-decoration:none}.live-grid{display:grid;grid-template-columns:1fr 360px;gap:14px;height:calc(100vh - 92px);min-height:620px}.live-map-card{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.10);background:#132033;box-shadow:0 24px 60px rgba(0,0,0,.30)}#liveMap{position:absolute;inset:0}.live-panel{display:grid;gap:14px;align-content:start;overflow:auto}.live-status-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.07);padding:9px 0}.live-status-row span{color:var(--muted,#9aa8bb)}.live-jumper-list{display:grid;gap:10px}.live-jumper-card{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:16px;padding:11px}.live-jumper-card.stale{opacity:.55}.live-jumper-head{display:flex;gap:8px;align-items:center}.live-jumper-head em{margin-left:auto;color:#7dd073;font-size:11px;font-style:normal;font-weight:950}.live-jumper-card.stale .live-jumper-head em{color:#dbae5b}.live-jumper-meta{display:grid;grid-template-columns:1fr;gap:4px;margin-top:8px;color:var(--muted,#9aa8bb);font-size:12px}.color-chip,.status-dot{width:12px;height:12px;border-radius:50%;display:inline-block}.status-dot.stale{background:#dbae5b}.endpoint-box{white-space:pre-wrap;word-break:break-word;color:#c8d7ea;background:rgba(0,0,0,.23);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;font-size:12px}.multi-jumper-label.is-stale{opacity:.55}@media(max-width:980px){.live-grid{grid-template-columns:1fr;height:auto}.live-map-card{min-height:560px}}


#positionKeyInput {
  width: 100%;
  color: var(--text, #eef5ff);
  background: #0f1826;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  padding: 10px 11px;
  font-weight: 800;
  box-sizing: border-box;
}


/* -------------------------------------------------------------------------
   Leaflet UI controls and popups

   The project ships a deliberately small Leaflet layout fallback. These
   rules provide the missing interactive control and popup styling even when
   the external Leaflet stylesheet is not available.
   ------------------------------------------------------------------------- */

.leaflet-top,
.leaflet-bottom {
  z-index: 1500;
}

.leaflet-bar {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
}

.leaflet-bar a {
  display: block;
  width: 38px;
  height: 38px;
  line-height: 36px;
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: rgba(7,12,20,.92);
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 23px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.leaflet-bar a:last-child {
  border-bottom: 0;
}

.leaflet-bar a:hover,
.leaflet-bar a:focus-visible {
  background: rgba(25,40,61,.97);
  color: #ffffff;
  outline: none;
}

.leaflet-bar a.leaflet-disabled {
  background: rgba(7,12,20,.72);
  color: rgba(255,255,255,.34);
  cursor: default;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  text-indent: 0;
}

.leaflet-control-layers {
  min-width: 164px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 16px !important;
  background: rgba(7,12,20,.90) !important;
  color: #ffffff;
  box-shadow: 0 14px 36px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.leaflet-control-layers-expanded {
  padding: 11px 13px !important;
}

.leaflet-control-layers-list,
.leaflet-control-layers-base,
.leaflet-control-layers-overlays {
  margin: 0;
  padding: 0;
}

.leaflet-control-layers label {
  display: block;
  margin: 0;
  padding: 3px 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
}

.leaflet-control-layers-selector {
  position: relative;
  top: 1px;
  margin: 0 7px 0 0;
  accent-color: var(--blue);
}

.leaflet-control-layers-separator {
  height: 0;
  margin: 7px -3px;
  border-top: 1px solid rgba(255,255,255,.13);
}

/* Playback overlay stays in its own corner; map controls always remain usable. */
.map-overlay {
  z-index: 1300;
}

.map-card .leaflet-top.leaflet-right {
  top: 8px;
  right: 8px;
}

.map-card .leaflet-bottom.leaflet-right {
  right: 8px;
  bottom: 8px;
}

.map-card .leaflet-control {
  pointer-events: auto !important;
}

/* Dark, high-contrast event card. */
.leaflet-popup {
  position: absolute;
  margin-bottom: 20px;
  text-align: center;
}

.leaflet-popup-content-wrapper {
  padding: 1px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 17px;
  background: rgba(7,12,20,.96);
  color: #eef2f7;
  box-shadow: 0 18px 46px rgba(0,0,0,.52);
  backdrop-filter: blur(12px);
  text-align: left;
}

.leaflet-popup-content {
  min-height: 1px;
  margin: 14px 16px;
  color: #eef2f7;
  font: 13px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.leaflet-popup-content p {
  margin: 8px 0;
}

.leaflet-popup-tip-container {
  position: absolute;
  left: 50%;
  width: 40px;
  height: 20px;
  margin-top: -1px;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}

.leaflet-popup-tip {
  width: 17px;
  height: 17px;
  margin: -10px auto 0;
  padding: 1px;
  transform: rotate(45deg);
  border-right: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
  background: rgba(7,12,20,.96);
  box-shadow: 3px 3px 8px rgba(0,0,0,.20);
}

.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #aebbd0;
  font: 22px/28px Tahoma, Verdana, sans-serif;
  text-align: center;
  text-decoration: none;
}

.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus-visible {
  color: #ffffff;
  outline: none;
}

.vt-event-popup .leaflet-popup-content-wrapper {
  overflow: hidden;
}

.vt-popup-title {
  margin: -14px -16px 12px;
  padding: 13px 42px 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: rgba(47,134,255,.13);
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
}

.vt-popup-row {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 4px 0;
}

.vt-popup-row span {
  color: #9aa8bb;
  font-size: 12px;
}

.vt-popup-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #eef2f7;
  font-size: 12px;
  font-weight: 800;
}

.vt-popup-note {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  color: #cbd5e3;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .map-overlay {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }

  .map-card .leaflet-top.leaflet-right {
    top: 88px;
    right: 0;
  }

  .leaflet-control-layers {
    min-width: 148px;
  }
}

/* 0.6.0 room participant status */
.participant-card.recording {
  border-color: rgba(36, 180, 107, 0.7);
  box-shadow: 0 0 0 1px rgba(36, 180, 107, 0.16) inset;
}
.participant-card.stopped {
  opacity: 0.78;
}
.participant-card.recording .live-jumper-head em {
  color: #63e6a4;
}


/* 0.6.1 — Playback map information can be hidden on small screens. */
.map-hud-toggle {
  position: absolute;
  right: 78px;
  bottom: 18px;
  z-index: 1500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(7,12,20,.92);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,.36);
  backdrop-filter: blur(12px);
  font: 800 12px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  pointer-events: auto;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.map-hud-toggle:hover,
.map-hud-toggle:focus-visible {
  background: rgba(25,40,61,.98);
  border-color: rgba(125,182,255,.66);
  outline: none;
}

.map-hud-toggle:active {
  transform: translateY(1px);
}

.map-hud-toggle-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-hud-toggle .eye-slash {
  opacity: 0;
  transition: opacity .16s ease;
}

.map-hud-toggle.is-hidden .eye-slash {
  opacity: 1;
}

.map-overlay,
.map-legend,
.map-card .leaflet-control-layers {
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.map-card.map-hud-hidden .map-overlay,
.map-card.map-hud-hidden .map-legend,
.map-card.map-hud-hidden .leaflet-control-layers {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transform: translateY(-8px);
}

@media (max-width: 700px) {
  .map-hud-toggle {
    right: 66px;
    bottom: 12px;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 15px;
  }

  .map-hud-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .map-legend {
    left: 10px;
    bottom: 68px;
    max-height: calc(100% - 174px);
    overflow: auto;
  }
}


/* 0.6.2 — Keep the desktop playback map inside the initial viewport.
   The side panel is taller than the map, so prevent the CSS grid from
   stretching the map card to the full height of the panel. */
@media (min-width: 981px) {
  .layout {
    min-height: 0;
    align-items: start;
  }

  .map-card {
    align-self: start;
    height: clamp(480px, calc(100dvh - 118px), 900px);
    min-height: 0;
  }

  #map {
    height: 100%;
    min-height: 0;
  }
}

/* 0.7.0 — 3D CSV playback prototype. */
.view-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(7,12,20,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.view-switch-btn {
  min-width: 48px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}

.view-switch-btn.active {
  background: linear-gradient(160deg, rgba(121,169,255,.32), rgba(34,67,116,.82));
  color: #fff;
  box-shadow: 0 5px 16px rgba(0,0,0,.25);
}

.map-card > #map,
.map-card > #map3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#map3d {
  display: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(42,73,112,.35), transparent 42%),
    linear-gradient(180deg, #09111d 0%, #05080d 100%);
  touch-action: none;
}

#map3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.map-card.view-3d #map {
  display: none;
}

.map-card.view-3d #map3d {
  display: block;
}

.three-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}

.three-loading.is-hidden {
  display: none;
}

.three-controls {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 1450;
  display: none;
  width: min(330px, calc(100% - 36px));
  padding: 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 17px;
  background: rgba(7,12,20,.84);
  box-shadow: 0 15px 38px rgba(0,0,0,.36);
  backdrop-filter: blur(12px);
}

.map-card.view-3d .three-controls {
  display: block;
}

.three-controls-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}

.three-controls button {
  min-width: 0;
  padding: 9px 7px;
  border-radius: 11px;
  font-size: 11px;
  box-shadow: none;
}

.three-controls button.active,
.three-controls button[aria-pressed="true"] {
  border-color: rgba(125,208,115,.44);
  background: rgba(125,208,115,.16);
  color: #dff9dc;
}

.three-scale-row {
  grid-template-columns: 1fr 96px;
  align-items: center;
  margin-top: 8px;
}

.three-scale-row label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.three-scale-row select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  background: #101a2a;
  color: var(--text);
  font-weight: 800;
}

.three-note {
  margin-top: 8px;
  color: #8392a7;
  font-size: 10px;
  line-height: 1.35;
}

.map-card.view-3d .leaflet-control-container {
  display: none;
}

.map-card.map-hud-hidden .three-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}

.map-card.view-3d .map-legend {
  max-width: 210px;
}

@media (max-width: 900px) {
  .topbar {
    align-items: flex-start;
  }

  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .three-controls {
    top: 78px;
    right: 10px;
    width: min(310px, calc(100% - 20px));
  }
}

@media (max-width: 700px) {
  .view-switch-btn {
    min-width: 42px;
    padding: 7px 10px;
  }

  .three-controls {
    top: 88px;
  }

  .three-controls-row {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .three-note {
    display: none;
  }

  .map-card.view-3d .map-legend {
    display: none;
  }
}

/* 0.8.0 — MML orthophoto and elevation model controls. */
.three-controls {
  width: min(360px, calc(100% - 36px));
}

.three-check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.three-check-label input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #7dd073;
}

.three-note.is-error {
  color: #ffb6bd;
}

.three-attribution {
  margin-top: 5px;
  color: #718198;
  font-size: 9px;
  line-height: 1.3;
}

@media (max-width: 700px) {
  .three-controls {
    max-height: calc(100% - 110px);
    overflow-y: auto;
  }

  .three-attribution {
    display: none;
  }
}


/* 0.9.2 — Room/password access gate for live tracking. */
.live-login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 20% 15%, rgba(47,134,255,.18), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(36,180,107,.10), transparent 30%),
    #08111d;
}
.live-login-card {
  width: min(520px, 100%);
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: rgba(13,25,40,.94);
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
  backdrop-filter: blur(18px);
}
.live-login-card h1 { margin: 7px 0 12px; font-size: clamp(28px, 5vw, 42px); }
.live-login-lead { margin: 0 0 24px; color: var(--muted,#9aa8bb); line-height: 1.55; }
.live-login-form { display: grid; gap: 10px; }
.live-login-form label { margin-top: 5px; color: #dbe8fa; font-size: 13px; font-weight: 850; }
.live-login-form input {
  width: 100%; box-sizing: border-box; padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.15); border-radius: 14px;
  background: #0a1523; color: #f2f7ff; font: inherit; font-weight: 750;
}
.live-login-form input:focus { outline: 2px solid rgba(47,134,255,.48); border-color: #2f86ff; }
.live-login-form button { margin-top: 10px; min-height: 48px; font-weight: 950; }
.live-login-message { min-height: 22px; color: #9fc5ff; font-size: 13px; font-weight: 750; }
.live-login-message.is-error { color: #ff8fa0; }
.live-login-note { margin: 12px 0 18px; color: var(--muted,#9aa8bb); font-size: 12px; line-height: 1.5; }
.live-login-back { display: inline-flex; }


/* 0.9.3 — Password visibility control on the live-room login page. */
.live-password-field {
  position: relative;
}
.live-password-field > input {
  padding-right: 142px;
}
.live-login-form .live-password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: auto;
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: #cfe2ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}
.live-login-form .live-password-toggle:hover,
.live-login-form .live-password-toggle:focus-visible {
  background: rgba(47,134,255,.18);
  border-color: rgba(92,165,255,.55);
}
@media (max-width: 430px) {
  .live-password-field > input { padding-right: 116px; }
  .live-login-form .live-password-toggle {
    padding-inline: 8px;
    font-size: 9px;
  }
}

/* 0.9.4 — live 3D map with dynamically expanding terrain. */
.live-view-switch {
  align-self: center;
}

.live-map-card > #liveMap,
.live-map-card > #liveMap3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#liveMap3d {
  display: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(42,73,112,.35), transparent 42%),
    linear-gradient(180deg, #09111d 0%, #05080d 100%);
  touch-action: none;
}

#liveMap3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.live-map-card.view-3d #liveMap {
  display: none;
}

.live-map-card.view-3d #liveMap3d {
  display: block;
}

.live-map-card.view-3d .live-three-controls {
  display: block;
}

.live-map-card.view-3d .live-legend {
  display: none;
}

.live-map-card.view-3d .leaflet-control-container {
  display: none;
}

.live-three-controls {
  top: 16px;
  right: 16px;
  width: min(360px, calc(100% - 32px));
}

@media (max-width: 980px) {
  .live-view-switch {
    order: -1;
  }

  .live-three-controls {
    top: 12px;
    right: 12px;
    width: min(350px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    overflow-y: auto;
  }
}

@media (max-width: 620px) {
  .live-header {
    align-items: flex-start;
  }

  .live-actions {
    justify-content: flex-end;
  }

  .live-three-controls {
    width: min(330px, calc(100% - 20px));
    top: 10px;
    right: 10px;
  }

  .live-three-controls .three-attribution {
    display: none;
  }
}

/* 0.9.5 — Compact live dashboard and hideable map HUD. */
.live-header-compact {
  min-height: 72px;
  padding: 4px 0 10px;
  align-items: center;
}

.live-heading {
  min-width: 0;
}

.live-room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 3px;
  color: var(--muted, #9aa8bb);
  font-size: 12px;
}

.live-room-meta strong {
  color: #dbe9fb;
}

.live-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.live-kpi-strip {
  display: flex;
  gap: 6px;
}

.live-kpi {
  min-width: 62px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  text-align: center;
}

.live-kpi span {
  display: block;
  color: #718198;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.live-kpi strong {
  display: block;
  margin-top: 1px;
  color: #eef5ff;
  font-size: 15px;
  line-height: 1.05;
}

.live-actions {
  align-items: center;
  gap: 7px;
}

.live-actions button,
.live-actions .ghost-link {
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 11px;
}

.live-grid-compact {
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 11px;
  height: calc(100dvh - 92px);
  min-height: 540px;
}

.live-panel-compact {
  gap: 10px;
  padding-right: 2px;
}

.live-panel-compact .card {
  padding: 13px;
  border-radius: 17px;
}

.live-list-card {
  min-height: 0;
}

.live-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.live-card-subtitle {
  color: #718198;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.live-panel-compact .live-jumper-list {
  gap: 7px;
}

.live-panel-compact .live-jumper-card {
  padding: 9px 10px;
  border-radius: 13px;
}

.live-panel-compact .live-jumper-meta {
  margin-top: 5px;
}

.live-jumper-meta-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
}

.live-jumper-meta-inline span {
  white-space: nowrap;
}

.live-inline-warning {
  margin: 0 0 7px;
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(219,174,91,.08);
  color: #d8c79f;
  font-size: 10px;
}

.live-key-card {
  padding: 0 !important;
  overflow: hidden;
}

.live-key-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
  color: #dce9fa;
  font-size: 12px;
  font-weight: 900;
}

.live-key-card > summary::-webkit-details-marker {
  display: none;
}

.live-key-card > summary::before {
  content: '›';
  color: #718198;
  font-size: 18px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .16s ease;
}

.live-key-card[open] > summary::before {
  transform: rotate(90deg);
}

.live-key-card > summary span {
  margin-right: auto;
}

#positionKeyCardState {
  color: #dbae5b;
  font-size: 9px;
  letter-spacing: .06em;
}

#positionKeyCardState.is-ready {
  color: #63e6a4;
}

#positionKeyCardState.is-missing {
  color: #ff9aa8;
}

.live-key-card-body {
  padding: 0 13px 13px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.live-key-card-body .hint {
  margin: 10px 0 8px;
  font-size: 10px;
  line-height: 1.4;
}

.live-key-buttons {
  margin-top: 8px;
}

.live-key-buttons button {
  padding: 8px 10px;
  font-size: 10px;
}

.live-map-hud-toggle {
  right: 16px;
  bottom: 16px;
}

.live-map-card .live-three-controls,
.live-map-card .live-legend,
.live-map-card .leaflet-control-layers {
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.live-map-card.map-hud-hidden .live-three-controls,
.live-map-card.map-hud-hidden .live-legend,
.live-map-card.map-hud-hidden .leaflet-control-layers {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transform: translateY(-8px);
}

/* Keep zoom, FIT and the visibility toggle usable while the information HUD is hidden. */
.live-map-card.map-hud-hidden .leaflet-control-zoom {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  transform: none;
}

.live-map-card .leaflet-top.leaflet-right {
  top: 10px;
  right: 10px;
}

.live-map-card .leaflet-top.leaflet-left {
  top: 10px;
  left: 10px;
}

@media (max-width: 1180px) {
  .live-kpi-strip {
    display: none;
  }
}

@media (max-width: 980px) {
  .live-shell {
    width: min(100%, calc(100vw - 16px));
    padding: 8px;
  }

  .live-header-compact {
    min-height: 0;
    padding: 3px 2px 8px;
    gap: 8px;
  }

  .live-header-right {
    gap: 7px;
  }

  .live-grid-compact {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    gap: 10px;
  }

  .live-map-card {
    height: calc(100dvh - 108px);
    min-height: 520px;
    max-height: 900px;
    border-radius: 18px;
  }

  .live-panel-compact {
    overflow: visible;
  }

  .live-three-controls {
    top: 10px;
    right: 10px;
    width: min(310px, calc(100% - 20px));
  }
}

@media (max-width: 700px) {
  .live-header-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .live-header-right {
    display: block;
  }

  .live-heading .brand {
    font-size: 17px;
  }

  .live-room-meta {
    max-width: 58vw;
    font-size: 10px;
    line-height: 1.2;
  }

  .live-meta-divider {
    display: none;
  }

  .live-room-meta span {
    width: 100%;
  }

  .live-actions {
    justify-content: flex-end;
    gap: 5px;
  }

  .live-actions button,
  .live-actions .ghost-link {
    min-height: 38px;
    padding: 7px 8px;
    font-size: 9px;
  }

  .live-secondary-action,
  .live-admin-action {
    display: none !important;
  }

  .live-view-switch {
    order: 0;
  }

  .live-view-switch .view-switch-btn {
    min-width: 36px;
    padding: 6px 8px;
  }

  .live-map-card {
    height: calc(100dvh - 83px);
    min-height: 500px;
  }

  .live-map-hud-toggle {
    right: 12px;
    bottom: 12px;
  }

  .live-map-card .live-legend {
    left: 10px;
    bottom: 66px;
    max-width: 155px;
    padding: 8px 9px;
    font-size: 10px;
  }

  .live-three-controls {
    max-height: calc(100% - 72px);
  }

  .live-panel-compact .card {
    padding: 11px;
  }

  .live-key-card {
    padding: 0 !important;
  }
}

@media (max-width: 430px) {
  .live-actions #fitLiveBtn {
    display: none;
  }

  .live-map-card {
    height: calc(100dvh - 79px);
  }
}


/* 0.9.6 — Live 2D isolation and mobile control reset. */
.live-map-card > #liveMap { z-index: 1; }
.live-map-card > #liveMap3d { z-index: 2; }
.live-map-card > .live-three-controls { z-index: 1450; }
.live-map-card > .live-map-hud-toggle { z-index: 1700; }
.live-map-card > .live-legend { z-index: 1350; }

.live-map-card:not(.view-3d) #liveMap {
  display: block !important;
  visibility: visible;
  opacity: 1;
}
.live-map-card:not(.view-3d) #liveMap3d,
.live-map-card:not(.view-3d) .live-three-controls {
  display: none !important;
}
.live-map-card:not(.view-3d) .leaflet-control-container {
  display: block;
  visibility: visible;
}
.live-map-card:not(.view-3d):not(.map-hud-hidden) .live-legend {
  display: block;
}

@media (max-width: 700px) {
  .live-map-card .leaflet-bar a {
    width: 36px;
    height: 36px;
    line-height: 34px;
  }
  .live-map-card .leaflet-control-layers {
    min-width: 0;
    max-width: calc(100vw - 92px);
  }
  .live-map-card .leaflet-control-layers-expanded {
    padding: 9px 10px !important;
  }
  .live-map-card .leaflet-control-layers label {
    font-size: 12px;
  }
}

/* 0.9.8: keep the collapsed live 2D layer selector the same size before
   and during mouseover. The bundled minimal Leaflet CSS does not include the
   stock layers-toggle sizing, which made the Normal map / Satellite container
   change padding and jump when Leaflet expanded it. */
.live-map-card .leaflet-control-layers {
  box-sizing: border-box;
}

.live-map-card .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0 !important;
  overflow: hidden;
}

.live-map-card .leaflet-control-layers-toggle {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0;
  border: 0;
  border-radius: 15px;
  background: transparent;
  text-decoration: none;
}

/* Simple stacked-map icon; avoids depending on Leaflet's external image files. */
.live-map-card .leaflet-control-layers-toggle::before,
.live-map-card .leaflet-control-layers-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 17px;
  height: 11px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 3px;
  transform: translateX(-50%) rotate(-3deg);
}

.live-map-card .leaflet-control-layers-toggle::before {
  top: 10px;
  background: rgba(47,134,255,.32);
}

.live-map-card .leaflet-control-layers-toggle::after {
  top: 16px;
  background: rgba(7,12,20,.70);
}

.live-map-card .leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-list {
  display: none !important;
}

.live-map-card .leaflet-control-layers-expanded {
  width: auto;
  min-width: 164px;
  height: auto;
  padding: 11px 13px !important;
  overflow: visible;
}

.live-map-card .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none !important;
}

.live-map-card .leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block !important;
}

@media (max-width: 700px) {
  .live-map-card .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .live-map-card .leaflet-control-layers-toggle {
    width: 36px;
    height: 36px;
  }

  .live-map-card .leaflet-control-layers-toggle::before {
    top: 8px;
  }

  .live-map-card .leaflet-control-layers-toggle::after {
    top: 14px;
  }
}