* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =============================================================================
   GeoNoise UI Stylesheet
   =============================================================================

   NEUMORPHIC SHADOW STRATEGY:

   1. FLOATING CONTAINERS (over the map):
      Use simple drop shadows to avoid white "glow" against colorful backgrounds.
      Pattern: box-shadow: 0 8px 32px #8a95a8, 0 2px 8px #a0a8b8;
      Applied to: .topbar, .context-panel, .probe-panel, .layers-popover,
                  .settings-popover, .dock-tools, .dock-fab, .db-legend

   2. INNER ELEMENTS (buttons, toggles, inputs):
      Use full neumorphic dual shadows for raised/pressed states.
      Raised: var(--shadow-raised) - light top-left, dark bottom-right
      Pressed: var(--shadow-pressed) - inset shadows

   3. MODAL BACKDROP:
      Solid color (#c8ced8) matching the plastic aesthetic, no blur.

   ============================================================================= */

/* ============================================================================
   Neumorphic Scrollbars
   ============================================================================ */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #e0e5ec;
  border-radius: 10px;
  margin: 8px;
  box-shadow: inset 3px 3px 6px #a3b1c6,
              inset -3px -3px 6px #ffffff;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(145deg, #f0f4f8, #d8dfe8);
  border-radius: 10px;
  border: 2px solid #e0e5ec;
  box-shadow: 3px 3px 6px #a3b1c6,
              -3px -3px 6px #ffffff;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(145deg, #e8ecf2, #d0d8e2);
}

::-webkit-scrollbar-thumb:active {
  background: #dce2ea;
  box-shadow: inset 2px 2px 4px #a3b1c6;
}

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

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #d8dfe8 #e0e5ec;
}

/* Scrollbar button (arrows at ends) - hide them for cleaner look */
::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.ui-surface {
  background: var(--bg);
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-panel);
}

.ui-inset {
  background: var(--bg);
  border-radius: var(--radius-md);
  border: none;
  box-shadow: var(--shadow-pressed);
}

.ui-button {
  background: var(--bg);
  border: none;
  border-radius: 50px;
  /* Raised state */
  box-shadow: 3px 3px 6px rgba(100, 110, 130, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.7);
  color: var(--text);
  font-weight: 500;
  letter-spacing: var(--ui-letter-spacing);
  text-transform: lowercase;
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease;
}

.ui-button:hover {
  background: var(--bg);
  /* Sunken state */
  box-shadow: inset 3px 3px 6px rgba(100, 110, 130, 0.25), inset -2px -2px 5px rgba(255, 255, 255, 0.6);
  transform: scale(0.98);
}

.ui-button:active {
  background: var(--bg);
  /* Deeper sunken */
  box-shadow: inset 4px 4px 8px rgba(100, 110, 130, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  transform: scale(0.96);
}

.ui-button.is-active {
  /* Active state with inset ring, offset from edge */
  background: var(--bg);
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.5),
    inset 0 0 0 4px var(--bg),
    inset 0 0 0 6px var(--active-blue);
  color: var(--active-blue);
  transform: scale(0.98);
}

.ui-button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-raised), var(--focus-ring);
}

.app-shell {
  /* Fullscreen container for canvas + floating UI. */
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  animation: fadeIn 0.6s ease-out;
}

.ui-layer {
  /* Overlay layer that allows the map to receive pointer events by default. */
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.topbar {
  position: absolute;
  top: 12px;
  left: 24px;
  right: 24px;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 8px 16px;
  background: var(--brand-bg);
  border: none;
  border-radius: 18px;
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 8px 32px #8a95a8, 0 2px 8px #a0a8b8;
  pointer-events: auto;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  justify-self: start;
}

.topbar-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  justify-self: center;
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  justify-self: end;
}

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

.layers-toggle {
  position: relative;
  pointer-events: auto;
}

.settings-toggle {
  position: relative;
  pointer-events: auto;
}

.layers-popover {
  position: fixed;
  top: 92px;
  left: 24px;
  right: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 280px;
  padding: 14px;
  background: var(--bg);
  border: none;
  border-radius: 18px;
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 8px 32px #8a95a8, 0 2px 8px #a0a8b8;
  z-index: 9999;
  isolation: isolate;
  pointer-events: none;
  /* Hidden state */
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0.18s;
}

.settings-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 260px;
  padding: 14px;
  background: var(--bg);
  border: none;
  border-radius: 18px;
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 8px 32px #8a95a8, 0 2px 8px #a0a8b8;
  z-index: 60;
  pointer-events: auto;
}

.layers-popover.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0s;
}

/* Legacy: .settings-toggle.is-open .settings-popover - now uses .settings-popover--corner.is-open directly */
.settings-popover.is-open {
  display: flex;
}

.settings-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-muted);
  font-weight: 600;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.layers-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.layers-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-muted);
  font-weight: 600;
}

.layers-divider {
  height: 1px;
  background: #c8d0dc;
}

.dock {
  /* Bottom-centered floating tool dock. */
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow: visible;
  z-index: 50;
  pointer-events: auto;
}

/* Collapsed FAB button */
.dock-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 6px 20px #8a95a8, 0 2px 6px #a0a8b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 200ms ease;
  z-index: 10;
}

.dock-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px #8090a0, 0 3px 8px #a0a8b8;
}

.dock-fab:active {
  transform: scale(0.95);
}

.dock-fab-icon {
  font-size: 28px;
  font-weight: 300;
  color: var(--text-muted);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 1;
}

/* Rotate + to × when expanded */
.dock.is-expanded .dock-fab-icon {
  transform: rotate(45deg);
}

/* Hide FAB when expanded */
.dock.is-expanded .dock-fab {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
}

