/* ===== MAIN STYLES ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  /* iOS: dynamic toolbar can make 100vh taller than the visible viewport — fill-available helps */
  height: -webkit-fill-available;
}

/* Cross-platform font rendering (Windows + Mac) — no extra UI libraries needed */
body {
  font-family: 'Al Jazeera', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  overflow: hidden;
  min-height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  background: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Leaflet fullscreen control positioning */
.leaflet-top.leaflet-left {
    top: 20px !important;
    left: 20px !important;
}

.leaflet-control-zoom,
.leaflet-bar {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}

/* Mapbox vector: tilt / flatten / reset-north (matches leaflet-bar touch targets) */
.touch-vector-tilt-control a {
    font-size: 15px;
    font-weight: 700;
    line-height: 30px;
    min-width: 30px;
    text-align: center;
}

/* Scene panel dock: max width (px); actual width = min(this, 100vw - 72px) so a map strip remains */
:root {
  --scene-panel-width-max: 520px;
}
/* Reserve right edge for docked Scene panel — map reflows like devtools (Leaflet needs invalidateSize). */
html.scene-panel-open #map {
  right: var(--scene-panel-width);
  width: auto;
}
html.scene-panel-open {
  --scene-panel-width: min(var(--scene-panel-width-max), calc(100vw - 72px));
}

/* Map container: fixed inset fills the *visible* viewport (avoids black band under 100vh on some browsers / OS UI). */
#map {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  z-index: 1;
  /* No opacity transition to avoid full-map fade/flicker when switching presets */
  /* Fallback so unloaded tiles don’t show white when zooming/panning */
  background: #1a1d21;
}

/* Native fullscreen: map must track the fullscreen element, not a stale vh */
html:fullscreen #map,
html:-webkit-full-screen #map {
  width: 100%;
  height: 100%;
  min-height: 100%;
}
html.scene-panel-open:fullscreen #map,
html.scene-panel-open:-webkit-full-screen #map {
  right: var(--scene-panel-width);
  width: auto;
}
/* Fade entire map when switching basemap (Mapbox dark ↔ ArcGIS sat, etc.) to avoid flicker */
#map.map-basemap-fade-out {
  /* Subtle dim, not full black-out */
  opacity: 0.84;
  pointer-events: none;
}

/* Preset fly: promote map panes to own layer for smoother animation, removed on moveend */
#map.map-flying .leaflet-zoom-animated,
#map.map-flying .leaflet-tile-pane {
  will-change: transform;
}

/* Borders: default white for dark/satellite so they are always visible */
/* Dark basemap: always white, even when News/Grayscale is on (must override grayscale black) */
#map.map-basemap-dark .leaflet-overlay-pane .touch-land-border path,
#map.map-basemap-dark .leaflet-overlay-pane path.touch-land-border {
  stroke: #ffffff !important;
  stroke-opacity: 0.85;
}
/* Borders: black on light basemap (SVG overlay path). News + borders on: colour comes from JS (no !important). */
#map.map-basemap-light .leaflet-overlay-pane .touch-land-border path,
#map.map-basemap-light .leaflet-overlay-pane path.touch-land-border {
  stroke: #0d0d0d !important;
  stroke-opacity: 1;
}

/* Basemap brightness: --map-brightness is unitless multiplier (1 = 100%); set from Scene → BASEMAP */
#map .leaflet-tile-pane {
  transition: filter 0.35s ease-out;
  filter: brightness(var(--map-brightness, 1));
}
/*
 * News/broadcast: grayscale the tile pane. Mapbox GL draws land borders on the same canvas as the basemap,
 * so this filter desaturates line-color. #map.map-news-skip-tile-filter skips this stack (satellite+news
 * always; other basemaps when Land borders are on) — only brightness remains on .leaflet-tile-pane.
 */
#map.map-style-news:not(.map-news-skip-tile-filter) .leaflet-tile-pane {
  filter: grayscale(var(--news-grayscale-amount, 0.82)) saturate(0.38) contrast(1.06) brightness(calc(0.88 * var(--map-brightness, 1)));
}

.leaflet-container,
.leaflet-tile-pane {
  background: #1a1d21;
}

.leaflet-tile,
.leaflet-fade-anim .leaflet-tile,
.leaflet-fade-anim .leaflet-popup {
  transition: none !important;
}

/* Tile pane: dark background so zoom/pan doesn’t show white where tiles aren’t loaded yet */
#map .leaflet-tile-pane {
  background: #1a1d21;
}

/* Smoother, more gradual zoom animation (wheel, pinch, buttons) — video-like instead of punchy */
#map.leaflet-zoom-anim .leaflet-zoom-animated {
  transition-duration: 0.45s !important;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Pause animated flag sprite frames while zooming so the anchor feels locked. */
#map.map-zooming .leaflet-marker-pane .flag-marker > div,
#map.map-zooming .leaflet-marker-pane .flag_iran-marker > div,
#map.map-zooming .leaflet-marker-pane .flag_usa-marker > div {
  animation-play-state: paused !important;
}

/* ===== LEAFLET CUSTOMIZATIONS ===== */
/* Hide default Leaflet controls — app uses custom toolbar (zoom, etc.).
   Exception: Mapbox vector tilt UI (.touch-vector-tilt-control) is a Leaflet control and must stay visible. */
.leaflet-control-container {
  display: none !important;
}
.leaflet-control-container:has(.touch-vector-tilt-control) {
  display: block !important;
}
/* Terrain tilt (▲▼N): above map panes; lifted so it clears fixed LAYERS panel (collapsed ~52px + bottom offset) */
.leaflet-bottom.leaflet-left .touch-vector-tilt-control {
  z-index: 2100;
  margin-bottom: 78px;
}

/* MapCore: hide HTML/Leaflet labels while Mapbox pitch is high (see map.hideLabelsWhenTilted).
   Use opacity on panes (not visibility alone): descendants like .touch-country-label-pill use
   visibility:visible !important and would otherwise stay painted. */
#map.map-tilt-suppresses-labels .leaflet-countryLabels-pane,
#map.map-tilt-suppresses-labels .leaflet-cityLabels-pane,
#map.map-tilt-suppresses-labels .leaflet-seaLabels-pane,
#map.map-tilt-suppresses-labels .leaflet-customLabels-pane {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#map.map-tilt-suppresses-labels .leaflet-marker-pane .touch-fill-country-label-icon,
#map.map-tilt-suppresses-labels .leaflet-marker-pane .touch-fill-city-highlight-wrapper {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.leaflet-popup-content-wrapper {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 8px;
}

.leaflet-popup-tip {
  background: rgba(0, 0, 0, 0.8);
}

/* Country name label on map: square pill with downward arrow (Scene > Labels) */
.touch-country-label-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: var(--country-label-padding, 2px 10px) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--country-label-bg, rgba(0, 0, 0, 0.82)) calc(var(--touch-op-country, 1) * 100%), transparent) !important;
  color: var(--label-country-color, #ffffff) !important;
  /* When --country-label-show-pill is 0, background is overridden in JS to transparent */
  font-family: 'Montserrat', sans-serif !important;
  font-size: var(--country-label-size, 11px) !important;
  font-weight: 600 !important;
  /* Tight to pill padding: line-height > 1 looks like extra vertical padding when V=0 */
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  filter: none !important;
  visibility: visible !important;
  text-shadow: none !important;
}
/* Small downward arrow (pointer) */
.touch-country-label-pill::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translate(-50%, 100%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left:  calc(var(--country-label-size, 11px) * 0.38) solid transparent !important;
  border-right: calc(var(--country-label-size, 11px) * 0.38) solid transparent !important;
  border-top:   calc(var(--country-label-size, 11px) * 0.7) solid color-mix(in srgb, var(--country-label-bg, rgba(0, 0, 0, 0.82)) calc(var(--touch-op-country, 1) * 100%), transparent) !important;
}
.touch-country-label-pill span {
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  text-shadow: none !important;
}

/* Show pill OFF: --country-label-bg is transparent but shadow/padding/arrow still drew a “ghost box” */
#map.map-country-labels-no-pill .touch-country-label-pill {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
#map.map-country-labels-no-pill .touch-country-label-pill::after {
  display: none !important;
  content: none !important;
}
#map.map-country-labels-no-pill .touch-country-label-pill span {
  text-shadow: none !important;
}

.touch-country-label-icon {
  background: none !important;
  border: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
}

/* Scene panel edit mode: basemap country/city/capital markers are draggable (pane has pointer-events: none) */
body.mode-offline .touch-country-label-icon .touch-country-label-pill {
  pointer-events: auto !important;
  cursor: grab;
}
body.mode-offline .leaflet-drag-target .touch-country-label-icon .touch-country-label-pill {
  cursor: grabbing;
}
body.mode-offline .city-label-wrapper {
  pointer-events: auto !important;
  cursor: grab;
}
body.mode-offline .city-label-wrapper .city-label {
  pointer-events: auto !important;
}
body.mode-offline .leaflet-drag-target .city-label-wrapper {
  cursor: grabbing;
}
/* Whole icon box is draggable (large iconSize); pill alone can miss hits if events fall through */
body.mode-offline .touch-custom-label-icon {
  pointer-events: auto !important;
  cursor: grab;
}
body.mode-offline .touch-custom-label-icon .touch-custom-label-pill {
  pointer-events: auto !important;
  cursor: grab;
}
body.mode-offline .leaflet-drag-target .touch-custom-label-icon,
body.mode-offline .leaflet-drag-target .touch-custom-label-icon .touch-custom-label-pill {
  cursor: grabbing;
}

/* Custom map labels (Start tab; global for all presets) — background/color/font-size set inline from style options */
.touch-custom-label-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* padding set inline from style so Pill padding option applies */
  border-radius: 2px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  white-space: pre-line !important;
  text-align: center !important;
  pointer-events: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}
.touch-custom-label-no-pill {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75) !important;
}
.scene-custom-label-style {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 20px;
  margin-bottom: 10px;
}
.scene-custom-label-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.scene-custom-label-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  width: 100%;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
}
.scene-custom-label-show-pill-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scene-custom-label-padding-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.scene-custom-label-padding-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.scene-custom-label-padding-cell input[type="range"] { width: 56px; }
.scene-custom-label-padding-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  min-width: 12px;
}
.scene-custom-label-style .scene-tint-lbl { margin-right: 0; }
.scene-custom-label-style input[type="color"] {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--input-border, #ccc);
  border-radius: 2px;
  cursor: pointer;
}
.scene-custom-label-style input[type="number"] { margin-right: 4px; }
.touch-custom-label-icon {
  background: none !important;
  border: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Sea name labels (Map Labels panel: "Sea Labels" checkbox) — blue shaded */
.touch-sea-label-icon {
  background: none !important;
  border: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.touch-sea-label-stack {
  position:        relative;
  display:         inline-flex !important;
  align-items:     center;
  justify-content:   center;
  overflow:        visible !important;
}
.touch-sea-label-drag {
  display:         flex !important;
  justify-content: center !important;
  align-items:     center !important;
  cursor:          grab;
  pointer-events:  auto !important;
  transform-origin: center center;
}
.touch-sea-label-drag:active {
  cursor: grabbing;
}
.touch-sea-label {
  color: var(--sea-label-color, #2d6ba3) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: var(--sea-label-size, 16px) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3) !important;
  pointer-events: none !important;
}

/* ===== MEDIA CONTROLS PANEL ===== */
.media-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #00a8ff;
  border-radius: 15px;
  padding: 20px;
  color: white;
  z-index: 2000;
  box-shadow: 0 4px 20px rgba(0, 168, 255, 0.3);
}

.media-controls h3 {
  margin-bottom: 15px;
  color: #00a8ff;
  text-align: center;
}

.media-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.media-buttons button {
  background: linear-gradient(145deg, #333, #555);
  border: 1px solid #00a8ff;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Al Jazeera', 'Helvetica Neue', 'Arial', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Remove hover effects for touch interface */
.media-buttons button:active {
  background: linear-gradient(145deg, #00a8ff, #0088cc);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 168, 255, 0.4);
}

#mediaCanvas {
  border: 2px solid #00a8ff;
  border-radius: 8px;
  background: #000;
  display: block;
  margin: 0 auto;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .media-controls {
    top: 10px;
    right: 10px;
    left: 10px;
    padding: 15px;
  }
  
  #mediaCanvas {
    width: 100%;
    height: auto;
  }
}

/* ===== UTILITY CLASSES ===== */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== ANIMATED OBJECTS ===== */
.animated-object {
  font-size: 24px !important;
  text-align: center !important;
  line-height: 32px !important;
  transform-origin: center center !important;
  transition: none !important;
  z-index: 1000 !important;
  position: relative !important;
}

.animated-object div {
  position: relative !important;
  transform-origin: center center !important;
}

.animated-icon-wrapper {
  width: 30px !important;
  height: 30px !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: white !important;
  border: 1px solid #000 !important;
  border-radius: 50% !important;
  position: relative !important;
  transform-origin: center center !important;
  left: 0 !important;
  top: 0 !important;
}

.rocket-icon {
  filter: drop-shadow(2px 2px 4px rgba(255,0,0,0.5));
}

.tank-icon {
  filter: drop-shadow(2px 2px 4px rgba(0,100,0,0.5));
}

.plane-icon {
  filter: drop-shadow(2px 2px 4px rgba(0,0,255,0.5));
}

.animation-path {
  pointer-events: none;
}

/* ===== CUSTOM FULLSCREEN BUTTON ===== */
#custom-fullscreen-btn,
.custom-fullscreen-button {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 22px;
  cursor: pointer;
  z-index: 2000;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#custom-fullscreen-btn:active,
.custom-fullscreen-button:active {
  transform: scale(0.95);
}

/* Pseudo-fullscreen raises #map z-index — keep exit control on top */
.fullscreen-mode #custom-fullscreen-btn,
#custom-fullscreen-btn.fullscreen-active {
  z-index: 100001 !important;
}

html:fullscreen #custom-fullscreen-btn,
html:-webkit-full-screen #custom-fullscreen-btn {
  z-index: 100001 !important;
}

/* Native fullscreen: body may not have .fullscreen-mode — keep chrome above the map like pseudo-fullscreen */
html:fullscreen #broadcast-toolbar,
html:-webkit-full-screen #broadcast-toolbar {
  z-index: 100000 !important;
}
html:fullscreen .onair-minimap-wrap,
html:-webkit-full-screen .onair-minimap-wrap {
  z-index: 100005 !important;
}
html:fullscreen .broadcast-mode-badge,
html:-webkit-full-screen .broadcast-mode-badge {
  z-index: 100006 !important;
}

/* Keep badge on the map strip when Scene panel is docked */
html.scene-panel-open .broadcast-mode-badge {
  right: calc(var(--scene-panel-width) + 16px);
}

/* Broadcast mode badge (ON AIR / OFFLINE) */
.broadcast-mode-badge {
  position: fixed;
  top: 20px;
  right: 74px;
  z-index: 2001;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  user-select: none;
  pointer-events: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.broadcast-mode-badge--onair {
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.broadcast-mode-badge--offline {
  background: rgba(251, 191, 36, 0.96);
  color: #111827;
  border-color: rgba(180, 83, 9, 0.45);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset;
}

/* ON AIR — fixed landscape overview + viewport indicator (top right, under badge) */
html.scene-panel-open .onair-minimap-wrap {
  right: calc(var(--scene-panel-width) + 12px);
}

.onair-minimap-wrap {
  position:       fixed;
  top:            52px;
  right:          12px;
  z-index:        2002;
  width:          232px;
  padding:        5px;
  border-radius:  2px;
  background:     rgba(15, 23, 42, 0.88);
  border:         1px solid rgba(255, 255, 255, 0.14);
  box-shadow:     0 2px 12px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  box-sizing:     border-box;
  opacity:        1;
  transition:     opacity 0.28s ease;
  will-change:    opacity;
}
.onair-minimap-wrap.onair-minimap-wrap--fade-out {
  opacity:        0;
  pointer-events: none;
}
.onair-minimap-wrap[hidden] {
  display:        none !important;
  opacity:        0;
  transition:     none;
}
.onair-minimap-inner {
  width:          100%;
  height:         132px;
  border-radius:  1px;
  overflow:       hidden;
  background:     #dfe8f0;
  border:         1px solid rgba(255, 255, 255, 0.22);
  box-sizing:     border-box;
}
.onair-minimap-inner .leaflet-container {
  width:          100%;
  height:         100%;
  min-height:     80px;
  margin:         0;
  background:     transparent;
  font-family:    system-ui, sans-serif;
}
/* Stay visible above fullscreen map */
.fullscreen-mode .onair-minimap-wrap {
  z-index:        100005;
}

.fullscreen-icon {
  pointer-events: none;
}

/* Cleaned up - old Leaflet fullscreen control CSS removed (unused) */

/* ── Label Colour Picker ────────────────────────────────────────────── */
/* #label-colors-btn is now inside #broadcast-toolbar — styled via .label-settings-btn in toolbar.css */

#label-colors-panel {
  position:       fixed;
  top:            30px;   /* overridden at runtime by JS */
  left:           200px;  /* overridden at runtime by JS */
  z-index:        2100;
  background:     rgba(255,255,255,0.4);
  border:         1.5px solid #111;
  border-radius:  0;
  padding:        10px;
  min-width:      210px;
  box-shadow:     none;
  display:        none;
  flex-direction: column;
  gap:            8px;
  font-family:    Arial, sans-serif;
  backdrop-filter: blur(3px);
}
#label-colors-panel.lcp-open { display: flex; }

.lcp-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   2px;
}
.lcp-header span {
  color:          #111;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#label-colors-close {
  background:  none;
  border:      none;
  color:       rgba(17,17,17,0.45);
  font-size:   14px;
  cursor:      pointer;
  padding:     0 2px;
  line-height: 1;
}
#label-colors-close:hover { color: #111; }

.lcp-row {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         10px;
  cursor:      pointer;
}
.lcp-row span {
  color:       #111;
  font-size:   12px;
  font-weight: 700;
  flex:        1;
}
.lcp-row input[type="color"] {
  width:         40px;
  height:        28px;
  border:        1.5px solid #111;
  border-radius: 0;
  background:    none;
  cursor:        pointer;
  padding:       2px;
}

.lcp-padding-row {
  display:     flex;
  align-items: center;
  gap:         8px 14px;
  margin:      4px 0;
  flex-wrap:   wrap;
}
.lcp-padding-row .lcp-size-lbl {
  font-size:   12px;
  font-weight: 600;
  color:       #111;
  min-width:   120px;
}
.lcp-padding-cell {
  display:   inline-flex;
  align-items: center;
  gap:       4px;
}
.lcp-padding-cell input[type="range"] { width: 56px; }
.lcp-padding-lbl {
  font-size:   11px;
  font-weight: 600;
  color:       #64748b;
  min-width:   12px;
}

#lcp-reset {
  margin-top:    2px;
  background:    rgba(255,255,255,0.7);
  border:        1.5px solid #111;
  border-radius: 0;
  color:         #111;
  font-size:     11px;
  font-weight:   700;
  padding:       5px 0;
  cursor:        pointer;
  transition:    background 0.15s;
  width:         100%;
}
#lcp-reset:hover { background: rgba(17,17,17,0.88); color: #fff; border-color: #111; }

