/* ═══════════════════════════════════════════════════════════
   FLOATING-LAYOUT.CSS v9.2 — Full Mobile Rewrite
   ═══════════════════════════════════════════════════════════ */

/* ── 0. THEME VARIABLES ── */
:root,
body.theme-hud,
[data-ui-theme="dark"] {
  --fl-bg: rgba(10, 15, 28, 0.94);
  --fl-bg-solid: #0a0f1c;
  --fl-bg-card: rgba(255, 255, 255, 0.028);
  --fl-bg-card-hover: rgba(255, 255, 255, 0.055);
  --fl-bg-input: rgba(255, 255, 255, 0.045);
  --fl-bg-input-focus: rgba(255, 255, 255, 0.075);
  --fl-border: rgba(255, 255, 255, 0.07);
  --fl-border-hover: rgba(255, 255, 255, 0.14);
  --fl-border-accent: rgba(0, 194, 255, 0.25);
  --fl-text: rgba(255, 255, 255, 0.9);
  --fl-text-dim: rgba(255, 255, 255, 0.55);
  --fl-text-muted: rgba(255, 255, 255, 0.32);
  --fl-accent: #00c2ff;
  --fl-accent-dim: rgba(0, 194, 255, 0.12);
  --fl-accent-glow: rgba(0, 194, 255, 0.25);
  --fl-danger: #ff4d6a;
  --fl-success: #00e68a;
  --fl-warning: #ffb800;
  --fl-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --fl-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
  --fl-radius: 14px;
  --fl-radius-sm: 10px;
  --fl-radius-xs: 6px;
  --fl-blur: blur(24px);
  --fl-font: 'Rajdhani', 'Inter', -apple-system, sans-serif;
  --fl-font-mono: 'Orbitron', 'JetBrains Mono', monospace;
  --fl-topbar-bg: rgba(10, 15, 28, 0.9);
  --fl-topbar-border: rgba(255, 255, 255, 0.07);
  --fl-toggle-bg: rgba(255, 255, 255, 0.1);
  --fl-toggle-bg-on: var(--fl-accent);
  --fl-toggle-knob: #ffffff;
  --fl-chip-bg: rgba(255, 255, 255, 0.055);
  --fl-chip-bg-active: var(--fl-accent);
  --fl-chip-text: var(--fl-text-dim);
  --fl-chip-text-active: #040815;
  --fl-scrollbar: rgba(255, 255, 255, 0.06);
  --fl-scrollbar-hover: rgba(255, 255, 255, 0.14);
}

[data-ui-theme="light"],
[data-ui-theme="light"].theme-hud,
body[data-ui-theme="light"] {
  --fl-bg: rgba(255, 255, 255, 0.94);
  --fl-bg-solid: #f4f6f9;
  --fl-bg-card: rgba(0, 0, 0, 0.022);
  --fl-bg-card-hover: rgba(0, 0, 0, 0.045);
  --fl-bg-input: rgba(0, 0, 0, 0.035);
  --fl-bg-input-focus: rgba(0, 0, 0, 0.06);
  --fl-border: rgba(0, 0, 0, 0.07);
  --fl-border-hover: rgba(0, 0, 0, 0.14);
  --fl-border-accent: rgba(0, 130, 200, 0.3);
  --fl-text: rgba(0, 0, 0, 0.85);
  --fl-text-dim: rgba(0, 0, 0, 0.5);
  --fl-text-muted: rgba(0, 0, 0, 0.32);
  --fl-accent: #0082c8;
  --fl-accent-dim: rgba(0, 130, 200, 0.08);
  --fl-accent-glow: rgba(0, 130, 200, 0.18);
  --fl-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
  --fl-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1);
  --fl-topbar-bg: rgba(255, 255, 255, 0.9);
  --fl-topbar-border: rgba(0, 0, 0, 0.07);
  --fl-toggle-bg: rgba(0, 0, 0, 0.1);
  --fl-toggle-knob: #ffffff;
  --fl-chip-bg: rgba(0, 0, 0, 0.04);
  --fl-chip-text: var(--fl-text-dim);
  --fl-chip-text-active: #ffffff;
  --fl-scrollbar: rgba(0, 0, 0, 0.05);
  --fl-scrollbar-hover: rgba(0, 0, 0, 0.1);
}

/* ── 1. KILL GRID — MAP FULLSCREEN ── */
.app, body.theme-hud .app,
.layout, body.theme-hud .layout {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  height: 100dvh !important;
  width: 100vw !important;
  overflow: hidden !important;
  position: relative !important;
}

#map, .map-container, body.theme-hud #map {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100dvh !important;
  z-index: 1 !important;
  grid-column: unset !important; grid-row: unset !important;
}

/* ── 2. HIDE TIMELINE ── */
.timeline, #timeline {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── 3. TOPBAR ── */
.topbar, body.theme-hud .topbar {
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important; bottom: auto !important;
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  height: 48px !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  background: var(--fl-topbar-bg) !important;
  border: 1px solid var(--fl-topbar-border) !important;
  border-radius: 24px !important;
  backdrop-filter: var(--fl-blur) !important;
  -webkit-backdrop-filter: var(--fl-blur) !important;
  box-shadow: var(--fl-shadow) !important;
  grid-column: unset !important; grid-row: unset !important;
}

.topbar__row--2, .topbar .topbar__row--2 {
  display: none !important;
}