/* Expandable container */
.dock-expandable {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center center;
  opacity: 0;
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.dock.is-expanded .dock-expandable {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
  pointer-events: auto;
}

/* Individual buttons animate in with stagger effect */
.dock-expandable .dock-button {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 200ms ease,
              transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dock.is-expanded .dock-expandable .dock-button {
  opacity: 1;
  transform: scale(1);
}

/* Staggered animation delays for each button */
.dock.is-expanded .dock-expandable .dock-button:nth-child(1) { transition-delay: 50ms; }
.dock.is-expanded .dock-expandable .dock-button:nth-child(2) { transition-delay: 80ms; }
.dock.is-expanded .dock-expandable .dock-button:nth-child(3) { transition-delay: 110ms; }
.dock.is-expanded .dock-expandable .dock-button:nth-child(4) { transition-delay: 140ms; }
.dock.is-expanded .dock-expandable .dock-button:nth-child(5) { transition-delay: 170ms; }
.dock.is-expanded .dock-expandable .dock-button:nth-child(6) { transition-delay: 200ms; }
.dock.is-expanded .dock-expandable .dock-button:nth-child(7) { transition-delay: 230ms; }

/* When collapsing, reverse the stagger (last button hides first) */
.dock:not(.is-expanded) .dock-expandable .dock-button:nth-child(7) { transition-delay: 0ms; }
.dock:not(.is-expanded) .dock-expandable .dock-button:nth-child(6) { transition-delay: 20ms; }
.dock:not(.is-expanded) .dock-expandable .dock-button:nth-child(5) { transition-delay: 40ms; }
.dock:not(.is-expanded) .dock-expandable .dock-button:nth-child(4) { transition-delay: 60ms; }
.dock:not(.is-expanded) .dock-expandable .dock-button:nth-child(3) { transition-delay: 80ms; }
.dock:not(.is-expanded) .dock-expandable .dock-button:nth-child(2) { transition-delay: 100ms; }
.dock:not(.is-expanded) .dock-expandable .dock-button:nth-child(1) { transition-delay: 120ms; }

.dock-stack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dock-tools {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--bg);
  border: none;
  border-radius: 999px;
  /* Hard edge shadow - contained, no overflow glow */
  box-shadow: 0 4px 12px rgba(100, 110, 130, 0.4), 0 1px 3px rgba(100, 110, 130, 0.3);
}

.dock-label-stage {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
  margin-bottom: 4px;
}

.dock-label-stage span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  padding: 6px 14px;
  border-radius: 8px;
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 4px 16px #8a95a8, 0 1px 4px #a0a8b8;
  white-space: nowrap;
  /* Start hidden below - pushed into the dock area */
  transform: translateY(calc(100% + 8px));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dock-label-stage.is-visible span {
  /* Slide up into view - peekaboo effect */
  transform: translateY(0);
}

.dock-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
  position: relative;
  /* Raised state - neumorphic outer shadows */
  box-shadow: 3px 3px 6px rgba(100, 110, 130, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.7);
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease, color 160ms ease, opacity 160ms ease;
}

.dock-button:hover {
  background: var(--bg);
  color: var(--text);
  opacity: 1;
  /* Sunken state - neumorphic inset shadows */
  box-shadow: inset 3px 3px 6px rgba(100, 110, 130, 0.25), inset -2px -2px 5px rgba(255, 255, 255, 0.6);
  transform: scale(0.98);
}

.dock-button:active {
  /* Deeper sunken on press */
  box-shadow: inset 4px 4px 8px rgba(100, 110, 130, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  transform: scale(0.96);
}

.dock-button.is-active {
  /* Active state: sunken with INSET blue ring, offset from edge */
  background: var(--bg);
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.5),
    inset 0 0 0 5px var(--bg),
    inset 0 0 0 7px var(--active-blue);
  color: var(--active-blue);
  font-weight: 700;
  opacity: 1;
  transform: scale(0.98);
}

.dock-label {
  font-size: 13px;
}

.dock-icon {
  width: 18px;
  height: 18px;
  display: block;
  /* Ensure button click is captured even when clicking the SVG path. */
  pointer-events: none;
}

.dock-instruction-bottom {
  font-size: 11px;
  color: #a8b0b8;
  text-align: center;
  margin-top: 2px;
  pointer-events: none;
  font-family: var(--font-mono);
}

.context-panel {
  /* Contextual inspector card. */
  position: absolute;
  top: 92px;
  right: 24px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--bg);
  border: none;
  border-radius: 20px;
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 8px 32px #8a95a8, 0 2px 8px #a0a8b8;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 50;
}

.context-panel.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Pinned context panels - created dynamically when pinning inspector */
.context-panel--pinned {
  /* Override the static positioning - these are freely positioned */
  top: auto;
  right: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.context-panel--pinned .probe-title-badge {
  display: inline-flex;
}

.probe-panel {
  position: absolute;
  right: 24px;
  bottom: 120px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border: none;
  border-radius: 20px;
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 8px 32px #8a95a8, 0 2px 8px #a0a8b8;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 50;
}

.probe-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.probe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
  user-select: none;
}

.probe-header:active {
  cursor: grabbing;
}

.probe-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-soft);
}

.probe-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.probe-freeze,
.probe-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-muted);
  /* Raised state */
  box-shadow: 2px 2px 4px rgba(100, 110, 130, 0.3), -1px -1px 3px rgba(255, 255, 255, 0.7);
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease, color 160ms ease;
}

.probe-freeze:hover,
.probe-pin:hover {
  color: var(--text);
  background: var(--bg);
  /* Sunken state */
  box-shadow: inset 2px 2px 4px rgba(100, 110, 130, 0.25), inset -1px -1px 3px rgba(255, 255, 255, 0.6);
  transform: scale(0.96);
}

.probe-freeze:active,
.probe-pin:active {
  box-shadow: inset 3px 3px 5px rgba(100, 110, 130, 0.35), inset -2px -2px 4px rgba(255, 255, 255, 0.5);
  transform: scale(0.94);
}

.probe-freeze:disabled,
.probe-pin:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.probe-pin.is-active,
.probe-pin[aria-pressed='true'] {
  color: var(--active-blue);
  background: var(--bg);
  box-shadow:
    inset 2px 2px 4px rgba(100, 110, 130, 0.3),
    inset -1px -1px 3px rgba(255, 255, 255, 0.5),
    inset 0 0 0 3px var(--bg),
    inset 0 0 0 5px var(--active-blue);
  transform: scale(0.96);
}

.probe-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-muted);
  /* Raised state */
  box-shadow: 2px 2px 4px rgba(100, 110, 130, 0.3), -1px -1px 3px rgba(255, 255, 255, 0.7);
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease, color 160ms ease;
}

.probe-close:hover {
  color: var(--text);
  background: var(--bg);
  /* Sunken state */
  box-shadow: inset 2px 2px 4px rgba(100, 110, 130, 0.25), inset -1px -1px 3px rgba(255, 255, 255, 0.6);
  transform: scale(0.96);
}

.probe-close:active {
  box-shadow: inset 3px 3px 5px rgba(100, 110, 130, 0.35), inset -2px -2px 4px rgba(255, 255, 255, 0.5);
  transform: scale(0.94);
}

.probe-panel--snapshot {
  box-shadow: var(--shadow-panel), 0 0 0 2px #8ae8f0;
}

.probe-panel--active {
  box-shadow: var(--shadow-panel), 0 0 0 2px #8fc0ff;
}

.probe-panel--pinned {
  box-shadow: var(--shadow-panel);
}

.probe-panel--snapshot .probe-title {
  color: var(--active-blue);
}

.probe-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.probe-title-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  /* Raised neumorphic style */
  box-shadow: 2px 2px 4px rgba(100, 110, 130, 0.3), -1px -1px 3px rgba(255, 255, 255, 0.7);
}

.probe-panel--pinned .probe-title-badge {
  background: var(--bg);
  color: var(--active-blue);
  box-shadow: 2px 2px 4px rgba(100, 110, 130, 0.3), -1px -1px 3px rgba(255, 255, 255, 0.7);
}

.probe-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.probe-chart {
  padding: 8px;
  border-radius: 16px;
  background: var(--probe-bg);
  border: 1px solid var(--border-soft);
}