.lcp-divider {
  border: none;
  border-top: 1px solid rgba(17,17,17,0.15);
  margin: 4px 0;
}
.lcp-section-label {
  color:          #111;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom:  2px;
}
.lcp-show-labels-row {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  gap:             10px 16px;
  margin-bottom:   6px;
}
.lcp-regions-section {
  margin-bottom:   6px;
}
.lcp-regions-toggle {
  display:         block;
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           #111;
  cursor:          pointer;
  padding:         4px 0;
  list-style:      none;
  user-select:     none;
}
.lcp-regions-toggle::-webkit-details-marker { display: none; }
.lcp-regions-toggle::before {
  content:         '\25B8';
  display:         inline-block;
  margin-right:    6px;
  transition:      transform 0.2s ease;
}
.lcp-regions-section[open] .lcp-regions-toggle::before {
  transform:       rotate(90deg);
}
.lcp-regions-section .lcp-regions {
  margin-top:     6px;
  padding-top:    4px;
}
.lcp-regions {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   3px 8px;
}
.lcp-regions label,
.lcp-check-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  color:       #111;
  font-size:   11px;
  font-weight: 600;
  cursor:      pointer;
  user-select: none;
  padding:     1px 0;
}
.lcp-regions label:hover,
.lcp-check-row:hover { color: #000; }
.lcp-region-hint {
  color:       rgba(17,17,17,0.55);
  font-size:   9px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 3px;
}
.lcp-regions input[type="checkbox"],
.lcp-check-row input[type="checkbox"] {
  width:         13px;
  height:        13px;
  accent-color:  #111;
  cursor:        pointer;
  flex-shrink:   0;
}

/* ── City label divIcon wrapper ──────────────────────────────────────────── */
.city-label-wrapper {
  background: none    !important;
  border:     none    !important;
  box-shadow: none    !important;
  overflow:   visible !important;
  padding:    0       !important;
}

/* City/capital label container (name only) */
.city-label {
  position:       absolute;
  transform:      translate(-50%, -50%);
  display:        flex;
  align-items:    center;
  pointer-events: none;
  white-space:    nowrap;
}

/* Name text: pill + text; colours from BASEMAP label table (city vs capital) */
.city-name {
  display:        inline-block;
  border-radius:  2px;
  font-family:    'Montserrat', sans-serif;
  font-weight:    600;
  letter-spacing: 0.03em;
  /* Tight pill: loose line-height reads as vertical padding when pill V=0 */
  line-height:    1.05;
  text-shadow:    none !important;
}
/* Non-capital cities: use city pill/text/size vars; when show pill off, border/box-shadow/padding are none/0 */
.city-label:not(.city-capital) .city-name {
  background:     color-mix(in srgb, var(--city-label-bg, #ffffff) calc(var(--touch-op-city, 1) * 100%), transparent);
  color:          var(--city-label-color, #000000);
  font-size:      var(--city-label-size, 16px);
  padding:        var(--city-label-padding, 2px 10px);
  border:         var(--city-label-border, 1px solid rgba(255,255,255,0.5));
  box-shadow:    var(--city-label-box-shadow, 0 1px 3px rgba(0,0,0,0.2));
}
/* Capitals: use capital pill/text/size vars; when show pill off, border/box-shadow/padding are none/0; display in caps to separate from other cities */
.city-capital .city-name {
  background:     color-mix(in srgb, var(--capital-label-bg, #ffffff) calc(var(--touch-op-capital, 1) * 100%), transparent);
  color:          var(--label-capital-color, #000000);
  font-size:      var(--capital-label-size, 20px);
  padding:        var(--capital-label-padding, 2px 10px) !important;
  border:         var(--capital-label-border, 1px solid rgba(255,255,255,0.5));
  box-shadow:    var(--capital-label-box-shadow, 0 1px 3px rgba(0,0,0,0.2));
  text-transform: uppercase;
  line-height:    1;
}
.city-medium .city-name { font-weight: 600; }

/* FILLS city dot: HTML marker on markerPane (avoids SVG circleMarker scaling/drift during flyTo/zoom) */
.touch-city-fill-dot-root {
  background: transparent !important;
  border: none !important;
}
.touch-city-fill-dot-inner {
  width: 24px;
  height: 24px;
  margin: 2px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* FILLS search: city dot + label — same .city-name vars as basemap; nudge above the marker */
.touch-fill-city-highlight-wrapper .city-label.touch-fill-city-highlight-label {
  transform: translate(-50%, calc(-50% - 14px));
}

/* ── Country name labels ───────────────────────────────────────── */
.country-label-wrapper {
  background: none    !important;
  border:     none    !important;
  box-shadow: none    !important;
  overflow:   visible !important;
  padding:    0       !important;
}
.country-label {
  position:        absolute;
  /* Shift up so the tip of the triangle points at the location */
  transform:       translate(-50%, calc(-100% - 6px));
  pointer-events:  none;
  white-space:     nowrap;
  background:      var(--country-label-bg, rgba(0, 0, 0, 0.52));
  color:           var(--label-country-color, #ffffff);
  font-family:     'Arial', 'Helvetica Neue', sans-serif;
  font-size:       var(--country-label-size, 11px);
  font-weight:     700;
  letter-spacing:  0.13em;
  padding:         2px 6px;
  border-radius:   1px;
  box-shadow:      0 0 0 1px rgba(255,255,255,0.12),
                   0 1px 4px rgba(0,0,0,0.7);
  opacity:         0.92;
  text-shadow:     none;
}

/* Downward-pointing triangle tip */
.country-label::after {
  content:      '';
  position:     absolute;
  bottom:       -8px;
  left:         50%;
  transform:    translateX(-50%);
  border-left:  8px solid transparent;
  border-right: 8px solid transparent;
  border-top:   8px solid var(--country-label-bg, rgba(0, 0, 0, 0.52));
  pointer-events: none;
}
/* =============================================================
   NEWS & INTELLIGENCE LAYER  (news-layer.js)
   ============================================================= */

/* ── Hotspot dot ─────────────────────────────────────────────── */
.nl-dot {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    var(--nl-color, #ff3333);
  border:        2px solid rgba(255,255,255,0.7);
  box-shadow:    0 0 6px var(--nl-color, #ff3333);
  cursor:        pointer;
  position:      relative;
}

/* Pulsing ring in live mode */
.nl-dot--pulse::after {
  content:         '';
  position:        absolute;
  inset:           -6px;
  border-radius:   50%;
  border:          2px solid var(--nl-color, #ff3333);
  animation:       nl-pulse 2s ease-out infinite;
  opacity:         0;
}

@keyframes nl-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0;   }
}

/* Per-category dot colours */
.nl-dot--conflict  { --nl-color: #ff3333; }
.nl-dot--protest   { --nl-color: #ff9900; }
.nl-dot--disaster  { --nl-color: #3399ff; }
.nl-dot--political { --nl-color: #ccdd00; }

/* ── Leaflet popup override ───────────────────────────────────── */
.nl-popup .leaflet-popup-content-wrapper {
  background:    rgba(10, 12, 18, 0.92);
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow:    0 8px 32px rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  padding:       0;
}

.nl-popup .leaflet-popup-tip {
  background: rgba(10, 12, 18, 0.92);
}

.nl-popup .leaflet-popup-content {
  margin: 0;
  color:  #e8e8e8;
  font-family: 'Arial', sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

.nl-popup-inner {
  padding: 14px 16px 12px;
}

.nl-popup-meta {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
  margin-bottom: 8px;
}

.nl-badge {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: 4px;
  font-size:     11px;
  font-weight:   700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:         #000;
}

.nl-popup-date,
.nl-popup-src {
  font-size:  10px;
  color:      rgba(255,255,255,0.45);
  white-space: nowrap;
}

.nl-popup-title {
  font-size:   13px;
  font-weight: 500;
  color:       #f0f0f0;
  margin-bottom: 10px;
  line-height: 1.5;
}

.nl-popup-link {
  display:       inline-block;
  font-size:     12px;
  font-weight:   600;
  color:         #66aaff;
  text-decoration: none;
  border-top:    1px solid rgba(255,255,255,0.1);
  padding-top:   8px;
  width:         100%;
}
.nl-popup-link:hover { color: #99ccff; text-decoration: underline; }

/* Close button */
.nl-popup .leaflet-popup-close-button {
  color:     rgba(255,255,255,0.5) !important;
  font-size: 18px !important;
  top:       6px !important;
  right:     8px !important;
}

/* =============================================================
   STATIC CONFLICT ZONES  (conflict-zones.js)
   ============================================================= */

.cz-label {
  white-space:     nowrap;
  font-family:     'Arial', sans-serif;
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  color:           var(--cz-color, #ff2222);
  text-shadow:
    0 0 4px rgba(0,0,0,0.9),
    0 0 8px rgba(0,0,0,0.8),
    1px 1px 2px rgba(0,0,0,1),
   -1px -1px 2px rgba(0,0,0,1);
  pointer-events:  none;
  user-select:     none;
  transform:       translate(-50%, -50%);
}

/* Slightly larger label for active conflict */
.cz-label--conflict { font-size: 11px; }
.cz-label--tension  { opacity: 0.75; }



/* =============================================================
   LAYERS PANEL  (news-panel.js / LayersPanel)
   World Monitor style – bottom-left
   ============================================================= */

.lp-panel {
  position:        fixed;
  bottom:          20px;
  left:            16px;
  width:           220px;
  background:      rgba(5, 7, 12, 0.93);
  border:          1px solid rgba(255,255,255,0.10);
  border-radius:   8px;
  box-shadow:      0 8px 32px rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
  z-index:         8000;
  font-family:     'Courier New', Courier, monospace;
  overflow:        hidden;
  transition:      max-height .25s ease;
  max-height:      600px;
}
/* Collapsed: only LAYERS header row — Live data + category list hidden until user expands (arrow). */
.lp-panel.lp-collapsed {
  max-height:      52px;
}
.lp-panel.lp-collapsed .lp-live-data-bar,
.lp-panel.lp-collapsed .lp-body {
  display:         none;
}
.lp-panel.lp-collapsed .lp-header {
  border-bottom:   none;
}

/* Header */
.lp-header {
  display:       flex;
  flex-direction: column;
  align-items:   stretch;
  gap:           0;
  padding:       0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background:    rgba(255,255,255,0.03);
}
.lp-header-row {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 10px 7px;
}
.lp-live-data-bar {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           4px 10px;
  padding:       6px 10px 7px;
  border-top:    1px solid rgba(255,255,255,0.06);
  font-size:     10px;
  color:          rgba(255,255,255,0.6);
}
.lp-live-data-title {
  font-weight:   700;
  letter-spacing: 0.07em;
  color:         rgba(255,255,255,0.42);
  margin-right:  2px;
}
.lp-ld-opt {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  cursor:        pointer;
  color:         rgba(255,255,255,0.78);
  white-space:   nowrap;
}
.lp-ld-opt input {
  cursor:        pointer;
  accent-color:  #7cb3ff;
  flex-shrink:   0;
}
.lp-title {
  font-size:     11px;
  font-weight:   700;
  letter-spacing:.12em;
  color:         #e8e8e8;
  flex:          1;
}
.lp-help {
  width:       17px; height: 17px;
  border-radius: 50%;
  border:      1px solid rgba(255,255,255,.25);
  color:       rgba(255,255,255,.45);
  font-size:   10px;
  text-align:  center;
  line-height: 16px;
  cursor:      pointer;
  flex-shrink: 0;
}
.lp-help:hover { border-color:#fff; color:#fff; }
.lp-collapse {
  background: none; border: none;
  color: rgba(255,255,255,.35); font-size:11px;
  cursor:pointer; padding:0 2px; flex-shrink:0;
}
.lp-collapse:hover { color:#fff; }

/* Body */
.lp-body {
  padding: 5px 0 6px;
  overflow-y: auto;
  max-height: 520px;
}
.lp-body::-webkit-scrollbar { width:3px; }
.lp-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

/* Row */
.lp-row {
  position: relative;
}
.lp-row-label {
  display:     flex;
  align-items: center;
  gap:         7px;
  padding:     5px 10px 5px 8px;
  cursor:      pointer;
  transition:  background .12s;
}
.lp-row-label:hover { background: rgba(255,255,255,.05); }

/* Checkbox */
.lp-chk {
  width:       13px; height: 13px;
  flex-shrink: 0;
  cursor:      pointer;
  accent-color: var(--lp-color, #ff3333);
}

/* Colored dot indicator */
.lp-dot {
  width:        8px; height: 8px;
  border-radius: 50%;
  background:   var(--lp-color, #888);
  flex-shrink:  0;
  box-shadow:   0 0 5px var(--lp-color, #888);
}

/* Icon */
.lp-row-icon {
  font-size:   12px;
  flex-shrink: 0;
  width:       16px;
  text-align:  center;
}

/* Label text */
.lp-row-text {
  font-size:     10px;
  letter-spacing:.08em;
  color:         rgba(255,255,255,.75);
  font-weight:   600;
  flex:          1;
}
.lp-chk:checked ~ .lp-row-text { color: #fff; }

/* RSS count badge */
.lp-count {
  font-size:   9px;
  color:       rgba(255,255,255,.3);
  background:  rgba(255,255,255,.07);
  border-radius: 8px;
  padding:     1px 5px;
  min-width:   14px;
  text-align:  center;
}

/* =============================================================
   MAP DOTS  (news-layer.js / MapDots)
   ============================================================= */

/* Base dot */
.md-dot {
  border-radius:    50%;
  display:          block;
  transform-origin: center;
}

/* Pulsing high-alert / nuclear dot */
.md-dot--pulse {
  animation: md-pulse 1.8s ease-out infinite;
}
@keyframes md-pulse {
  0%   { transform: scale(1);    opacity: 1;   box-shadow: 0 0 0 0 var(--md-color); }
  60%  { transform: scale(1.5);  opacity: .7;  box-shadow: 0 0 0 8px transparent;  }
  100% { transform: scale(1);    opacity: 1;   box-shadow: 0 0 0 0 transparent;    }
}

/* Popup */
.md-popup .leaflet-popup-content-wrapper {
  background:    rgba(4, 6, 12, 0.96);
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-shadow:    0 8px 30px rgba(0,0,0,0.8);
  padding:       0;
}
.md-popup .leaflet-popup-tip { background: rgba(4,6,12,0.96); }
.md-popup .leaflet-popup-content { margin:0; }

.md-popup-inner   { padding: 11px 13px; }
.md-popup-head    {
  display:       flex;
  justify-content: space-between;
  align-items:   baseline;
  border-bottom: 2px solid;
  padding-bottom: 5px;
  margin-bottom: 6px;
}
.md-popup-name  { font-size:14px; font-weight:700; color:#eee; }
.md-popup-level { font-size:9px;  font-weight:800; letter-spacing:.1em; }
.md-popup-layer { font-size:10px; color:rgba(255,255,255,.45); letter-spacing:.07em; margin-bottom:5px; }
.md-popup-note  { font-size:11px; color:rgba(255,255,255,.7); line-height:1.5; margin-bottom:5px; }
.md-popup-src   { font-size:10px; color:rgba(255,255,255,.3); font-style:italic; margin-bottom:4px; }
.md-popup-link a {
  font-size:       var(--country-label-size, 11px);
  color:           #66aaff;
  text-decoration: none;
}
.md-popup-link a:hover { text-decoration: underline; }

/* =============================================================
   BOTTOM LEGEND BAR
   ============================================================= */

.map-legend {
  position:    fixed;
  bottom:      0;
  left:        50%;
  transform:   translateX(-50%);
  display:     flex;
  gap:         20px;
  align-items: center;
  padding:     5px 20px;
  background:  rgba(4, 6, 12, 0.82);
  border-top:  1px solid rgba(255,255,255,0.07);
  z-index:     7999;
  font-family: 'Courier New', Courier, monospace;
  pointer-events: none;
}
.leg-item {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   10px;
  color:       rgba(255,255,255,.45);
  letter-spacing: .06em;
}
.leg-dot {
  width:  8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.leg-high       { background:#ff2222; box-shadow:0 0 5px #ff2222; }
.leg-elevated   { background:#ff8800; box-shadow:0 0 4px #ff8800; }
.leg-monitoring { background:#ffdd00; box-shadow:0 0 4px #ffcc00; }
.leg-nuclear    { background:#00ccff; box-shadow:0 0 5px #00ccff; }
.leg-base       { background:#4488ff; }

/* LIVE indicator in panel header */
.lp-live {
  font-size:   9px;
  font-weight: 700;
  color:       #22ff88;
  letter-spacing: .08em;
  animation:   lp-blink 2s ease-in-out infinite;
}
@keyframes lp-blink {
  0%, 100% { opacity: 1;   }
  50%       { opacity: .35; }
}

/* Loading state */
.lp-loading {
  padding:    14px 12px;
  font-size:  10px;
  color:      rgba(255,255,255,.3);
  letter-spacing: .08em;
  font-style: italic;
}

/* Dim rows (no data) */
.lp-row--dim .lp-row-label { opacity: .35; cursor: not-allowed; }
.lp-count--zero { color: rgba(255,255,255,.2) !important; font-size:9px; }



/* =============================================================
   SPECIAL LAYERS  – panel rows + MarineTraffic PiP
   ============================================================= */

/* Divider between special and news layers */
.lp-divider {
  font-size:     8px;
  letter-spacing:.15em;
  color:         rgba(255,255,255,.2);
  padding:       6px 10px 3px;
  border-top:    1px solid rgba(255,255,255,.06);
  margin-top:    2px;
}

/* Special layer count badge */
.lp-count--live {
  font-size:   8px;
  font-weight: 700;
  letter-spacing:.06em;
  color:       #22ff88;
  animation:   lp-blink 2s ease-in-out infinite;
}

/* Special layer row has slightly brighter left border */
.lp-row--special {
  border-left: 2px solid var(--lp-color);
}

/* ── MarineTraffic PiP window ─────────────────────────────── */
.mt-pip {
  position:        fixed;
  bottom:          60px;
  right:           16px;
  width:           460px;
  height:          320px;
  background:      rgba(4,6,12,0.97);
  border:          1px solid rgba(0,180,255,0.35);
  border-radius:   10px;
  box-shadow:      0 12px 50px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,180,255,0.1);
  z-index:         9000;
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  resize:          both;
}
.mt-pip--large {
  width:  700px;
  height: 500px;
}
.mt-pip--fullscreen {
  top:           0 !important;
  left:          0 !important;
  right:         0 !important;
  bottom:        0 !important;
  width:         100vw !important;
  height:        100vh !important;
  border-radius: 0 !important;
  border:        none !important;
  resize:        none !important;
  z-index:       99999 !important;
}

.mt-pip-header {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 10px;
  background:    rgba(0,180,255,0.08);
  border-bottom: 1px solid rgba(0,180,255,0.15);
  cursor:        move;
  flex-shrink:   0;
  user-select:   none;
}
.mt-pip-title {
  font-size:     11px;
  font-weight:   700;
  letter-spacing:.08em;
  color:         #cceeff;
  flex:          1;
  font-family:   'Courier New', monospace;
}
.mt-pip-live {
  font-size:   9px;
  font-weight: 700;
  color:       #22ff88;
  animation:   lp-blink 2s ease-in-out infinite;
}
.mt-pip-actions { display: flex; gap: 4px; }
.mt-pip-btn {
  background:    rgba(255,255,255,.06);
  border:        1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  color:         rgba(255,255,255,.5);
  font-size:     12px;
  width:         22px; height: 22px;
  cursor:        pointer;
  display:       flex; align-items: center; justify-content: center;
  padding:       0;
}
.mt-pip-btn:hover { background: rgba(255,255,255,.14); color:#fff; }

.mt-pip-body {
  flex:     1;
  position: relative;
  overflow: hidden;
}
.mt-iframe {
  width:   100%;
  height:  100%;
  border:  none;
  display: block;
}

.mt-pip-fallback {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  background:      rgba(4,6,12,0.95);
  color:           rgba(255,255,255,.5);
  font-size:       13px;
  font-family:     'Courier New', monospace;
}
.mt-pip-fallback a {
  color:           #66ccff;
  text-decoration: none;
  font-size:       13px;
  padding:         7px 14px;
  border:          1px solid rgba(0,180,255,.3);
  border-radius:   5px;
}
.mt-pip-fallback a:hover { background: rgba(0,180,255,.1); }

/* =============================================================
   LIVE FLIGHTS LAYER  — FR24-style plane icons
   ============================================================= */

/* Plane icon wrapper — no background, no border, transparent Leaflet default */
.fl-plane-icon {
  background:    none !important;
  border:        none !important;
  overflow:      visible !important;
}

/* Popup dark theme — matches the dark broadcast style */
.fl-popup-wrap .leaflet-popup-content-wrapper {
  background:    rgba(4,6,12,0.97);
  border:        1px solid rgba(255,200,0,0.25);
  border-radius: 7px;
  box-shadow:    0 6px 24px rgba(0,0,0,0.8);
  padding:       0;
}
.fl-popup-wrap .leaflet-popup-tip { background: rgba(4,6,12,0.97); }
.fl-popup-wrap .leaflet-popup-content { margin: 0; }

.fl-popup     { padding: 10px 13px; }
.fl-popup-cs {
  font-size:     15px;
  font-weight:   800;
  font-family:   'Courier New', monospace;
  letter-spacing:.08em;
  margin-bottom: 7px;
}
.fl-popup-row {
  display:         flex;
  justify-content: space-between;
  gap:             16px;
  font-size:       var(--country-label-size, 11px);
  font-family:     'Courier New', monospace;
  padding:         2px 0;
  color:           rgba(255,255,255,.6);
}
.fl-popup-row span:last-child { color: #ddd; font-weight: 600; }


/* =============================================================
   AIRSTRIKE — missile drop animation
   ============================================================= */

@keyframes airstrike-fall {
  /* Missile appears at full scale (dropped from jet).
     Hold at 1.0 for the first 25%, then accelerate into zero.
     ease-in timing on the animation means it lingers at full size
     and snaps to zero at the end. */
  0%   { transform: scale(1.0)  rotate(160deg); opacity: 1;    }
  25%  { transform: scale(0.95) rotate(160deg); opacity: 1;    }
  60%  { transform: scale(0.55) rotate(160deg); opacity: 0.95; }
  85%  { transform: scale(0.2)  rotate(160deg); opacity: 0.8;  }
  100% { transform: scale(0.0)  rotate(160deg); opacity: 0;    }
}

/* =============================================================
   COUNTRY HIGHLIGHT MODULE  (country-highlight.js)
   ============================================================= */

/* ── Toggle button ─────────────────────────────────────────── */
/* #ch-btn moved into zoom panel as #map-style-btn — old standalone button hidden */
#ch-btn { display: none !important; }
#ch-btn:hover          { background: rgba(255,255,255,0.2); color: #fff; }
#ch-btn:active         { transform: scale(0.95); }
#ch-btn.ch-btn--active {
  background:  rgba(100,170,255,0.25);
  border-color: rgba(100,170,255,0.7);
  color:        #7ecfff;
}

/* ── Side panel ─────────────────────────────────────────────── */
#ch-panel {
  position:       fixed;
  top:            20px;    /* overridden at runtime by JS */
  left:           200px;   /* overridden at runtime by JS */
  z-index:        2100;
  background:     rgba(255,255,255,0.4);
  border:         1.5px solid #111;
  border-radius:  0;
  padding:        10px;
  width:          220px;
  box-shadow:     none;
  display:        none;
  flex-direction: column;
  gap:            8px;
  font-family:    Arial, sans-serif;
  max-height:     calc(100vh - 140px);
  overflow-y:     auto;
  backdrop-filter: blur(3px);
}
#ch-panel.ch-panel--open { display: flex; }
#ch-panel::-webkit-scrollbar { width: 3px; }
#ch-panel::-webkit-scrollbar-thumb { background: rgba(17,17,17,0.2); border-radius: 0; }

/* Flat range :active halo — custom (default) vs satellite; html[data-scene-basemap] set in syncScenePanelBasemapTheme. */
html {
  --sp-slider-focus-ring: rgba(0, 0, 0, 0.22);
}
html[data-scene-basemap="satellite"] {
  --sp-slider-focus-ring: rgba(99, 102, 241, 0.3);
}

/* ── Edit marker box (right side): pill, colors, size, label ─── */
body.mode-onair #sm-edit-marker-box {
  display: none !important;
}
/* Docked Scene panel (z-index 10000) was covering this box (was 2199). Sit in the map strip left of the panel. */
html.scene-panel-open #sm-edit-marker-box {
  right:   calc(var(--scene-panel-width) + 12px);
  z-index: 10001;
  max-width: calc(100vw - var(--scene-panel-width) - 24px);
}
.sm-edit-marker-box {
  position:       fixed;
  top:            20px;
  right:          20px;
  z-index:        2199;
  width:          288px;
  max-height:     85vh;
  overflow-y:     auto;
  padding:        10px 12px;
  background:     rgba(255,255,255,0.97);
  border:         1.5px solid #111;
  border-radius:  0;
  box-shadow:     0 4px 20px rgba(0,0,0,0.2);
  font-family:    Arial, sans-serif;
  /* Flat sliders: default to custom (B/W); satellite theme via html[data-scene-basemap] (synced in app). */
  --sp-slider-fill: #1a1a1a;
  --sp-slider-fill-mid: #0d0d0d;
  --sp-slider-rail: #e8eaef;
  --sp-slider-rail-edge: #c5ccd8;
  --sp-slider-tick: rgba(15, 23, 42, 0.08);
}
html[data-scene-basemap="satellite"] .sm-edit-marker-box {
  --sp-slider-fill: #6e76e8;
  --sp-slider-fill-mid: #5c64d4;
  --sp-slider-rail: #e8eaf2;
  --sp-slider-rail-edge: #dce0eb;
  --sp-slider-tick: rgba(30, 41, 59, 0.09);
}
.sm-edit-marker-title {
  font-size:      13px;
  font-weight:    800;
  letter-spacing: 0.02em;
  color:          #111;
  margin-bottom:  8px;
  padding-bottom: 5px;
  border-bottom:  1px solid rgba(17,17,17,0.15);
}
.sm-edit-marker-latlng {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   6px 8px;
  margin-bottom:         2px;
}
.sm-edit-latlng-cell label {
  display:       block;
  font-size:     10px;
  font-weight:   600;
  color:         #475569;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}
.sm-edit-latlng-input {
  width:         100%;
  box-sizing:    border-box;
  padding:       4px 6px;
  font-size:     12px;
  border:        1px solid #cbd5e1;
  border-radius: 4px;
}
.sm-edit-latlng-hint {
  font-size:     10px;
  color:         #64748b;
  margin:        0 0 8px 0;
  line-height:   1.35;
}
.sm-edit-marker-slider-group {
  margin:        2px 0 6px 0;
  padding:       6px 0 2px 0;
  border-top:    1px solid rgba(17, 17, 17, 0.1);
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}
.sm-edit-marker-slider-group .sm-edit-marker-row:last-child {
  margin-bottom: 0;
}
.sm-edit-marker-row--glyph-disabled label {
  opacity: 0.72;
}
.sm-edit-marker-row--glyph-disabled input[type="color"] {
  opacity:    0.55;
  cursor:     not-allowed;
}
.sm-edit-marker-row {
  display:       grid;
  grid-template-columns: 88px minmax(0, 1fr) 34px;
  align-items:   center;
  column-gap:    8px;
  margin-bottom: 5px;
}
.sm-edit-marker-row--color-only {
  grid-template-columns: 88px 36px;
}
.sm-edit-marker-row--color-only > input[type="color"] {
  grid-column: 2;
}
/* Pill BG + Text color on one row */
.sm-edit-marker-row--pill-dual {
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px !important;
  column-gap:            6px;
  align-items:           center;
}
.sm-edit-marker-row--pill-dual > input[type="color"] {
  grid-column: auto;
  width:       34px;
  height:      26px;
  padding:     0;
  flex-shrink: 0;
}
.sm-edit-marker-row--checks-inline {
  display:         flex !important;
  flex-direction:  row;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: flex-start;
  column-gap:      12px;
  row-gap:         4px;
  margin-bottom:   5px;
}
.sm-edit-check-slot {
  flex:      1 1 auto;
  min-width: 0;
}
.sm-edit-check-line {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   11px;
  font-weight: 600;
  color:       #374151;
  line-height: 1.25;
  cursor:      pointer;
  grid-column: 1 / -1;
  margin:      0;
}
.sm-edit-check-line input[type="checkbox"] {
  width:       15px;
  height:      15px;
  min-width:   15px;
  min-height:  15px;
  flex-shrink: 0;
  margin:      0;
  accent-color: #1a1a1a;
}
.sm-edit-marker-row label {
  font-size:   11px;
  color:       #374151;
  min-width:   0;
  grid-column: 1;
  line-height: 1.25;
  hyphens:     auto;
}
.sm-edit-marker-row--pill-dual > label {
  grid-column: auto;
  font-size:   10px;
  font-weight: 600;
  color:       #374151;
  line-height: 1.2;
}
.sm-edit-marker-row > input[type="color"],
.sm-edit-marker-row > input[type="range"],
.sm-edit-marker-row > input[type="text"],
.sm-edit-marker-row > textarea,
.sm-edit-marker-row > select {
  grid-column: 2;
}
.sm-edit-marker-row--pill-dual > input[type="color"] {
  grid-column: auto;
}
.sm-edit-marker-row > .sm-edit-val {
  grid-column: 3;
  text-align: right;
}
.sm-edit-marker-row--label-position-hint {
  grid-template-columns: 1fr;
}
.sm-edit-marker-row--label-position-hint .sm-edit-hint-inline {
  grid-column: 1 / -1;
}
.sm-edit-marker-row input[type="color"] {
  width:      36px;
  height:     28px;
  padding:    0;
  border:     1px solid #ccc;
  cursor:     pointer;
}
.sm-edit-marker-row input[type="range"].scene-mstyle-range {
  flex:         1;
  min-width:    0;
  width:        100%;
  max-width:    none;
  touch-action: none;
}
.sm-edit-marker-row input[type="range"]:not(.scene-mstyle-range) { flex: 1; }
.sm-edit-marker-row input[type="text"] {
  flex:       1;
  padding:    6px 8px;
  border:     1px solid #cfd6df;
  border-radius: 4px;
  font-size:  12px;
  box-sizing: border-box;
}
.sm-edit-marker-row textarea {
  flex:       1;
  grid-column: 2 / 4;
  min-height: 36px;
  padding:    5px 7px;
  border:     1px solid #cfd6df;
  border-radius: 4px;
  font-size:  11px;
  line-height: 1.25;
  box-sizing: border-box;
  resize: vertical;
}
.sm-edit-marker-row select {
  padding:    4px 6px;
  border:     1px solid #cfd6df;
  border-radius: 4px;
  font-size:  12px;
}
.sm-edit-val {
  font-size:  11px;
  color:      #4b5563;
  min-width:  34px;
}
.sm-edit-marker-row--hidden { display: none !important; }
.sm-edit-hint-inline {
  font-size:   11px;
  color:       #666;
  line-height: 1.35;
  display:     block;
}
.sm-edit-defaults-heading {
  font-size:   10px;
  font-weight:  700;
  color:       #555;
  margin:      12px 0 6px 0;
  letter-spacing: 0.04em;
}
.sm-edit-defaults-heading:first-child { margin-top: 0; }

/* ── Header ──────────────────────────────────────────────────── */
.ch-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.ch-title {
  color:          #111;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.10em;
}
.ch-close-btn {
  background:  none;
  border:      none;
  color:       rgba(17,17,17,0.45);
  font-size:   13px;
  cursor:      pointer;
  padding:     0 2px;
  line-height: 1;
}
.ch-close-btn:hover { color: #111; }

/* ── Section label ───────────────────────────────────────────── */
.ch-section-label {
  color:          #111;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom:  2px;
}

/* ── Divider ─────────────────────────────────────────────────── */
.ch-divider {
  border:     none;
  border-top: 1px solid rgba(17,17,17,0.15);
  margin:     2px 0;
}

/* ── Base map buttons ────────────────────────────────────────── */
.ch-base-row {
  display: flex;
  gap:     3px;
}
.ch-base-btn {
  flex:           1;
  padding:        5px 0;
  background:     rgba(255,255,255,0.7);
  border:         1.5px solid #111;
  border-radius:  0;
  color:          #111;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.06em;
  cursor:         pointer;
  transition:     background 0.15s, color 0.15s;
}
.ch-base-btn:hover { background: rgba(255,255,255,0.9); color: #111; }
.ch-base-btn--active {
  background:   rgba(17,17,17,0.88);
  border-color: #111;
  color:        #fff;
}

/* ── Search (countries + cities) in Build fills ─────────────── */
.ch-search-wrap { position: relative; margin-bottom: 6px; }
.ch-search-input {
  width:            100%;
  padding:          6px 8px;
  border:           1.5px solid rgba(17,17,17,0.35);
  border-radius:    0;
  font-size:        12px;
  box-sizing:       border-box;
  background:       rgba(255,255,255,0.9);
}
.ch-search-input:focus {
  outline:    none;
  border-color: #111;
}
.ch-search-suggestions {
  position:   absolute;
  left:       0;
  right:      0;
  top:        100%;
  margin-top: 2px;
  background: #fff;
  border:     1px solid #111;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  z-index:    20;
  display:     none;
  box-shadow:  0 4px 12px rgba(0,0,0,0.15);
}
.ch-search-suggestions.ch-search-suggestions--visible { display: block; }
.ch-search-suggest-item {
  padding:       6px 8px;
  font-size:     11px;
  cursor:        pointer;
  border-bottom: 1px solid rgba(17,17,17,0.08);
  display:       flex;
  align-items:   center;
  gap:           8px;
}
.ch-search-suggest-item:hover { background: rgba(17,17,17,0.06); }
.ch-search-suggest-item .ch-search-suggest-type {
  font-size:   9px;
  color:       rgba(17,17,17,0.5);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Click-to-fill toggle button ─────────────────────────────── */
.ch-tool-btn {
  display:        flex;
  align-items:    center;
  gap:            8px;
  width:          100%;
  padding:        6px 8px;
  background:     rgba(255,255,255,0.7);
  border:         1.5px solid #111;
  border-radius:  0;
  color:          #111;
  font-size:      11px;
  font-weight:    700;
  cursor:         pointer;
  text-align:     left;
  transition:     background 0.15s;
  box-sizing:     border-box;
}
.ch-tool-btn:hover    { background: rgba(255,255,255,0.9); color: #111; }
.ch-tool-btn--on {
  background:   rgba(17,17,17,0.88);
  border-color: #111;
  color:        #fff;
}
.ch-tool-dot {
  width:        10px;
  height:       10px;
  border-radius: 50%;
  flex-shrink:  0;
  box-shadow:   0 0 5px currentColor;
}

/* ── Hint text ───────────────────────────────────────────────── */
.ch-hint {
  font-size:  10px;
  color:      rgba(17,17,17,0.55);
  font-style: italic;
  padding:    2px 0;
  text-align: center;
  animation:  ch-blink 1.4s ease-in-out infinite;
}
@keyframes ch-blink {
  0%,100% { opacity:1; }
  50%      { opacity:0.45; }
}

/* ── Opacity row ─────────────────────────────────────────────── */
.ch-opacity-row {
  display:     flex;
  align-items: center;
  gap:         7px;
}
.ch-opacity-lbl {
  color:       #111;
  font-size:   10px;
  font-weight: 700;
  flex-shrink: 0;
}
.ch-opacity-slider {
  flex:          1;
  accent-color:  #111;
  cursor:        pointer;
  height:        3px;
}
.ch-opacity-val {
  color:       #111;
  font-size:   10px;
  font-weight: 600;
  min-width:   30px;
  text-align:  right;
}

/* ── Colour swatches ─────────────────────────────────────────── */
.ch-swatches {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   4px;
}
.ch-swatch {
  width:         100%;
  aspect-ratio:  1;
  border:        1.5px solid rgba(17,17,17,0.3);
  border-radius: 0;
  cursor:        pointer;
  transition:    transform 0.1s, border-color 0.1s;
}
.ch-swatch:hover        { transform: scale(1.12); border-color: #111; }
.ch-swatch--active {
  border:     2px solid #111;
  transform:  scale(1.1);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
}

/* ── Custom colour row ───────────────────────────────────────── */
.ch-custom-row {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         8px;
  cursor:      pointer;
}
.ch-custom-row span {
  color:       #111;
  font-size:   11px;
  font-weight: 700;
}
.ch-custom-row input[type="color"] {
  width:         40px;
  height:        24px;
  border:        1.5px solid #111;
  border-radius: 0;
  background:    none;
  cursor:        pointer;
  padding:       1px;
}

/* ── List header ─────────────────────────────────────────────── */
.ch-list-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
}
.ch-count {
  background:    rgba(17,17,17,0.1);
  color:         #111;
  font-size:     9px;
  font-weight:   700;
  padding:       1px 6px;
  border-radius: 0;
  min-width:     16px;
  text-align:    center;
  border:        1px solid rgba(17,17,17,0.3);
}

/* ── Filled countries list ───────────────────────────────────── */
.ch-list {
  display:       flex;
  flex-direction: column;
  gap:           3px;
  max-height:    min(42vh, 320px);
  overflow-y:    auto;
}
.ch-list::-webkit-scrollbar       { width: 2px; }
.ch-list::-webkit-scrollbar-thumb { background: rgba(17,17,17,0.2); }

.ch-list-row {
  display:     flex;
  align-items: center;
  gap:         7px;
  padding:     4px 6px;
  background:  rgba(255,255,255,0.5);
  border:      1px solid rgba(17,17,17,0.12);
  transition:  background 0.1s;
}
.ch-list-row:hover { background: rgba(255,255,255,0.85); }

.ch-list-dot {
  width:         12px;
  height:        12px;
  border-radius: 0;
  flex-shrink:   0;
  border:        1px solid rgba(17,17,17,0.3);
  cursor:        pointer;
  padding:       0;
  transition:    transform 0.1s;
  display:       inline-block;
}
.ch-list-row .ch-list-dot:hover { transform: scale(1.2); }

.ch-list-name {
  flex:          1;
  color:         #111;
  font-size:     11px;
  font-weight:   700;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.ch-list-del {
  background:  none;
  border:      none;
  color:       rgba(17,17,17,0.35);
  font-size:   12px;
  cursor:      pointer;
  padding:     0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.ch-list-del:hover { color: #cc0000; }

/* FILLS: Countries vs Cities (split lists under FILLS tab) */
.ch-fills-split {
  display:        flex;
  flex-direction: column;
  gap:            0;
  width:          100%;
}
.ch-fills-split__head {
  margin-top:     8px;
}
.ch-fills-split > .ch-fills-split__head:first-child {
  margin-top:     0;
}
.ch-list--fills-section {
  max-height:     min(28vh, 200px);
}

/* ── FILLS: per-country table (inline controls) ───────────────── */
.ch-fill-table-wrap {
  display:       flex;
  flex-direction: column;
  gap:           2px;
  width:         100%;
}
.ch-fill-table-head,
.ch-fill-table-row {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(72px, 0.9fr) 22px 22px 22px 22px;
  align-items:           center;
  gap:                   4px 3px;
  font-size:             9px;
  font-weight:           700;
  color:                 rgba(17, 17, 17, 0.75);
}
.ch-fill-table-head {
  padding:     2px 0 4px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.15);
  letter-spacing: 0.02em;
}
.ch-fill-table-row {
  padding:     4px 0;
  background:  rgba(255, 255, 255, 0.5);
  border:      1px solid rgba(17, 17, 17, 0.1);
}
.ch-fill-table-row--focused {
  outline:        2px solid #ffeb3b;
  outline-offset: -1px;
  background:     rgba(255, 235, 59, 0.12);
}
.ch-fill-th--name { text-align: left; }
.ch-fill-th--color { text-align: center; }
.ch-fill-th--opac { text-align: center; }
.ch-fill-th--tog { text-align: center; font-size: 8px; }
.ch-fill-th--del { width: 22px; }
.ch-fill-td--name {
  text-align:     left;
  padding-left:   4px;
  min-width:      0;
}
button.ch-fill-td--name {
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         #111;
  font-weight:   700;
  font-size:     10px;
  text-align:    left;
  padding:       2px 0;
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, 0.25);
}
button.ch-fill-td--name:hover {
  text-decoration-color: #111;
}
.ch-fill-td--name-plain {
  font-size:      10px;
  font-weight:    700;
  color:          #111;
  text-align:     left;
  padding-left:   4px;
  min-width:      0;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}
.ch-fill-td--color {
  display:         flex;
  justify-content: center;
  align-items:     center;
}
.ch-fill-color {
  width:  22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.35);
  cursor: pointer;
  border-radius: 0;
}
.ch-fill-td--opac {
  display:     flex;
  align-items: center;
  gap:         2px;
  min-width:   0;
}
/* FILLS opacity: same flat scene-panel range as BASEMAP sliders (.scene-panel input[type=range]) */
.ch-fill-opac {
  flex: 1;
  min-width: 0;
}
.ch-fill-opac-val {
  flex-shrink: 0;
  width:       26px;
  font-size:   8px;
  font-weight: 700;
  color:       #111;
  text-align:  right;
}
/* FILLS sliders: avoid scene-panel default --sp-fill-pct: 50% before JS syncs (false “half bar”) */
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac {
  --sp-fill-pct: 0%;
}
.ch-fill-td--tog {
  display:         flex;
  justify-content: center;
  align-items:     center;
}
.ch-fill-toggle {
  display:     flex;
  align-items: center;
  justify-content: center;
  margin:      0;
  cursor:      pointer;
}
.ch-fill-toggle input[type="checkbox"] {
  width:  14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: #1976d2;
}
.ch-fill-toggle--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ch-fill-td--del {
  display:         flex;
  justify-content: center;
}

/* ── Clear all ───────────────────────────────────────────────── */
.ch-clear-btn {
  width:          100%;
  padding:        5px 0;
  background:     rgba(255,255,255,0.7);
  border:         1.5px solid #111;
  border-radius:  0;
  color:          #111;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.06em;
  cursor:         pointer;
  transition:     background 0.15s;
}
.ch-clear-btn:hover {
  background:  rgba(17,17,17,0.88);
  color:       #fff;
  border-color: #111;
}

/* ── Story Preset buttons (inside #ch-panel) ─────────────────── */
.ch-presets {
  display:       flex;
  flex-direction: column;
  gap:           3px;
}
.ch-no-presets {
  color:      rgba(17,17,17,0.38);
  font-size:  10px;
  font-style: italic;
  padding:    4px 0;
}
.ch-preset-btn {
  display:        flex;
  align-items:    center;
  gap:            8px;
  width:          100%;
  padding:        6px 8px;
  background:     rgba(255,255,255,0.7);
  border:         1.5px solid #111;
  border-radius:  0;
  color:          #111;
  font-size:      11px;
  font-weight:    700;
  cursor:         pointer;
  text-align:     left;
  transition:     background 0.14s;
  letter-spacing: 0.02em;
  box-sizing:     border-box;
}
.ch-preset-btn:hover {
  background:   rgba(255,255,255,0.9);
  color:        #111;
}
.ch-preset-btn--active {
  background:   rgba(17,17,17,0.88);
  border-color: #111;
  color:        #fff;
}
.ch-preset-dots {
  display: flex;
  gap:     3px;
  flex-shrink: 0;
}
.ch-preset-dot {
  display:       inline-block;
  width:         9px;
  height:        9px;
  border-radius: 2px;
  flex-shrink:   0;
  box-shadow:    0 1px 3px rgba(0,0,0,0.4);
}
.ch-preset-name {
  flex: 1;
}
.ch-preset-count {
  font-size:   9px;
  color:       rgba(255,255,255,0.3);
  background:  rgba(255,255,255,0.07);
  border-radius: 8px;
  padding:     1px 5px;
  flex-shrink: 0;
}

.media-buttons button {
  background: linear-gradient(145deg, #333, #555);
  border: 1px solid #00a8ff;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Al Jazeera', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Remove hover effects for touch interface */
.media-buttons button:active {
  background: linear-gradient(145deg, #00a8ff, #0088cc);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 168, 255, 0.4);
}

#mediaCanvas {
  border: 2px solid #00a8ff;
  border-radius: 8px;
  background: #000;
  display: block;
  margin: 0 auto;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .media-controls {
    top: 10px;
    right: 10px;
    left: 10px;
    padding: 15px;
  }
  
  #mediaCanvas {
    width: 100%;
    height: auto;
  }
}

/* ===== UTILITY CLASSES ===== */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== ANIMATED OBJECTS ===== */
.animated-object {
  font-size: 24px !important;
  text-align: center !important;
  line-height: 32px !important;
  transform-origin: center center !important;
  transition: none !important;
  z-index: 1000 !important;
  position: relative !important;
}

.animated-object div {
  position: relative !important;
  transform-origin: center center !important;
}

.animated-icon-wrapper {
  width: 30px !important;
  height: 30px !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: white !important;
  border: 1px solid #000 !important;
  border-radius: 50% !important;
  position: relative !important;
  transform-origin: center center !important;
  left: 0 !important;
  top: 0 !important;
}

.rocket-icon {
  filter: drop-shadow(2px 2px 4px rgba(255,0,0,0.5));
}

.tank-icon {
  filter: drop-shadow(2px 2px 4px rgba(0,100,0,0.5));
}

.plane-icon {
  filter: drop-shadow(2px 2px 4px rgba(0,0,255,0.5));
}

.animation-path {
  pointer-events: none;
}

/* ===== CUSTOM FULLSCREEN BUTTON ===== */
#custom-fullscreen-btn,
.custom-fullscreen-button {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 22px;
  cursor: pointer;
  z-index: 2000;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#custom-fullscreen-btn:active,
.custom-fullscreen-button:active {
  transform: scale(0.95);
}

.fullscreen-icon {
  pointer-events: none;
}

/* Scene Panel button - always visible, opens combined tabbed panel */
.scene-panel-btn {
  position:    fixed;
  top:        20px;
  right:      20px;
  z-index:    9997;
  display:    flex;
  align-items: center;
  gap:        6px;
  padding:    10px 14px;
  background: rgba(0, 180, 120, 0.9);
  border:     1px solid #00b078;
  color:      #fff;
  font-size:  13px;
  font-weight: 700;
  cursor:     pointer;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.scene-panel-btn:hover {
  background: rgba(0, 200, 140, 0.95);
  border-color: #00d090;
}
.scene-panel-btn-icon { font-size: 16px; }
.scene-panel-btn-label { letter-spacing: 0.04em; }

/* Cleaned up - old Leaflet fullscreen control CSS removed (unused) */

/* ===== COMBINED SCENE PANEL — Light, clean UI ===== */
.scene-panel {
  position:      fixed;
  z-index:       10000;
  width:         680px;
  min-width:     460px;
  max-width:     calc(100vw - 80px);
  min-height:    220px;
  max-height:    62vh;
  max-height:    min(62vh, 640px);
  background:    #f8fafc;
  border:        1px solid #e2e8f0;
  border-radius: 12px;
  font-family:   'Segoe UI', system-ui, -apple-system, sans-serif;
  box-sizing:    border-box;
  display:       none;
  flex-direction: column;
  overflow:       hidden;
  box-shadow:    0 10px 40px rgba(0,0,0,0.12);
  /* Glossy “aurora” accents (tabs, toggles, sliders) — see block at end of file */
  --sp-accent: #c026d3;
  --sp-accent-mid: #a855f7;
  --sp-accent-cool: #06b6d4;
  --sp-accent-hot: #f472b6;
  --sp-gloss-top: rgba(255, 255, 255, 0.55);
  --sp-gloss-mid: rgba(255, 255, 255, 0.12);
  --sp-glow: 0 4px 18px rgba(168, 85, 247, 0.42);
  --sp-glow-cyan: 0 0 16px rgba(6, 182, 212, 0.35);
  /* Single-color sliders: calm rail + one accent */
  --sp-slider-fill: #6e76e8;
  --sp-slider-fill-mid: #5c64d4;
  --sp-slider-rail: #e8eaf2;
  --sp-slider-rail-edge: #dce0eb;
  --sp-slider-tick: rgba(30, 41, 59, 0.09);
}
.scene-panel.scene-panel--open { display: flex; }

/* Docked to viewport right, full height — no floating / drag */
html.scene-panel-open .scene-panel.scene-panel--open {
  top:           0 !important;
  right:         0 !important;
  bottom:        0 !important;
  left:          auto !important;
  width:         var(--scene-panel-width) !important;
  min-width:     0 !important;
  max-width:     var(--scene-panel-width) !important;
  height:        100vh !important;
  height:        100dvh !important;
  max-height:    none !important;
  min-height:    0 !important;
  border-radius: 0;
  border-right:  none;
  border-top:    none;
  border-bottom: none;
  box-shadow:    -6px 0 28px rgba(15, 23, 42, 0.14);
}
html.scene-panel-open .scene-panel-header {
  cursor:        default;
  touch-action:  manipulation;
}
html.scene-panel-open .scene-panel.scene-panel--dragging {
  box-shadow:    -6px 0 28px rgba(15, 23, 42, 0.14);
}

.scene-panel.scene-panel--dragging {
  box-shadow:    0 16px 48px rgba(0,0,0,0.22);
  user-select:   none;
}

.scene-panel-header {
  display:         flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          16px 20px;
  background:       #fff;
  position:         relative;
  z-index:          10;
  color:            #1e293b;
  flex-shrink:      0;
  border-bottom:    1px solid #e2e8f0;
  cursor:           grab;
  touch-action:     none;
}
.scene-panel--dragging .scene-panel-header {
  cursor:           grabbing;
}
html.scene-panel-open .scene-panel--dragging .scene-panel-header {
  cursor:           default;
}
.scene-panel-header .scene-panel-close {
  cursor:           pointer;
  touch-action:     manipulation;
}
.scene-panel-header-titles {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             4px;
  min-width:       0;
  flex:            1;
}
.scene-panel-preset-chip {
  font-size:       11px;
  font-weight:     600;
  color:             #1d4ed8;
  background:      #eff6ff;
  border:          1px solid #bfdbfe;
  padding:         3px 10px;
  border-radius:   6px;
  max-width:       100%;
  overflow:        hidden;
  text-overflow:   ellipsis;
  white-space:     nowrap;
}
.scene-panel-preset-chip[hidden] {
  display:         none !important;
}
#scene-panel-preset-chip {
  display: inline-flex;
  align-items: center;
}
.scene-story-scene-selectors {
  display: flex;
  gap: 6px;
  width: 100%;
}
.scene-story-scene-select {
  flex: 1 1 0;
  min-width: 0;
  height: 26px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
}
.scene-panel-auth-actions {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  margin-right:    10px;
  flex-shrink:     0;
}
.scene-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  min-width: 68px;
  padding: 0 12px;
  margin-right: 8px;
  border-radius: 999px;
  border: 1px solid #9ec5ff;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.scene-lang-toggle:hover {
  background: linear-gradient(180deg, #f4f9ff 0%, #e8f1ff 100%);
  border-color: #86b6ff;
  color: #1e40af;
}
.scene-map-ar-only-toggle {
  min-width: 108px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #9ec5ff;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.scene-map-ar-only-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 12px;
}
.scene-map-ar-only-toggle__text {
  display: inline-block;
  font-weight: 800;
}
.scene-map-ar-only-toggle.scene-map-ar-only-toggle--active {
  background: linear-gradient(180deg, #1f57e7 0%, #1748c7 100%);
  border-color: #1748c7;
  color: #ffffff;
}
.scene-lang-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}
.touch-lang-ar .scene-panel {
  direction: rtl;
  font-family: 'Al Jazeera Arabic Regular', 'Al Jazeera Arabic', 'Al Jazeera', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
.touch-lang-ar .scene-panel input,
.touch-lang-ar .scene-panel textarea {
  direction: rtl;
  font-family: 'Al Jazeera Arabic Regular', 'Al Jazeera Arabic', 'Al Jazeera', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
/* Keep all range sliders consistent in Arabic (avoid reversed drag/value direction). */
.touch-lang-ar input[type="range"] {
  direction: ltr;
}
.touch-lang-ar .scene-panel .scene-panel-header {
  direction: rtl;
}
.touch-lang-ar .scene-panel-auth-actions {
  margin-right: 0;
  margin-left: 8px;
}
/* Arabic map labels: prefer Al Jazeera Arabic Regular. */
.touch-lang-ar .touch-country-label-pill,
.touch-lang-ar .city-name,
.touch-lang-ar .touch-sea-label,
.touch-lang-ar .touch-custom-label-pill {
  font-family: 'Al Jazeera Arabic Regular', 'Al Jazeera Arabic', 'Al Jazeera', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}
.scene-user-chip {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  max-width:       220px;
  height:          30px;
  padding:         0 10px;
  border-radius:   8px;
  border:          1px solid #dbeafe;
  background:      #eff6ff;
  color:           #1e40af;
  font-size:       12px;
  font-weight:     600;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  cursor:          pointer;
}
.scene-user-chip:hover {
  background:      #dbeafe;
  border-color:    #bfdbfe;
}
.scene-user-chip-menu {
  position:        fixed;
  z-index:         20020;
  min-width:       180px;
  border:          1px solid #dbe3ed;
  border-radius:   10px;
  background:      #ffffff;
  box-shadow:      0 12px 28px rgba(15, 23, 42, 0.24);
  padding:         6px;
}
.scene-user-chip-menu-btn {
  width:           100%;
  display:         block;
  border:          0;
  border-radius:   8px;
  background:      transparent;
  color:           #1e293b;
  text-align:      left;
  font-size:       12px;
  font-weight:     600;
  padding:         8px 10px;
  cursor:          pointer;
}
.scene-user-chip-menu-btn:hover {
  background:      #eff6ff;
  color:           #1e40af;
}
.scene-user-chip[hidden] {
  display:         none !important;
}
.scene-panel-auth-actions[hidden] {
  display:         none !important;
}
.scene-panel-auth-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       68px;
  height:          30px;
  padding:         0 10px;
  border-radius:   8px;
  border:          1px solid #dbe3ed;
  background:      #f8fbff;
  color:           #1d4ed8;
  font-size:       12px;
  font-weight:     700;
  text-decoration: none;
  cursor:          pointer;
  touch-action:    manipulation;
  line-height:     1;
}
.scene-panel-auth-btn:hover {
  background:      #eef4ff;
  border-color:    #bfdbfe;
  color:           #1e40af;
}
.scene-panel-title {
  font-size:       16px;
  font-weight:     600;
  letter-spacing:  0.02em;
  display:         flex;
  align-items:     center;
  gap:             10px;
}
.scene-panel-title::before {
  content:      '';
  width:        4px;
  height:       18px;
  background:   #3b82f6;
  border-radius: 2px;
}
.scene-panel-close {
  width:         32px;
  height:        32px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  cursor:        pointer;
  font-size:     16px;
  color:         #64748b;
  padding:       0;
  line-height:   1;
  transition:    background 0.15s, color 0.15s, border-color 0.15s;
}
.scene-panel-close:hover {
  background:    #e2e8f0;
  color:         #334155;
  border-color:  #cbd5e1;
}

.scene-panel-tabs {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  padding:       8px 12px;
  background:     #fff;
  border-bottom:  1px solid #e2e8f0;
  flex-shrink:   0;
  min-height:    0;
}
.scene-tab {
  flex:          1 1 auto;
  min-width:     0;
  padding:       9px 16px;
  font-size:     12px;
  font-weight:   600;
  letter-spacing: 0.04em;
  color:         #64748b;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 6px;
  cursor:        pointer;
  transition:    all 0.2s ease;
}
.scene-tab:hover {
  color:         #334155;
  background:    #e2e8f0;
  border-color:  #cbd5e1;
}
.scene-tab.scene-tab--active {
  color:         #fff;
  background:    #3b82f6;
  border-color:  #2563eb;
  box-shadow:    0 1px 2px rgba(0,0,0,0.06);
}

/* Story Manager tab */
.scene-story-bundle-hint {
  margin: 0 0 12px;
}
.scene-story-bundle-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.scene-story-bundle-import-lbl {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scene-story-bundle-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.scene-story-bundle-search-wrap {
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scene-story-bundle-search-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.scene-story-bundle-search {
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
}
.scene-story-bundle-search::placeholder {
  color: #94a3b8;
}
.scene-story-bundle-search:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.scene-story-bundle-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scene-story-bundle-empty {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}
.scene-story-bundle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 8px;
  padding: 7px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  transition: opacity 140ms ease, filter 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.scene-story-bundle-row--active {
  opacity: 1;
  filter: none;
  background: #f8fbff;
  border-color: #93c5fd;
  box-shadow: inset 0 0 0 1px #bfdbfe, 0 1px 0 rgba(15, 23, 42, 0.03);
}
.scene-story-bundle-row--inactive {
  opacity: 0.72;
  filter: saturate(0.72);
}
.scene-story-bundle-row--inactive:hover {
  opacity: 0.9;
  filter: saturate(0.9);
}
.scene-story-bundle-row__main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.scene-story-tree-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.scene-story-tree-toggle {
  width: 22px;
  height: 22px;
  border: 1px solid #dbe3ee;
  border-radius: 5px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
}
.scene-story-tree-toggle:hover {
  background: #f1f5f9;
}
.scene-story-tree-toggle-caret {
  font-size: 11px;
  line-height: 1;
}
.scene-story-bundle-row__name {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-story-bundle-row__meta {
  font-size: 10px;
  color: #64748b;
  margin-top: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}
.scene-story-bundle-row__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  flex-shrink: 0;
  justify-content: flex-end;
}
.scene-story-tree-wrap {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
}
.scene-story-tree-scenes {
  list-style: none;
  margin: 8px 0 4px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}
.scene-story-tree-scene {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #334155;
  justify-content: space-between;
  padding: 4px 8px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
}
.scene-story-tree-scene-main {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1 1 auto;
}
.scene-story-tree-scene:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.scene-story-tree-scene--active {
  border-color: #60a5fa;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px #93c5fd;
}
.scene-story-tree-scene--active .scene-story-tree-scene-name {
  color: #0f3b8a;
  font-weight: 700;
}
.scene-story-tree-scene[draggable="true"] {
  cursor: default;
}
.scene-story-tree-scene[draggable="true"].is-dragging {
  opacity: 0.92;
  cursor: default;
  border-style: dashed;
  border-color: #60a5fa;
  background: #eff6ff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  transform: scale(1.01);
  z-index: 2;
  position: relative;
}
.scene-story-tree-scene--placeholder {
  opacity: 0.35 !important;
  border-style: dashed;
  border-color: #93c5fd;
  background: #f8fbff;
}
.scene-story-tree-scene--drag-ghost {
  position: fixed !important;
  margin: 0 !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  opacity: 0.98;
  border: 1px solid #60a5fa;
  background: #eff6ff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.28);
  transform: scale(1.01);
}
.scene-story-tree-scene {
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.scene-story-tree-scene--drop-before,
.scene-story-tree-scene--drop-after {
  position: relative;
}
.scene-story-tree-scene--drop-before::before,
.scene-story-tree-scene--drop-after::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 0;
  border-top: 2px solid #3b82f6;
  pointer-events: none;
}
.scene-story-tree-scene--drop-before::before {
  top: -3px;
}
.scene-story-tree-scene--drop-after::after {
  bottom: -3px;
}
.scene-story-tree-drag-handle {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe3ee;
  border-radius: 5px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
.scene-story-tree-drag-handle:hover {
  background: #eef2f7;
  border-color: #cbd5e1;
}
.scene-story-tree-drag-handle:active {
  cursor: grabbing;
}
.scene-story-tree-drag-handle--disabled {
  opacity: 0.35;
  cursor: default;
}
.scene-story-tree-scene-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-story-tree-scene-name-edit {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 5px;
  border: 1px solid #93c5fd;
  background: #fff;
  color: #0f172a;
}
.scene-story-tree-scene-open {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
}
.scene-story-tree-scene-open:hover .scene-story-tree-scene-name {
  text-decoration: underline;
}
.scene-story-tree-scene-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  flex: 0 0 auto;
}
.scene-story-tree-scene-home {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.scene-story-tree-scene-btn {
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  cursor: pointer;
}
.scene-story-tree-scene-btn--primary {
  background: #3b82f6;
  border-color: #2563eb;
  color: #fff;
}
.scene-story-tree-scene-btn--danger {
  border-color: #fecaca;
  color: #b91c1c;
}
.scene-story-tree-scene-btn--eye {
  min-width: 24px;
  padding: 2px 4px;
}
.scene-story-tree-scene-eye-left {
  margin-right: 4px;
  flex: 0 0 auto;
}
.scene-story-tree-scene-btn--eye.is-on {
  border-color: #93c5fd;
  background: #dbeafe;
  color: #1d4ed8;
}
.scene-story-tree-delete-confirm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.scene-story-tree-scene-slot-select {
  height: 22px;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.scene-story-tree-loading,
.scene-story-tree-empty {
  margin: 8px 0 4px 0;
  font-size: 11px;
  color: #64748b;
}
.scene-story-bundle-btn {
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  cursor: pointer;
}
.scene-story-bundle-btn:hover {
  background: #f1f5f9;
}
.scene-story-bundle-btn--primary {
  background: #3b82f6;
  border-color: #2563eb;
  color: #fff;
}
.scene-story-bundle-btn--primary:hover {
  background: #2563eb;
}
.scene-story-bundle-btn:disabled,
.scene-story-bundle-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: saturate(0.5);
}
.scene-story-bundle-btn--primary:disabled,
.scene-story-bundle-btn--primary[disabled] {
  background: #93c5fd;
  border-color: #93c5fd;
  color: #ffffff;
}
.scene-story-bundle-btn--danger {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fff;
}
.scene-story-bundle-btn--danger:hover {
  background: #fef2f2;
}
.scene-story-bundle-btn--muted {
  display: inline-block;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
}
.scene-story-active-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
}
.scene-story-active-toggle__track {
  width: 48px;
  height: 28px;
  position: relative;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #e2e8f0;
  display: inline-block;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.scene-story-active-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translate(0, -50%);
  transition: left 0.22s cubic-bezier(0.36, 0.66, 0.04, 1), transform 0.22s cubic-bezier(0.36, 0.66, 0.04, 1);
}
.scene-story-active-toggle--on {
  cursor: pointer;
}
.scene-story-active-toggle--on .scene-story-active-toggle__track {
  background: #34c759;
  border-color: #2fb44f;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
}
.scene-story-active-toggle--on .scene-story-active-toggle__thumb {
  left: calc(100% - 2px);
  transform: translate(-100%, -50%);
}
.scene-story-active-toggle--off .scene-story-active-toggle__track {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
.scene-story-active-toggle--off .scene-story-active-toggle__thumb {
  left: 2px;
  transform: translate(0, -50%);
}
.scene-story-active-toggle:hover .scene-story-active-toggle__track {
  filter: brightness(0.98);
}
.scene-story-active-toggle:focus-visible .scene-story-active-toggle__track {
  outline: 2px solid #1f2937;
  outline-offset: 2px;
}

/* Story composer modal (Home + P1–P12 from full preset library) */
#sbc-compose-overlay {
  z-index: 100000 !important;
}
#sbc-compose-modal {
  z-index: 100001 !important;
}
.sbc-compose-title {
  margin-bottom: 6px;
}
.sbc-compose-hint {
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  margin: 0 0 12px;
}
.sbc-compose-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  margin-top: 10px;
  margin-bottom: 4px;
}
.sbc-compose-toolbar {
  margin: 8px 0 4px;
}
.sbc-compose-slots-head {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  margin: 14px 0 8px;
}
.sbc-compose-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
@media (max-width: 520px) {
  .sbc-compose-slots {
    grid-template-columns: 1fr;
  }
}
.sbc-compose-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sbc-compose-slot-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sbc-compose-select {
  width: 100%;
  max-width: 100%;
}
.sbc-compose-err {
  font-size: 12px;
  color: #b91c1c;
  margin: 10px 0 0;
}
.sbc-compose-actions {
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.sbc-compose-actions .sm-save-btn--ok {
  margin-left: 0;
}

/* Preset promote: name conflict (overwrite vs rename) */
#pm-preset-name-conflict-overlay {
  z-index: 100100 !important;
}
#pm-preset-name-conflict-modal {
  z-index: 100101 !important;
  max-width: min(400px, 94vw);
}
.pm-preset-conflict-msg {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
}
.pm-preset-conflict-msg strong {
  font-weight: 600;
  color: #0f172a;
}
.pm-preset-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.pm-preset-conflict-rename {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.pm-preset-conflict-rename label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

.scene-panel-content {
  flex:          1 1 auto;
  overflow-y:    auto;
  overflow-x:    hidden;
  min-height:    0;
  max-height:    100%;
  display:       flex;
  flex-direction: column;
  background:     #fff;
  -webkit-overflow-scrolling: touch;
}

/* Touchscreens: faster taps (no double-tap zoom wait), less flash on iOS; ranges get clean horizontal drags */
.scene-panel .scene-tab,
.scene-panel .scene-base-btn,
.scene-panel .scene-next-btn,
.scene-panel .scene-panel-close,
.scene-panel .scene-subtab,
.scene-panel .scene-maker-save-btn,
.scene-panel .lcp-reset-btn,
.scene-panel .lcp-tbl-toggle,
.scene-panel .lcp-regions-toggle,
.scene-panel .ch-base-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(15, 23, 42, 0.06);
}
.scene-panel input[type="range"] {
  touch-action: none;
}
.scene-panel input[type="color"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.scene-tab-pane {
  display:       none;
  flex:          1 1 auto;
  min-height:    0;
  overflow-y:    visible;
  padding:       20px;
  padding-bottom: 24px;
  background:     #fff;
}
.scene-tab-pane.scene-tab-pane--active {
  display:       block;
}

/* SCENE MAKER sub-tabs — equal-width thirds (FILLS / MARKERS / PRESETS) */
.scene-maker-subtabs {
  display:         flex;
  flex-wrap:       nowrap;
  width:           100%;
  box-sizing:      border-box;
  gap:             4px;
  margin-bottom:   12px;
}
.scene-maker-subtabs .scene-subtab {
  flex:            1 1 0;
  min-width:       0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         10px 6px;
  font-size:       11px;
  font-weight:     600;
  letter-spacing:  0.05em;
}
.scene-story-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.scene-story-edit-head__title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.scene-story-edit-head__close {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 8px;
  cursor: pointer;
}
.scene-panel #scene-tab-scenemaker .scene-maker-subtabs .scene-subtab[data-subtab="presets"],
.scene-panel #scene-tab-scenemaker .scene-maker-subtabs .scene-subtab[data-subtab="export"] {
  display: none !important;
}
.scene-panel--story-scene-edit .scene-maker-subtabs .scene-subtab[data-subtab="presets"],
.scene-panel--story-scene-edit .scene-maker-subtabs .scene-subtab[data-subtab="export"],
.scene-panel--story-scene-edit #scene-subpane-presets,
.scene-panel--story-scene-edit #scene-subpane-export,
.scene-panel--story-scene-edit #scene-preset-pick-wrap,
.scene-panel--story-scene-edit #scene-active-preset-status {
  display: none !important;
}
.scene-subtab {
  color:         #475569;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 6px;
  cursor:        pointer;
}
.scene-subtab:hover {
  background:    #e2e8f0;
  color:         #334155;
}
.scene-subtab.scene-subtab--active {
  background:    #3b82f6;
  color:         #fff;
  border-color:  #3b82f6;
}
/* Quick save on FILLS / MARKERS / PRESETS (same actions as Presets tab) */
.scene-maker-save-bar {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             8px 12px;
  margin:          0 0 12px 0;
  padding:         8px 10px;
  background:      #f8fafc;
  border:          1px solid #e2e8f0;
  border-radius:   8px;
  box-sizing:      border-box;
}
.scene-maker-save-bar-left {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             4px;
  flex:            1 1 auto;
  min-width:       0;
}
.scene-maker-save-bar-caption {
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.06em;
  color:           #64748b;
}
.scene-maker-save-feedback {
  font-size:       12px;
  font-weight:     700;
  color:           #15803d;
  min-height:      1.2em;
  line-height:     1.3;
}
.scene-maker-dirty-state {
  font-size:       11px;
  font-weight:     700;
  color:           #64748b;
  min-height:      1.2em;
  line-height:     1.2;
}
.scene-maker-dirty-state.scene-maker-dirty-state--dirty {
  color:           #b45309;
}
.scene-maker-save-feedback.scene-maker-save-feedback--warn {
  color:           #b45309;
}
.scene-maker-save-bar-btns {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  gap:             8px;
}
.scene-maker-save-btn {
  padding:         6px 12px;
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  0.04em;
  cursor:          pointer;
  border-radius:   6px;
  border:          1px solid #cbd5e1;
  background:      #fff;
  color:           #334155;
}
.scene-maker-save-btn:hover:not(:disabled) {
  background:      #f1f5f9;
  border-color:    #94a3b8;
}
.scene-maker-save-btn:disabled {
  opacity:         0.45;
  cursor:          not-allowed;
}
.scene-maker-save-btn--primary {
  background:      #1e293b;
  color:           #fff;
  border-color:    #1e293b;
}
.scene-maker-save-btn--primary:hover:not(:disabled) {
  background:      #334155;
  border-color:    #334155;
}
.scene-maker-save-btn--muted,
.scene-maker-save-btn--primary:disabled {
  opacity:         0.5;
  cursor:          not-allowed;
}
.scene-maker-save-btn--danger {
  color:           #b91c1c;
  background:      #fef2f2;
  border-color:    #fecaca;
}
.scene-maker-save-btn--danger:hover:not(:disabled) {
  background:      #fee2e2;
  border-color:    #fca5a5;
  color:           #991b1b;
}
.scene-maker-subpanes {
  flex:          1;
  min-height:    0;
  overflow-y:    auto;
}
.scene-subpane {
  display:       none;
}
.scene-subpane.scene-subpane--active {
  display:       block;
}

/* Tab 1 Map Style: basemap buttons + grayscale on one line */
.scene-map-style-row {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           12px 16px;
  margin-bottom: 12px;
}
/* DEFAULT BASEMAP title + language pills on one row */
.scene-default-basemap-head {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  justify-content: space-between;
  gap:           10px 12px;
  margin-top:    8px;
}
.scene-default-basemap-head__title,
.scene-default-basemap-head #scene-default-basemap-title {
  margin-top:    0;
  margin-bottom: 0;
  flex:          1 1 auto;
  min-width:     0;
}
.scene-basemap-inline-toggles {
  display:       inline-flex;
  flex-wrap:     nowrap;
  align-items:   center;
  gap:           8px;
  flex-shrink:   0;
}
.scene-basemap-inline-toggles .scene-lang-toggle,
.scene-basemap-inline-toggles .scene-map-ar-only-toggle {
  margin-right:  0;
}
.touch-lang-ar .scene-basemap-inline-toggles .scene-lang-toggle,
.touch-lang-ar .scene-basemap-inline-toggles .scene-map-ar-only-toggle {
  margin-left:   0;
}
.scene-basemap-inline-toggles--head {
  margin-left:   0;
  margin-right:  0;
}
.scene-map-style-row .scene-basemap-row {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 0;
}
.scene-grayscale-inline {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  font-size:     14px;
  color:         #334155;
  margin:        0;
}
.scene-grayscale-inline input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.scene-basemap-row {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 8px;
}
.scene-base-btn {
  padding:       12px 22px;
  font-size:     13px;
  font-weight:   600;
  color:         #475569;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  cursor:        pointer;
  transition:    all 0.2s ease;
}
.scene-base-btn:hover {
  color:         #334155;
  background:    #e2e8f0;
  border-color:  #cbd5e1;
}
.scene-base-btn.scene-base-btn--active {
  color:         #fff;
  background:    #3b82f6;
  border-color:  #2563eb;
}
/* Sea / Land tint rows: single line each */
#scene-tab-basemap .scene-tint-row {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           8px 12px;
  padding:       6px 0;
  font-size:     14px;
  color:         #334155;
}
/* Aligned label | track | value so both rows share the same slider start line */
#scene-tab-basemap .scene-grayscale-strength-row,
#scene-tab-basemap .scene-map-brightness-row {
  display:               grid;
  /* Third column sizes to value (e.g. "2400 ms"); was 2.75rem and forced wrap past 999 ms */
  grid-template-columns: 13.5rem minmax(0, 1fr) max-content;
  align-items:           center;
  column-gap:            12px;
  row-gap:               0;
  padding:               2px 0 8px 0;
  font-size:             14px;
  color:                 #334155;
}
#scene-tab-basemap .scene-grayscale-strength-row input[type="range"],
#scene-tab-basemap .scene-map-brightness-row input[type="range"] {
  min-width:  0;
  width:      100%;
  max-width:  none;
}
/* Fade out/in can reach 5000 ms — cap track width so the value column keeps “1234 ms” on one line */
#scene-tab-basemap .scene-grayscale-strength-row--fade-ms input[type="range"] {
  max-width:    10.5rem;
  justify-self: start;
}
/* Separator above ruler color — visually breaks it from CUSTOM LABELS + Add label */
#scene-tab-basemap .scene-basemap-extended__inner .scene-divider--after-custom-labels {
  margin-top: 22px;
  margin-bottom: 14px;
  border-top: 1px solid #cbd5e1;
}
#scene-tab-basemap .scene-grayscale-strength-row--ruler-color {
  grid-template-columns: 13.5rem 1fr;
  margin-top: 0;
}
#scene-tab-basemap .scene-grayscale-strength-row--ruler-color input[type="color"] {
  justify-self: end;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
}
#scene-tab-basemap .scene-preset-markers-parallel-row {
  margin:  -2px 0 6px 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #334155;
}
#scene-tab-basemap .scene-grayscale-strength-row .scene-tint-lbl,
#scene-tab-basemap .scene-map-brightness-row .scene-tint-lbl {
  min-width:     0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
#scene-tab-basemap .scene-grayscale-strength-row .scene-tint-val,
#scene-tab-basemap .scene-map-brightness-row .scene-tint-val {
  justify-self: end;
  text-align:   right;
  white-space:  nowrap;
  min-width:    max-content;
}
#scene-tab-basemap .scene-tint-row input[type="color"] { width: 28px; height: 24px; border-radius: 5px; cursor: pointer; flex-shrink: 0; }
#scene-tab-basemap .scene-tint-row input[type="range"] { flex: 1; min-width: 70px; max-width: 100px; }
#scene-tab-basemap .scene-tint-val { font-variant-numeric: tabular-nums; font-size: 12px; }
.scene-grayscale-note {
  margin: 0 0 6px 0;
  font-size: 11px;
  color: #64748b;
}
.scene-grayscale-inline input[type="checkbox"]:disabled,
#scene-tab-basemap .scene-grayscale-strength-row input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: 1;
}
.scene-brightness-note {
  margin-top: -4px;
}

/* Tab 1: Start from (new / edit existing) */
.scene-divider {
  height:         0;
  border:         none;
  border-top:     1px solid #e2e8f0;
  margin:         14px 0;
}
.scene-start-row {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  10px;
}
.scene-start-row {
  display: none;
}
.scene-start-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.scene-radio-row {
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-size:     13px;
  color:         #334155;
  cursor:        pointer;
  margin:        0;
}
.scene-radio-row input[type="radio"] { width: 16px; height: 16px; cursor: pointer; }
.scene-preset-pick-wrap {
  margin-bottom:  12px;
}
.scene-preset-pick-label {
  display:        block;
  font-size:     12px;
  color:         #64748b;
  margin-bottom: 4px;
}
.scene-preset-select {
  width:          100%;
  max-width:      240px;
  padding:        8px 10px;
  font-size:     13px;
  border:         1px solid #e2e8f0;
  border-radius:  6px;
  background:     #fff;
  color:         #334155;
  cursor:         pointer;
}
.scene-preset-pick-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.scene-apply-preset-btn {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.scene-apply-preset-btn:hover {
  background: #f1f5f9;
}
.scene-transition-effect-btn--active {
  background: #1e293b;
  border-color: #1e293b;
  color: #ffffff;
}
.scene-transition-effect-btn--active:hover {
  background: #334155;
  border-color: #334155;
}
.scene-panel .scene-transition-effect-btn.scene-transition-effect-btn--active {
  background: #1e293b !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.18) inset;
}
.scene-next-row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scene-next-btn {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.scene-next-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.scene-next-row--primary {
  margin-top: 12px;
  margin-bottom: 2px;
}
.scene-next-btn--primary {
  flex: 1 1 auto;
  min-height: 44px;
  font-size: 13px;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #fff !important;
  border-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.scene-next-btn--primary:hover {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #1e40af;
  color: #fff !important;
}
.scene-tab-hint--top { margin-top: 4px; margin-bottom: 10px; }
.scene-tab-hint--inline { margin-top: 2px; margin-bottom: 8px; }
.scene-tab-hint--global {
  padding: 8px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1e40af;
  margin-bottom: 12px;
}

/* Custom labels (Basemap tab) */
.scene-custom-labels-list {
  margin-bottom: 10px;
  max-height: 180px;
  overflow-y: auto;
}
.scene-custom-label-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
}
.scene-custom-label-item-text { flex: 1; min-width: 0; font-weight: 500; color: #334155; }
.scene-custom-label-item-text {
  white-space: pre-line;
  text-align: center;
}
.scene-custom-label-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.scene-custom-label-item-actions button {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.scene-custom-label-item-actions button:hover { background: #f1f5f9; }
.scene-add-custom-label-btn {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #1e293b;
  color: #fff;
  cursor: pointer;
  margin-bottom: 12px;
}
.scene-add-custom-label-btn:hover { background: #334155; }
.scene-custom-label-form-wrap {
  position: fixed;
  z-index: 10000;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-custom-label-form {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  min-width: 280px;
}
.scene-custom-label-form-row {
  margin-bottom: 12px;
}
.scene-custom-label-form-row label { display: block; font-size: 11px; font-weight: 600; color: #475569; margin-bottom: 4px; }
.scene-custom-label-form-row input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
}
.scene-custom-label-form-row textarea {
  width: 100%;
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.25;
  box-sizing: border-box;
  resize: vertical;
}
.scene-custom-label-form-row input + .scene-btn-pick { margin-left: 8px; margin-top: 4px; }
.scene-btn-pick {
  padding: 6px 12px;
  font-size: 11px;
  border: 1px solid #64748b;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
}
.scene-btn-pick:hover { background: #e2e8f0; }
.scene-custom-label-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
.scene-custom-label-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}
.scene-custom-label-btn--cancel { border: 1px solid #cbd5e1; background: #fff; color: #475569; }
.scene-custom-label-btn--ok { border: 1px solid #1e293b; background: #1e293b; color: #fff; }
.scene-custom-label-btn--ok:hover { background: #334155; }

/* Tab 3 Markers: table-style defaults (FILLS-like two rows) */
.scene-mstyle-table-wrap {
  margin-bottom:   14px;
  padding:         8px 4px 10px;
  background:      #f8fafc;
  border:          1px solid #e2e8f0;
  border-radius:   8px;
  width:           100%;
  box-sizing:      border-box;
  overflow-x:      auto;
  -webkit-overflow-scrolling: touch;
}
.scene-mstyle-thead,
.scene-mstyle-row {
  display:               grid;
  grid-template-columns: minmax(48px, 0.55fr) 26px 24px 24px minmax(56px, 0.5fr) minmax(50px, 0.62fr) minmax(72px, 1.08fr);
  align-items:           center;
  gap:                   4px 5px;
  font-size:             9px;
  font-weight:           700;
  color:                 rgba(30, 41, 59, 0.72);
}
.scene-mstyle-row--marker-size-head {
  background: #f2f5fa;
}
.scene-mstyle-row--marker-size-head,
.scene-mstyle-row--marker-size {
  grid-template-columns: minmax(48px, 0.55fr) 26px 34px 34px 34px minmax(84px, 0.75fr) minmax(84px, 0.75fr);
  gap: 2px 2px;
}
.scene-mstyle-row--marker-size-head .scene-mstyle-th {
  font-size: 9px;
  color: #64748b;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}
.scene-mstyle-row--marker-size .scene-mstyle-td--size .scene-mstyle-range,
.scene-mstyle-row--marker-size .scene-mstyle-td--icon .scene-mstyle-range {
  min-width: 0;
  max-width: none;
}
.scene-mstyle-opacity-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(30, 41, 59, 0.12);
}
.scene-mstyle-opacity-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 6px;
}
.scene-mstyle-opacity-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #334155;
}
.scene-mstyle-opacity-targets {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 10px;
  color: #334155;
}
.scene-mstyle-opacity-targets .scene-mstyle-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Global graphics opacity channels (driven by story graphics settings) */
:root {
  --touch-op-markers: 1;
  --touch-op-marker-labels: 1;
  --touch-op-text-labels: 1;
  --touch-op-country: 1;
  --touch-op-city: 1;
  --touch-op-capital: 1;
  --touch-op-custom: 1;
}
.scene-mstyle-th--pad-head {
  text-align:    center;
  line-height:   1.25;
  white-space:   normal;
}
.scene-mstyle-pad-lbl {
  flex-shrink:   0;
  min-width:     14px;
  margin:        0;
  font-size:     9px;
  font-weight:   800;
  color:         #64748b;
  text-align:    center;
  cursor:        default;
}
.scene-mstyle-td--pad-stack {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      0;
  justify-content: center;
  align-self:     center;
}
.scene-mstyle-pad-row {
  display:     flex;
  align-items: center;
  gap:         3px;
  min-width:   0;
  width:       100%;
}
.scene-mstyle-pad-row .scene-mstyle-range {
  flex:       1;
  min-width:  0;
}
.scene-mstyle-thead {
  padding-bottom:  4px;
  margin-bottom:     2px;
  border-bottom:     1px solid rgba(30, 41, 59, 0.12);
  letter-spacing:    0.02em;
}
.scene-mstyle-th--kind { min-width: 0; }
.scene-mstyle-th--center { text-align: center; }
.scene-mstyle-row {
  padding:     5px 0;
  font-size:   10px;
  font-weight: 600;
  color:       #334155;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}
.scene-mstyle-row--section {
  display: block;
  border-bottom: none;
  padding: 8px 0 2px;
}
.scene-mstyle-td--section {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
}
.scene-mstyle-row:last-child { border-bottom: none; }
.scene-mstyle-td--kind {
  font-size:   10px;
  font-weight: 800;
  color:       #0f172a;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.scene-mstyle-td--center { display: flex; justify-content: center; align-items: center; }
.scene-mstyle-td--size,
.scene-mstyle-td--icon,
.scene-mstyle-td--pad {
  display:     flex;
  align-items: center;
  gap:         2px;
  min-width:   0;
}
.scene-mstyle-td--size .scene-mstyle-val {
  flex-shrink: 0;
  min-width:   1.1em;
  text-align:  right;
}
.scene-mstyle-td--size .scene-mstyle-range {
  flex:       1 1 auto;
  min-width:  52px;
  max-width:  118px;
}
.scene-mstyle-td--icon .scene-mstyle-range {
  flex:       1 1 auto;
  min-width:  48px;
  max-width:  132px;
}
.scene-mstyle-td--pos { min-width: 0; }
.scene-mstyle-td--font { min-width: 0; }
.scene-mstyle-td--na {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #94a3b8;
  font-weight:     700;
  font-size:       11px;
  user-select:     none;
}
.scene-mstyle-color {
  width:         22px;
  height:        22px;
  padding:       0;
  border:        1px solid rgba(30, 41, 59, 0.35);
  border-radius: 0;
  cursor:        pointer;
  vertical-align: middle;
}
.scene-mstyle-range {
  flex:       1;
  min-width:  0;
  height:     12px;
}
.scene-marker-box-style-card {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.scene-marker-box-style-card__title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(30, 41, 59, 0.72);
  margin-bottom: 7px;
}
.scene-marker-box-style-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
.scene-marker-box-style-row + .scene-marker-box-style-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(30, 41, 59, 0.12);
}
.scene-marker-box-style-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}
.scene-marker-box-style-item--range {
  min-width: 210px;
  flex: 1 1 210px;
}
.scene-marker-box-style-item--range .scene-mstyle-range {
  min-width: 120px;
}
.scene-marker-box-style-item--toggle {
  margin-left: auto;
  cursor: pointer;
  white-space: nowrap;
}
.scene-marker-box-style-item .scene-mstyle-color {
  width: 28px;
  height: 24px;
}
@media (max-width: 1024px) {
  #scene-marker-defaults .scene-mstyle-row--markers .scene-mstyle-td--icon {
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
  }
  #scene-marker-defaults .scene-mstyle-row--markers .scene-mstyle-td--icon .scene-mstyle-range {
    flex: 1 1 100%;
    max-width: none;
    min-width: 90px;
  }
  #scene-marker-defaults .scene-mstyle-row--markers .scene-mstyle-td--icon .scene-mstyle-val {
    width: 100%;
    text-align: left;
    min-width: 0;
  }
  .scene-marker-box-style-card {
    padding: 10px;
  }
  .scene-marker-box-style-row {
    gap: 10px 8px;
  }
  .scene-marker-box-style-item {
    flex: 1 1 calc(50% - 8px);
    justify-content: space-between;
    min-width: 160px;
  }
  .scene-marker-box-style-item--range {
    flex: 1 1 100%;
    min-width: 100%;
  }
  .scene-marker-box-style-item--range .scene-mstyle-range {
    min-width: 140px;
  }
  .scene-marker-box-style-item--toggle {
    margin-left: 0;
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}
@media (max-width: 720px) {
  .scene-marker-box-style-item {
    flex: 1 1 100%;
    min-width: 100%;
  }
  .scene-marker-box-style-item .scene-mstyle-color {
    width: 30px;
    height: 26px;
  }
}
.scene-mstyle-range--pad { min-width: 28px; }
.scene-mstyle-val {
  flex-shrink: 0;
  min-width:   22px;
  font-size:   8px;
  font-weight: 800;
  color:       #0f172a;
  text-align:  right;
}
.scene-mstyle-select {
  width:         100%;
  max-width:     100%;
  padding:       2px 4px;
  font-size:     9px;
  font-weight:   600;
  border:        1px solid #cbd5e1;
  border-radius: 4px;
  background:    #fff;
  color:         #334155;
  cursor:        pointer;
}
.scene-mstyle-select--font { min-width: 0; }
.scene-mstyle-toggle {
  margin:  0;
  cursor:  pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scene-mstyle-toggle input[type="checkbox"] {
  width:         14px;
  height:        14px;
  margin:        0;
  cursor:        pointer;
  accent-color:  #5c64d4;
}
.scene-panel #scene-subpane-markers .scene-mstyle-range,
#sm-edit-marker-box input.scene-mstyle-range {
  accent-color: transparent;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
}

/* Edit marker popup sliders: same basemap theme as Scene panel sliders */
#sm-edit-marker-box input.scene-mstyle-range {
  --sp-slider-fill: #121212;
  --sp-slider-fill-mid: #0a0a0a;
  --sp-slider-rail: #e8eaef;
  --sp-slider-rail-edge: #c5ccd8;
}
html[data-scene-basemap="satellite"] #sm-edit-marker-box input.scene-mstyle-range {
  --sp-slider-fill: #6e76e8;
  --sp-slider-fill-mid: #5c64d4;
  --sp-slider-rail: #e8eaf2;
  --sp-slider-rail-edge: #dce0eb;
}
.scene-tab-hint--top {
  margin-bottom: 10px;
}

.scene-tab-hint {
  font-size:     12px;
  color:         #64748b;
  margin:        0 0 12px 0;
  line-height:   1.4;
}
.scene-markers-grid {
  display:       grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap:           8px;
}
.scene-markers-actions {
  margin: 8px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.scene-markers-search-wrap {
  margin: 0 0 10px;
}
.scene-markers-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.2;
}
.scene-markers-search:focus {
  outline: 2px solid rgba(99, 102, 241, 0.3);
  border-color: #6366f1;
}
.scene-markers-clear-btn {
  border: 1px solid #c8cdd8;
  background: #f5f7fb;
  color: #1f2a3d;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.scene-markers-show-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #3b4455;
}
.scene-markers-list {
  margin: 0 0 10px;
  border: 1px solid #d5dbe7;
  background: #f8fafc;
  border-radius: 6px;
  max-height: 180px;
  overflow: auto;
  padding: 6px;
}
.scene-markers-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  font-size: 12px;
  color: #1f2937;
  border-bottom: 1px solid #e5eaf2;
  cursor: pointer;
}
.scene-markers-list-row:hover { background: #eef3fb; }
.scene-markers-list-main {
  min-width: 0;
  display: block;
}
.scene-markers-list-name {
  font-size: 11px;
  line-height: 1.25;
  color: #374151;
}
.scene-markers-list-row:last-child { border-bottom: 0; }
.scene-markers-list-remove {
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.scene-markers-list-empty {
  padding: 8px;
  color: #6b7280;
  font-size: 12px;
}
.scene-marker-btn {
  display:       inline-flex;
  flex-direction: column;
  align-items:   center;
  justify-content: center;
  gap:           6px;
  padding:       12px 10px;
  font-size:     12px;
  font-weight:   600;
  color:         #475569;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  cursor:        grab;
  transition:    all 0.2s ease;
}
.scene-marker-btn:active { cursor: grabbing; }
.scene-marker-ico {
  width:         44px;
  height:        44px;
  border-radius: 50%;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  color:         #fff;
  font-size:     18px;
  line-height:   1;
  border:        1px solid rgba(255,255,255,0.7);
}
.scene-marker-btn:hover {
  color:         #334155;
  background:    #e2e8f0;
  border-color:  #cbd5e1;
}
.scene-marker-btn.scene-marker-btn--active {
  color:         #fff;
  background:    #3b82f6;
  border-color:  #2563eb;
}

/* Tab 2 Fills: hide basemap section in ch-panel — map types are only in Start tab */
.scene-panel #ch-panel .ch-header + .ch-section-label,
.scene-panel #ch-panel .ch-base-row,
.scene-panel #ch-panel .ch-base-row--mb,
.scene-panel #ch-panel .ch-base-label-offline,
.scene-panel #ch-panel .ch-base-label-mb,
.scene-panel #ch-panel .ch-base-label-mb + .ch-divider {
  display:       none !important;
}

/* ── Fills tab content (#ch-panel): buttons, checkboxes, slider ───────────────── */
.scene-panel #ch-panel {
  background: transparent !important;
  padding: 0 !important;
}
.scene-panel #map-style-options.ch-style-section {
  margin-bottom: 12px;
}
.scene-panel #map-style-options .ch-news-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       6px 0;
  font-size:     13px;
  color:         #334155;
  cursor:        pointer;
}
.scene-panel #map-style-options .ch-news-row input[type="checkbox"] {
  width:         18px;
  height:        18px;
  accent-color:  #3b82f6;
  flex-shrink:   0;
}
.scene-panel #map-style-options .ch-style-hint {
  font-size:     11px;
  color:         #64748b;
  margin:        4px 0 0 0;
  line-height:   1.35;
}
.scene-panel #map-style-options .ch-news-water-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       6px 0;
  font-size:     13px;
  color:         #334155;
}
.scene-panel #map-style-options .ch-news-water-row span { min-width: 88px; }
.scene-panel #map-style-options .ch-news-water-row input[type="color"] {
  width:         30px;
  height:        24px;
  border:        1px solid #e2e8f0;
  border-radius: 5px;
  cursor:        pointer;
  padding:       1px;
  background:    #fff;
}
.scene-panel .ch-section-label {
  display:       block;
  font-size:     11px;
  font-weight:   700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:         #64748b;
  margin-bottom:  4px;
  margin-top:    8px;
}
.scene-panel .ch-section-label:first-child { margin-top: 0; }
.scene-panel .ch-section-label--sub { margin-top: 14px; }
.scene-panel .ch-base-row {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 8px;
}
.scene-panel .ch-base-btn {
  padding:       8px 14px;
  font-size:     12px;
  font-weight:   600;
  color:         #475569;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  cursor:        pointer;
  transition:    all 0.2s ease;
}
.scene-panel .ch-base-btn:hover {
  background:    #e2e8f0;
  border-color:  #cbd5e1;
  color:         #334155;
}
.scene-panel .ch-base-btn.ch-base-btn--active {
  color:         #fff;
  background:    #3b82f6;
  border-color:  #2563eb;
}
.scene-panel .ch-overlay-row,
.scene-panel .ch-custom-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       8px 0;
  font-size:     13px;
  color:         #334155;
  cursor:        pointer;
}
.scene-panel .ch-overlay-row input[type="checkbox"],
.scene-panel input[type="checkbox"] {
  width:         18px;
  height:        18px;
  accent-color:  #3b82f6;
  cursor:        pointer;
  flex-shrink:  0;
}
.scene-panel .ch-tool-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 14px;
  font-size:     13px;
  font-weight:   600;
  color:         #334155;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  cursor:        pointer;
  margin-bottom: 8px;
  transition:    all 0.2s ease;
}
.scene-panel .ch-tool-btn:hover {
  background:    #e2e8f0;
  border-color:  #cbd5e1;
}
.scene-panel .ch-tool-btn.ch-tool-btn--on {
  background:    #dbeafe;
  border-color:  #93c5fd;
  color:         #1e40af;
}
.scene-panel .ch-tool-dot {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  flex-shrink:   0;
}
.scene-panel .ch-opacity-row {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin:        12px 0;
}
.scene-panel .ch-opacity-lbl {
  font-size:     13px;
  font-weight:   600;
  color:         #475569;
  min-width:     52px;
}
.scene-panel .ch-opacity-slider,
.scene-panel input[type="range"] {
  flex:          1;
  height:        8px;
  accent-color:  #3b82f6;
  cursor:        pointer;
}
.scene-panel .ch-opacity-val {
  font-size:     12px;
  font-weight:   600;
  color:         #64748b;
  min-width:     36px;
  text-align:    right;
}
.scene-panel .ch-swatches {
  display:       grid;
  grid-template-columns: repeat(15, 1fr);
  gap:           4px;
  margin:        10px 0;
}
.scene-panel .ch-swatch {
  width:         100%;
  max-width:     28px;
  min-width:     0;
  height:        28px;
  border-radius: 8px;
  border:        2px solid #e2e8f0;
  cursor:        pointer;
  padding:       0;
  transition:    transform 0.15s, box-shadow 0.15s;
}
.scene-panel .ch-swatch:hover {
  transform:      scale(1.08);
  box-shadow:    0 2px 8px rgba(0,0,0,0.15);
}
.scene-panel .ch-swatch.ch-swatch--active {
  border-color:  #1e293b;
  box-shadow:    0 0 0 2px #fff, 0 0 0 4px #1e293b;
}
.scene-panel .ch-custom-row input[type="color"] {
  width:         36px;
  height:        28px;
  border:        1px solid #e2e8f0;
  border-radius: 6px;
  cursor:        pointer;
  padding:       2px;
}
.scene-panel .ch-divider {
  height:        1px;
  background:    #e2e8f0;
  margin:        14px 0;
}
.scene-panel .ch-base-label-offline,
.scene-panel .ch-base-label-mb {
  font-size:     11px;
  color:         #64748b;
  margin-bottom: 6px;
}
.scene-panel .ch-clear-btn,
.scene-panel .ch-clear-all {
  margin-top:    12px;
  padding:       8px 14px;
  font-size:     12px;
  font-weight:   600;
  color:         #64748b;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  cursor:        pointer;
  transition:    all 0.2s ease;
}
.scene-panel .ch-clear-btn:hover,
.scene-panel .ch-clear-all:hover {
  background:    #fee2e2;
  border-color:  #fecaca;
  color:         #b91c1c;
}
.scene-panel .ch-list-header {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 8px;
}
.scene-panel .ch-count {
  font-size:     12px;
  color:         #64748b;
  font-weight:   500;
}

/* ── Labels inside Map Style tab: spacing from tint rows ───────── */
/* Label styles tabular layout (Custom, Country, Capital, City) */
.lcp-label-styles-table-wrap {
  margin-bottom: 10px;
  overflow-x: auto;
}
.lcp-label-styles-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}
.lcp-label-styles-table th,
.lcp-label-styles-table td {
  padding: 6px 8px;
  vertical-align: middle;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}
.lcp-label-styles-table thead th:first-child,
.lcp-label-styles-table tbody td:first-child {
  width: 1%;
  white-space: nowrap;
}
.lcp-label-styles-table thead th {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #0f172a;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid #94a3b8;
  border-bottom: 2px solid #64748b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  box-sizing: border-box;
  vertical-align: middle;
}
/* “Label type” header: allow wrap so it does not overlap “Show pill” */
.lcp-label-styles-table thead th:nth-child(2) {
  white-space: normal;
  line-height: 1.25;
  max-width: 4.5rem;
  padding-left: 6px;
  padding-right: 6px;
  hyphens: auto;
  word-break: break-word;
}
.lcp-label-styles-table tbody th[scope="row"] {
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  text-align: left;
}
.lcp-label-styles-table input[type="color"] {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none;
}
.lcp-label-styles-table input[type="number"] {
  width: 3em;
  padding: 2px 4px;
  font-size: 12px;
}
.lcp-label-styles-table input[type="range"] {
  width: 48px;
  vertical-align: middle;
}
/* Label table: switch toggles (checkbox + visual track; keeps existing element ids for JS). */
.lcp-tbl-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
}
.lcp-tbl-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lcp-tbl-toggle-track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  box-sizing: border-box;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
.lcp-tbl-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.16),
    0 1px 4px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translate(0, -50%);
  transition: left 0.22s cubic-bezier(0.36, 0.66, 0.04, 1), transform 0.22s cubic-bezier(0.36, 0.66, 0.04, 1);
}
.lcp-tbl-toggle-input:checked + .lcp-tbl-toggle-track {
  background: #6e76e8;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.lcp-tbl-toggle-input:checked + .lcp-tbl-toggle-track .lcp-tbl-toggle-thumb {
  left: calc(100% - 2px);
  transform: translate(-100%, -50%);
}
.lcp-tbl-toggle-input:focus-visible + .lcp-tbl-toggle-track {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.lcp-tbl-toggle-input:disabled + .lcp-tbl-toggle-track {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Inner flex so <td> stays table-cell — row borders stay continuous (avoid display:flex on td). */
/* flex-start: same slider x-position every row (center looked offset when colspan rows changed column width). */
.lcp-tbl-size-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.lcp-tbl-size-cell input[type="range"] {
  flex: 0 1 auto;
  min-width: 48px;
  width: 72px;
  max-width: 88px;
  vertical-align: middle;
}
.lcp-tbl-size-cell .lcp-size-val {
  flex-shrink: 0;
  min-width: 2.25em;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.lcp-tbl-pad { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.lcp-tbl-pad-lbl { font-size: 10px; color: #64748b; min-width: 12px; }
.lcp-tbl-pad .lcp-size-val { font-size: 10px; color: #64748b; min-width: 24px; }
.lcp-tbl-hint { font-size: 10px; color: #64748b; margin-left: 4px; }

/* In BASEMAP tab, hide Regions + Country/City search (Scene Maker tab has its own search) */
#scene-tab-basemap #label-colors-panel .lcp-regions-and-search-block {
  display: none !important;
}
#scene-tab-basemap #label-colors-panel {
  margin-top: 8px;
}
/* BASEMAP tab: collapsible advanced block (labels, custom labels, preset fly / crossfade) */
.scene-basemap-extended {
  display: block;
  margin-top: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f1f5f9;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.scene-basemap-extended__summary {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1e293b;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s ease, color 0.15s ease;
  background: #e2e8f0;
  border-bottom: 1px solid #cbd5e1;
}
.scene-basemap-extended__summary::-webkit-details-marker {
  display: none;
}
.scene-basemap-extended__summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #64748b;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.scene-basemap-extended[open] .scene-basemap-extended__summary::before {
  transform: rotate(0deg);
}
.scene-basemap-extended__summary:hover {
  background: rgba(255, 255, 255, 0.65);
  color: #1e293b;
}
.scene-basemap-extended__summary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.scene-basemap-extended__summary-text {
  line-height: 1.35;
}
.scene-basemap-extended__inner {
  padding: 0 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
.touch-lang-ar .scene-basemap-extended__summary {
  letter-spacing: 0.02em;
}

/* MARKERS tab: collapsible marker defaults table (same chrome as basemap extended) */
#scene-subpane-markers .scene-marker-defaults-extended {
  margin-top: 0;
  margin-bottom: 12px;
}
#scene-subpane-markers .scene-marker-defaults-extended .scene-basemap-extended__inner {
  padding-top: 10px;
}

/* Fly / crossfade: grouped at bottom of BASEMAP tab */
#scene-tab-basemap .scene-basemap-preset-motion {
  margin-top: 8px;
  padding: 12px 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
#scene-tab-basemap .scene-basemap-preset-motion__divider {
  margin: 0 0 14px;
}
#scene-tab-basemap .scene-basemap-preset-motion .ch-section-label {
  margin-bottom: 8px;
}
#scene-tab-basemap .scene-basemap-preset-motion .ch-section-label--sub {
  margin-top: 16px;
}
#scene-tab-basemap .scene-basemap-preset-motion .scene-tab-hint--inline {
  margin-top: 0;
  margin-bottom: 12px;
  line-height: 1.45;
}
#scene-tab-basemap .scene-basemap-preset-motion .scene-grayscale-inline.ch-check-row {
  margin: 2px 0 10px;
  padding: 0;
}
#scene-tab-basemap .scene-basemap-preset-motion .scene-grayscale-inline.ch-check-row + .scene-grayscale-strength-row {
  margin-top: -2px;
}
#scene-tab-basemap .scene-basemap-preset-motion .scene-grayscale-strength-row {
  grid-template-columns: 15rem minmax(0, 1fr) max-content;
  column-gap: 14px;
  padding: 4px 0 10px;
}
#scene-tab-basemap .scene-basemap-preset-motion .scene-grayscale-strength-row--fade-ms input[type="range"] {
  max-width: none;
}
#scene-tab-basemap .scene-basemap-preset-motion .scene-preset-mode-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#scene-tab-basemap .scene-basemap-preset-motion #preset-transition-effects-row {
  margin-top: 4px;
  margin-bottom: 10px;
  gap: 10px;
}
#scene-tab-basemap .scene-basemap-preset-motion #preset-transition-effects-row .scene-transition-effect-btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
/* Keep motion sliders on neutral (custom) style by default. */
#scene-tab-basemap .scene-basemap-preset-motion {
  --sp-slider-fill: #121212;
  --sp-slider-fill-mid: #0a0a0a;
  --sp-slider-rail: #eceff4;
  --sp-slider-rail-edge: #c6cfdb;
}
/* Purple accents only when basemap mode is satellite. */
.scene-panel[data-scene-basemap="satellite"] #scene-tab-basemap .scene-basemap-preset-motion,
html[data-scene-basemap="satellite"] #scene-tab-basemap .scene-basemap-preset-motion {
  --sp-slider-fill: #6e76e8;
  --sp-slider-fill-mid: #5c64d4;
  --sp-slider-rail: #e8eaf2;
  --sp-slider-rail-edge: #dce0eb;
}
/* In custom mode, force black/white on the few camera split sliders too. */
.scene-panel[data-scene-basemap="custom"] #scene-tab-basemap .scene-basemap-preset-motion input.scene-simple-range,
html[data-scene-basemap="custom"] #scene-tab-basemap .scene-basemap-preset-motion input.scene-simple-range {
  --sp-slider-fill: #121212 !important;
  --sp-slider-fill-mid: #0a0a0a !important;
  --sp-slider-rail: #eceff4 !important;
  --sp-slider-rail-edge: #c6cfdb !important;
}
.scene-panel[data-scene-basemap="custom"] #scene-tab-basemap .scene-basemap-preset-motion input[type="range"]::-webkit-slider-thumb,
.scene-panel[data-scene-basemap="custom"] #scene-tab-basemap .scene-basemap-preset-motion input[type="range"]::-moz-range-thumb {
  background: #ffffff !important;
  border-color: #121212 !important;
}

@media (max-width: 1024px) {
  #scene-tab-basemap .scene-basemap-preset-motion {
    padding: 10px;
  }
  #scene-tab-basemap .scene-basemap-preset-motion .scene-grayscale-strength-row {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding: 6px 0 12px;
  }
  #scene-tab-basemap .scene-basemap-preset-motion .scene-grayscale-strength-row .scene-tint-val {
    justify-self: start;
    text-align: left;
  }
  #scene-tab-basemap .scene-basemap-preset-motion #preset-transition-effects-row .scene-transition-effect-btn {
    flex: 1 1 100%;
  }
}
/* Bleed label styles table to pane edges (cancels .scene-tab-pane 20px horizontal padding). */
#scene-tab-basemap .lcp-label-styles-table-wrap {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
  max-width: none;
  box-sizing: border-box;
}
#scene-tab-basemap .lcp-label-styles-table-wrap .lcp-label-styles-table thead th:first-child,
#scene-tab-basemap .lcp-label-styles-table-wrap .lcp-label-styles-table tbody td:first-child {
  padding-left: 10px;
}
#scene-tab-basemap .lcp-label-styles-table-wrap .lcp-label-styles-table thead th:last-child,
#scene-tab-basemap .lcp-label-styles-table-wrap .lcp-label-styles-table tbody td:last-child {
  padding-right: 10px;
}
#scene-tab-basemap .lcp-label-styles-table-wrap .lcp-label-styles-table tbody td.lcp-overview-inline-cell {
  padding-right: 14px;
}
/* Overview row: hint + idle hide on one line */
.lcp-overview-inline-cell {
  vertical-align: middle;
  text-align:     left;
  min-width:      0;
}
/* Coast row: native checkbox + “Link to borders” (not the iOS-style toggle). */
#label-colors-panel .lcp-overview-autohide-lbl:not(.lcp-tbl-toggle) {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  margin:         0;
  cursor:         pointer;
  font-size:      12px;
  font-weight:    500;
  color:          #334155;
  text-align:     left;
  vertical-align: middle;
}
#label-colors-panel .lcp-overview-autohide-lbl:not(.lcp-tbl-toggle) input[type="checkbox"] {
  margin:         0;
  width:          15px;
  height:         15px;
  flex-shrink:    0;
  accent-color:   var(--sp-slider-fill, #6366f1);
}
#label-colors-panel .lcp-label-styles-table tbody td[colspan="2"] {
  text-align:     left;
  vertical-align: middle;
  padding-left:   6px;
  padding-right:  6px;
}
.lcp-overview-inline {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            6px 10px;
  padding:        2px 0;
  min-width:      0;
}
.lcp-overview-hint {
  font-size:      11px;
  color:          #64748b;
  font-weight:    500;
  line-height:    1.35;
  flex:           1 1 140px;
  min-width:      120px;
  max-width:      100%;
}
.lcp-overview-inline-sep {
  flex:           0 0 1px;
  width:          1px;
  height:         18px;
  background:     #e2e8f0;
  margin:         0 2px;
  align-self:     center;
}
.lcp-overview-extra-text {
  font-size:      12px;
  color:          #334155;
  font-weight:    600;
  white-space:    nowrap;
}
.lcp-overview-sec-wrap {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
}
.lcp-overview-sec-lbl {
  font-size:      11px;
  color:          #64748b;
  font-weight:    600;
}
.lcp-overview-sec-input {
  width:          48px;
  max-width:      100%;
  box-sizing:     border-box;
  padding:        4px 6px;
  font-size:      13px;
  border:         1px solid #cbd5e1;
  border-radius:  6px;
  font-variant-numeric: tabular-nums;
}
.lcp-overview-sec-input:disabled {
  opacity:        0.45;
  cursor:         not-allowed;
}
.lcp-overview-micro-hint {
  font-size:      10px;
  color:          #94a3b8;
  font-style:     italic;
  white-space:    nowrap;
}
.scene-panel .lcp-overview-inline {
  flex-wrap:      wrap;
  overflow-x:     visible;
  padding-bottom: 4px;
  row-gap:        6px;
}
.scene-panel .lcp-overview-inline .lcp-tbl-toggle {
  flex-shrink:    0;
}
.scene-panel .lcp-overview-hint {
  flex:           1 1 100px;
  min-width:      0;
  max-width:      none;
}
.scene-panel .lcp-overview-inline .lcp-overview-sec-wrap {
  flex-shrink:    0;
}
.scene-panel .lcp-overview-inline .lcp-overview-micro-hint {
  flex:           0 1 auto;
  min-width:      0;
}
#scene-tab-basemap #label-colors-panel .lcp-header {
  display: none;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.scene-panel #label-colors-panel {
  background: transparent !important;
  padding: 0 !important;
}
.scene-panel .lcp-label-styles-table {
  font-size: 13px;
  table-layout: fixed;
}
.scene-panel .lcp-label-styles-table th,
.scene-panel .lcp-label-styles-table td {
  padding: 7px 5px;
}
.scene-panel .lcp-label-styles-table input[type="number"] {
  font-size: 13px;
}
.scene-panel .lcp-tbl-pad-lbl,
.scene-panel .lcp-tbl-pad .lcp-size-val,
.scene-panel .lcp-tbl-hint {
  font-size: 11px;
}