/* ── 4. SIDEBARS ── */
.sidebar, .sidebar--left, .sidebar--right,
body.theme-hud .sidebar,
body.theme-hud .sidebar--left,
body.theme-hud .sidebar--right {
  position: fixed !important;
  top: 72px !important;
  bottom: 16px !important;
  width: 320px !important;
  z-index: 900 !important;
  background: var(--fl-bg) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius) !important;
  backdrop-filter: var(--fl-blur) !important;
  -webkit-backdrop-filter: var(--fl-blur) !important;
  box-shadow: var(--fl-shadow-lg) !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease !important;
  grid-column: unset !important; grid-row: unset !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.sidebar--left, body.theme-hud .sidebar--left {
  left: 12px !important; right: auto !important;
}
.sidebar--right, body.theme-hud .sidebar--right {
  right: 12px !important; left: auto !important;
}

.sidebar--left.floating-hidden,
body.theme-hud .sidebar--left.floating-hidden {
  transform: translateX(calc(-100% - 24px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.sidebar--right.floating-hidden,
body.theme-hud .sidebar--right.floating-hidden {
  transform: translateX(calc(100% + 24px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── 5. SIDEBAR SCROLL ── */
.sidebar__scroll, body.theme-hud .sidebar__scroll {
  flex: 1 !important;
  height: 100% !important;
  max-height: none !important;
  padding: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--fl-scrollbar) transparent !important;
}

.sidebar--left {
  overflow-y: auto !important;
  padding: 12px !important;
}

.sidebar--left .panel__body,
.sidebar .panel__body {
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

.sidebar__scroll::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.sidebar--left::-webkit-scrollbar { width: 4px !important; }
.sidebar__scroll::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.sidebar--left::-webkit-scrollbar-track { background: transparent !important; }
.sidebar__scroll::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.sidebar--left::-webkit-scrollbar-thumb { background: var(--fl-scrollbar) !important; border-radius: 2px !important; }
.sidebar__scroll::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar--left::-webkit-scrollbar-thumb:hover { background: var(--fl-scrollbar-hover) !important; }

/* ── 6. PANELS ── */
.sidebar .panel,
.sidebar [class*="panel--"],
#filters-panel, #chat-panel,
.panel--addPoint, .panel--analytics, .panel--management {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.sidebar .panel__head,
.sidebar .panel__header,
.sidebar [class*="panel__head"] {
  padding: 4px 2px 8px !important;
  border-bottom: none !important;
  margin-bottom: 4px !important;
  background: transparent !important;
}

.panel__title,
.panel__titleText {
  font-family: var(--fl-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--fl-text-muted) !important;
}

.sidebar .panel__body {
  padding: 0 !important;
}

/* ── 7. PANEL GROUPS ── */
.panel__group {
  background: var(--fl-bg-card) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-sm) !important;
  padding: 10px 12px !important;
  margin-bottom: 6px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.panel__group:hover {
  background: var(--fl-bg-card-hover) !important;
  border-color: var(--fl-border-hover) !important;
}

.panel__group:last-child {
  margin-bottom: 0 !important;
}

.panel__label {
  font-family: var(--fl-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--fl-text-muted) !important;
  margin-bottom: 8px !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* ── 8. TOGGLE SWITCH ── */
.toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  padding: 0 !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  min-height: 24px !important;
}

.toggle input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important; height: 0 !important;
  pointer-events: none !important;
}

.toggle__track {
  position: relative !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 20px !important;
  background: var(--fl-toggle-bg) !important;
  border-radius: 10px !important;
  transition: background 0.25s ease, box-shadow 0.25s ease !important;
  flex-shrink: 0 !important;
}

.toggle__track::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--fl-toggle-knob) !important;
  border-radius: 50% !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.toggle input:checked + .toggle__track {
  background: var(--fl-toggle-bg-on) !important;
  box-shadow: 0 0 10px var(--fl-accent-glow) !important;
}

.toggle input:checked + .toggle__track::after {
  transform: translateX(16px) !important;
}

.toggle__label {
  font-family: var(--fl-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--fl-text) !important;
  line-height: 1.3 !important;
}

/* ── 9. CHIPS ── */
.chip-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 12px !important;
  font-family: var(--fl-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fl-chip-text) !important;
  background: var(--fl-chip-bg) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.chip:hover {
  background: var(--fl-bg-card-hover) !important;
  border-color: var(--fl-border-hover) !important;
  color: var(--fl-text) !important;
}

.chip--active, .chip.chip--active,
.chip.is-active, .chip[aria-pressed="true"] {
  background: var(--fl-chip-bg-active) !important;
  color: var(--fl-chip-text-active) !important;
  border-color: var(--fl-chip-bg-active) !important;
  box-shadow: 0 2px 8px var(--fl-accent-glow) !important;
}

/* ── 10. INPUTS ── */
.input, .select,
input[type="datetime-local"],
input[type="text"],
input[type="number"],
input[type="date"],
select {
  width: 100% !important;
  padding: 7px 10px !important;
  font-family: var(--fl-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--fl-text) !important;
  background: var(--fl-bg-input) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-xs) !important;
  outline: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.4 !important;
}

.input:focus, .select:focus,
input[type="datetime-local"]:focus,
input[type="text"]:focus,
select:focus {
  border-color: var(--fl-accent) !important;
  background: var(--fl-bg-input-focus) !important;
  box-shadow: 0 0 0 3px var(--fl-accent-dim) !important;
}

.input::placeholder, input::placeholder {
  color: var(--fl-text-muted) !important;
}

.select, select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2399a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 30px !important;
}

[data-ui-theme="light"] input[type="datetime-local"] { color-scheme: light !important; }
input[type="datetime-local"] { color-scheme: dark !important; }

.range-filter {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.range-filter label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.range-filter label span {
  font-family: var(--fl-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--fl-text-muted) !important;
  text-transform: uppercase !important;
  min-width: 22px !important;
}

/* ── 11. BUTTONS ── */
.btn, button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  font-family: var(--fl-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fl-text-dim) !important;
  background: var(--fl-bg-card) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-xs) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

.btn:hover, button.btn:hover {
  background: var(--fl-bg-card-hover) !important;
  border-color: var(--fl-border-hover) !important;
  color: var(--fl-text) !important;
}

.btn-primary, .btn.btn-primary, button.btn-primary {
  background: var(--fl-accent) !important;
  color: #ffffff !important;
  border-color: var(--fl-accent) !important;
  font-size: 12px !important;
}

.btn-primary:hover, .btn.btn-primary:hover {
  filter: brightness(1.15) !important;
  box-shadow: 0 4px 16px var(--fl-accent-glow) !important;
}

.neon-btn, .btn.neon-btn {
  background: transparent !important;
  color: var(--fl-accent) !important;
  border: 1px solid var(--fl-border-accent) !important;
  border-radius: var(--fl-radius-xs) !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  width: 100% !important;
}

.neon-btn:hover, .btn.neon-btn:hover {
  background: var(--fl-accent-dim) !important;
  box-shadow: 0 0 12px var(--fl-accent-glow) !important;
}

.topbar .btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid var(--fl-border) !important;
  color: var(--fl-text-dim) !important;
  font-size: 13px !important;
}

.topbar .btn:hover {
  border-color: var(--fl-accent) !important;
  color: var(--fl-accent) !important;
  background: var(--fl-accent-dim) !important;
}

/* ── 12. TOPBAR TOGGLE BUTTONS ── */
.floating-toggle-btn {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--fl-text-dim) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
  margin: 0 2px !important;
  flex-shrink: 0 !important;
}

.floating-toggle-btn:hover {
  border-color: var(--fl-accent) !important;
  background: var(--fl-accent-dim) !important;
  color: var(--fl-accent) !important;
}

.floating-toggle-btn.is-active {
  border-color: var(--fl-accent) !important;
  background: var(--fl-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px var(--fl-accent-glow) !important;
}

/* ── 13. DETAILS / COLLAPSIBLE ── */
details.is-collapsible,
details#pl-panel,
details#chat-panel {
  background: var(--fl-bg-card) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-sm) !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease !important;
}