.probe-coords {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
  border-top: 1px dashed var(--border-soft);
  margin-top: -4px;
}

.probe-chart canvas {
  width: 100%;
  height: 140px;
  display: block;
}

.probe-footer {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

.context-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
  user-select: none;
}

.context-header:active {
  cursor: grabbing;
}

.context-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.context-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-soft);
  cursor: text;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 120ms ease;
}

.context-title:hover {
  background: #f0f4f8;
}

.context-title-input {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 4px 8px;
  width: 100%;
  box-sizing: border-box;
}

.context-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-muted);
  /* Raised state */
  box-shadow: 2px 2px 4px rgba(100, 110, 130, 0.3), -1px -1px 3px rgba(255, 255, 255, 0.7);
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease, color 160ms ease;
}

.context-close:hover {
  color: var(--text);
  background: var(--bg);
  /* Sunken state */
  box-shadow: inset 2px 2px 4px rgba(100, 110, 130, 0.25), inset -1px -1px 3px rgba(255, 255, 255, 0.6);
  transform: scale(0.96);
}

.context-close:active {
  box-shadow: inset 3px 3px 5px rgba(100, 110, 130, 0.35), inset -2px -2px 4px rgba(255, 255, 255, 0.5);
  transform: scale(0.94);
}

.context-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.context-section.is-hidden {
  display: none;
}

.context-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-muted);
  font-weight: 600;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.brand-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brand-bg);
  box-shadow: 12px 12px 22px var(--brand-shadow-dark), -12px -12px 22px var(--brand-shadow-light);
  flex-shrink: 0;
}

.brand-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 3px solid var(--brand-bg);
  box-shadow:
    inset 2px 2px 4px var(--brand-shadow-dark),
    inset -2px -2px 4px var(--brand-shadow-light);
  transform: translate(-50%, -50%);
}

.brand-ring.ring-1 {
  width: 80%;
  height: 80%;
}

.brand-ring.ring-2 {
  width: 55%;
  height: 55%;
}

.brand-ring.ring-3 {
  width: 30%;
  height: 30%;
}

.brand-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: var(--brand-bg);
  box-shadow:
    2px 2px 4px var(--brand-shadow-dark),
    -2px -2px 4px var(--brand-shadow-light),
    0 0 14px var(--brand-accent);
  transform: translate(-50%, -50%);
}

.brand-title {
  font-size: 30px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-shadow: 1px 1px 0 var(--shadow-light-soft), -1px -1px 1px #c8c8c8;
}

.brand-sub {
  display: none;
}

.scene-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
}

.scene-name {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: linear-gradient(145deg, var(--surface-press-lo), var(--surface-press-hi));
  box-shadow: var(--shadow-pressed);
  font-family: var(--font);
  color: var(--text);
  min-width: 180px;
}

.scene-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
}

.scene-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cool);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.scene-dot[data-state='dirty'] {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft-strong);
}

.scene-status-label {
  color: var(--text-muted);
  font-weight: 600;
}

.control-module {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: none;
  box-shadow: var(--shadow-raised);
  align-items: flex-end;
}

.run-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.run-options {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  font-weight: 600;
}

.run-options.is-hidden {
  display: none;
}

.select-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.select-shell::after {
  content: '';
  position: absolute;
  right: 12px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--text-subtle);
  border-bottom: 1px solid var(--text-subtle);
  transform: rotate(45deg);
  pointer-events: none;
}

.run-options select {
  appearance: none;
  padding: 6px 28px 6px 12px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(145deg, var(--surface-press-lo), var(--surface-press-hi));
  box-shadow: var(--shadow-pressed);
  font-family: var(--font);
  font-size: 12px;
  color: var(--text);
}

.status-chip {
  display: inline-flex;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--status-led-off);
  box-shadow: inset 2px 2px 4px #a3b1c6, inset -2px -2px 4px var(--shadow-light-soft);
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

.status-chip--small {
  width: 10px;
  height: 10px;
}

/* Small toast used for whole-scene map generation status (busy/ready/error). */
.map-toast {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(145deg, var(--surface-press-lo), var(--surface-press-hi));
  box-shadow: var(--shadow-pressed);
  color: var(--text-muted);
}

.map-toast.is-visible {
  display: inline-flex;
}

.control-module .map-toast {
  align-self: stretch;
  justify-content: center;
}

.map-toast[data-state='ready'] {
  color: var(--status-ok-text);
  box-shadow: var(--shadow-pressed), 0 0 10px #a8d4c0;
}

.map-toast[data-state='error'] {
  color: var(--status-warn-text);
  box-shadow: var(--shadow-pressed), 0 0 10px #dab8b0;
}

.status-chip[data-state='busy'] {
  background: var(--status-led-busy);
  box-shadow:
    inset 2px 2px 4px #a3b1c6,
    inset -2px -2px 4px var(--shadow-light-soft),
    0 0 8px #d4c890;
}

.status-chip[data-state='warning'] {
  background: var(--status-led-busy);
  box-shadow:
    inset 2px 2px 4px #a3b1c6,
    inset -2px -2px 4px var(--shadow-light-soft),
    0 0 8px #d4c890;
}

.status-chip[data-state='error'] {
  background: var(--status-led-error);
  box-shadow:
    inset 2px 2px 4px #a3b1c6,
    inset -2px -2px 4px var(--shadow-light-soft),
    0 0 8px #d4a0a0;
}

.status-chip[data-state='ready'] {
  background: var(--status-led-ok);
  box-shadow:
    inset 2px 2px 4px #a3b1c6,
    inset -2px -2px 4px var(--shadow-light-soft),
    0 0 8px #a0d4c0;
}

.preference {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.preference select {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-pressed);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
}

.theme-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.theme-label {
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
}

.theme-segmented {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pressed);
}