/* Label table: compact Pill color / Text color columns; padding sliders fill Pill padding column. */
.scene-panel .lcp-label-styles-table thead th:nth-child(1),
.scene-panel .lcp-label-styles-table tbody td:nth-child(1),
#label-colors-panel .lcp-label-styles-table thead th:nth-child(1),
#label-colors-panel .lcp-label-styles-table tbody td:nth-child(1) {
  width: 52px;
  min-width: 52px;
  box-sizing: border-box;
}
.scene-panel .lcp-label-styles-table thead th:nth-child(2) {
  width: 3.75rem;
  min-width: 3.25rem;
  max-width: 4.5rem;
  white-space: normal;
  line-height: 1.25;
  vertical-align: middle;
  word-break: break-word;
}
.scene-panel .lcp-label-styles-table tbody th:nth-child(2) {
  width: 9%;
  min-width: 0;
  max-width: 92px;
  white-space: nowrap;
}
.scene-panel .lcp-label-styles-table thead th:nth-child(3),
.scene-panel .lcp-label-styles-table tbody td:nth-child(3) {
  width: 56px;
  box-sizing: border-box;
}
/* Pill padding and Size: same column width so slider tracks match visually */
.scene-panel .lcp-label-styles-table thead th:nth-child(4),
.scene-panel .lcp-label-styles-table tbody td:nth-child(4),
.scene-panel .lcp-label-styles-table thead th:nth-child(7),
.scene-panel .lcp-label-styles-table tbody td:nth-child(7) {
  width: 24%;
  min-width: 0;
  vertical-align: middle;
  box-sizing: border-box;
}
.scene-panel .lcp-label-styles-table tbody td:nth-child(4) .lcp-tbl-pad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin-right: 0;
  box-sizing: border-box;
}
.scene-panel .lcp-label-styles-table tbody td:nth-child(4) .lcp-tbl-pad + .lcp-tbl-pad {
  margin-top: 5px;
}
.scene-panel .lcp-label-styles-table tbody td:nth-child(4) .lcp-tbl-pad-lbl {
  flex: 0 0 14px;
  text-align: center;
}
.scene-panel .lcp-label-styles-table tbody td:nth-child(4) .lcp-size-val {
  flex: 0 0 auto;
  text-align: right;
  min-width: 1.75em;
  font-variant-numeric: tabular-nums;
}
/* Pill padding column: short slider + px val (no flex-grow dead space). */
.scene-panel .lcp-label-styles-table tbody td:nth-child(4) input[type="range"] {
  flex: 0 1 auto;
  min-width: 44px;
  width: 58px !important;
  max-width: 72px;
}
/* Size column: compact track hugging the px readout. */
.scene-panel .lcp-label-styles-table .lcp-tbl-size-cell input[type="range"] {
  flex: 0 1 auto;
  min-width: 48px;
  width: 68px !important;
  max-width: 82px;
}
/* Beat #label-colors-panel .lcp-size-slider { flex: 1 } so thickness/size tracks stay one width (not wider when readout is short). */
.scene-panel #label-colors-panel .lcp-label-styles-table .lcp-tbl-size-cell input.lcp-size-slider,
#label-colors-panel .lcp-label-styles-table .lcp-tbl-size-cell input.lcp-size-slider {
  flex: 0 0 68px !important;
  width: 68px !important;
  min-width: 48px !important;
  max-width: 68px !important;
}
.scene-panel #label-colors-panel .lcp-label-styles-table tbody td:nth-child(4) input.lcp-size-slider,
#label-colors-panel .lcp-label-styles-table tbody td:nth-child(4) input.lcp-size-slider {
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 44px !important;
  max-width: 58px !important;
}
/* Toggles in Scene panel use basemap accent tokens */
.scene-panel .lcp-label-styles-table .lcp-tbl-toggle-input:checked + .lcp-tbl-toggle-track {
  background: var(--sp-slider-fill, #6e76e8);
  border-color: rgba(255, 255, 255, 0.28);
}
.scene-panel .lcp-label-styles-table .lcp-tbl-toggle-input:focus-visible + .lcp-tbl-toggle-track {
  outline-color: var(--sp-slider-fill, #6366f1);
}

/* Show + Show pill columns: smaller toggle “pills” than default 44×26 */
.lcp-label-styles-table tbody td:nth-child(1) .lcp-tbl-toggle-track,
.lcp-label-styles-table tbody td:nth-child(3) .lcp-tbl-toggle-track {
  width: 34px;
  height: 22px;
}
.lcp-label-styles-table tbody td:nth-child(1) .lcp-tbl-toggle-thumb,
.lcp-label-styles-table tbody td:nth-child(3) .lcp-tbl-toggle-thumb {
  width: 16px;
  height: 16px;
  top: 50%;
  left: 2px;
}
.lcp-label-styles-table tbody td:nth-child(1) .lcp-tbl-toggle-input:checked + .lcp-tbl-toggle-track .lcp-tbl-toggle-thumb,
.lcp-label-styles-table tbody td:nth-child(3) .lcp-tbl-toggle-input:checked + .lcp-tbl-toggle-track .lcp-tbl-toggle-thumb {
  left: calc(100% - 2px);
  transform: translate(-100%, -50%);
}

/* Scene panel: tighter toggles + locator row inline toggle */
.scene-panel .lcp-label-styles-table tbody td:nth-child(1) .lcp-tbl-toggle-track,
.scene-panel .lcp-label-styles-table tbody td:nth-child(3) .lcp-tbl-toggle-track {
  width: 28px;
  height: 18px;
}
.scene-panel .lcp-label-styles-table tbody td:nth-child(1) .lcp-tbl-toggle-thumb,
.scene-panel .lcp-label-styles-table tbody td:nth-child(3) .lcp-tbl-toggle-thumb {
  width: 14px;
  height: 14px;
  top: 50%;
  left: 2px;
}
.scene-panel .lcp-label-styles-table tbody td:nth-child(1) .lcp-tbl-toggle-input:checked + .lcp-tbl-toggle-track .lcp-tbl-toggle-thumb,
.scene-panel .lcp-label-styles-table tbody td:nth-child(3) .lcp-tbl-toggle-input:checked + .lcp-tbl-toggle-track .lcp-tbl-toggle-thumb {
  left: calc(100% - 2px);
  transform: translate(-100%, -50%);
}
.scene-panel .lcp-overview-inline .lcp-tbl-toggle-track {
  width: 28px;
  height: 18px;
}
.scene-panel .lcp-overview-inline .lcp-tbl-toggle-thumb {
  width: 14px;
  height: 14px;
  top: 50%;
  left: 2px;
}
.scene-panel .lcp-overview-inline .lcp-tbl-toggle-input:checked + .lcp-tbl-toggle-track .lcp-tbl-toggle-thumb {
  left: calc(100% - 2px);
  transform: translate(-100%, -50%);
}

.scene-panel .lcp-label-styles-table thead th:nth-child(5),
.scene-panel .lcp-label-styles-table thead th:nth-child(6) {
  width: 52px;
  max-width: 56px;
  padding: 6px 4px !important;
  text-align: center;
  box-sizing: border-box;
}
.scene-panel .lcp-label-styles-table tbody td:nth-child(5),
.scene-panel .lcp-label-styles-table tbody td:nth-child(6) {
  width: 52px;
  max-width: 56px;
  padding: 6px 4px !important;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}
.scene-panel .lcp-label-styles-table tbody td:nth-child(5) input[type="color"],
.scene-panel .lcp-label-styles-table tbody td:nth-child(6) input[type="color"] {
  width: 28px;
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding: 0;
}
/* One continuous rule per row (avoids broken lines when cells use nested flex). */
.scene-panel .lcp-label-styles-table thead th {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #0f172a;
  background: linear-gradient(180deg, #eef2f6 0%, #dce3ec 100%) !important;
  border: 1px solid #94a3b8 !important;
  border-bottom: 2px solid #64748b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
  vertical-align: middle;
}
/* Align header first lines (Show + wrapped “Label type”) and keep text off the bottom rule. */
#label-colors-panel .lcp-label-styles-table thead th {
  vertical-align: top !important;
  padding: 10px 5px 11px !important;
  line-height: 1.35;
}
#label-colors-panel .lcp-label-styles-table thead th:nth-child(5),
#label-colors-panel .lcp-label-styles-table thead th:nth-child(6) {
  padding: 10px 4px 11px !important;
}
.scene-panel .lcp-label-styles-table tbody th[scope="row"] {
  text-align: left;
}
.scene-panel .lcp-label-styles-table tbody tr {
  border-bottom: 1px solid #e2e8f0;
}
.scene-panel .lcp-label-styles-table tbody td,
.scene-panel .lcp-label-styles-table tbody th {
  border-bottom: none !important;
}
.scene-panel #label-colors-panel .lcp-section-label {
  display:       block;
  font-size:     11px;
  font-weight:   700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:         #64748b;
  margin-bottom:  4px;
  margin-top:    8px;
}
.scene-panel #label-colors-panel .lcp-section-label:first-child { margin-top: 0; }
.scene-panel #label-colors-panel .lcp-colors-block {
  display:               grid;
  grid-template-columns:  1fr 1fr;
  gap:                   4px 10px;
}
.scene-panel #label-colors-panel .lcp-colors-block .lcp-size-row,
.scene-panel #label-colors-panel .lcp-colors-block .lcp-padding-row { grid-column: 1 / -1; }
.scene-panel #label-colors-panel .lcp-colors-block #lcp-reset,
.scene-panel #label-colors-panel .lcp-colors-block .lcp-reset-btn { grid-column: 1 / -1; }
.scene-panel #label-colors-panel .lcp-padding-row {
  display:   flex;
  align-items: center;
  gap:       8px 14px;
  margin:    4px 0;
  flex-wrap: wrap;
}
.scene-panel #label-colors-panel .lcp-padding-cell {
  display:   inline-flex;
  align-items: center;
  gap:       4px;
}
.scene-panel #label-colors-panel .lcp-padding-cell .lcp-size-slider { width: 56px; }
.scene-panel #label-colors-panel .lcp-padding-lbl {
  font-size:   11px;
  font-weight: 600;
  color:       #64748b;
  min-width:   12px;
}
.scene-panel #label-colors-panel .lcp-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       2px 0;
  font-size:     12px;
  font-weight:   500;
  color:         #334155;
}
.scene-panel #label-colors-panel .lcp-row span {
  min-width:     0;
  font-size:     12px;
}
.scene-panel #label-colors-panel .lcp-row input[type="color"] {
  width:         30px;
  height:        24px;
  border:        1px solid #e2e8f0;
  border-radius: 5px;
  cursor:        pointer;
  padding:       1px;
  background:    #fff;
}
.scene-panel #label-colors-panel .lcp-size-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin:        4px 0;
}
.scene-panel #label-colors-panel .lcp-size-lbl {
  font-size:     12px;
  font-weight:   600;
  color:         #475569;
  min-width:     64px;
}
.scene-panel #label-colors-panel .lcp-size-slider {
  flex:          1;
  height:        6px;
  accent-color:  #3b82f6;
  cursor:        pointer;
}
/* Table ranges live in flex cells; flex:1 above stretches tracks — keep table sliders fixed-width. */
#label-colors-panel .lcp-label-styles-table .lcp-size-slider {
  flex:          0 0 auto !important;
}
.scene-panel #label-colors-panel .lcp-size-val {
  font-size:     11px;
  font-weight:   600;
  color:         #64748b;
  min-width:     28px;
  text-align:    right;
}
.scene-panel #label-colors-panel .lcp-check-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       2px 0;
  font-size:     12px;
  color:         #334155;
  cursor:        pointer;
}
.scene-panel #label-colors-panel .lcp-check-row input[type="checkbox"] {
  width:         16px;
  height:        16px;
  accent-color:  #3b82f6;
  cursor:        pointer;
  flex-shrink:  0;
}
.scene-panel #label-colors-panel .lcp-divider {
  height:        1px;
  background:    #e2e8f0;
  margin:        6px 0;
}
.scene-panel #label-colors-panel #lcp-reset,
.scene-panel #label-colors-panel .lcp-reset-btn {
  margin-top:    0;
  padding:       5px 10px;
  font-size:     11px;
  font-weight:   600;
  color:         #64748b;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 6px;
  cursor:        pointer;
  transition:    all 0.2s ease;
}
.scene-panel #label-colors-panel #lcp-reset:hover,
.scene-panel #label-colors-panel .lcp-reset-btn:hover {
  background:    #e2e8f0;
  border-color:  #cbd5e1;
  color:         #334155;
}
.scene-panel #label-colors-panel .lcp-show-labels-row {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           6px 12px;
  margin-bottom: 4px;
}
.scene-panel #label-colors-panel .lcp-regions-section {
  margin-bottom: 4px;
}
.scene-panel #label-colors-panel .lcp-regions-toggle {
  display:       block;
  font-size:     11px;
  font-weight:   700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:         #64748b;
  cursor:        pointer;
  padding:       4px 0;
  list-style:    none;
  user-select:   none;
}
.scene-panel #label-colors-panel .lcp-regions-toggle::-webkit-details-marker { display: none; }
.scene-panel #label-colors-panel .lcp-regions-toggle::before {
  content:        '\25B8';
  display:        inline-block;
  margin-right:   6px;
  transition:     transform 0.2s ease;
}
.scene-panel #label-colors-panel .lcp-regions-section[open] .lcp-regions-toggle::before {
  transform:      rotate(90deg);
}
.scene-panel #label-colors-panel .lcp-regions-section .lcp-regions {
  margin-top:    4px;
  padding-top:   2px;
}
.scene-panel #label-colors-panel .lcp-regions {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           2px 12px;
}
.scene-panel #label-colors-panel .lcp-regions label,
.scene-panel #label-colors-panel .lcp-check-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-size:     12px;
  font-weight:   500;
  color:         #475569;
  cursor:        pointer;
}
.scene-panel #label-colors-panel .lcp-regions input[type="checkbox"] {
  width:         16px;
  height:        16px;
  accent-color:  #3b82f6;
  cursor:        pointer;
  flex-shrink:  0;
}
.scene-panel #label-colors-panel .lcp-cntry-search-wrap {
  margin-bottom: 4px;
  position:      relative;
}
.scene-panel #label-colors-panel .lcp-cntry-search,
.scene-panel #label-colors-panel .lcp-city-search {
  width:         100%;
  padding:       7px 11px;
  font-size:     13px;
  border:        1px solid #e2e8f0;
  border-radius: 6px;
  background:    #fff;
  color:         #334155;
  box-sizing:    border-box;
}
.scene-panel #label-colors-panel .lcp-cntry-search:focus,
.scene-panel #label-colors-panel .lcp-city-search:focus {
  outline:       none;
  border-color:  #3b82f6;
  box-shadow:    0 0 0 2px rgba(59, 130, 246, 0.2);
}
.scene-panel #label-colors-panel .lcp-cntry-search::placeholder,
.scene-panel #label-colors-panel .lcp-city-search::placeholder {
  color:         #94a3b8;
}
.scene-panel #label-colors-panel .lcp-cntry-chips,
.scene-panel #label-colors-panel .lcp-city-chips {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-top:    8px;
}
.scene-panel #label-colors-panel .lcp-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       4px 10px;
  font-size:     13px;
  color:         #334155;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 6px;
}
.scene-panel #label-colors-panel .lcp-chip-x {
  padding:       0 2px;
  font-size:     14px;
  color:         #64748b;
  background:    none;
  border:        none;
  cursor:        pointer;
  line-height:   1;
}
.scene-panel #label-colors-panel .lcp-chip-x:hover {
  color:         #dc2626;
}
.scene-panel #label-colors-panel .lcp-cntry-suggestions,
.scene-panel #label-colors-panel .lcp-city-suggestions {
  position:      absolute;
  top:           100%;
  left:          0;
  right:         0;
  margin-top:    4px;
  max-height:    200px;
  overflow-y:    auto;
  background:    #fff;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow:    0 4px 12px rgba(0,0,0,0.08);
  z-index:       10;
}
.scene-panel #label-colors-panel .lcp-suggest-item {
  padding:       10px 12px;
  font-size:     13px;
  color:         #334155;
  cursor:        pointer;
  border-bottom: 1px solid #f1f5f9;
}
.scene-panel #label-colors-panel .lcp-suggest-item:last-child { border-bottom: none; }
.scene-panel #label-colors-panel .lcp-suggest-item:hover {
  background:    #f1f5f9;
}