details.is-collapsible:hover,
details#pl-panel:hover,
details#chat-panel:hover {
  border-color: var(--fl-border-hover) !important;
}

details.is-collapsible > summary,
details#pl-panel > summary,
details#chat-panel > summary.panel__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  list-style: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  margin: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
}

details.is-collapsible > summary::-webkit-details-marker,
details#pl-panel > summary::-webkit-details-marker,
details#chat-panel > summary::-webkit-details-marker {
  display: none !important;
}

details.is-collapsible > summary::after,
details#chat-panel > summary::after {
  content: '' !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='%23667' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

details[open].is-collapsible > summary::after,
details[open]#chat-panel > summary::after {
  transform: rotate(90deg) !important;
}

#pl-panel > summary {
  gap: 8px !important;
}

#pl-panel > summary .panel__label,
#pl-panel > summary span {
  font-family: var(--fl-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fl-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 0 !important;
}

#pl-panel > summary .chip {
  padding: 3px 10px !important;
  font-size: 10px !important;
  margin-left: auto !important;
}

#pl-panel-body,
details.is-collapsible > div,
#chat-panel-body {
  padding: 0 12px 12px !important;
}

#pl-panel #pl-file { font-size: 11px !important; }
#pl-panel #pl-hint { font-size: 11px !important; color: var(--fl-text-muted) !important; line-height: 1.4 !important; }
#pl-panel #pl-list { margin-top: 8px !important; }

/* ── 14. ANALYTICS ── */
.analytics { padding: 0 !important; }

.analytics__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.analytics__row--full { grid-template-columns: 1fr !important; }
.analytics__row:last-child { margin-bottom: 0 !important; }

.analytics__metric {
  background: var(--fl-bg-card) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-sm) !important;
  padding: 12px 10px !important;
  text-align: center !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

.analytics__metric:hover {
  border-color: var(--fl-border-hover) !important;
  background: var(--fl-bg-card-hover) !important;
}

.analytics__metric--alert { border-color: rgba(255, 77, 106, 0.15) !important; }

.analytics__metric-label {
  font-family: var(--fl-font) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--fl-text-muted) !important;
  margin-bottom: 4px !important;
}

.analytics__metric-value {
  font-family: var(--fl-font-mono) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fl-accent) !important;
  line-height: 1.1 !important;
}

.analytics__metric--alert .analytics__metric-value { color: var(--fl-danger) !important; }

.analytics__metric-sub {
  font-family: var(--fl-font) !important;
  font-size: 9px !important;
  color: var(--fl-text-muted) !important;
  margin-top: 2px !important;
}

.analytics__top {
  background: var(--fl-bg-card) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-sm) !important;
  padding: 10px 12px !important;
}

.analytics__top-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 8px !important;
}

.analytics__top-title { font-family: var(--fl-font) !important; font-size: 11px !important; font-weight: 600 !important; color: var(--fl-text) !important; }
.analytics__top-sub { font-size: 9px !important; color: var(--fl-text-muted) !important; }

/* ── 15. CATEGORY FILTER ── */
.msel summary, .msel .select, details.msel summary { cursor: pointer !important; }

.msel__list, #categoryFilterBox {
  background: var(--fl-bg-solid) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-xs) !important;
  margin-top: 6px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  padding: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--fl-scrollbar) transparent !important;
}