.theme-option {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-option .tag {
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.theme-option.is-active {
  background: var(--bg);
  color: var(--active-blue);
  border-color: transparent;
  box-shadow: var(--shadow-pressed), 0 0 0 2px #d8e8ff;
  text-shadow: 0 0 8px #a8d0ff;
}

.theme-option.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.theme-option:focus-visible {
  outline: none;
  box-shadow: var(--shadow-raised), var(--focus-ring);
}

.action-overflow {
  position: relative;
  display: inline-flex;
}

.action-overflow-toggle {
  display: inline-flex;
  width: 36px;
  justify-content: center;
}

.action-secondary {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  min-width: 220px;
  z-index: 12;
}

.action-secondary.is-open {
  display: flex;
}

.overflow-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.overflow-title {
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-muted);
}

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

button.ghost {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: none;
  /* Raised state */
  box-shadow: 3px 3px 6px rgba(100, 110, 130, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.7);
  color: var(--text);
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease;
}

button.ghost:hover {
  background: var(--bg);
  /* Sunken state */
  box-shadow: inset 3px 3px 6px rgba(100, 110, 130, 0.25), inset -2px -2px 5px rgba(255, 255, 255, 0.6);
  transform: scale(0.98);
}

button.ghost:active {
  /* Deeper sunken */
  box-shadow: inset 4px 4px 8px rgba(100, 110, 130, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  transform: scale(0.96);
}

button.ghost.is-active {
  /* Active state with inset ring, offset from edge */
  background: var(--bg);
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.5),
    inset 0 0 0 4px var(--bg),
    inset 0 0 0 6px var(--active-blue);
  color: var(--active-blue);
  transform: scale(0.98);
}

button.primary {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  font-size: 12px;
  /* Raised state */
  box-shadow: 3px 3px 6px rgba(100, 110, 130, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.7);
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease;
}

button.primary:hover {
  background: var(--bg);
  /* Sunken state */
  box-shadow: inset 3px 3px 6px rgba(100, 110, 130, 0.25), inset -2px -2px 5px rgba(255, 255, 255, 0.6);
  transform: scale(0.98);
}

button.primary:active {
  /* Deeper sunken */
  box-shadow: inset 4px 4px 8px rgba(100, 110, 130, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  transform: scale(0.96);
}

button.primary.is-active {
  /* Active state with inset ring, offset from edge */
  background: var(--bg);
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.5),
    inset 0 0 0 4px var(--bg),
    inset 0 0 0 6px var(--active-blue);
  color: var(--active-blue);
  transform: scale(0.98);
}

button.primary.is-cancel {
  background: linear-gradient(145deg, var(--surface-press-lo), var(--surface-press-hi));
  box-shadow: var(--shadow-pressed), var(--accent-glow);
  color: var(--accent-dark);
}

.content {
  display: none;
}

.sidebar,
.inspector {
  display: none;
}

@media (min-width: 1101px) {
  body {
    height: 100vh;
    overflow: hidden;
  }

  .app-shell {
    height: 100vh;
  }
}

.panel {
  padding: 16px;
  background: var(--bg);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: riseIn 0.5s ease-out;
}

.panel h2 {
  font-size: 14px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-soft);
  font-weight: 600;
}

.panel.panel-collapsible {
  padding: 0;
  gap: 0;
}

.panel-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 16px;
  user-select: none;
}

.panel-summary::after {
  content: '>';
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 160ms ease;
}

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

.panel-summary::marker {
  content: '';
}

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

.panel-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px;
}

.panel .scene-meta {
  font-size: 14px;
  color: var(--text-soft);
}

.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--bg);
  box-shadow: var(--shadow-raised);
  font-size: 14px;
  gap: 8px;
  color: var(--text-soft);
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.toggle:hover {
  box-shadow: var(--shadow-panel);
  transform: translateY(-1px);
}

.tool-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.tool-group-title {
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-soft);
  font-weight: 600;
}

.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.tool-button {
  padding: 10px 12px;
  border-radius: 50px;
  border: none;
  background: var(--bg);
  /* Raised state */
  box-shadow: 3px 3px 6px rgba(100, 110, 130, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  width: 100%;
  position: relative;
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease;
}

.tool-button:hover {
  background: var(--bg);
  /* Sunken state */
  box-shadow: inset 3px 3px 6px rgba(100, 110, 130, 0.25), inset -2px -2px 5px rgba(255, 255, 255, 0.6);
  transform: scale(0.98);
}

.tool-button:active {
  /* Deeper sunken */
  box-shadow: inset 4px 4px 8px rgba(100, 110, 130, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  transform: scale(0.96);
}

.tool-button.is-active {
  /* Active state with inset ring, offset from edge */
  background: var(--bg);
  color: var(--active-blue);
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 6px rgba(255, 255, 255, 0.5),
    inset 0 0 0 4px var(--bg),
    inset 0 0 0 6px var(--active-blue);
  text-shadow: 0 0 6px #8fc0ff;
  transform: scale(0.98);
}

.tool-button.is-active::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--active-blue);
  box-shadow: var(--active-blue-glow);
  pointer-events: none;
}

.tool-note {
  font-size: 12px;
  color: var(--text-muted);
}

.tool-instruction {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  box-shadow: inset -8px -8px 14px var(--shadow-dark), inset 8px 8px 14px var(--shadow-light);
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.toggle span {
  position: relative;
  flex: 1;
  padding-right: 74px;
  color: var(--text-subtle);
  transition: color 160ms ease;
}

.toggle span::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 50px;
  height: 24px;
  border-radius: 999px;
  background: #d8dfe8;
  box-shadow:
    inset 3px 3px 6px #b8c4d0,
    inset -2px -2px 4px #ffffff;
  transform: translateY(-50%);
  transition: background 200ms ease, box-shadow 200ms ease;
}

.toggle span::after {
  content: '';
  position: absolute;
  right: 26px;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #f0f4f8);
  box-shadow:
    4px 4px 10px #a3b1c6,
    -3px -3px 8px #ffffff;
  transform: translateY(-50%);
  transition: right 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms ease, box-shadow 200ms ease;
}

.toggle input:checked + span::before {
  background: var(--active-blue);
  box-shadow: none;
}

.toggle input:checked + span::after {
  right: 0px;
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.15),
    -3px -3px 8px rgba(255, 255, 255, 0.9);
}

.toggle input:checked + span {
  color: var(--text);
}

.toggle input:focus-visible + span::before {
  box-shadow:
    inset -2px -2px 4px var(--shadow-dark),
    inset 2px 2px 4px var(--shadow-light),
    var(--focus-ring);
}

.toggle input:disabled + span {
  opacity: 0.6;
}

.ruler-card {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--ruler-border);
  background: var(--ruler-bg);
}

.ruler-label {
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 8px;
}

.ruler-line {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-cool), var(--accent-dark));
}

.ruler-note {
  font-size: 12px;
  color: var(--text-muted);
}

.canvas-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(145deg, var(--surface-hi), var(--surface-lo));
  overflow: hidden;
}

#mapCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.canvas-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.scale-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.canvas-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  /* Match dock instruction contrast for canvas overlays. */
  color: rgba(var(--text-on-dark-rgb), 0.55);
  pointer-events: auto;
}

.canvas-status-sep {
  color: inherit;
  opacity: 0.7;
}

.status-refine-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
  cursor: pointer;
  transition: color 160ms ease;
}

.status-refine-button:hover {
  color: var(--accent-dark);
}

.status-refine-icon {
  font-size: 11px;
  line-height: 1;
}

button.icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-transform: none;
}

/* Compact undo/redo icon buttons */
.undo-redo-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  border: none;
}

.undo-redo-btn:hover {
  background: #d8dee8;
  box-shadow: none;
  transform: none;
}

.undo-redo-btn:active {
  background: #d0d8e2;
  box-shadow: none;
  transform: none;
}

.undo-redo-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--text-muted);
}

.undo-redo-btn:hover svg {
  stroke: var(--text);
}

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

.undo-redo-btn:disabled svg {
  stroke: var(--text-muted);
}