/* ── Presets tab (#pm-panel): section labels, slots, scene library, buttons ───── */
.scene-panel #pm-panel {
  background:    transparent !important;
  padding:       0 0 14px 0 !important;
}
/* View / Edit mode banners */
.scene-panel #pm-panel .pm-view-banner,
.scene-panel #pm-panel .pm-edit-banner {
  display:       flex;
  align-items:   center;
  gap:           10px;
  flex-wrap:     wrap;
  padding:       10px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  font-size:     13px;
}
.scene-panel #pm-panel .pm-view-banner {
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  color:         #475569;
}
.scene-panel #pm-panel .pm-view-label { font-weight: 600; }
.scene-panel #pm-panel .pm-edit-banner {
  background:   #eff6ff;
  border:        1px solid #bfdbfe;
  color:         #1e40af;
}
.scene-panel #pm-panel .pm-edit-label { font-weight: 600; }
.scene-panel #pm-panel .pm-edit-actions { display: flex; gap: 8px; margin-left: auto; }
.scene-panel #pm-panel .pm-edit-btn {
  padding:       6px 12px;
  font-size:     12px;
  font-weight:   600;
  border-radius: 6px;
  cursor:        pointer;
  border:        1px solid transparent;
  transition:    all 0.2s ease;
}
.scene-panel #pm-panel .pm-edit-btn--edit {
  background:    #3b82f6;
  color:         #fff;
  border-color:  #2563eb;
}
.scene-panel #pm-panel .pm-edit-btn--edit:hover {
  background:    #2563eb;
  color:         #fff;
}
.scene-panel #pm-panel .pm-edit-btn--save {
  background:    #059669;
  color:         #fff;
  border-color:  #047857;
}
.scene-panel #pm-panel .pm-edit-btn--save:hover {
  background:    #047857;
  color:         #fff;
}
.scene-panel #pm-panel .pm-edit-btn--cancel {
  background:    #fff;
  color:         #64748b;
  border-color:  #e2e8f0;
}
.scene-panel #pm-panel .pm-edit-btn--cancel:hover {
  background:    #f1f5f9;
  color:         #334155;
}