.msel__list label, #categoryFilterBox label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 8px !important;
  border-radius: var(--fl-radius-xs) !important;
  cursor: pointer !important;
  transition: background 0.12s ease !important;
  font-family: var(--fl-font) !important;
  font-size: 12px !important;
  color: var(--fl-text) !important;
}

.msel__list label:hover, #categoryFilterBox label:hover {
  background: var(--fl-bg-card-hover) !important;
}

.msel__list input[type="checkbox"],
#categoryFilterBox input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  border: 1.5px solid var(--fl-border-hover) !important;
  border-radius: 3px !important;
  background: var(--fl-bg-input) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.msel__list input[type="checkbox"]:checked,
#categoryFilterBox input[type="checkbox"]:checked {
  background: var(--fl-accent) !important;
  border-color: var(--fl-accent) !important;
}

.msel__list input[type="checkbox"]:checked::after,
#categoryFilterBox input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 4px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #fff !important;
  border-width: 0 1.5px 1.5px 0 !important;
  transform: rotate(45deg) !important;
}

/* ── 16. CHAT ── */
.chat__messages, #chat-messages {
  background: var(--fl-bg-card) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-xs) !important;
  padding: 10px !important;
  min-height: 100px !important;
  max-height: 250px !important;
  overflow-y: auto !important;
  margin-bottom: 8px !important;
  font-family: var(--fl-font) !important;
  font-size: 13px !important;
  color: var(--fl-text) !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--fl-scrollbar) transparent !important;
}

.chat__controls { display: flex !important; gap: 6px !important; }
.chat__input, #chat-input { flex: 1 !important; }

/* ── 17. EXPORT ── */
.export-dates { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.export-dates__row { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.export-dates__row label { display: flex !important; align-items: center !important; gap: 8px !important; }
.export-dates__row label span { font-family: var(--fl-font) !important; font-size: 10px !important; font-weight: 700 !important; color: var(--fl-text-muted) !important; text-transform: uppercase !important; min-width: 22px !important; }

/* ── 18. HUD ELEMENTS ── */
.hud-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  font-family: var(--fl-font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 16px !important;
  background: var(--fl-bg-card) !important;
  border: 1px solid var(--fl-border) !important;
  color: var(--fl-text-dim) !important;
}

.hud-pill--ok { color: var(--fl-success) !important; border-color: rgba(0, 230, 138, 0.15) !important; }
.hud-pill--ok i { font-size: 5px !important; animation: livePulse 2s ease-in-out infinite !important; }

@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.hud-meta { display: flex !important; align-items: center !important; gap: 5px !important; font-family: var(--fl-font-mono) !important; font-size: 10px !important; color: var(--fl-text-dim) !important; }
.hud-dot { width: 4px !important; height: 4px !important; border-radius: 50% !important; background: var(--fl-accent) !important; flex-shrink: 0 !important; }
.hud-mode { font-family: var(--fl-font) !important; font-size: 9px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--fl-text-muted) !important; }

/* ── 19. MAP HUD BAR ── */
.map-hudbar {
  position: fixed !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 3px 14px !important;
  background: var(--fl-topbar-bg) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: 16px !important;
  backdrop-filter: var(--fl-blur) !important;
  font-family: var(--fl-font) !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
}

.map-hudbar__title { font-size: 9px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--fl-text-muted) !important; }

/* ── 20. STATUS INDICATOR ── */
.status-indicator { display: flex !important; align-items: center !important; gap: 5px !important; }
.status-indicator__dot { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: var(--fl-success) !important; box-shadow: 0 0 6px var(--fl-success) !important; animation: statusPulse 2s ease-in-out infinite !important; }
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.status-indicator__text { font-family: var(--fl-font) !important; font-size: 9px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--fl-text-muted) !important; }

/* ── 21. BRAND ── */
.brand__subtitle { font-family: var(--fl-font-mono) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--fl-accent) !important; letter-spacing: 0.15em !important; }

/* ── 22. KILL OLD TOGGLES ── */
.sb-toggle, .sb-toggle--left, .sb-toggle--right,
.sidebar-toggle, .sidebar-toggle-btn, [class*="sidebar-toggle"],
body.theme-hud .sb-toggle, body.theme-hud .sidebar-toggle,
.theme-toggle, .theme-toggle-btn, [class*="theme-toggle"],
#theme-toggle, #themeToggle {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important; height: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* ── 23. LEAFLET CONTROLS ── */
.leaflet-control-layers {
  background: var(--fl-bg) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-sm) !important;
  backdrop-filter: var(--fl-blur) !important;
  box-shadow: var(--fl-shadow) !important;
  color: var(--fl-text) !important;
}

.leaflet-control-layers-toggle {
  width: 34px !important; height: 34px !important;
  background-color: var(--fl-bg) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-sm) !important;
  backdrop-filter: var(--fl-blur) !important;
}

.leaflet-control-layers-toggle:hover { border-color: var(--fl-accent) !important; }

.leaflet-control-layers-expanded { padding: 10px 14px !important; min-width: 180px !important; }

.leaflet-control-layers label { color: var(--fl-text) !important; cursor: pointer !important; font-family: var(--fl-font) !important; font-size: 12px !important; }
.leaflet-control-layers label:hover { color: var(--fl-accent) !important; }
.leaflet-control-layers input[type="checkbox"],
.leaflet-control-layers input[type="radio"] { accent-color: var(--fl-accent) !important; }
.leaflet-control-layers-separator { border-top-color: var(--fl-border) !important; }

.leaflet-top.leaflet-right { top: 72px !important; right: 12px !important; }