.canvas-help {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

/* Help button in left corner - smaller size for info button */
.canvas-corner-left .canvas-help-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  background: var(--bg);
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 4px 16px #8a95a8, 0 1px 4px #a0a8b8;
}

.canvas-corner-left .canvas-help-button:hover {
  box-shadow: 0 6px 20px #8090a0, 0 2px 6px #a0a8b8;
}

.canvas-corner-left .canvas-help-button:active {
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}

/* Settings gear button - bigger circular button */
.canvas-corner .canvas-help-button#settingsButton {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 26px;
  background: var(--bg);
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 6px 24px #8a95a8, 0 2px 6px #a0a8b8;
}

.canvas-corner .canvas-help-button#settingsButton:hover {
  box-shadow: 0 8px 28px #8090a0, 0 3px 8px #a0a8b8;
}

.canvas-corner .canvas-help-button#settingsButton:active {
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}

.canvas-help-button {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  padding: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-help-tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 12px;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: var(--bg);
  border: none;
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 8px 32px #8a95a8, 0 2px 8px #a0a8b8;
  font-size: 12px;
  width: 260px;
  /* Spring animation - hidden state */
  opacity: 0;
  transform: scaleY(0) translateY(20px);
  transform-origin: bottom left;
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.canvas-help.is-open .canvas-help-tooltip {
  display: flex;
  opacity: 1;
  transform: scaleY(1) translateY(0);
  pointer-events: auto;
}

.canvas-help-title {
  font-weight: 600;
  color: var(--text);
}

.canvas-help-body {
  color: var(--text-soft);
  line-height: 1.4;
}

.canvas-help-dismiss {
  align-self: flex-end;
  padding: 4px 10px;
  font-size: 11px;
}

.settings-footer {
  position: absolute;
  bottom: 60px;
  left: 20px;
  width: auto;
  height: auto;
  z-index: 50;
  pointer-events: auto;
  background: transparent;
  border: none;
  padding: 0;
}

.settings-footer .settings-popover {
  top: auto;
  bottom: 100%;
  left: 0;
  right: auto;
  margin-top: 0;
  margin-bottom: 12px;
  transform-origin: bottom left;
  max-height: 50vh;
  overflow-y: auto;
}

.settings-footer .ui-button.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2a3648;
  border: 1px solid #404858;
  box-shadow: 0 4px 6px -1px #404040;
  color: var(--text-muted);
}

.settings-footer .ui-button.icon-button:hover {
  background: #3a4858;
  color: var(--text-on-dark);
}

.canvas-corner {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Settings popover z-index handled directly on .settings-popover--corner (z-index: 9999) */

.canvas-corner-left {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Help tooltip position for left corner */
.canvas-corner-left .canvas-help-tooltip {
  left: 0;
  right: auto;
}

.db-legend {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--bg);
  border: none !important;
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 4px 16px #8a95a8, 0 1px 4px #a0a8b8;
  outline: none;
}

.db-legend-bar {
  position: relative;
  width: clamp(12rem, 26vw, 16rem);
  height: 1.5rem;
  border-radius: 999px;
  overflow: hidden;
}

.db-legend-gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #10b981 40%, #f59e0b 70%, #ef4444 100%);
}

.db-legend-labels {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(30, 41, 59, 0.7);
  mix-blend-mode: multiply;
}

.db-legend-labels span {
  white-space: nowrap;
}

.db-legend.is-contours .db-legend-labels {
  font-size: 9px;
  letter-spacing: 0.01em;
}

.map-band-step.is-hidden {
  display: none;
}

.snap-indicator {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--accent-soft-strong);
  transform: translate(-9999px, -9999px);
  pointer-events: none;
}

.scale-line {
  height: 6px;
  border-radius: 999px;
  background: var(--accent-dark);
}

.scale-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
}

.inspector-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inspector-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-soft);
}

.inspector-hint {
  font-size: 12px;
  color: var(--text-muted);
  background: linear-gradient(145deg, var(--surface-press-lo), var(--surface-press-hi));
  border: 1px dashed var(--border-soft);
  box-shadow: var(--shadow-pressed);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

.inspector-hint.is-hidden {
  display: none;
}

.note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-soft);
}

.properties {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--text-soft);
}

.property-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--accent-dark);
}

.properties-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text-soft);
}

.multi-selection-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.multi-selection-counts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-soft);
}

.multi-selection-count-item {
  padding: 4px 0;
}

.multi-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.multi-action-btn {
  flex: 1 1 auto;
  min-width: 80px;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 12px;
}

.multi-action-btn.danger {
  color: #ff6b6b;
}

.multi-action-btn.secondary {
  opacity: 0.8;
}

.text-button {
  border: none;
  background: transparent;
  color: var(--accent-dark);
  text-align: left;
  padding: 0;
  font-size: 12px;
  letter-spacing: var(--ui-letter-spacing);
  text-transform: lowercase;
}

.property-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  align-items: center;
  gap: 8px;
}

.property-row input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  border: none;
  background: var(--bg);
  /* Sunken neumorphic style */
  box-shadow:
    inset 3px 3px 6px rgba(100, 110, 130, 0.25),
    inset -2px -2px 4px rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.6px;
  transition: box-shadow 200ms ease;
}

.property-row input:hover {
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 5px rgba(255, 255, 255, 0.5);
}

.property-row select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  border: none;
  background: var(--bg);
  /* Sunken neumorphic style */
  box-shadow:
    inset 3px 3px 6px rgba(100, 110, 130, 0.25),
    inset -2px -2px 4px rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.6px;
  transition: box-shadow 200ms ease;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23788190' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.property-row select:hover {
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 5px rgba(255, 255, 255, 0.5);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.source-name:focus-visible,
.source-field input:focus-visible,
.property-row input:focus-visible,
.property-row select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-pressed), var(--focus-ring);
}

.property-row input:focus-visible,
.property-row select:focus-visible {
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 5px rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(45, 140, 255, 0.3);
  outline: none;
}

.text-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

.ground-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ground-details.is-hidden {
  display: none;
}

.field-help {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.field-help.is-hidden {
  display: none;
}

.field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tooltip-trigger {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: linear-gradient(145deg, var(--surface-hi), var(--surface-lo));
  box-shadow: var(--shadow-raised);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  padding: 0;
}

.tooltip-content {
  position: absolute;
  top: 24px;
  left: 0;
  width: 220px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: linear-gradient(145deg, var(--surface-hi), var(--surface-lo));
  box-shadow: var(--shadow-raised);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}

.tooltip:hover .tooltip-content,
.tooltip:focus-within .tooltip-content {
  opacity: 1;
  transform: translateY(0);
}

.tooltip-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.tooltip-diagram {
  font-size: 11px;
  color: var(--text-soft);
  margin: 0 0 6px;
  white-space: pre;
}

.tooltip-note {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
}

.property-row.property-row-stack {
  grid-template-columns: 1fr;
}

.property-row.property-row-stack span {
  margin-bottom: 4px;
}

.property-row select:disabled,
.property-row input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.property-hint {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--warning-bg);
  border: 1px dashed var(--warning-border);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.results-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.results-title {
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-muted);
}