/* View mode: disable scene editing (fills, markers, style) until Edit is clicked */
.scene-view-only-msg {
  font-size:     12px;
  color:         #64748b;
  margin:        8px 0 12px 0;
  padding:       8px 10px;
  background:    #f8fafc;
  border:        1px solid #e2e8f0;
  border-radius: 6px;
  line-height:   1.4;
}
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-fills .scene-view-only-msg { display: block !important; }
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-fills #ch-panel {
  pointer-events: none;
  opacity:        0.65;
}
.scene-panel.scene-panel--edit-mode #scene-tab-fills .scene-view-only-msg { display: none !important; }
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-markers .scene-view-only-msg { display: block !important; }
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-markers .scene-markers-grid {
  pointer-events: none;
  opacity:        0.65;
}
.scene-panel.scene-panel--edit-mode #scene-tab-markers .scene-view-only-msg { display: none !important; }
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-basemap #news-grayscale-cb,
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-basemap #news-grayscale-amount,
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-basemap #preset-fly-fixed-cb,
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-basemap #preset-fly-duration,
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-basemap #preset-fade-out-ms,
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-basemap #preset-fade-in-ms,
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-basemap #preset-markers-fade-parallel-cb,
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-basemap .scene-preset-markers-parallel-row,
.scene-panel:not(.scene-panel--edit-mode) #scene-tab-basemap .scene-tint-row input {
  pointer-events: none;
  opacity:        0.6;
}