.leaflet-control-zoom { border: none !important; border-radius: var(--fl-radius-sm) !important; overflow: hidden !important; }
.leaflet-control-zoom a { background: var(--fl-bg) !important; color: var(--fl-text-dim) !important; border-color: var(--fl-border) !important; backdrop-filter: var(--fl-blur) !important; }
.leaflet-control-zoom a:hover { background: var(--fl-accent-dim) !important; color: var(--fl-accent) !important; }

/* ── 24. FAB ── */
.floating-fab-group {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.floating-fab {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  border: 1px solid var(--fl-border-accent) !important;
  background: var(--fl-bg) !important;
  backdrop-filter: var(--fl-blur) !important;
  color: var(--fl-accent) !important;
  font-size: 15px !important;
  display: grid !important; place-items: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: var(--fl-shadow) !important;
  padding: 0 !important;
}

.floating-fab:hover {
  transform: scale(1.1) !important;
  border-color: var(--fl-accent) !important;
  box-shadow: 0 0 0 4px var(--fl-accent-dim), var(--fl-shadow) !important;
}

.floating-fab.geo-active {
  border-color: #0096ff !important;
  background: rgba(0, 150, 255, 0.12) !important;
  color: #0096ff !important;
  box-shadow: 0 0 16px rgba(0, 150, 255, 0.35) !important;
  animation: geoGlow 2s ease-in-out infinite !important;
}

@keyframes geoGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(0, 150, 255, 0.35); }
  50% { box-shadow: 0 0 24px rgba(0, 150, 255, 0.55); }
}

/* ── 25. MINI STATS ── */
.floating-mini-stats {
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  z-index: 800 !important;
  display: flex !important;
  gap: 6px !important;
}

.floating-mini-stat {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: var(--fl-bg) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-sm) !important;
  backdrop-filter: var(--fl-blur) !important;
  font-family: var(--fl-font) !important;
}

.floating-mini-stat__icon { color: var(--fl-accent) !important; font-size: 11px !important; opacity: 0.6 !important; }
.floating-mini-stat__value { font-family: var(--fl-font-mono) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--fl-accent) !important; }
.floating-mini-stat__label { font-size: 10px !important; color: var(--fl-text-muted) !important; text-transform: uppercase !important; }

/* ── 26. BOTTOM BAR ── */
.bottom-bar, .status-bar, body.theme-hud .bottom-bar {
  position: fixed !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  z-index: 800 !important;
  padding: 5px 14px !important;
  background: var(--fl-bg) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: 999px !important;
  backdrop-filter: var(--fl-blur) !important;
  grid-column: unset !important; grid-row: unset !important;
}

/* ── 27. COMMAND PALETTE ── */
.floating-cmd-backdrop {
  position: fixed !important; inset: 0 !important; z-index: 2000 !important;
  background: rgba(0,0,0,0.5) !important; backdrop-filter: blur(8px) !important;
  opacity: 0 !important; pointer-events: none !important; transition: opacity 0.2s ease !important;
}
.floating-cmd-backdrop.is-open { opacity: 1 !important; pointer-events: auto !important; }

.floating-cmd-box {
  position: fixed !important; top: 15vh !important; left: 50% !important;
  transform: translateX(-50%) translateY(-10px) scale(0.97) !important;
  width: 480px !important; max-width: 90vw !important; z-index: 2001 !important;
  background: var(--fl-bg) !important; border: 1px solid var(--fl-border) !important;
  border-radius: 18px !important; box-shadow: var(--fl-shadow-lg) !important;
  overflow: hidden !important; opacity: 0 !important; pointer-events: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.floating-cmd-box.is-open { opacity: 1 !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) scale(1) !important; }

.floating-cmd-input-wrap { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 18px !important; border-bottom: 1px solid var(--fl-border) !important; }
.floating-cmd-input-wrap i { color: var(--fl-accent) !important; font-size: 14px !important; opacity: 0.5 !important; }
.floating-cmd-input { flex: 1 !important; background: none !important; border: none !important; outline: none !important; color: var(--fl-text) !important; font-size: 15px !important; font-family: var(--fl-font) !important; }
.floating-cmd-input::placeholder { color: var(--fl-text-muted) !important; }
.floating-cmd-results { max-height: 300px !important; overflow-y: auto !important; padding: 6px !important; }

.floating-cmd-item {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 8px 10px !important; border-radius: var(--fl-radius-xs) !important;
  cursor: pointer !important; transition: background 0.12s ease !important;
  color: var(--fl-text-dim) !important; font-size: 13px !important;
}
.floating-cmd-item:hover { background: var(--fl-accent-dim) !important; color: var(--fl-text) !important; }
.floating-cmd-item__icon { width: 30px !important; height: 30px !important; display: grid !important; place-items: center !important; border-radius: var(--fl-radius-xs) !important; background: var(--fl-bg-card) !important; color: var(--fl-accent) !important; font-size: 12px !important; flex-shrink: 0 !important; }

/* ── 28. GEOLOCATION ── */
.my-location-arrow { width: 0 !important; height: 0 !important; }
.my-location-arrow-inner { width: 28px; height: 28px; position: relative; top: -14px; left: -14px; transition: transform 0.3s ease; }
.my-location-arrow-inner svg { filter: drop-shadow(0 0 8px rgba(0,150,255,0.6)); }
.my-location-pulse { position: absolute; width: 60px; height: 60px; top: -30px; left: -30px; border-radius: 50%; background: rgba(0,150,255,0.1); border: 1px solid rgba(0,150,255,0.2); animation: locPulse 2s ease-out infinite; pointer-events: none; }
@keyframes locPulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }

/* ── 29. FILE INPUT ── */
input[type="file"], .input[type="file"] { padding: 5px !important; font-size: 11px !important; cursor: pointer !important; }