.results-table {
  display: grid;
  gap: 6px;
}

.result-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--surface-press-lo), var(--surface-press-hi));
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-pressed);
  font-size: 13px;
}

.result-row--spectrum {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.result-spectrum-mini {
  display: flex;
  gap: 2px;
  height: 24px;
  align-items: flex-end;
  padding: 2px 0;
}

.spectrum-bar-mini {
  flex: 1;
  min-width: 0;
  background: linear-gradient(to top, var(--accent), var(--accent-light));
  border-radius: 1px 1px 0 0;
  transition: height 0.2s ease;
}

.spectrum-bar-mini.is-selected {
  background: linear-gradient(to top, var(--warn), var(--warn-light, #ffb74d));
  box-shadow: 0 0 4px var(--warn);
}

/* ==========================================================================
   Spectrum Editor - Interactive frequency band editor with visual chart
   ========================================================================== */

.spectrum-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--surface-press-lo), var(--surface-press-hi));
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-pressed);
}

.spectrum-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-muted);
  margin-bottom: 2px;
}

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

.spectrum-overall-label {
  font-size: 13px;
  color: var(--text);
}

.spectrum-overall-label strong {
  font-weight: 700;
  color: var(--accent-dark);
}

.spectrum-gain-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}

.spectrum-gain-label {
  font-weight: 500;
}

.spectrum-gain-input {
  width: 64px;
  text-align: center;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 12px;
  border: none;
  background: var(--bg);
  /* Sunken neumorphic style */
  box-shadow:
    inset 3px 3px 6px rgba(100, 110, 130, 0.25),
    inset -2px -2px 4px rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  color: var(--text);
  transition: box-shadow 200ms ease;
}

.spectrum-gain-input:hover {
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 5px rgba(255, 255, 255, 0.5);
}

.spectrum-gain-input:focus-visible {
  outline: none;
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 5px rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(45, 140, 255, 0.3);
}

.spectrum-gain-unit {
  color: var(--text-muted);
}

/* Source Spectrum Chart (dB SPL @ 1m) */
.source-chart-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.source-chart-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.source-chart {
  width: 100%;
  height: 90px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--source-chart-bg);
}

/* Interactive Band Sliders */
.spectrum-sliders-container {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg);
  border-radius: 16px;
  border: none;
  box-shadow: inset 4px 4px 8px rgba(100, 110, 130, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.7);
}

.spectrum-slider-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.spectrum-slider-value {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono);
  min-width: 28px;
  text-align: center;
}

/* Neumorphic vertical slider wrapper */
.spectrum-slider-track {
  position: relative;
  width: 10px;
  height: 70px;
  border-radius: 999px;
  background: var(--bg);
  /* Sunken track gutter */
  box-shadow:
    inset 2px 2px 4px rgba(100, 110, 130, 0.3),
    inset -1px -1px 3px rgba(255, 255, 255, 0.6);
  margin: 4px 0;
}

/* Solid color fill level - orange tone */
.spectrum-slider-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 999px;
  background: linear-gradient(to top, #e8a060, #f0c090);
  /* Default height set by JS via style */
  transition: height 50ms ease;
}

/* Hidden native input overlaid for interaction */
.spectrum-slider {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  width: 10px;
  height: 70px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  /* Vertical slider via writing-mode */
  writing-mode: vertical-lr;
  direction: rtl;
  z-index: 2;
}

.spectrum-slider::-webkit-slider-runnable-track {
  width: 10px;
  height: 100%;
  background: transparent;
  border-radius: 999px;
}

.spectrum-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  /* Raised neumorphic thumb */
  box-shadow:
    2px 2px 5px rgba(100, 110, 130, 0.35),
    -1px -1px 3px rgba(255, 255, 255, 0.8);
  border: 2px solid #e8a060;
  cursor: grab;
  transition: transform 100ms ease, box-shadow 100ms ease;
  margin-left: -4px;
}

.spectrum-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow:
    3px 3px 6px rgba(100, 110, 130, 0.4),
    -2px -2px 4px rgba(255, 255, 255, 0.9);
}

.spectrum-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
  /* Sunken when dragging */
  box-shadow:
    inset 2px 2px 4px rgba(100, 110, 130, 0.25),
    inset -1px -1px 3px rgba(255, 255, 255, 0.5);
}

.spectrum-slider::-moz-range-track {
  width: 10px;
  height: 100%;
  background: transparent;
  border-radius: 999px;
}

.spectrum-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow:
    2px 2px 5px rgba(100, 110, 130, 0.35),
    -1px -1px 3px rgba(255, 255, 255, 0.8);
  border: 2px solid #e8a060;
  cursor: grab;
}

.spectrum-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.spectrum-slider-freq {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Spectrum Presets */
.spectrum-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}

.spectrum-preset-button {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.source-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--surface-press-lo), var(--surface-press-hi));
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-pressed);
}

.source-row.is-muted {
  opacity: 0.6;
}

.source-row.is-selected {
  border-color: var(--active-blue);
  background: linear-gradient(145deg, var(--surface-hi), var(--surface-lo));
  box-shadow: var(--shadow-pressed), 0 0 12px #8fc0ff;
}

.source-row-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 13px;
  color: var(--accent-dark);
  gap: 8px;
}

.source-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.source-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.source-name {
  font-size: 13px;
  padding: 4px 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-pressed);
  font-family: var(--font);
  color: var(--text);
}

.source-id {
  font-size: 11px;
  color: var(--text-muted);
}

.source-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.source-chip {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: linear-gradient(145deg, var(--surface-press-lo), var(--surface-press-hi));
  font-size: 10px;
  font-weight: 700;
  box-shadow: var(--shadow-pressed);
}

.source-chip.is-active {
  background: linear-gradient(145deg, var(--surface-hi), var(--surface-lo));
  color: var(--active-blue);
  border-color: var(--active-blue);
  box-shadow: var(--shadow-pressed), 0 0 8px #6aa8ff;
}

.source-collapse {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
}

.source-collapse:hover {
  border-color: var(--border-soft);
  background: linear-gradient(145deg, var(--surface-hi), var(--surface-lo));
}

.source-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.source-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.source-field input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: none;
  background: var(--bg);
  /* Sunken neumorphic style */
  box-shadow:
    inset 3px 3px 6px rgba(100, 110, 130, 0.25),
    inset -2px -2px 4px rgba(255, 255, 255, 0.6);
  font-family: var(--font);
  font-size: 12px;
  color: var(--text);
  transition: box-shadow 200ms ease;
}

.source-field input:hover {
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 5px rgba(255, 255, 255, 0.5);
}

.source-field input:focus-visible {
  box-shadow:
    inset 4px 4px 8px rgba(100, 110, 130, 0.3),
    inset -3px -3px 5px rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(45, 140, 255, 0.3);
  outline: none;
}

.panel-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-soft);
}