.scene-panel #pm-panel .pm-section-label {
  display:       block;
  font-size:      11px;
  font-weight:   700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:         #64748b;
  margin-bottom: 10px;
  margin-top:    16px;
}
.scene-panel #pm-panel .pm-section-label:first-child { margin-top: 0; }
.scene-panel #pm-panel .pm-scene-header .pm-section-label { margin-top: 0; margin-bottom: 0; }
.scene-panel #pm-panel .pm-add-slot-row {
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.scene-panel #pm-panel .pm-add-slot-btn {
  font-size:       12px;
  padding:         6px 12px;
  background:      #111;
  color:           #fff;
  border:          none;
  cursor:          pointer;
  font-weight:     600;
  pointer-events:  auto;
}
.scene-panel #pm-panel .pm-add-slot-btn:hover {
  background:  #333;
}
.scene-panel #pm-panel .pm-remove-slot-btn {
  font-size:       12px;
  padding:         6px 12px;
  background:      #fff;
  color:           #334155;
  border:          1px solid #cbd5e1;
  cursor:          pointer;
  font-weight:     600;
  pointer-events:  auto;
}
.scene-panel #pm-panel .pm-remove-slot-btn:hover {
  background:  #f1f5f9;
  border-color: #94a3b8;
}
.scene-panel #pm-panel .pm-clear-slots-btn {
  font-size:       12px;
  padding:         6px 12px;
  background:      #f8fafc;
  color:           #475569;
  border:          1px dashed #94a3b8;
  cursor:          pointer;
  font-weight:     600;
  pointer-events:  auto;
}
.scene-panel #pm-panel .pm-clear-slots-btn:hover {
  background:  #f1f5f9;
  border-color: #64748b;
  color:       #334155;
}

/* Avoid startup flash of pre-hydration slot/auth controls before DB state restores. */
body.touch-app-hydrating #pm-add-slot-btn,
body.touch-app-hydrating #pm-remove-slot-btn,
body.touch-app-hydrating #pm-clear-slots-btn,
body.touch-app-hydrating #location-slot-buttons,
body.touch-app-hydrating #scene-panel-auth-actions {
  visibility: hidden !important;
}
body.touch-app-hydrating .single-column-grid > .section-separator {
  display: none !important;
}
.scene-panel #pm-panel .pm-slots {
  display:       flex;
  flex-direction: column;
  gap:           6px;
  margin-bottom: 12px;
}
.scene-panel #pm-panel .pm-slot-row {
  display:       flex;
  align-items:   center;
  gap:           6px;
}
.scene-panel #pm-panel .pm-slot-btn {
  flex:          1;
  min-width:     0;
  padding:       8px 12px;
  font-size:     12px;
  font-weight:   600;
  color:         #334155;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  cursor:        pointer;
  text-align:    left;
  transition:    all 0.2s ease;
}
.scene-panel #pm-panel .pm-slot-btn:hover {
  background:    #e2e8f0;
  border-color:  #cbd5e1;
  color:         #1e293b;
}
.scene-panel #pm-panel .pm-slot-btn.pm-slot-btn--active {
  color:         #fff;
  background:    #3b82f6;
  border-color:   #2563eb;
}
.scene-panel #pm-panel .pm-slot-btn--empty {
  color:         #94a3b8;
  font-style:    italic;
}
.scene-panel #pm-panel .pm-slot-assign {
  flex-shrink:   0;
  width:         28px;
  height:        28px;
  padding:       0;
  font-size:     14px;
  color:         #64748b;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 6px;
  cursor:        pointer;
  transition:    all 0.2s ease;
}
.scene-panel #pm-panel .pm-slot-assign:hover {
  background:    #e2e8f0;
  color:         #334155;
}
.scene-panel #pm-panel .pm-divider {
  height:        1px;
  background:    #e2e8f0;
  margin:        14px 0;
}
.scene-panel #pm-panel .pm-scene-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           10px;
  margin-bottom: 10px;
}
.scene-panel #pm-panel .pm-tool-btn {
  padding:       6px 12px;
  font-size:     12px;
  font-weight:   600;
  color:         #475569;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 6px;
  cursor:        pointer;
  transition:    all 0.2s ease;
}
.scene-panel #pm-panel .pm-tool-btn:hover {
  background:    #e2e8f0;
  border-color:   #cbd5e1;
  color:         #334155;
}
.scene-panel #pm-panel .pm-default-row {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           8px;
  padding:       8px 0;
  margin-bottom: 8px;
  font-size:     13px;
  color:         #475569;
}
.scene-panel #pm-panel .pm-default-label {
  font-weight:   600;
  color:         #334155;
}
.scene-panel #pm-panel .pm-default-value {
  color:         #64748b;
  font-weight:   600;
}
.scene-panel #pm-panel .pm-default-value--muted {
  color:         #94a3b8;
  font-weight:   500;
}
.scene-panel #pm-panel .pm-default-value--warn {
  color:         #b45309;
  font-weight:   600;
}
.scene-panel #pm-panel .pm-scene-act {
  padding:       5px 10px;
  font-size:     12px;
  font-weight:   600;
  color:         #475569;
  background:    #f1f5f9;
  border:        1px solid #e2e8f0;
  border-radius: 6px;
  cursor:        pointer;
  transition:    all 0.2s ease;
}
.scene-panel #pm-panel .pm-scene-act:hover {
  background:    #e2e8f0;
  border-color:   #cbd5e1;
  color:         #334155;
}
.scene-panel #pm-panel .pm-scenes {
  display:       flex;
  flex-direction: column;
  gap:           6px;
  margin-top:    8px;
}
.scene-panel #pm-panel .pm-scene-row {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           10px;
  padding:       10px 12px;
  font-size:     13px;
  background:    #f8fafc;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  transition:    all 0.2s ease;
}
.scene-panel #pm-panel .pm-scene-row:hover {
  background:    #f1f5f9;
  border-color:  #cbd5e1;
}
.scene-panel #pm-panel .pm-scene-row.pm-scene-row--active {
  background:    #dbeafe;
  border-color:  #93c5fd;
}
.scene-panel #pm-panel .pm-scene-row.pm-scene-row--on-map {
  border-color:  #60a5fa;
  box-shadow:    inset 0 0 0 1px rgba(37, 99, 235, 0.15);
}
.scene-panel #pm-panel .pm-scene-row.pm-scene-row--editing {
  background:    #fefce8;
  border-color:  #facc15;
}
.scene-panel #pm-panel .pm-scene-row.pm-scene-row--home {
  border-left:   3px solid #3b82f6;
}
.scene-panel #pm-panel .pm-scene-group {
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  background:    #fff;
  overflow:      hidden;
}
.scene-panel #pm-panel .pm-scene-group-summary {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           8px;
  padding:       10px 12px;
  cursor:        pointer;
  font-size:     13px;
  font-weight:   600;
  color:         #0f172a;
  background:    #f1f5f9;
  list-style:    none;
}
.scene-panel #pm-panel .pm-scene-group-summary::-webkit-details-marker {
  display:       none;
}
.scene-panel #pm-panel .pm-scene-group-body {
  display:       flex;
  flex-direction: column;
  gap:           6px;
  padding:       8px 8px 10px;
  background:    #fafafa;
}
.scene-panel #pm-panel .pm-scene-group-body .pm-scene-row {
  background:    #f8fafc;
}
.scene-panel #pm-panel .pm-scene-group-title {
  flex:          1 1 auto;
  min-width:     0;
}
.scene-panel #pm-panel .pm-scene-group-count {
  font-size:     11px;
  font-weight:   600;
  color:         #64748b;
}
.scene-panel #pm-panel .pm-scene-group-chevron {
  width:         0;
  height:        0;
  margin-left:   4px;
  border-left:   5px solid transparent;
  border-right:  5px solid transparent;
  border-top:    6px solid #64748b;
  transition:    transform 0.15s ease;
  flex-shrink:   0;
}
.scene-panel #pm-panel .pm-scene-group[open] > .pm-scene-group-summary .pm-scene-group-chevron {
  transform:     rotate(180deg);
}
.scene-panel #pm-panel .pm-scene-info {
  flex:          1;
  min-width:     0;
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           6px;
}
.scene-panel #pm-panel .pm-scene-name {
  font-weight:   600;
  color:         #334155;
}
.scene-panel #pm-panel .pm-slot-badge {
  display:       inline-block;
  padding:       2px 6px;
  font-size:     10px;
  font-weight:   700;
  color:         #475569;
  background:    #e2e8f0;
  border-radius: 4px;
}
.scene-panel #pm-panel .pm-home-badge {
  color:         #1e40af;
  background:    #dbeafe;
}
.scene-panel #pm-panel .pm-from-story-badge {
  color:         #9a3412;
  background:    #ffedd5;
}
.scene-panel #pm-panel .pm-style-badge--basemap {
  color: #334155;
  background: #e2e8f0;
}
.scene-panel #pm-panel .pm-style-badge--satellite {
  color: #5b21b6;
  background: #ede9fe;
}
.scene-panel #pm-panel .pm-style-badge--dark {
  color: #e5e7eb;
  background: #111827;
}
.scene-panel #pm-panel .pm-style-badge--light {
  color: #0f172a;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}
.scene-panel #pm-panel .pm-scene-actions {
  display:       flex;
  align-items:   center;
  gap:           4px;
  flex-shrink:   0;
}
.scene-panel #pm-panel .pm-scene-act--load,
.scene-panel #pm-panel .pm-scene-act--edit,
.scene-panel #pm-panel .pm-scene-act--home,
.scene-panel #pm-panel .pm-scene-act--promote,
.scene-panel #pm-panel .pm-scene-act--del {
  width:         28px;
  height:        28px;
  padding:       0;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  font-size:     14px;
  border-radius: 6px;
}
.scene-panel #pm-panel .pm-scene-act--load:hover,
.scene-panel #pm-panel .pm-scene-act--edit:hover {
  background:    #3b82f6;
  color:         #fff;
  border-color:  #2563eb;
}
.scene-panel #pm-panel .pm-scene-act--home-active {
  background:    #3b82f6;
  color:         #fff;
  border-color:  #2563eb;
}
.scene-panel #pm-panel .pm-scene-act--promote:hover {
  background:    #059669;
  color:         #fff;
  border-color:  #047857;
}
.scene-panel #pm-panel .pm-scene-act--del:hover {
  background:    #dc2626;
  color:         #fff;
  border-color:  #b91c1c;
}
.scene-panel #pm-panel .pm-no-scenes {
  display:       block;
  padding:       12px;
  font-size:     13px;
  color:         #64748b;
  background:    #f8fafc;
  border:        1px dashed #cbd5e1;
  border-radius: 8px;
}
.scene-panel .pm-autoplay-wrap {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.scene-panel .pm-autoplay-title {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
}
.scene-panel .pm-autoplay-list {
  display: grid;
  gap: 6px;
}
.scene-panel .pm-autoplay-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 44px 64px 26px;
  align-items: center;
  gap: 6px;
}
.scene-panel .pm-autoplay-enable {
  accent-color: #1d4ed8;
}
.scene-panel .pm-autoplay-name {
  font-size: 12px;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-panel .pm-autoplay-move {
  display: flex;
  gap: 2px;
}
.scene-panel .pm-autoplay-move-btn {
  width: 20px;
  height: 20px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.scene-panel .pm-autoplay-move-btn:disabled {
  opacity: 0.35;
}
.scene-panel .pm-autoplay-sec {
  width: 64px;
  padding: 3px 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 12px;
}
.scene-panel .pm-autoplay-unit {
  font-size: 11px;
  color: #64748b;
}
.scene-panel .pm-autoplay-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.scene-panel .pm-autoplay-export-opts {
  margin-top: 8px;
  display: grid;
  gap: 4px;
}
.scene-panel .pm-autoplay-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #475569;
}
.scene-panel .pm-autoplay-opt input[type="checkbox"] {
  accent-color: #1d4ed8;
}
.scene-panel .pm-autoplay-status {
  margin-top: 8px;
  font-size: 11px;
  color: #64748b;
}
.scene-panel .pm-export-render-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.scene-panel .pm-export-render-grid label {
  display: grid;
  gap: 3px;
  font-size: 11px;
  color: #334155;
}
.scene-panel .pm-export-render-grid select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
}

/* Nested panels inside scene: no fixed positioning, full width */
.scene-panel #ch-panel,
.scene-panel #label-colors-panel,
.scene-panel #pm-panel,
.scene-panel #poi-panel,
.scene-panel #locations-panel,
.scene-panel #markers-panel {
  position:   static !important;
  top:        auto !important;
  left:       auto !important;
  right:      auto !important;
  width:      100% !important;
  max-height: none !important;
  border:     none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding:    14px 0 !important;
}
.scene-panel .ch-header,
.scene-panel .lcp-header,
.scene-panel .pm-header,
.scene-panel .poi-header {
  display: none !important;
}
.scene-tab-pane--active #poi-panel,
.scene-tab-pane--active #locations-panel,
.scene-tab-pane--active #markers-panel {
  display: block !important;
}
.scene-tab-pane--active #label-colors-panel {
  display: flex !important;
}
/* ch-panel and pm-panel live inside SCENE MAKER sub-panes */
#scene-tab-scenemaker #ch-panel { display: none !important; }
/* Flex layout matches #ch-panel country/fill UI; must beat base #ch-panel { display: none } */
#scene-tab-scenemaker.scene-tab-pane--active #scene-subpane-fills.scene-subpane--active #ch-panel {
  display: flex !important;
  flex-direction: column !important;
}
#scene-tab-scenemaker #pm-panel { display: none !important; }
#scene-tab-scenemaker #scene-subpane-presets.scene-subpane--active #pm-panel { display: block !important; }
#scene-tab-scenemaker #scene-subpane-presets.scene-subpane--active #scene-manager-panel { display: block !important; }
/* Draft text markers still use #pm-panel DOM; hide the rest of the old preset UI */
#pm-panel.touch-pm-drafts-only > *:not(#pm-draft-markers) {
  display: none !important;
}
#pm-panel.touch-pm-drafts-only {
  margin-top: 8px;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.touch-db-stories #scene-preset-pick-wrap { display: none !important; }
.scene-subpane-presets-intro {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 11px;
  line-height: 1.45;
  color: #334155;
}
.scene-subpane-presets-intro__line {
  margin: 0;
}
.scene-subpane-presets-intro__line + .scene-subpane-presets-intro__line {
  margin-top: 8px;
}
.scene-subpane-presets-intro__badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 4px;
  vertical-align: middle;
}
.scene-subpane-presets-intro__badge--file {
  color: #0f766e;
  background: #ccfbf1;
}

.scene-manager-panel {
  padding: 4px 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #1e293b;
}
.scene-mgr-header {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 8px;
}
.scene-mgr-hint--db {
  margin: 0 0 10px;
  font-size: 11px;
  color: #475569;
}
.scene-mgr-status {
  min-height: 1.2em;
  margin: 0 0 8px;
  font-size: 11px;
  color: #0f766e;
}
.scene-mgr-empty {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}
.scene-mgr-show-line {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
}
.scene-mgr-show-label {
  font-weight: 600;
  color: #64748b;
  margin-right: 6px;
}
.scene-mgr-show-name {
  font-weight: 600;
  color: #0f172a;
}
.scene-mgr-storage-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  background: #e2e8f0;
  color: #475569;
}
.scene-mgr-storage-badge--db {
  background: #dbeafe;
  color: #1d4ed8;
}
.scene-mgr-row {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.scene-mgr-row--selected {
  border-color: #93c5fd;
  box-shadow: 0 0 0 1px #bfdbfe;
}
.scene-mgr-row-name {
  font-weight: 600;
  margin-bottom: 8px;
  word-break: break-word;
}
.scene-mgr-badge-home {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0369a1;
  background: #e0f2fe;
  border-radius: 4px;
  vertical-align: middle;
}
.scene-mgr-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.scene-mgr-btn {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
}
.scene-mgr-btn:hover {
  background: #f1f5f9;
}
.scene-mgr-btn--primary {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}
.scene-mgr-btn--primary:hover {
  background: #1d4ed8;
}
.scene-mgr-btn--home-on {
  border-color: #0284c7;
  color: #0369a1;
  background: #e0f2fe;
}
.scene-mgr-btn--danger {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fef2f2;
}
.scene-mgr-btn--danger:hover {
  background: #fee2e2;
}
.scene-mgr-btn--small {
  padding: 4px 8px;
  font-size: 10px;
}
.scene-mgr-slot-assign {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 4px;
}
.scene-mgr-slot-select {
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
}
.scene-mgr-new {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.scene-mgr-input {
  flex: 1;
  min-width: 140px;
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

/* Scene Maker tab: tighter vertical rhythm (FILLS / MARKERS / PRESETS) */
#scene-tab-scenemaker.scene-tab-pane {
  padding: 10px 12px 14px;
}
#scene-tab-scenemaker .scene-divider {
  margin: 5px 0;
}
/* Which preset is on the map / edit mode (FILLS + all subtabs) */
.scene-active-preset-status {
  margin:          6px 0 8px;
  padding:         8px 10px;
  background:      #eff6ff;
  border:          1px solid #bfdbfe;
  border-radius:   8px;
  font-size:       11px;
  line-height:     1.4;
  color:           #1e3a5f;
}
.scene-active-preset-status__line {
  font-weight:     600;
}
.scene-active-preset-status__line .scene-active-preset-name {
  color:           #1d4ed8;
}
.scene-active-preset-status__line .scene-active-preset-badge {
  display:         inline-block;
  margin-left:     6px;
  padding:         1px 6px;
  font-size:       9px;
  font-weight:     700;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  border-radius:   4px;
  vertical-align:  middle;
}
.scene-active-preset-status__line .scene-active-preset-badge--home {
  background:      #fef3c7;
  color:           #92400e;
  border:          1px solid #fcd34d;
}
.scene-active-preset-status__line .scene-active-preset-badge--editing {
  background:      #dbeafe;
  color:           #1e40af;
  border:          1px solid #93c5fd;
}
.scene-active-preset-status__line .scene-active-preset-dirty {
  margin-left:     6px;
  font-weight:     700;
  color:           #b45309;
}
.scene-active-preset-status__sub {
  margin-top:      4px;
  font-size:       10px;
  color:           #64748b;
  font-weight:     500;
}
#scene-tab-scenemaker .scene-maker-subtabs {
  margin-bottom: 6px;
  gap: 3px;
}
#scene-tab-scenemaker .scene-maker-subtabs .scene-subtab {
  padding: 9px 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
}
#scene-subpane-fills .scene-tab-hint--fills {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: #64748b;
}
.scene-panel #scene-subpane-fills #ch-panel {
  padding-top: 2px !important;
  padding-bottom: 8px !important;
}
.scene-panel #scene-subpane-fills #ch-panel .ch-section-label {
  margin-top: 2px;
  margin-bottom: 3px;
}
.scene-panel #scene-subpane-fills #ch-panel .ch-divider {
  margin: 6px 0;
}
.scene-panel #scene-subpane-fills #ch-panel .ch-list-header {
  margin-top: 2px;
  padding-top: 0;
}
.scene-panel #scene-subpane-fills #ch-panel .ch-fills-split__head:not(:first-child) {
  margin-top: 6px;
}
.scene-panel #scene-subpane-fills #ch-panel .ch-list--fills-section {
  max-height: min(26vh, 180px);
}

/* Placeholder content in empty tabs */
.scene-tab-placeholder {
  padding:       24px 20px;
  background:    #f8fafc;
  border-radius: 8px;
  border:        1px dashed #cbd5e1;
  color:         #64748b;
  font-size:     13px;
  line-height:   1.6;
}
.scene-placeholder-title {
  font-weight:   600;
  color:         #334155;
  margin-bottom: 8px;
  font-size:     14px;
  letter-spacing: 0.02em;
}
.scene-placeholder-text {
  margin:  0;
  color:   #64748b;
}

/* Save-as-new-scene modal (above Scene panel) */
.sm-save-modal,
#pm-save-modal {
  position:   fixed;
  z-index:    10002;
  background: #fff;
  border:     1.5px solid #111;
  padding:    14px 16px;
  min-width:  260px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
  font-family: Arial, sans-serif;
}
.sm-save-title {
  font-size: 12px; font-weight: 700; margin-bottom: 8px; color: #111;
}
.sm-save-input {
  width: 100%; padding: 8px 10px; margin-bottom: 10px;
  border: 1.5px solid #ccc; font-size: 13px; box-sizing: border-box;
}
.sm-save-input:focus { border-color: #111; outline: none; }
.sm-save-btns { display: flex; gap: 8px; justify-content: flex-end; }
.sm-save-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sm-save-story-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 8px;
}
.sm-save-select,
#pm-save-modal select.sm-save-select {
  margin-bottom: 0;
  height: 34px;
  line-height: 34px;
  padding: 0 34px 0 10px;
  border: 1.5px solid #cbd5e1;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, #475569 50%),
    linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 14px,
    calc(100% - 11px) 14px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.sm-save-select:focus,