input[type="file"]::file-selector-button {
  font-family: var(--fl-font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-xs) !important;
  background: var(--fl-bg-card) !important;
  color: var(--fl-text-dim) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin-right: 6px !important;
}

input[type="file"]::file-selector-button:hover {
  background: var(--fl-accent-dim) !important;
  border-color: var(--fl-accent) !important;
  color: var(--fl-accent) !important;
}

/* ── 30. LEAFLET POPUP ── */
.leaflet-popup-content-wrapper {
  background: var(--fl-bg) !important;
  border: 1px solid var(--fl-border) !important;
  border-radius: var(--fl-radius-sm) !important;
  box-shadow: var(--fl-shadow) !important;
  color: var(--fl-text) !important;
  backdrop-filter: var(--fl-blur) !important;
}

.leaflet-popup-tip { background: var(--fl-bg) !important; border: 1px solid var(--fl-border) !important; }
.leaflet-popup-content { font-family: var(--fl-font) !important; font-size: 13px !important; color: var(--fl-text) !important; }

/* ── 31. LIGHT MODE FIXES ── */
[data-ui-theme="light"] .hud-layer,
[data-ui-theme="light"] .grid,
[data-ui-theme="light"] .noise,
[data-ui-theme="light"] .scanlines,
[data-ui-theme="light"] .sweep,
[data-ui-theme="light"] .vignette { display: none !important; }

/* ── 32. MARKER CLUSTER ── */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: var(--fl-accent-dim) !important; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: var(--fl-accent) !important; color: #fff !important; font-family: var(--fl-font-mono) !important; font-weight: 700 !important; }