.panel-stats strong {
  color: var(--accent-dark);
}

.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bg);
  border: none;
  /* Sunken neumorphic style */
  box-shadow:
    inset 3px 3px 6px rgba(100, 110, 130, 0.25),
    inset -2px -2px 4px rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.stat-row span {
  color: var(--text-muted);
}

.stat-row strong {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-mono);
}

.panel-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.legend-bar {
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

.legend-empty {
  font-size: 12px;
  color: var(--text-subtle);
}

/* =============================================================================
   Modal Layout - Centered Card with Scrollbar
   =============================================================================
   A moderately-sized centered modal with neumorphic scrollbar.
   Not full span - provides comfortable reading width.
   ============================================================================= */

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.modal.is-open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  /* Solid neumorphic backdrop - matches plastic look */
  background: #c8ced8;
}

.modal-card {
  position: relative;
  z-index: 1;
  width: min(900px, 94vw);
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Neumorphic inset scrollbar for modal cards */
.modal-card::-webkit-scrollbar {
  width: 10px;
}

.modal-card::-webkit-scrollbar-track {
  background: #e0e5ec;
  border-radius: 5px;
  margin: 12px 4px;
  box-shadow: inset 2px 2px 4px #a3b1c6, inset -2px -2px 4px #f0f4f8;
}

.modal-card::-webkit-scrollbar-thumb {
  background: #cdd4de;
  border-radius: 5px;
  border: none;
  box-shadow: inset 1px 1px 2px #a3b1c6;
}

.modal-card::-webkit-scrollbar-thumb:hover {
  background: #c0c8d4;
}

.modal-plate {
  border-radius: 28px;
  background: var(--brand-bg);
  border: none;
  box-shadow: 16px 16px 32px var(--shadow-dark), -16px -16px 32px var(--shadow-light);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-header h2 {
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text);
}

.modal-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-subtitle {
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-muted);
}

.modal-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ui-letter-spacing);
  text-transform: lowercase;
  background: var(--bg);
  color: var(--text-muted);
  text-shadow: 1px 1px 0 var(--shadow-light-soft), -1px -1px 1px rgba(0, 0, 0, 0.2);
  /* Raised state */
  box-shadow: 3px 3px 6px rgba(100, 110, 130, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.7);
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease, color 160ms ease;
}

.modal-close:hover {
  color: var(--text);
  background: var(--bg);
  /* Sunken state */
  box-shadow: inset 3px 3px 6px rgba(100, 110, 130, 0.25), inset -2px -2px 5px rgba(255, 255, 255, 0.6);
  transform: scale(0.98);
}

.modal-close:active {
  box-shadow: inset 4px 4px 8px rgba(100, 110, 130, 0.35), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  transform: scale(0.96);
}

/* Pill-based flowing grid - sections redistribute when expanded */
.spec-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: start;
  justify-content: center;
}

.spec-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spec-section--full {
  grid-column: 1 / -1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Pill-style Collapsible Physics Sections
   - Collapsed: compact horizontal pills that flow/wrap
   - Expanded: full width, other pills redistribute around it
   ───────────────────────────────────────────────────────────────────────────── */

.collapsible-section {
  border-radius: 999px;
  background: var(--brand-bg);
  box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
  overflow: hidden;
  /* Smooth, slow transitions for organic feel */
  transition:
    border-radius 500ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1),
    flex 600ms cubic-bezier(0.4, 0, 0.2, 1),
    max-width 600ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Collapsed: auto-width pill that wraps with others */
  flex: 0 0 auto;
  max-width: 480px;
}

.collapsible-section:hover {
  box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
}

/* Expanded: wider but not full edge-to-edge, rounded corners */
.collapsible-section.is-open {
  border-radius: 24px;
  flex: 1 0 100%;
  max-width: 100%;
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 160ms ease;
}

.collapsible-header:hover {
  background: #f0f4f8;
}

/* When expanded, add more vertical padding */
.collapsible-section.is-open .collapsible-header {
  padding: 14px 18px;
}

.collapsible-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.collapsible-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.collapsible-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text);
  text-transform: lowercase;
}

.collapsible-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collapsible-chevron {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--brand-bg);
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.collapsible-section.is-open .collapsible-chevron {
  transform: rotate(180deg);
}

.collapsible-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 600ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 400ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}

.collapsible-section.is-open .collapsible-body {
  max-height: 2000px;
  opacity: 1;
}

.collapsible-content {
  padding: 0 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.collapsible-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
  margin: 0 18px;
}

/* Physics section formula highlight */
.formula-highlight {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--brand-bg);
  box-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
  font-family: "Times New Roman", "Times", serif;
  font-size: 15px;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.5px;
}

/* Diagram container */
.physics-diagram {
  padding: 14px;
  border-radius: 14px;
  background: var(--brand-bg);
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: pre;
  overflow-x: auto;
}

/* Reference values table */
.physics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.physics-table th,
.physics-table td {
  padding: 6px 8px;
  text-align: center;
  color: var(--text-muted);
}

.physics-table th {
  font-weight: 600;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-soft);
}

.physics-table tr:nth-child(even) {
  background: #f0f4f8;
}

/* Expand all button */
.expand-all-btn {
  align-self: flex-end;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-muted);
  background: var(--brand-bg);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: all 160ms ease;
}

.expand-all-btn:hover {
  color: var(--active-blue);
  border-color: var(--active-blue);
}

/* Standards badge */
.standards-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(145deg, var(--surface-hi), var(--surface-lo));
  box-shadow: 2px 2px 4px var(--shadow-dark), -2px -2px 4px var(--shadow-light);
}

.standards-badge--iso {
  color: #4a7c59;
}

.standards-badge--empirical {
  color: #7c6b4a;
}

/* Accuracy indicator */
.accuracy-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--surface-hi), var(--surface-lo));
  box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
}

.accuracy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a7c59;
  box-shadow: 0 0 6px rgba(74, 124, 89, 0.4);
}

.accuracy-text {
  font-size: 12px;
  color: var(--text-soft);
}

/* Limitations list */
.limitations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.limitations-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.limitations-list li::before {
  content: "•";
  color: var(--text-soft);
  flex-shrink: 0;
}

/* References section */
.references-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.references-list li {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  padding-left: 24px;
  position: relative;
}

.references-list li::before {
  content: attr(data-ref);
  position: absolute;
  left: 0;
  font-weight: 600;
  color: var(--text-soft);
}

/* Section intro text */
.section-intro {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 8px;
}

.about-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--brand-bg);
  box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
}

.about-tab {
  border: none;
  background: var(--bg);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-soft);
  font-weight: 600;
  cursor: pointer;
  /* Raised state */
  box-shadow: 2px 2px 4px rgba(100, 110, 130, 0.3), -1px -1px 3px rgba(255, 255, 255, 0.7);
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease, color 160ms ease;
}