#pm-save-modal select.sm-save-select:focus {
  border-color: #111;
}
.sm-save-btns--wrap {
  flex-wrap:      wrap;
  justify-content: flex-start;
  row-gap:        8px;
}
.sm-save-desc {
  font-size:      12px;
  color:          #444;
  margin-bottom:  12px;
  line-height:    1.45;
}
.sm-save-modal--unsaved {
  min-width:      280px;
  max-width:      calc(100vw - 32px);
  box-sizing:     border-box;
}
.sm-save-btn {
  padding: 6px 14px; font-size: 11px; font-weight: 700; cursor: pointer;
  border: 1.5px solid #111;
}
.sm-save-btn--cancel { background: #fff; color: #555; border-color: #ccc; }
.sm-save-btn--cancel:hover { background: #f0f0f0; }
.sm-save-btn--ok    { background: #111; color: #fff; }
.sm-save-btn--ok:hover { background: #333; }
.sm-save-btn--secondary {
  background: #fff;
  color:      #111;
}
.sm-save-btn--secondary:hover { background: #f4f4f4; }
.sm-save-story-row #pm-save-story-new {
  height: 34px;
  min-width: 94px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Preset saved confirmation (toast) */
.touch-preset-saved-toast {
  position:        fixed;
  left:            50%;
  bottom:          24px;
  transform:       translateX(-50%) translateY(20px);
  /* Above scene panel (10k), toolbar fullscreen (100k), and most overlays */
  z-index:         2147483000;
  padding:         12px 20px;
  font-size:       13px;
  font-weight:     600;
  color:           #0f172a;
  background:      #ecfdf5;
  border:          1px solid #6ee7b7;
  border-radius:   10px;
  box-shadow:      0 8px 28px rgba(0,0,0,0.15);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.25s ease, transform 0.25s ease;
  max-width:       min(90vw, 420px);
  text-align:      center;
}
.touch-preset-saved-toast.touch-preset-saved-toast--show {
  opacity:         1;
  transform:       translateX(-50%) translateY(0);
}
.touch-preset-saved-toast--new {
  background:      #eff6ff;
  border-color:      #93c5fd;
}

.touch-auth-required-toast {
  position:        fixed;
  left:            50%;
  bottom:          88px;
  transform:       translateX(-50%) translateY(20px);
  z-index:         2147483000;
  padding:         14px 26px;
  font-size:       16px;
  font-weight:     600;
  color:           #422006;
  background:      #fef3c7;
  border:          1px solid #f59e0b;
  border-radius:   12px;
  box-shadow:      0 8px 28px rgba(0,0,0,0.15);
  opacity:         0;
  pointer-events:  auto;
  line-height:     1.25;
  transition:      opacity 0.25s ease, transform 0.25s ease;
  max-width:       min(90vw, 560px);
  text-align:      center;
}
.touch-auth-required-toast a {
  color:           #b45309;
  text-decoration: underline;
}
.touch-auth-required-toast.touch-auth-required-toast--show {
  opacity:         1;
  transform:       translateX(-50%) translateY(0);
}

/* Full-screen overlay so Save Scene modal always appears on top */
.sm-save-overlay,
#pm-save-overlay {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  bottom:     0;
  background: rgba(0,0,0,0.5);
  z-index:    99998;
}
#pm-save-modal { z-index: 100001 !important; }
#sbc-name-overlay { z-index: 100000 !important; }
#sbc-name-modal { z-index: 100001 !important; }
#scene-unsaved-overlay { z-index: 99998 !important; }
#scene-unsaved-modal { z-index: 99999 !important; }

/* Right-click add-marker context menu: shorter, wider so "Add Marker" is visible */
.sm-ctx-menu {
  position:   fixed;
  z-index:    10002;
  min-width:  260px;
  padding:    4px 0;
  background: #fff;
  border:     1.5px solid #111;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  font-family: Arial, sans-serif;
  font-size:   13px;
}
.sm-ctx-item {
  padding:     6px 14px;
  cursor:      pointer;
  white-space: nowrap;
}
.sm-ctx-item:hover { background: #f0f0f0; }
.sm-ctx-item--dim { color: #666; font-size: 12px; }
.sm-ctx-sep { height: 1px; background: #ddd; margin: 4px 0; }

/* Add Marker form: lat/lng search row */
.smf-latlon-row {
  display:   flex;
  gap:       6px;
  margin-bottom: 8px;
}
.smf-latlon-input { flex: 1; min-width: 0; }
.smf-btn--goto {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid #111;
  background: #f5f5f5;
}
.smf-btn--goto:hover { background: #e5e5e5; }

/* Layer transition: subtle crossfade during story switch */
.sm-layer-transition-overlay {
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  bottom:           0;
  z-index:          9999;
  pointer-events:    none;
  /* Low-contrast dark veil avoids eye-strain on map changes. */
  background:       rgba(8, 12, 18, 0.14);
  opacity:          0;
  transition:       opacity 160ms ease-out;
}
.sm-layer-transition-overlay--in {
  opacity:          1;
}
.sm-layer-transition-overlay--out {
  opacity:          0;
  transition:       opacity 260ms ease-in-out;
}

/* Add Marker form: cap height and keep buttons visible */
.sm-marker-form {
  position:   fixed;
  z-index:    10002;
  width:       280px;
  max-height:  90vh;
  display:     flex;
  flex-direction: column;
  overflow:    hidden;
  background:  #fff;
  border:      1.5px solid #111;
  box-shadow:  0 6px 24px rgba(0,0,0,0.2);
  padding:     12px 14px;
  font-family: Arial, sans-serif;
  box-sizing:  border-box;
}
.smf-title {
  font-size: 12px; font-weight: 700; margin-bottom: 8px; color: #111; flex-shrink: 0;
}
.smf-name-input {
  width: 100%; padding: 8px 10px; margin-bottom: 8px;
  border: 1.5px solid #ccc; font-size: 13px; box-sizing: border-box;
}
.smf-textarea {
  resize: vertical; min-height: 56px; font-family: inherit;
}
.smf-hint {
  font-size: 10px; color: #666; margin: -4px 0 8px; line-height: 1.3;
}
.smf-type-scroll {
  flex:        1;
  min-height:  0;
  overflow-y:  auto;
  margin:      0 -4px 8px 0;
  padding-right: 4px;
}
.smf-group-label {
  font-size: 11px; font-weight: 600; color: #555; margin: 8px 0 4px; text-transform: uppercase;
}
.smf-type-grid {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.smf-type-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; font-size: 11px; border: 1px solid #ccc; border-radius: 4px;
  cursor: pointer; background: #fff;
}
.smf-type-item--sel { border-color: #111; box-shadow: 0 0 0 2px rgba(0,0,0,0.2); }
.smf-color-row {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.smf-color-pick { width: 28px; height: 22px; cursor: pointer; border: 1px solid #ccc; }
.smf-btns {
  flex-shrink: 0;
  display: flex; gap: 8px; justify-content: flex-end;
}
.smf-btn {
  padding: 6px 14px; font-size: 11px; font-weight: 700; cursor: pointer;
  border: 1.5px solid #111;
}
.smf-btn--cancel { background: #fff; color: #555; border-color: #ccc; }
.smf-btn--cancel:hover { background: #f0f0f0; }
.smf-btn--ok { background: #111; color: #fff; }
.smf-btn--ok:hover { background: #333; }

/* Text label only: compact form (no type grid, no colour) */
.sm-marker-form--text-only {
  width: 260px;
}

/* Draft marker inline editor popup */
/* Marker icon + label: centered pill below or beside */
.sm-mwrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  box-sizing:      border-box;
}
.sm-mwrap--below {
  flex-direction:  column;
  align-items:     center;
}
.sm-mwrap--left {
  flex-direction:  row-reverse;
  align-items:     flex-end;
  justify-content: flex-end;
}
.sm-mwrap--right {
  flex-direction:  row;
  align-items:     flex-end;
  justify-content: flex-start;
}
.sm-micon {
  width:           24px;
  height:          24px;
  min-width:       24px;
  min-height:      24px;
  border-radius:    0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  box-sizing:       border-box;
}
.sm-mlbl {
  text-align:       center;
  line-height:      1.2;
  white-space:      pre;
  /* No max-width/overflow/ellipsis — pill expands to show full text */
}
.sm-mwrap--below .sm-mlbl {
  margin-top:       2px;
}

.sm-edit-popup { min-width: 220px; }
.sm-draft-popup .leaflet-popup-content-wrapper {
  background: rgba(4, 7, 14, 0.84) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.5) !important;
}
.sm-draft-popup .leaflet-popup-tip {
  background: rgba(4, 7, 14, 0.9) !important;
}
.sm-draft-popup .leaflet-popup-content,
.sm-draft-popup .leaflet-popup-content * {
  color: #f8fafc !important;
  font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}
.sm-draft-popup .leaflet-popup-close-button {
  color: #f8fafc !important;
}
.sm-draft-popup .leaflet-popup-content {
  margin: 10px 12px !important;
}
.sm-edit-row { margin-bottom: 8px; }
.sm-edit-row label {
  display: block;
  font-size: 11px;
  color: #5b6470;
  margin-bottom: 3px;
}
.sm-edit-row input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #cfd6df;
  border-radius: 4px;
  font-size: 12px;
  box-sizing: border-box;
}
.sm-edit-row textarea.sm-edit-name-input {
  width: 100%;
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid #cfd6df;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.25;
  box-sizing: border-box;
  resize: vertical;
}
.sm-edit-row--inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sm-edit-row--inline label { margin: 0; width: 40px; }
.sm-edit-row--inline input[type="color"] { width: 30px; height: 24px; border: 1px solid #cfd6df; border-radius: 4px; }
.sm-edit-row--inline input[type="range"] { flex: 1; }
.sm-edit-font-val { min-width: 36px; font-size: 11px; color: #5b6470; }
.sm-edit-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.sm-edit-row--toggles {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 6px;
}
.sm-edit-row--toggles label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  color: #4b5563;
}
.sm-edit-delete {
  border: 1px solid #e5a4a4;
  background: #fff1f1;
  color: #b42318;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.sm-edit-popup--minimal .sm-edit-hint {
  font-size: 12px;
  color: #475569;
  margin: 0 0 8px 0;
  line-height: 1.4;
}
.sm-edit-popup--minimal .sm-edit-lbl {
  display: block;
  font-size: 11px;
  color: #e2e8f0;
  margin-bottom: 2px;
}
.sm-edit-popup--minimal .sm-edit-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.2;
  user-select: none;
}
.sm-edit-popup--minimal .sm-edit-name-input {
  width: 100%;
  min-height: 38px;
  background: #ffffff;
  color: #111111;
  padding: 5px 8px;
  margin-bottom: 4px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 12px;
  box-sizing: border-box;
  line-height: 1.2;
}
.sm-edit-popup--minimal .sm-edit-name-input:focus,
.sm-edit-popup--minimal .sm-edit-lat-input:focus,
.sm-edit-popup--minimal .sm-edit-lng-input:focus {
  outline: none;
  border-color: #9ca3af;
  box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.25);
}
.sm-edit-popup--minimal .sm-edit-lat-input,
.sm-edit-popup--minimal .sm-edit-lng-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  color: #111111;
  border: 1px solid #d1d5db;
}
.sm-edit-popup--minimal .sm-edit-name-actions { margin-bottom: 4px; }
.sm-edit-popup--minimal .sm-edit-latlng {
  margin: 4px 0 !important;
  gap: 6px !important;
}
.sm-edit-popup--minimal .sm-edit-dir-wrap {
  margin: 4px 0 6px;
}
.sm-edit-popup--minimal .sm-edit-dir-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.sm-edit-popup--minimal .sm-edit-dir-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #94a3b8;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 6px;
  min-height: 24px;
}
.sm-edit-popup--minimal .sm-edit-dir-btn,
.sm-edit-popup--minimal .sm-edit-dist-slider {
  appearance: none;
  -webkit-appearance: none;
  min-height: 24px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.sm-edit-popup--minimal .sm-edit-dir-btn {
  width: 100%;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}
.sm-edit-popup--minimal .sm-edit-dir-btn:hover,
.sm-edit-popup--minimal .sm-edit-dist-slider:hover {
  border-color: #cbd5e1;
  background: rgba(30, 41, 59, 0.75);
}
.sm-edit-popup--minimal .sm-edit-dir-btn.is-active {
  border-color: #93c5fd;
  background: rgba(30, 64, 175, 0.22);
  color: #dbeafe;
}
.sm-edit-popup--minimal .sm-edit-dist-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}
.sm-edit-popup--minimal .sm-edit-dist-slider {
  flex: 1 1 auto;
  width: 100%;
  min-height: 16px;
  border-radius: 999px;
  padding: 0;
}
.sm-edit-popup--minimal .sm-edit-dist-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
}
.sm-edit-popup--minimal .sm-edit-dist-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 1px solid rgba(15, 23, 42, 0.7);
  margin-top: -5px;
}
.sm-edit-popup--minimal .sm-edit-dist-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
}
.sm-edit-popup--minimal .sm-edit-dist-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 1px solid rgba(15, 23, 42, 0.7);
}
.sm-edit-popup--minimal .sm-edit-dist-value {
  min-width: 38px;
  text-align: right;
  color: #cbd5e1;
  font-size: 11px;
}
.sm-edit-popup--minimal .sm-edit-dist-label {
  color: #cbd5e1;
  font-size: 11px;
  margin-right: 2px;
}
.sm-edit-popup--minimal .sm-edit-check-line {
  margin: 2px 0 4px !important;
}
.sm-edit-popup--minimal .sm-edit-actions {
  margin-top: 2px;
}
.sm-edit-popup--minimal .sm-edit-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.sm-edit-popup--minimal .sm-edit-footer-row .sm-edit-check-line {
  margin: 0 !important;
  flex: 1 1 auto;
}
.sm-edit-popup--minimal .sm-edit-footer-row .sm-edit-actions {
  margin: 0 !important;
  flex: 0 0 auto;
}
.sm-edit-popup--minimal .sm-edit-lbl,
.sm-edit-popup--minimal .sm-edit-check-line,
.sm-edit-popup--minimal .sm-edit-delete {
  user-select: none;
}
.sm-edit-popup--minimal .sm-edit-name-input,
.sm-edit-popup--minimal .sm-edit-lat-input,
.sm-edit-popup--minimal .sm-edit-lng-input {
  user-select: text;
}
.sm-draft-popup .sm-edit-popup--minimal .sm-edit-name-input,
.sm-draft-popup .sm-edit-popup--minimal .sm-edit-lat-input,
.sm-draft-popup .sm-edit-popup--minimal .sm-edit-lng-input {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}
.sm-draft-popup .sm-edit-popup--minimal .sm-edit-name-input::placeholder,
.sm-draft-popup .sm-edit-popup--minimal .sm-edit-lat-input::placeholder,
.sm-draft-popup .sm-edit-popup--minimal .sm-edit-lng-input::placeholder {
  color: #6b7280 !important;
  opacity: 1;
}
.sm-edit-popup--minimal .sm-edit-no-label {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid #94a3b8;
  background: rgba(15, 23, 42, 0.5);
  color: #e2e8f0;
  border-radius: 4px;
  cursor: pointer;
}
.sm-edit-popup--minimal .sm-edit-no-label:hover {
  background: rgba(30, 41, 59, 0.7);
  border-color: #cbd5e1;
}
.sm-edit-popup--minimal .sm-edit-delete {
  padding: 4px 10px;
  font-size: 11px;
}
.sm-draft-popup .sm-edit-popup--minimal .sm-edit-delete {
  color: #b42318 !important;
  border-color: #f0a7a7 !important;
  background: #fff1f1 !important;
}
.sm-edit-popup--minimal {
  min-width: 260px;
  max-width: 260px;
}

/* Markers tab: draft marker list with font size and lat/long */
#pm-draft-markers { margin-top: 8px; }
.pm-draft-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  flex-wrap: wrap;
}
.pm-draft-row .pm-draft-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  flex-shrink: 0;
}
.pm-draft-row .pm-draft-lbl {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
}
.pm-draft-toggle,
.pm-draft-del {
  padding: 2px 6px;
  font-size: 11px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #475569;
}
.pm-draft-toggle:hover,
.pm-draft-del:hover { background: #f1f5f9; }
.pm-draft-del { color: #b91c1c; border-color: #fecaca; }
.pm-draft-del:hover { background: #fef2f2; }
.pm-draft-detail {
  width: 100%;
  display: none;
  padding: 8px 0 4px 0;
  border-top: 1px solid #e2e8f0;
  margin-top: 4px;
}
.pm-draft-row--expanded .pm-draft-detail { display: block; }
.pm-draft-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pm-draft-detail-row:last-child { margin-bottom: 0; }
.pm-draft-detail-row label {
  font-size: 11px;
  color: #64748b;
  min-width: 56px;
}
.pm-draft-detail-row .pm-draft-font { flex: 1; }
.pm-draft-font-val { min-width: 36px; font-size: 11px; color: #64748b; }
.pm-draft-detail-row .pm-draft-latlon {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 12px;
}

/* ========== Scene panel & editor overlays: sharp corners (no rounded boxes) ========== */
.scene-panel,
.scene-panel * {
  border-radius: 0 !important;
}

/* Exception: iOS-style switches in BASEMAP label table (.scene-panel * would zero their radius) */
.scene-panel .lcp-label-styles-table .lcp-tbl-toggle-track {
  border-radius: 999px !important;
}
.scene-panel .lcp-label-styles-table .lcp-tbl-toggle-thumb {
  border-radius: 50% !important;
}
/* Exception: story active/inactive switch should remain pill-shaped */
.scene-panel .scene-story-active-toggle__track {
  border-radius: 999px !important;
}
.scene-panel .scene-story-active-toggle__thumb {
  border-radius: 50% !important;
}
/* Exception: keep language chips pill-shaped */
.scene-panel .scene-lang-toggle,
.scene-panel .scene-map-ar-only-toggle {
  border-radius: 999px !important;
}

.sm-edit-marker-box,
.sm-edit-marker-box * {
  border-radius: 0 !important;
}

.sm-marker-form,
.sm-marker-form *,
.sm-save-modal,
.sm-save-modal *,
#pm-save-modal,
#pm-save-modal *,
#sbc-name-modal,
#sbc-name-modal *,
#scene-unsaved-modal,
#scene-unsaved-modal *,
.sm-ctx-menu,
.sm-ctx-menu *,
.sm-edit-popup,
.sm-edit-popup *,
.ch-slot-picker,
.ch-slot-picker *,
#slot-picker-popup,
#slot-picker-popup * {
  border-radius: 0 !important;
}

.pm-reset-prompt,
.pm-reset-prompt *,
.pm-reset-btn {
  border-radius: 0 !important;
}

/* Lock mutating toolbar controls while Scene panel is in edit mode */
body.scene-edit-toolbar-lock #broadcast-toolbar .tool-btn[disabled] {
  opacity: 0.38;
  cursor: not-allowed !important;
  filter: grayscale(1);
}

/* ── Scene panel: single accent (matches sliders); no rainbow chrome ── */
.scene-panel .scene-panel-title::before {
  background: linear-gradient(180deg, #9aa2f0 0%, var(--sp-slider-fill) 55%, var(--sp-slider-fill-mid) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 12px rgba(110, 118, 232, 0.35) !important;
}

.scene-panel .scene-tab.scene-tab--active {
  color: #fff !important;
  background: linear-gradient(180deg, #8b92f0 0%, var(--sp-slider-fill) 45%, var(--sp-slider-fill-mid) 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(45, 48, 120, 0.2),
    0 3px 14px rgba(92, 100, 212, 0.35) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.scene-panel .scene-subtab.scene-subtab--active {
  color: #fff !important;
  background: linear-gradient(180deg, #8b92f0 0%, var(--sp-slider-fill) 50%, var(--sp-slider-fill-mid) 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 2px 12px rgba(92, 100, 212, 0.32) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.scene-panel .scene-base-btn.scene-base-btn--active {
  color: #fff !important;
  background: linear-gradient(180deg, #8b92f0 0%, var(--sp-slider-fill) 50%, var(--sp-slider-fill-mid) 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 3px 12px rgba(92, 100, 212, 0.32) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.scene-panel .scene-marker-btn.scene-marker-btn--active {
  color: #fff !important;
  background: linear-gradient(180deg, #8b92f0 0%, var(--sp-slider-fill) 50%, var(--sp-slider-fill-mid) 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 12px rgba(92, 100, 212, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.scene-panel .scene-tab-hint--global {
  background: #eef0ff !important;
  border: 1px solid #c8cef0 !important;
  color: #3730a3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.scene-panel .ch-base-btn.ch-base-btn--active {
  color: #fff !important;
  background: linear-gradient(180deg, #8b92f0 0%, var(--sp-slider-fill) 50%, var(--sp-slider-fill-mid) 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 12px rgba(92, 100, 212, 0.3) !important;
}

.scene-panel .ch-tool-btn.ch-tool-btn--on {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 38%),
    linear-gradient(180deg, #8b92f0 0%, var(--sp-slider-fill) 55%, var(--sp-slider-fill-mid) 100%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 12px rgba(92, 100, 212, 0.3) !important;
}

.scene-panel .ch-swatch.ch-swatch--active {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px var(--sp-slider-fill),
    0 4px 12px rgba(92, 100, 212, 0.4) !important;
}

/* Checkboxes: same accent as sliders */
.scene-panel input[type="checkbox"] {
  accent-color: var(--sp-slider-fill) !important;
}
.scene-panel input[type="checkbox"]:checked {
  filter: drop-shadow(0 0 4px rgba(110, 118, 232, 0.45));
}

.scene-panel #map-style-options .ch-news-row input[type="checkbox"] {
  accent-color: var(--sp-slider-fill) !important;
}

/* Color wells: optional hairline only (not required for behavior); helps very light swatches on white */
.scene-panel #label-colors-panel .lcp-label-styles-table input[type="color"],
.scene-panel #label-colors-panel .lcp-row input[type="color"] {
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  box-shadow: none !important;
}

/*
 * Range sliders — calm single-color Dribbble rail + tick marks;
 * slow “tickle” pulse on thumb while dragging (see .sp-range--dragging + app.js).
 */
@keyframes sp-slider-thumb-tickle {
  0%, 100% {
    transform: rotate(var(--sp-thumb-rotate, 0deg));
    box-shadow:
      0 0 0 2px rgba(110, 118, 232, 0.2),
      0 4px 14px rgba(92, 100, 212, 0.28),
      inset 0 2px 0 rgba(255, 255, 255, 0.55),
      inset 0 -2px 4px rgba(45, 48, 120, 0.22);
    filter: brightness(1);
  }
  50% {
    transform: rotate(var(--sp-thumb-rotate, 0deg)) scale(1.04);
    box-shadow:
      0 0 0 4px rgba(110, 118, 232, 0.32),
      0 7px 22px rgba(92, 100, 212, 0.42),
      inset 0 2px 0 rgba(255, 255, 255, 0.72),
      inset 0 -2px 4px rgba(45, 48, 120, 0.18);
    filter: brightness(1.07);
  }
}

@keyframes sp-slider-track-tickle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.88; }
}

.scene-panel input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  accent-color: transparent !important;
  --sp-fill-pct: 50%;
  --sp-thumb-rotate: 0deg;
}

.scene-panel input[type="range"]:disabled {
  filter: grayscale(0.35) opacity(0.55);
}

.scene-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--sp-slider-rail-edge);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 9px,
      var(--sp-slider-tick) 9px,
      var(--sp-slider-tick) 10px
    ),
    linear-gradient(
      90deg,
      var(--sp-slider-fill) 0%,
      var(--sp-slider-fill) var(--sp-fill-pct, 50%),
      var(--sp-slider-rail) var(--sp-fill-pct, 50%),
      var(--sp-slider-rail) 100%
    );
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.35s ease;
}

.scene-panel input[type="range"].sp-range--dragging::-webkit-slider-runnable-track {
  animation: none;
}

.scene-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50% !important;
  transform: none;
  transform-origin: center center;
  background: #ffffff;
  border: 2px solid var(--sp-slider-fill);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.scene-panel input[type="range"].sp-range--dragging::-webkit-slider-thumb {
  animation: none;
}

.scene-panel input[type="range"]:active::-webkit-slider-thumb {
  transform: none;
  box-shadow: none;
}

/* Firefox: solid fill + ticked rail */
.scene-panel input[type="range"]::-moz-range-track {
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--sp-slider-rail-edge);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 9px,
      var(--sp-slider-tick) 9px,
      var(--sp-slider-tick) 10px
    ),
    linear-gradient(180deg, var(--sp-slider-rail) 0%, #dde1ec 100%);
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.scene-panel input[type="range"]::-moz-range-progress {
  height: 12px;
  border-radius: 999px;
  background: var(--sp-slider-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.scene-panel input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50% !important;
  transform: none;
  transform-origin: center center;
  background: #ffffff;
  border: 2px solid var(--sp-slider-fill);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.scene-panel input[type="range"].sp-range--dragging::-moz-range-thumb {
  animation: none;
}

.scene-panel input[type="range"].sp-range--dragging::-moz-range-track {
  animation: none;
}

/* Simpler slider style for new transition controls (match fade rows). */
.scene-panel input[type="range"].scene-simple-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  border: 1px solid var(--sp-slider-rail-edge, #d7dce6);
  box-shadow: none;
  background: linear-gradient(
    90deg,
    var(--sp-slider-fill, #7279e6) 0%,
    var(--sp-slider-fill, #7279e6) var(--sp-fill-pct, 50%),
    var(--sp-slider-rail, #eceff5) var(--sp-fill-pct, 50%),
    var(--sp-slider-rail, #eceff5) 100%
  ) !important;
}
.scene-panel input[type="range"].scene-simple-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50% !important;
  border: 2px solid var(--sp-slider-fill, #7279e6);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transform: none;
  filter: none;
}
.scene-panel input[type="range"].scene-simple-range.sp-range--dragging::-webkit-slider-runnable-track,
.scene-panel input[type="range"].scene-simple-range.sp-range--dragging::-webkit-slider-thumb {
  animation: none;
}
.scene-panel input[type="range"].scene-simple-range:active::-webkit-slider-thumb,
.scene-panel input[type="range"].scene-simple-range.sp-range--dragging::-webkit-slider-thumb {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  transform: none !important;
  filter: none !important;
}
.scene-panel input[type="range"].scene-simple-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  border: 1px solid var(--sp-slider-rail-edge, #d7dce6);
  box-shadow: none;
  background: var(--sp-slider-rail, #eceff5);
}
.scene-panel input[type="range"].scene-simple-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--sp-slider-fill, #7279e6);
}
.scene-panel input[type="range"].scene-simple-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50% !important;
  border: 2px solid var(--sp-slider-fill, #7279e6);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transform: none;
  filter: none;
}
.scene-panel input[type="range"].scene-simple-range.sp-range--dragging::-moz-range-track,
.scene-panel input[type="range"].scene-simple-range.sp-range--dragging::-moz-range-thumb {
  animation: none;
}
.scene-panel input[type="range"].scene-simple-range:active::-moz-range-thumb,
.scene-panel input[type="range"].scene-simple-range.sp-range--dragging::-moz-range-thumb {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  transform: none !important;
  filter: none !important;
}
/* Camera split sliders: force exact hollow thumb style (no glow). */
#scene-tab-basemap #preset-zoomout-country-zoom::-webkit-slider-thumb,
#scene-tab-basemap #preset-zoomout-stage1-ratio::-webkit-slider-thumb,
#scene-tab-basemap #preset-cam-out-pct::-webkit-slider-thumb,
#scene-tab-basemap #preset-cam-travel-pct::-webkit-slider-thumb,
#scene-tab-basemap #preset-cam-in-pct::-webkit-slider-thumb,
#scene-tab-basemap #preset-zoomout-fadein-lead-ms::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -4px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid var(--sp-slider-fill, #121212) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
#scene-tab-basemap #preset-zoomout-country-zoom:active::-webkit-slider-thumb,
#scene-tab-basemap #preset-zoomout-stage1-ratio:active::-webkit-slider-thumb,
#scene-tab-basemap #preset-cam-out-pct:active::-webkit-slider-thumb,
#scene-tab-basemap #preset-cam-travel-pct:active::-webkit-slider-thumb,
#scene-tab-basemap #preset-cam-in-pct:active::-webkit-slider-thumb,
#scene-tab-basemap #preset-zoomout-fadein-lead-ms:active::-webkit-slider-thumb,
#scene-tab-basemap #preset-zoomout-country-zoom.sp-range--dragging::-webkit-slider-thumb,
#scene-tab-basemap #preset-zoomout-stage1-ratio.sp-range--dragging::-webkit-slider-thumb,
#scene-tab-basemap #preset-cam-out-pct.sp-range--dragging::-webkit-slider-thumb,
#scene-tab-basemap #preset-cam-travel-pct.sp-range--dragging::-webkit-slider-thumb,
#scene-tab-basemap #preset-cam-in-pct.sp-range--dragging::-webkit-slider-thumb,
#scene-tab-basemap #preset-zoomout-fadein-lead-ms.sp-range--dragging::-webkit-slider-thumb {
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
#scene-tab-basemap #preset-zoomout-country-zoom::-moz-range-thumb,
#scene-tab-basemap #preset-zoomout-stage1-ratio::-moz-range-thumb,
#scene-tab-basemap #preset-cam-out-pct::-moz-range-thumb,
#scene-tab-basemap #preset-cam-travel-pct::-moz-range-thumb,
#scene-tab-basemap #preset-cam-in-pct::-moz-range-thumb,
#scene-tab-basemap #preset-zoomout-fadein-lead-ms::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid var(--sp-slider-fill, #121212) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
#scene-tab-basemap #preset-zoomout-country-zoom:active::-moz-range-thumb,
#scene-tab-basemap #preset-zoomout-stage1-ratio:active::-moz-range-thumb,
#scene-tab-basemap #preset-cam-out-pct:active::-moz-range-thumb,
#scene-tab-basemap #preset-cam-travel-pct:active::-moz-range-thumb,
#scene-tab-basemap #preset-cam-in-pct:active::-moz-range-thumb,
#scene-tab-basemap #preset-zoomout-fadein-lead-ms:active::-moz-range-thumb,
#scene-tab-basemap #preset-zoomout-country-zoom.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #preset-zoomout-stage1-ratio.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #preset-cam-out-pct.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #preset-cam-travel-pct.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #preset-cam-in-pct.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #preset-zoomout-fadein-lead-ms.sp-range--dragging::-moz-range-thumb {
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

/* Label table range styling: see “BASEMAP label table: flat range sliders” block after custom-basemap rules. */
/* Don’t grey out the whole control (track + fill); keep same look as enabled. */
.scene-panel .lcp-label-styles-table input[type="range"]:disabled,
#label-colors-panel .lcp-label-styles-table input[type="range"]:disabled {
  filter: none;
  opacity: 0.88;
}
.scene-panel .lcp-label-styles-table input[type="range"]:disabled::-webkit-slider-thumb,
#label-colors-panel .lcp-label-styles-table input[type="range"]:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}
.scene-panel .lcp-label-styles-table input[type="range"]:disabled::-moz-range-thumb,
#label-colors-panel .lcp-label-styles-table input[type="range"]:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

/* Label table sliders: height baseline (flat thumb/track rules override fancy Scene sliders below). */
.scene-panel #label-colors-panel .lcp-size-slider,
#label-colors-panel .lcp-label-styles-table .lcp-size-slider {
  height: 10px !important;
  accent-color: transparent !important;
}

.scene-panel #label-colors-panel .lcp-cntry-search:focus,
.scene-panel #label-colors-panel .lcp-city-search:focus {
  border-color: var(--sp-slider-fill) !important;
  box-shadow: 0 0 0 2px rgba(110, 118, 232, 0.3) !important;
}

/* Save tab: same single accent */
.scene-panel #pm-panel .pm-edit-btn--edit {
  background: linear-gradient(180deg, #8b92f0 0%, var(--sp-slider-fill) 50%, var(--sp-slider-fill-mid) 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 12px rgba(92, 100, 212, 0.32) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.scene-panel #pm-panel .pm-edit-btn--edit:hover {
  background: linear-gradient(180deg, #989ff5 0%, #7c83f5 45%, #5258c9 100%) !important;
  filter: brightness(1.05);
  color: #fff !important;
}

.scene-panel #pm-panel .pm-scene-act--load:hover,
.scene-panel #pm-panel .pm-scene-act--edit:hover {
  background: linear-gradient(180deg, #8b92f0 0%, var(--sp-slider-fill) 100%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 10px rgba(92, 100, 212, 0.3) !important;
}

.scene-panel #pm-panel .pm-scene-act--home-active {
  background: linear-gradient(180deg, #8b92f0 0%, var(--sp-slider-fill) 55%, var(--sp-slider-fill-mid) 100%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 12px rgba(92, 100, 212, 0.3) !important;
}

.scene-panel #pm-panel .pm-edit-banner {
  background: #eef0ff !important;
  border: 1px solid #c8cef0 !important;
  color: #3730a3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ── Black monochrome chrome: Custom / Dark / Light, and Satellite when map.scenePanelPurpleThemeForSatellite is false ── */
.scene-panel[data-scene-basemap="custom"] {
  --sp-accent: #171717;
  --sp-accent-mid: #0a0a0a;
  --sp-accent-cool: #404040;
  --sp-accent-hot: #262626;
  --sp-gloss-top: rgba(255, 255, 255, 0.22);
  --sp-gloss-mid: rgba(255, 255, 255, 0.05);
  --sp-glow: 0 4px 20px rgba(0, 0, 0, 0.28);
  --sp-glow-cyan: 0 0 12px rgba(255, 255, 255, 0.05);
  --sp-slider-fill: #1a1a1a;
  --sp-slider-fill-mid: #0d0d0d;
  --sp-slider-rail: #e8eaef;
  --sp-slider-rail-edge: #c5ccd8;
  --sp-slider-tick: rgba(15, 23, 42, 0.08);
}

@keyframes sp-slider-thumb-tickle-dark {
  0%, 100% {
    transform: rotate(var(--sp-thumb-rotate, 0deg));
    box-shadow:
      0 0 0 2px rgba(0, 0, 0, 0.12),
      0 4px 14px rgba(0, 0, 0, 0.32),
      inset 0 2px 0 rgba(255, 255, 255, 0.5),
      inset 0 -2px 4px rgba(0, 0, 0, 0.35);
    filter: brightness(1);
  }
  50% {
    transform: rotate(var(--sp-thumb-rotate, 0deg)) scale(1.04);
    box-shadow:
      0 0 0 4px rgba(0, 0, 0, 0.18),
      0 7px 22px rgba(0, 0, 0, 0.4),
      inset 0 2px 0 rgba(255, 255, 255, 0.62),
      inset 0 -2px 4px rgba(0, 0, 0, 0.28);
    filter: brightness(1.06);
  }
}

.scene-panel[data-scene-basemap="custom"] .scene-panel-title::before {
  background: linear-gradient(180deg, #2d2d2d 0%, #111 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 10px rgba(0, 0, 0, 0.35) !important;
}

.scene-panel[data-scene-basemap="custom"] .scene-tab.scene-tab--active {
  color: #fff !important;
  background: linear-gradient(180deg, #2a2a2a 0%, #111 55%, #0a0a0a 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 3px 14px rgba(0, 0, 0, 0.35) !important;
  text-shadow: none;
}

.scene-panel[data-scene-basemap="custom"] .scene-subtab.scene-subtab--active {
  color: #fff !important;
  background: linear-gradient(180deg, #2a2a2a 0%, #111 50%, #0a0a0a 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 12px rgba(0, 0, 0, 0.32) !important;
  text-shadow: none;
}

.scene-panel[data-scene-basemap="custom"] .scene-base-btn.scene-base-btn--active {
  color: #fff !important;
  background: linear-gradient(180deg, #2a2a2a 0%, #111 50%, #0a0a0a 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 12px rgba(0, 0, 0, 0.32) !important;
  text-shadow: none;
}

.scene-panel[data-scene-basemap="custom"] .scene-marker-btn.scene-marker-btn--active {
  color: #fff !important;
  background: linear-gradient(180deg, #2a2a2a 0%, #111 50%, #0a0a0a 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 12px rgba(0, 0, 0, 0.3) !important;
  text-shadow: none;
}

.scene-panel[data-scene-basemap="custom"] .scene-tab-hint--global {
  background: #f3f4f6 !important;
  border: 1px solid #9ca3af !important;
  color: #111827 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.scene-panel[data-scene-basemap="custom"] .ch-base-btn.ch-base-btn--active {
  color: #fff !important;
  background: linear-gradient(180deg, #2a2a2a 0%, #111 50%, #0a0a0a 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 12px rgba(0, 0, 0, 0.3) !important;
}

.scene-panel[data-scene-basemap="custom"] .ch-tool-btn.ch-tool-btn--on {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 38%),
    linear-gradient(180deg, #2a2a2a 0%, #111 55%, #0a0a0a 100%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

.scene-panel[data-scene-basemap="custom"] .ch-swatch.ch-swatch--active {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px #111,
    0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.scene-panel[data-scene-basemap="custom"] input[type="checkbox"]:checked {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));
}

.scene-panel[data-scene-basemap="custom"] #label-colors-panel .lcp-cntry-search:focus,
.scene-panel[data-scene-basemap="custom"] #label-colors-panel .lcp-city-search:focus {
  border-color: #111 !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.22) !important;
}

.scene-panel[data-scene-basemap="custom"] #pm-panel .pm-edit-btn--edit {
  background: linear-gradient(180deg, #2a2a2a 0%, #111 50%, #0a0a0a 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 12px rgba(0, 0, 0, 0.32) !important;
  text-shadow: none;
}

.scene-panel[data-scene-basemap="custom"] #pm-panel .pm-edit-btn--edit:hover {
  background: linear-gradient(180deg, #333 0%, #1a1a1a 45%, #0d0d0d 100%) !important;
  filter: brightness(1.05);
  color: #fff !important;
}

.scene-panel[data-scene-basemap="custom"] #pm-panel .pm-scene-act--load:hover,
.scene-panel[data-scene-basemap="custom"] #pm-panel .pm-scene-act--edit:hover {
  background: linear-gradient(180deg, #2a2a2a 0%, #111 100%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.scene-panel[data-scene-basemap="custom"] #pm-panel .pm-scene-act--home-active {
  background: linear-gradient(180deg, #2a2a2a 0%, #111 55%, #0a0a0a 100%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 12px rgba(0, 0, 0, 0.3) !important;
}

.scene-panel[data-scene-basemap="custom"] #pm-panel .pm-edit-banner {
  background: #f3f4f6 !important;
  border: 1px solid #9ca3af !important;
  color: #111827 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.scene-panel[data-scene-basemap="custom"] input[type="range"]::-webkit-slider-thumb {
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.1) 32%, transparent 40%),
    radial-gradient(circle at 78% 82%, rgba(0, 0, 0, 0.42) 0%, transparent 48%),
    linear-gradient(125deg, #5c5c5c 0%, var(--sp-slider-fill) 42%, var(--sp-slider-fill-mid) 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.1),
    0 4px 14px rgba(0, 0, 0, 0.32),
    inset 0 2px 0 rgba(255, 255, 255, 0.48),
    inset 0 -2px 4px rgba(0, 0, 0, 0.32) !important;
}

.scene-panel[data-scene-basemap="custom"] input[type="range"].sp-range--dragging::-webkit-slider-thumb {
  animation: none;
}

.scene-panel[data-scene-basemap="custom"] input[type="range"]::-moz-range-thumb {
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.1) 32%, transparent 40%),
    radial-gradient(circle at 78% 82%, rgba(0, 0, 0, 0.42) 0%, transparent 48%),
    linear-gradient(125deg, #5c5c5c 0%, var(--sp-slider-fill) 42%, var(--sp-slider-fill-mid) 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.1),
    0 4px 14px rgba(0, 0, 0, 0.32),
    inset 0 2px 0 rgba(255, 255, 255, 0.48) !important;
}

.scene-panel[data-scene-basemap="custom"] input[type="range"].sp-range--dragging::-moz-range-thumb {
  animation: none;
}

/*
 * Label colours table: plain range sliders (flat track + simple thumb).
 * #label-colors-panel … works when the panel is under body; .scene-panel … when nested in Scene.
 */
.scene-panel .lcp-label-styles-table input[type="range"],
#label-colors-panel .lcp-label-styles-table input[type="range"] {
  height: 10px !important;
  --sp-thumb-rotate: 0deg !important;
}
.scene-panel .lcp-label-styles-table input[type="range"]::-webkit-slider-runnable-track,
#label-colors-panel .lcp-label-styles-table input[type="range"]::-webkit-slider-runnable-track {
  height: 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--sp-slider-rail-edge, #c5ccd8) !important;
  background-image: linear-gradient(
    90deg,
    var(--sp-slider-fill, #6e76e8) 0%,
    var(--sp-slider-fill, #6e76e8) var(--sp-fill-pct, 0%),
    var(--sp-slider-rail, #e8eaef) var(--sp-fill-pct, 0%),
    var(--sp-slider-rail, #e8eaef) 100%
  ) !important;
  box-shadow: none !important;
  animation: none !important;
}
.scene-panel .lcp-label-styles-table input[type="range"].sp-range--dragging::-webkit-slider-runnable-track,
#label-colors-panel .lcp-label-styles-table input[type="range"].sp-range--dragging::-webkit-slider-runnable-track {
  animation: none !important;
}
.scene-panel .lcp-label-styles-table input[type="range"]::-webkit-slider-thumb,
#label-colors-panel .lcp-label-styles-table input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -4px !important;
  border-radius: 50% !important;
  transform: none !important;
  background: #ffffff !important;
  border: 2px solid var(--sp-slider-fill, #6e76e8) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  animation: none !important;
  transition: box-shadow 0.12s ease, border-color 0.12s ease !important;
  filter: none !important;
}
.scene-panel .lcp-label-styles-table input[type="range"]:active::-webkit-slider-thumb,
#label-colors-panel .lcp-label-styles-table input[type="range"]:active::-webkit-slider-thumb {
  transform: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
}
.scene-panel .lcp-label-styles-table input[type="range"].sp-range--dragging::-webkit-slider-thumb,
#label-colors-panel .lcp-label-styles-table input[type="range"].sp-range--dragging::-webkit-slider-thumb {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}
.scene-panel .lcp-label-styles-table input[type="range"]::-moz-range-track,
#label-colors-panel .lcp-label-styles-table input[type="range"]::-moz-range-track {
  height: 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--sp-slider-rail-edge, #c5ccd8) !important;
  background: var(--sp-slider-rail, #e8eaef) !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
}
.scene-panel .lcp-label-styles-table input[type="range"]::-moz-range-progress,
#label-colors-panel .lcp-label-styles-table input[type="range"]::-moz-range-progress {
  height: 6px !important;
  border-radius: 4px !important;
  background: var(--sp-slider-fill, #6e76e8) !important;
  box-shadow: none !important;
}
.scene-panel .lcp-label-styles-table input[type="range"]::-moz-range-thumb,
#label-colors-panel .lcp-label-styles-table input[type="range"]::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  transform: none !important;
  background: #ffffff !important;
  border: 2px solid var(--sp-slider-fill, #6e76e8) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  animation: none !important;
  filter: none !important;
}
.scene-panel .lcp-label-styles-table input[type="range"].sp-range--dragging::-moz-range-thumb,
.scene-panel .lcp-label-styles-table input[type="range"].sp-range--dragging::-moz-range-track,
#label-colors-panel .lcp-label-styles-table input[type="range"].sp-range--dragging::-moz-range-thumb,
#label-colors-panel .lcp-label-styles-table input[type="range"].sp-range--dragging::-moz-range-track {
  animation: none !important;
}

/*
 * Flat “simple” ranges: BASEMAP (greyscale, brightness, preset fly/fades) + FILLS opacity + MARKERS/Labels defaults.
 * --sp-thumb-rotate !important overrides inline “rolling sphere” from bindScenePanelRangeFills.
 */
#scene-tab-basemap #news-grayscale-amount,
#scene-tab-basemap #map-brightness-amount,
#scene-tab-basemap #preset-fly-duration,
#scene-tab-basemap #preset-fade-out-ms,
#scene-tab-basemap #preset-fade-in-ms,
#scene-tab-basemap #scene-graphics-opacity,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac,
.scene-panel #scene-subpane-markers input.scene-mstyle-range,
#sm-edit-marker-box input.scene-mstyle-range {
  height: 10px !important;
  --sp-thumb-rotate: 0deg !important;
}
#scene-tab-basemap #news-grayscale-amount::-webkit-slider-runnable-track,
#scene-tab-basemap #map-brightness-amount::-webkit-slider-runnable-track,
#scene-tab-basemap #preset-fly-duration::-webkit-slider-runnable-track,
#scene-tab-basemap #preset-fade-out-ms::-webkit-slider-runnable-track,
#scene-tab-basemap #preset-fade-in-ms::-webkit-slider-runnable-track,
#scene-tab-basemap #scene-graphics-opacity::-webkit-slider-runnable-track,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac::-webkit-slider-runnable-track,
.scene-panel #scene-subpane-markers input.scene-mstyle-range::-webkit-slider-runnable-track,
#sm-edit-marker-box input.scene-mstyle-range::-webkit-slider-runnable-track {
  height: 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--sp-slider-rail-edge) !important;
  background-image: linear-gradient(
    90deg,
    var(--sp-slider-fill) 0%,
    var(--sp-slider-fill) var(--sp-fill-pct, 0%),
    var(--sp-slider-rail) var(--sp-fill-pct, 0%),
    var(--sp-slider-rail) 100%
  ) !important;
  box-shadow: none !important;
  animation: none !important;
}
#scene-tab-basemap #news-grayscale-amount.sp-range--dragging::-webkit-slider-runnable-track,
#scene-tab-basemap #map-brightness-amount.sp-range--dragging::-webkit-slider-runnable-track,
#scene-tab-basemap #preset-fly-duration.sp-range--dragging::-webkit-slider-runnable-track,
#scene-tab-basemap #preset-fade-out-ms.sp-range--dragging::-webkit-slider-runnable-track,
#scene-tab-basemap #preset-fade-in-ms.sp-range--dragging::-webkit-slider-runnable-track,
#scene-tab-basemap #scene-graphics-opacity.sp-range--dragging::-webkit-slider-runnable-track,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac.sp-range--dragging::-webkit-slider-runnable-track,
.scene-panel #scene-subpane-markers input.scene-mstyle-range.sp-range--dragging::-webkit-slider-runnable-track,
#sm-edit-marker-box input.scene-mstyle-range.sp-range--dragging::-webkit-slider-runnable-track {
  animation: none !important;
}
#scene-tab-basemap #news-grayscale-amount::-webkit-slider-thumb,
#scene-tab-basemap #map-brightness-amount::-webkit-slider-thumb,
#scene-tab-basemap #preset-fly-duration::-webkit-slider-thumb,
#scene-tab-basemap #preset-fade-out-ms::-webkit-slider-thumb,
#scene-tab-basemap #preset-fade-in-ms::-webkit-slider-thumb,
#scene-tab-basemap #scene-graphics-opacity::-webkit-slider-thumb,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac::-webkit-slider-thumb,
.scene-panel #scene-subpane-markers input.scene-mstyle-range::-webkit-slider-thumb,
#sm-edit-marker-box input.scene-mstyle-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -4px !important;
  border-radius: 50% !important;
  transform: none !important;
  background: #ffffff !important;
  border: 2px solid var(--sp-slider-fill) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  animation: none !important;
  transition: box-shadow 0.12s ease, border-color 0.12s ease !important;
  filter: none !important;
}
#scene-tab-basemap #news-grayscale-amount:active::-webkit-slider-thumb,
#scene-tab-basemap #map-brightness-amount:active::-webkit-slider-thumb,
#scene-tab-basemap #preset-fly-duration:active::-webkit-slider-thumb,
#scene-tab-basemap #preset-fade-out-ms:active::-webkit-slider-thumb,
#scene-tab-basemap #preset-fade-in-ms:active::-webkit-slider-thumb,
#scene-tab-basemap #scene-graphics-opacity:active::-webkit-slider-thumb,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac:active::-webkit-slider-thumb,
.scene-panel #scene-subpane-markers input.scene-mstyle-range:active::-webkit-slider-thumb,
#sm-edit-marker-box input.scene-mstyle-range:active::-webkit-slider-thumb {
  transform: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
}
#scene-tab-basemap #news-grayscale-amount.sp-range--dragging::-webkit-slider-thumb,
#scene-tab-basemap #map-brightness-amount.sp-range--dragging::-webkit-slider-thumb,
#scene-tab-basemap #preset-fly-duration.sp-range--dragging::-webkit-slider-thumb,
#scene-tab-basemap #preset-fade-out-ms.sp-range--dragging::-webkit-slider-thumb,
#scene-tab-basemap #preset-fade-in-ms.sp-range--dragging::-webkit-slider-thumb,
#scene-tab-basemap #scene-graphics-opacity.sp-range--dragging::-webkit-slider-thumb,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac.sp-range--dragging::-webkit-slider-thumb,
.scene-panel #scene-subpane-markers input.scene-mstyle-range.sp-range--dragging::-webkit-slider-thumb,
#sm-edit-marker-box input.scene-mstyle-range.sp-range--dragging::-webkit-slider-thumb {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}
#scene-tab-basemap #news-grayscale-amount::-moz-range-track,
#scene-tab-basemap #map-brightness-amount::-moz-range-track,
#scene-tab-basemap #preset-fly-duration::-moz-range-track,
#scene-tab-basemap #preset-fade-out-ms::-moz-range-track,
#scene-tab-basemap #preset-fade-in-ms::-moz-range-track,
#scene-tab-basemap #scene-graphics-opacity::-moz-range-track,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac::-moz-range-track,
.scene-panel #scene-subpane-markers input.scene-mstyle-range::-moz-range-track,
#sm-edit-marker-box input.scene-mstyle-range::-moz-range-track {
  height: 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--sp-slider-rail-edge) !important;
  background: var(--sp-slider-rail) !important;
  background-image: none !important;
  box-shadow: none !important;
  animation: none !important;
}
#scene-tab-basemap #news-grayscale-amount::-moz-range-progress,
#scene-tab-basemap #map-brightness-amount::-moz-range-progress,
#scene-tab-basemap #preset-fly-duration::-moz-range-progress,
#scene-tab-basemap #preset-fade-out-ms::-moz-range-progress,
#scene-tab-basemap #preset-fade-in-ms::-moz-range-progress,
#scene-tab-basemap #scene-graphics-opacity::-moz-range-progress,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac::-moz-range-progress,
.scene-panel #scene-subpane-markers input.scene-mstyle-range::-moz-range-progress,
#sm-edit-marker-box input.scene-mstyle-range::-moz-range-progress {
  height: 6px !important;
  border-radius: 4px !important;
  background: var(--sp-slider-fill) !important;
  box-shadow: none !important;
}
#scene-tab-basemap #news-grayscale-amount::-moz-range-thumb,
#scene-tab-basemap #map-brightness-amount::-moz-range-thumb,
#scene-tab-basemap #preset-fly-duration::-moz-range-thumb,
#scene-tab-basemap #preset-fade-out-ms::-moz-range-thumb,
#scene-tab-basemap #preset-fade-in-ms::-moz-range-thumb,
#scene-tab-basemap #scene-graphics-opacity::-moz-range-thumb,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac::-moz-range-thumb,
.scene-panel #scene-subpane-markers input.scene-mstyle-range::-moz-range-thumb,
#sm-edit-marker-box input.scene-mstyle-range::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  transform: none !important;
  background: #ffffff !important;
  border: 2px solid var(--sp-slider-fill) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  animation: none !important;
  filter: none !important;
}
#scene-tab-basemap #news-grayscale-amount.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #news-grayscale-amount.sp-range--dragging::-moz-range-track,
#scene-tab-basemap #map-brightness-amount.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #map-brightness-amount.sp-range--dragging::-moz-range-track,
#scene-tab-basemap #preset-fly-duration.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #preset-fly-duration.sp-range--dragging::-moz-range-track,
#scene-tab-basemap #preset-fade-out-ms.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #preset-fade-out-ms.sp-range--dragging::-moz-range-track,
#scene-tab-basemap #preset-fade-in-ms.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #preset-fade-in-ms.sp-range--dragging::-moz-range-track,
#scene-tab-basemap #scene-graphics-opacity.sp-range--dragging::-moz-range-thumb,
#scene-tab-basemap #scene-graphics-opacity.sp-range--dragging::-moz-range-track,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac.sp-range--dragging::-moz-range-thumb,
.scene-panel #scene-subpane-fills #ch-panel input.ch-fill-opac.sp-range--dragging::-moz-range-track,
.scene-panel #scene-subpane-markers input.scene-mstyle-range.sp-range--dragging::-moz-range-thumb,
.scene-panel #scene-subpane-markers input.scene-mstyle-range.sp-range--dragging::-moz-range-track,
#sm-edit-marker-box input.scene-mstyle-range.sp-range--dragging::-moz-range-thumb,
#sm-edit-marker-box input.scene-mstyle-range.sp-range--dragging::-moz-range-track {
  animation: none !important;
}