/* ═══════════════════════════════════════════════════════════
   ██ 33. MOBILE — PHONES (≤768px) ██
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── TOPBAR: compact, no overflow ─── */
  .topbar, body.theme-hud .topbar {
    top: 6px !important;
    height: 40px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    max-width: calc(100vw - 12px) !important;
    border-radius: 20px !important;
    /* prevent children from overflowing */
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }

  /* Topbar buttons — smaller */
  .topbar .btn,
  .topbar .floating-toggle-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 11px !important;
    margin: 0 1px !important;
    flex-shrink: 0 !important;
  }

  /* Brand text — truncate */
  .brand__subtitle {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* HUD pill — compact */
  .hud-pill {
    padding: 2px 6px !important;
    font-size: 7px !important;
    gap: 3px !important;
    border-radius: 10px !important;
  }

  /* Hide verbose topbar items */
  .topbar .hud-meta,
  .topbar .hud-mode,
  .topbar .status-indicator__text,
  .topbar .d-only {
    display: none !important;
  }

  /* ─── MAP HUD BAR: below topbar, smaller ─── */
  .map-hudbar {
    top: 50px !important;
    padding: 2px 10px !important;
    gap: 6px !important;
    border-radius: 10px !important;
    max-width: calc(100vw - 80px) !important;
  }

  .map-hudbar__title {
    font-size: 7px !important;
  }

  /* ─── LEAFLET CONTROLS: don't overlap topbar ─── */
  .leaflet-top.leaflet-right {
    top: 52px !important;
    right: 6px !important;
  }

  .leaflet-control-zoom a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 15px !important;
  }

  .leaflet-control-layers-toggle {
    width: 32px !important;
    height: 32px !important;
  }

  /* Stack zoom + layers vertically with gap */
  .leaflet-top.leaflet-right .leaflet-control {
    margin-bottom: 6px !important;
  }

  .leaflet-control-layers-expanded {
    max-width: calc(100vw - 20px) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  /* ─── SIDEBARS → BOTTOM SHEETS ─── */
  .sidebar, .sidebar--left, .sidebar--right,
  body.theme-hud .sidebar,
  body.theme-hud .sidebar--left,
  body.theme-hud .sidebar--right {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 52vh !important;
    min-height: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25) !important;
    z-index: 950 !important;
    transform: translateY(0) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease,
                visibility 0.25s ease !important;
    /* Safe area padding for iPhones */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Hidden state — slide down */
  .sidebar--left.floating-hidden,
  body.theme-hud .sidebar--left.floating-hidden,
  .sidebar--right.floating-hidden,
  body.theme-hud .sidebar--right.floating-hidden {
    transform: translateY(105%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Drag handle */
  .sidebar--left::before,
  .sidebar--right::before {
    content: '' !important;
    display: block !important;
    width: 32px !important;
    height: 4px !important;
    background: var(--fl-border-hover) !important;
    border-radius: 2px !important;
    margin: 8px auto 4px !important;
    flex-shrink: 0 !important;
    opacity: 0.6 !important;
  }

  /* Sidebar scroll */
  .sidebar__scroll, body.theme-hud .sidebar__scroll,
  .sidebar--left {
    padding: 4px 12px 12px !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* ─── PANEL GROUPS: tighter ─── */
  .panel__group {
    padding: 8px 10px !important;
    margin-bottom: 4px !important;
    border-radius: 8px !important;
  }

  .panel__label {
    font-size: 9px !important;
    margin-bottom: 5px !important;
  }

  .panel__title, .panel__titleText {
    font-size: 9px !important;
  }

  .sidebar .panel__head,
  .sidebar .panel__header,
  .sidebar [class*="panel__head"] {
    padding: 2px 2px 4px !important;
    margin-bottom: 2px !important;
  }

  /* ─── TOGGLES: bigger tap target ─── */
  .toggle {
    min-height: 40px !important;
    padding: 6px 0 !important;
  }

  .toggle__track {
    width: 40px !important;
    min-width: 40px !important;
    height: 22px !important;
    border-radius: 11px !important;
  }

  .toggle__track::after {
    width: 18px !important;
    height: 18px !important;
  }

  .toggle input:checked + .toggle__track::after {
    transform: translateX(18px) !important;
  }

  .toggle__label {
    font-size: 13px !important;
  }

  /* ─── CHIPS: bigger tap ─── */
  .chip {
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: 18px !important;
  }

  .chip-group {
    gap: 6px !important;
  }

  /* ─── INPUTS: prevent iOS zoom (≥16px) ─── */
  .input, .select,
  input[type="datetime-local"],
  input[type="text"],
  input[type="number"],
  input[type="date"],
  select,
  textarea,
  .chat__input, #chat-input,
  .floating-cmd-input {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  /* ─── BUTTONS: taller ─── */
  .btn, button.btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-height: 40px !important;
  }

  .neon-btn, .btn.neon-btn {
    padding: 12px 16px !important;
    font-size: 13px !important;
    min-height: 44px !important;
  }

  .btn-primary, .btn.btn-primary, button.btn-primary {
    font-size: 13px !important;
  }

  /* ─── DETAILS: bigger tap ─── */
  details.is-collapsible > summary,
  details#pl-panel > summary,
  details#chat-panel > summary.panel__head {
    padding: 10px 12px !important;
    min-height: 40px !important;
  }

  #pl-panel-body,
  details.is-collapsible > div,
  #chat-panel-body {
    padding: 0 12px 10px !important;
  }

  /* ─── CATEGORY FILTER: shorter ─── */
  .msel__list, #categoryFilterBox {
    max-height: 150px !important;
  }

  .msel__list label, #categoryFilterBox label {
    padding: 8px 10px !important;
    font-size: 13px !important;
    min-height: 40px !important;
  }

  .msel__list input[type="checkbox"],
  #categoryFilterBox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }

  .msel__list input[type="checkbox"]:checked::after,
  #categoryFilterBox input[type="checkbox"]:checked::after {
    top: 2px !important;
    left: 5px !important;
    width: 5px !important;
    height: 9px !important;
  }

  /* ─── ANALYTICS: compact ─── */
  .analytics__row {
    gap: 4px !important;
    margin-bottom: 4px !important;
  }

  .analytics__metric {
    padding: 8px 6px !important;
  }

  .analytics__metric-value {
    font-size: 18px !important;
  }

  .analytics__metric-label {
    font-size: 8px !important;
  }

  .analytics__metric-sub {
    font-size: 8px !important;
  }

  /* ─── CHAT: shorter ─── */
  .chat__messages, #chat-messages {
    max-height: 140px !important;
    min-height: 60px !important;
  }

  /* ─── FAB: safe area ─── */
  .floating-fab-group {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    gap: 8px !important;
  }

  .floating-fab {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }

  /* ─── MINI STATS: horizontal scroll ─── */
  .floating-mini-stats {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 66px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .floating-mini-stats::-webkit-scrollbar { display: none !important; }

  .floating-mini-stat {
    padding: 4px 8px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
  }

  .floating-mini-stat__value { font-size: 12px !important; }
  .floating-mini-stat__label { font-size: 8px !important; }
  .floating-mini-stat__icon { font-size: 9px !important; }

  /* ─── BOTTOM BAR ─── */
  .bottom-bar, .status-bar, body.theme-hud .bottom-bar {
    bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 3px 10px !important;
    font-size: 9px !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* ─── COMMAND PALETTE ─── */
  .floating-cmd-box {
    top: 8px !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    border-radius: 14px !important;
  }

  .floating-cmd-input-wrap { padding: 12px 14px !important; }
  .floating-cmd-input { font-size: 16px !important; }
  .floating-cmd-results { max-height: 50vh !important; }
  .floating-cmd-item { padding: 10px 12px !important; font-size: 14px !important; min-height: 44px !important; }

  /* ─── POPUP ─── */
  .leaflet-popup-content-wrapper { max-width: calc(100vw - 32px) !important; }
  .leaflet-popup-content { font-size: 13px !important; margin: 8px 10px !important; }

  /* ─── HELPER ─── */
  .d-only { display: none !important; }
  .m-only { display: flex !important; }
}


/* ═══════════════════════════════════════════════════════════
   ██ 34. SMALL PHONES (≤420px) ██
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 420px) {

  .topbar, body.theme-hud .topbar {
    padding: 0 6px !important;
    gap: 2px !important;
    height: 38px !important;
    border-radius: 19px !important;
  }

  .topbar .btn,
  .topbar .floating-toggle-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 10px !important;
  }

  .brand__subtitle {
    font-size: 10px !important;
    max-width: 70px !important;
  }

  .hud-pill {
    padding: 1px 5px !important;
    font-size: 6px !important;
  }

  /* Bottom sheet — taller on small screens */
  .sidebar, .sidebar--left, .sidebar--right {
    max-height: 58vh !important;
  }

  .sidebar__scroll, .sidebar--left {
    padding: 4px 8px 10px !important;
  }

  .panel__group {
    padding: 6px 8px !important;
    margin-bottom: 3px !important;
  }

  /* Analytics: single column */
  .analytics__row {
    grid-template-columns: 1fr !important;
  }

  .analytics__metric-value {
    font-size: 20px !important;
  }

  /* FAB */
  .floating-fab {
    width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
  }

  .floating-fab-group {
    right: 8px !important;
  }

  /* Mini stats */
  .floating-mini-stats {
    left: 4px !important;
    right: 56px !important;
  }

  .floating-mini-stat {
    padding: 3px 6px !important;
  }

  .floating-mini-stat__value { font-size: 11px !important; }
}