.about-tab:hover {
  background: var(--bg);
  /* Sunken state */
  box-shadow: inset 2px 2px 4px rgba(100, 110, 130, 0.25), inset -1px -1px 3px rgba(255, 255, 255, 0.6);
  transform: scale(0.98);
}

.about-tab:active {
  box-shadow: inset 3px 3px 5px rgba(100, 110, 130, 0.35), inset -2px -2px 4px rgba(255, 255, 255, 0.5);
  transform: scale(0.96);
}

.about-tab.is-active {
  color: var(--active-blue);
  /* Active state with inset ring, offset from edge */
  box-shadow:
    inset 3px 3px 6px rgba(100, 110, 130, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.5),
    inset 0 0 0 3px var(--bg),
    inset 0 0 0 5px var(--active-blue);
  transform: scale(0.98);
}

.about-panel {
  display: none;
}

.about-panel.is-active {
  display: block;
}

.spec-heading {
  font-size: 14px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-muted);
  text-shadow: 1px 1px 0 var(--shadow-light-soft), -1px -1px 1px rgba(0, 0, 0, 0.2);
}

.spec-tray {
  background: var(--bg);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-pressed);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spec-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.spec-subhead {
  font-size: 13px;
  text-transform: lowercase;
  letter-spacing: var(--ui-letter-spacing);
  color: var(--text-soft);
  margin-top: 6px;
}

.spec-list {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.equation-pill {
  align-self: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--brand-bg);
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
  font-family: "Times New Roman", "Times", serif;
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-align: center;
}

.equation-block {
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--brand-bg);
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
  font-family: "Times New Roman", "Times", serif;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.equation-block > div + div {
  margin-top: 4px;
}

/* Equations grid - CSS grid layout for Full Equations tab */
.equations-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.equations-grid .spec-section {
  min-width: 0;
}

.equations-grid .spec-section--full {
  grid-column: 1 / -1;
}

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

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

@media (max-width: 1100px) {
  .topbar {
    left: 16px;
    right: 16px;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .topbar-center {
    align-items: flex-start;
    justify-self: stretch;
  }

  .topbar-right {
    justify-content: flex-start;
  }

  .topbar-left {
    flex-wrap: wrap;
  }

  .dock {
    bottom: 24px;
  }

  .dock-instruction-bottom {
    max-width: 80vw;
    text-align: center;
  }

  .context-panel {
    right: 16px;
    width: min(360px, 90vw);
  }

  .probe-panel {
    right: 16px;
    width: min(360px, 90vw);
    bottom: 104px;
  }

  .settings-footer {
    left: 16px;
    bottom: 60px;
    right: auto;
  }
}

@media (max-width: 720px) {
  .topbar {
    top: 10px;
    left: 12px;
    right: 12px;
    padding: 8px 12px;
  }

  .dock-tools {
    gap: 6px;
    padding: 6px;
  }

  .dock-button {
    width: 42px;
    height: 42px;
  }

  .dock-label {
    font-size: 12px;
  }

  .context-panel {
    top: 72px;
    right: 12px;
  }

  .probe-panel {
    right: 12px;
    bottom: 96px;
  }

  .probe-chart canvas {
    height: 120px;
  }

  .settings-footer {
    left: 12px;
    bottom: 60px;
    right: auto;
  }
}

/* FORCE SETTINGS TO BOTTOM LEFT */
.settings-footer {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 80px !important;
  left: 20px !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  pointer-events: auto !important;
}

/* STYLE THE BUTTON (Make it a circle FAB) */
.settings-footer .ui-button.icon-button {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #2a3648 !important;
  border: 1px solid #4a5568 !important;
  box-shadow: 0 4px 12px #404040 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted) !important;
}

.settings-footer .ui-button.icon-button:hover {
  background: var(--accent-dark) !important;
  color: var(--text-on-dark) !important;
}

/* FORCE POPUP TO OPEN UPWARDS */
.settings-footer .settings-popover {
  position: absolute !important;
  bottom: 100% !important;
  left: 0 !important;
  top: auto !important;
  margin-bottom: 12px !important;
  transform-origin: bottom left !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  margin-top: 0 !important;
}

/* Settings toggle in canvas corner - popover opens upward */
.canvas-corner .settings-toggle {
  position: relative;
}

.settings-popover--corner {
  position: fixed !important;
  bottom: 90px !important;
  right: 18px !important;
  left: auto !important;
  top: auto !important;
  transform-origin: bottom right !important;
  width: 300px !important;
  max-height: min(65vh, calc(100vh - 180px)) !important;
  overflow-y: auto !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background: var(--bg) !important;
  border: none !important;
  /* Hard edge shadow - no neumorphic highlight glow */
  box-shadow: 0 8px 32px #8a95a8, 0 2px 8px #a0a8b8 !important;
  z-index: 9999 !important;
  /* Use visibility/opacity for animation */
  display: flex !important;
  flex-direction: column !important;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 250ms cubic-bezier(0.25, 0.1, 0.25, 1),
              visibility 0s linear 400ms;
}

.settings-popover--corner.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scaleY(1) !important;
  pointer-events: auto !important;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 250ms cubic-bezier(0.25, 0.1, 0.25, 1),
              visibility 0s linear 0s !important;
}

/* Inset scrollbar for settings popover */
.settings-popover--corner::-webkit-scrollbar {
  width: 16px;
}

.settings-popover--corner::-webkit-scrollbar-track {
  background: transparent;
  border-left: 12px solid transparent;
  background-clip: padding-box;
}

.settings-popover--corner::-webkit-scrollbar-thumb {
  background: linear-gradient(145deg, #f0f4f8, #d8dfe8);
  border-radius: 10px;
  border: 4px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px #c8d0dc;
}

.settings-popover--corner .settings-section {
  gap: 12px;
  margin-bottom: 16px;
}

.settings-popover--corner .settings-section:last-child {
  margin-bottom: 0;
}

.settings-popover--corner .settings-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.settings-popover--corner .property-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-popover--corner .property-row span {
  font-size: 12px;
  color: var(--text-soft);
}

.settings-popover--corner .property-row select,
.settings-popover--corner .property-row input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: none;
  background: var(--brand-bg);
  box-shadow:
    inset 4px 4px 8px #a3b1c6,
    inset -4px -4px 8px #ffffff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow 200ms ease;
}

.settings-popover--corner .property-row select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23788190' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.settings-popover--corner .property-row select:focus,
.settings-popover--corner .property-row input:focus {
  outline: none;
  box-shadow:
    inset 4px 4px 8px #a3b1c6,
    inset -4px -4px 8px #ffffff,
    0 0 0 3px rgba(45, 140, 255, 0.3);
}

.settings-popover--corner .toggle {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  background: linear-gradient(145deg, var(--surface-hi), var(--surface-lo));
  box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
}

.settings-popover--corner .toggle span {
  color: var(--text-soft);
}

.settings-popover--corner .map-band-step {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.settings-popover--corner .map-band-step span {
  font-size: 12px;
  color: var(--text-soft);
}

.settings-popover--corner .map-band-step input {
  width: 70px;
}