/* Global slider policy: disable glow/tickle effects everywhere. */
.scene-panel input[type="range"].sp-range--dragging::-webkit-slider-runnable-track,
.scene-panel input[type="range"].sp-range--dragging::-webkit-slider-thumb,
.scene-panel input[type="range"].sp-range--dragging::-moz-range-track,
.scene-panel input[type="range"].sp-range--dragging::-moz-range-thumb {
  animation: none !important;
}
.scene-panel input[type="range"]:active::-webkit-slider-thumb,
.scene-panel input[type="range"].sp-range--dragging::-webkit-slider-thumb,
.scene-panel input[type="range"]:active::-moz-range-thumb,
.scene-panel input[type="range"].sp-range--dragging::-moz-range-thumb {
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.scene-panel[data-scene-basemap="custom"] .scene-panel-close {
  background: #e5e7eb;
  border-color: #9ca3af;
  color: #111827;
}
.scene-panel[data-scene-basemap="custom"] .scene-panel-close:hover {
  background: #d1d5db;
  color: #000;
  border-color: #6b7280;
}

/* Edit marker popup sliders: force same simple style as Scene panel sliders */
#sm-edit-marker-box input.scene-mstyle-range::-webkit-slider-runnable-track {
  height: 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--sp-slider-rail-edge) !important;
  background-image: linear-gradient(
    90deg,
    var(--sp-slider-fill) 0%,
    var(--sp-slider-fill) var(--sp-fill-pct, 50%),
    var(--sp-slider-rail) var(--sp-fill-pct, 50%),
    var(--sp-slider-rail) 100%
  ) !important;
  box-shadow: none !important;
  animation: none !important;
}
#sm-edit-marker-box input.scene-mstyle-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -4px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid var(--sp-slider-fill) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  transform: none !important;
}
#sm-edit-marker-box input.scene-mstyle-range::-moz-range-track {
  height: 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--sp-slider-rail-edge) !important;
  background: var(--sp-slider-rail) !important;
  box-shadow: none !important;
}
#sm-edit-marker-box input.scene-mstyle-range::-moz-range-progress {
  height: 6px !important;
  border-radius: 4px !important;
  background: var(--sp-slider-fill) !important;
}
#sm-edit-marker-box input.scene-mstyle-range::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid var(--sp-slider-fill) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  transform: none !important;
}

/* Unified typography for Scene panel and related editor boxes */
.scene-panel,
.scene-panel input,
.scene-panel textarea,
.scene-panel select,
.scene-panel button,
#ch-panel,
#ch-panel input,
#ch-panel textarea,
#ch-panel select,
#ch-panel button,
.sm-edit-marker-box,
.sm-edit-marker-box input,
.sm-edit-marker-box textarea,
.sm-edit-marker-box select,
.sm-edit-marker-box button,
.sm-marker-form,
.sm-marker-form input,
.sm-marker-form textarea,
.sm-marker-form select,
.sm-marker-form button,
.sm-save-modal,
.sm-save-modal input,
.sm-save-modal textarea,
.sm-save-modal select,
.sm-save-modal button,
#pm-save-modal,
#pm-save-modal input,
#pm-save-modal textarea,
#pm-save-modal select,
#pm-save-modal button,
#sbc-name-modal,
#sbc-name-modal input,
#sbc-name-modal textarea,
#sbc-name-modal select,
#sbc-name-modal button,
#scene-unsaved-modal,
#scene-unsaved-modal input,
#scene-unsaved-modal textarea,
#scene-unsaved-modal select,
#scene-unsaved-modal button {
  font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Arabic mode: use Al Jazeera Arabic across Scene panel and related boxes */
.touch-lang-ar .scene-panel,
.touch-lang-ar .scene-panel input,
.touch-lang-ar .scene-panel textarea,
.touch-lang-ar .scene-panel select,
.touch-lang-ar .scene-panel button,
.touch-lang-ar #ch-panel,
.touch-lang-ar #ch-panel input,
.touch-lang-ar #ch-panel textarea,
.touch-lang-ar #ch-panel select,
.touch-lang-ar #ch-panel button,
.touch-lang-ar .sm-edit-marker-box,
.touch-lang-ar .sm-edit-marker-box input,
.touch-lang-ar .sm-edit-marker-box textarea,
.touch-lang-ar .sm-edit-marker-box select,
.touch-lang-ar .sm-edit-marker-box button,
.touch-lang-ar .sm-marker-form,
.touch-lang-ar .sm-marker-form input,
.touch-lang-ar .sm-marker-form textarea,
.touch-lang-ar .sm-marker-form select,
.touch-lang-ar .sm-marker-form button,
.touch-lang-ar .sm-save-modal,
.touch-lang-ar .sm-save-modal input,
.touch-lang-ar .sm-save-modal textarea,
.touch-lang-ar .sm-save-modal select,
.touch-lang-ar .sm-save-modal button,
.touch-lang-ar #pm-save-modal,
.touch-lang-ar #pm-save-modal input,
.touch-lang-ar #pm-save-modal textarea,
.touch-lang-ar #pm-save-modal select,
.touch-lang-ar #pm-save-modal button,
.touch-lang-ar #sbc-name-modal,
.touch-lang-ar #sbc-name-modal input,
.touch-lang-ar #sbc-name-modal textarea,
.touch-lang-ar #sbc-name-modal select,
.touch-lang-ar #sbc-name-modal button,
.touch-lang-ar #scene-unsaved-modal,
.touch-lang-ar #scene-unsaved-modal input,
.touch-lang-ar #scene-unsaved-modal textarea,
.touch-lang-ar #scene-unsaved-modal select,
.touch-lang-ar #scene-unsaved-modal button {
  font-family: 'Al Jazeera Arabic Regular', 'Al Jazeera Arabic', 'Al Jazeera', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Ensure Map Label Styles table also uses Montserrat */
.scene-panel .lcp-label-styles-table,
.scene-panel .lcp-label-styles-table th,
.scene-panel .lcp-label-styles-table td,
.scene-panel .lcp-label-styles-table input,
.scene-panel .lcp-label-styles-table select,
.scene-panel .lcp-label-styles-table button,
.scene-panel .lcp-tbl-pad-lbl,
.scene-panel .lcp-tbl-pad .lcp-size-val,
.scene-panel .lcp-tbl-hint {
  font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}