/* ═══════════════════════════════════════════════════════════
   ██ 35. LANDSCAPE PHONES ██
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {

  /* Sidebars → side panels in landscape */
  .sidebar, .sidebar--left, .sidebar--right,
  body.theme-hud .sidebar,
  body.theme-hud .sidebar--left,
  body.theme-hud .sidebar--right {
    top: 50px !important;
    bottom: 6px !important;
    left: auto !important;
    right: auto !important;
    width: 260px !important;
    max-width: 40vw !important;
    max-height: none !important;
    height: auto !important;
    border-radius: var(--fl-radius) !important;
    border-bottom: 1px solid var(--fl-border) !important;
  }

  .sidebar--left, body.theme-hud .sidebar--left {
    left: 6px !important;
    right: auto !important;
  }

  .sidebar--right, body.theme-hud .sidebar--right {
    right: 6px !important;
    left: auto !important;
  }

  /* Restore horizontal slide */
  .sidebar--left.floating-hidden,
  body.theme-hud .sidebar--left.floating-hidden {
    transform: translateX(calc(-100% - 20px)) !important;
  }

  .sidebar--right.floating-hidden,
  body.theme-hud .sidebar--right.floating-hidden {
    transform: translateX(calc(100% + 20px)) !important;
  }

  /* No drag handle in landscape */
  .sidebar--left::before,
  .sidebar--right::before {
    display: none !important;
  }

  .topbar, body.theme-hud .topbar {
    top: 4px !important;
    height: 36px !important;
  }

  .map-hudbar {
    top: 44px !important;
  }

  .leaflet-top.leaflet-right {
    top: 44px !important;
  }

  .chat__messages, #chat-messages {
    max-height: 100px !important;
  }

  .msel__list, #categoryFilterBox {
    max-height: 100px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   ██ 36. TOUCH DEVICE ENHANCEMENTS ██
   ═══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* Kill sticky hover states */
  .panel__group:hover {
    background: var(--fl-bg-card) !important;
    border-color: var(--fl-border) !important;
  }

  .chip:hover {
    background: var(--fl-chip-bg) !important;
    border-color: var(--fl-border) !important;
    color: var(--fl-chip-text) !important;
  }

  .btn:hover, button.btn:hover {
    background: var(--fl-bg-card) !important;
    border-color: var(--fl-border) !important;
    color: var(--fl-text-dim) !important;
  }

  .floating-toggle-btn:hover {
    border-color: var(--fl-border) !important;
    background: transparent !important;
    color: var(--fl-text-dim) !important;
  }

  .floating-fab:hover {
    transform: none !important;
    box-shadow: var(--fl-shadow) !important;
  }

  .analytics__metric:hover {
    border-color: var(--fl-border) !important;
    background: var(--fl-bg-card) !important;
  }

  details.is-collapsible:hover,
  details#pl-panel:hover,
  details#chat-panel:hover {
    border-color: var(--fl-border) !important;
  }

  .msel__list label:hover, #categoryFilterBox label:hover {
    background: transparent !important;
  }

  /* Active states — instant touch feedback */
  .panel__group:active {
    background: var(--fl-bg-card-hover) !important;
    border-color: var(--fl-border-hover) !important;
    transition-duration: 0.05s !important;
  }

  .chip:active {
    transform: scale(0.95) !important;
    background: var(--fl-bg-card-hover) !important;
    transition-duration: 0.05s !important;
  }

  .btn:active, button.btn:active {
    transform: scale(0.97) !important;
    background: var(--fl-bg-card-hover) !important;
    transition-duration: 0.05s !important;
  }

  .floating-toggle-btn:active {
    transform: scale(0.9) !important;
    background: var(--fl-accent-dim) !important;
    transition-duration: 0.05s !important;
  }

  .floating-fab:active {
    transform: scale(0.9) !important;
    transition-duration: 0.05s !important;
  }

  .neon-btn:active, .btn.neon-btn:active {
    transform: scale(0.98) !important;
    background: var(--fl-accent-dim) !important;
    transition-duration: 0.05s !important;
  }

  .msel__list label:active, #categoryFilterBox label:active {
    background: var(--fl-bg-card-hover) !important;
  }

  details.is-collapsible > summary:active,
  details#pl-panel > summary:active,
  details#chat-panel > summary:active {
    background: var(--fl-bg-card-hover) !important;
  }

  /* No tap highlight */
  *, *::before, *::after {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Prevent text selection on interactive */
  .chip, .btn, button.btn, .toggle, .floating-toggle-btn, .floating-fab,
  details > summary, .neon-btn {
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  /* Smooth momentum scrolling */
  .sidebar__scroll, .sidebar--left, .sidebar--right,
  .msel__list, #categoryFilterBox,
  .chat__messages, #chat-messages,
  .floating-cmd-results,
  .floating-mini-stats {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   ██ 37. iOS SAFE AREA & FIXES ██
   ═══════════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {
  .app, body.theme-hud .app,
  .layout, body.theme-hud .layout {
    height: -webkit-fill-available !important;
  }

  #map, .map-container, body.theme-hud #map {
    height: -webkit-fill-available !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   ██ 38. HELPERS ██
   ═══════════════════════════════════════════════════════════ */
.m-only { display: none !important; }

@media (max-width: 768px) {
  .m-only { display: flex !important; }
}

/* ── 39. SELECTION & FOCUS ── */
::selection { background: var(--fl-accent) !important; color: #ffffff !important; }
:focus-visible { outline: 2px solid var(--fl-accent) !important; outline-offset: 2px !important; }

/* ── 40. GLOBAL BOX-SIZING ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── END v9.2 ── */