@charset "UTF-8";
/* General SCSS utilities and mixins for the Audio Workbench
   Use via `@use "utils";` from src/styles/main.scss
*/
/* Ensure the [hidden] attribute always wins over any display override from
   author stylesheets (e.g. display:flex on .xc-recording-edit). */
[hidden] {
  display: none !important;
}

/* DAW Shell — core reset, layout, and view/draw mode toggling */
.daw-shell *,
.daw-shell *::before,
.daw-shell *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.daw-shell {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.daw-shell.view-mode-waveform .spectrogram-container,
.daw-shell.view-mode-waveform .view-split-handle {
  display: none;
}

.daw-shell.view-mode-waveform .waveform-container {
  flex: 1;
  min-height: var(--waveform-height);
}

.daw-shell.view-mode-spectrogram .waveform-container,
.daw-shell.view-mode-spectrogram .view-split-handle {
  display: none;
}

.daw-shell.draw-mode-active .spectrogram-canvas-wrapper {
  cursor: crosshair;
}

.daw-shell.stamp-mode-active .spectrogram-canvas-wrapper {
  cursor: copy;
}

/* Views panel, spectrogram/waveform containers, canvas wrappers,
   overlays, crosshairs, time display, split/resize handles.
   Migrated from player.css */
/* ═══ Time Display ═══ */
.time-display {
  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-primary);
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  border: 1px solid var(--color-border);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.time-sep {
  color: var(--color-text-secondary);
  margin: 0 2px;
}

/* ═══ Views Panel ═══ */
.views-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-bg-primary);
}

.spectrogram-container {
  position: relative;
  background: var(--color-bg-secondary);
  overflow: hidden;
  flex: 1;
  min-height: var(--spectrogram-height);
  border-top: 1px solid var(--color-border);
}

.canvas-wrapper {
  position: relative;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: crosshair;
  touch-action: pan-y;
}

.canvas-wrapper::-webkit-scrollbar {
  height: 6px;
}

.canvas-wrapper::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

.canvas-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-text-secondary);
  border-radius: 3px;
}

/* Full-width invisible element that gives the scroll container its scrollable range.
   Must stay in normal flow so its width contributes to scrollWidth.
   height: 1px + visibility: hidden is more reliable than height: 0 + overflow: hidden,
   which some browsers exclude from scrollable-overflow calculation. */
.canvas-sizer {
  display: block;
  height: 1px;
  margin-bottom: -1px; /* cancel out the 1px so it takes no visible space */
  visibility: hidden;
  pointer-events: none;
}

/* Spectrogram canvas + crosshair overlay are viewport-width only.
   position: sticky keeps them pinned to the visible left edge while the
   scroll container (and label overlays inside it) scroll normally.
   will-change: contents lets the compositor pre-allocate a GPU layer so
   canvas repaints don't trigger full-page compositing. */
[data-aw=spectrogramCanvas],
.crosshair-overlay {
  display: block;
  position: sticky;
  left: 0;
  z-index: 1;
  will-change: contents;
}

[data-aw=spectrogramCanvas] {
  image-rendering: pixelated;
}

/* ── Recomputing Overlay ── */
.recomputing-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #e0e0e0;
  font: 12px/1.4 system-ui, sans-serif;
  pointer-events: none;
  z-index: 20;
  backdrop-filter: blur(2px);
  transition: opacity 0.15s;
}

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

.recomputing-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #e0e0e0;
  border-radius: 50%;
  animation: aw-spin 0.7s linear infinite;
}

@keyframes aw-spin {
  to {
    transform: rotate(360deg);
  }
}
.crosshair-overlay {
  pointer-events: none;
  z-index: 5;
}

.crosshair-readout {
  position: absolute;
  pointer-events: none;
  z-index: 15;
  padding: 3px 7px;
  border-radius: 4px;
  font: 11px/1.4 monospace;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.78);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transition: opacity 0.12s;
}

.crosshair-readout.visible {
  opacity: 1;
}

/* ═══ Waveform ═══ */
.waveform-container {
  position: relative;
  height: var(--waveform-height);
  background: var(--color-bg-secondary);
  overflow: hidden;
}

.time-aligned-row {
  display: flex;
  width: 100%;
  height: 100%;
}

.axis-spacer {
  position: relative;
  width: var(--axis-width);
  flex: 0 0 var(--axis-width);
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  overflow: visible;
}

.time-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.waveform-wrapper {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  cursor: crosshair;
  background: var(--color-bg-secondary);
  touch-action: pan-y;
}

.waveform-wrapper::-webkit-scrollbar {
  height: 0;
}

.waveform-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.waveform-wrapper::-webkit-scrollbar-thumb {
  background: transparent;
}

.waveform-content {
  position: relative;
}

[data-aw=amplitudeCanvas] {
  display: block;
  image-rendering: pixelated;
}

[data-aw=waveformTimelineCanvas] {
  display: block;
}

/* ═══ Split / Resize Handles ═══ */
.view-split-handle {
  height: 5px;
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  cursor: row-resize;
  touch-action: none;
  transition: background 0.15s;
}

.view-split-handle:hover {
  background: var(--color-accent);
  opacity: 0.5;
}

.spectrogram-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: transparent;
  cursor: row-resize;
  touch-action: none;
  z-index: 11;
  transition: background 0.15s;
}

.spectrogram-resize-handle:hover {
  background: rgba(56, 189, 248, 0.3);
}

/* Amplitude & frequency axis labels, scrollbar, zoom reset.
   Migrated from player.css */
/* ═══ Amplitude Labels ═══ */
.amplitude-labels {
  position: absolute;
  inset: 0;
  font-size: 0.68rem;
  color: var(--color-text-secondary);
  pointer-events: none;
  overflow: visible;
}

.amplitude-labels span {
  position: absolute;
  right: 6px;
  --tick-pos: 50%;
  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
  font-size: 0.62rem;
  line-height: 1;
  white-space: nowrap;
}

.amplitude-labels span::after {
  content: "";
  position: absolute;
  right: -6px;
  top: var(--tick-pos);
  width: 5px;
  height: 1px;
  background: var(--color-text-secondary);
  opacity: 0.6;
}

/* ═══ Frequency Labels ═══ */
.freq-axis-spacer {
  display: flex;
  align-items: stretch;
  cursor: ns-resize;
}

.frequency-labels {
  position: absolute;
  inset: 0;
  padding: 0;
  font-size: 0.68rem;
  color: var(--color-text-secondary);
  pointer-events: none;
  overflow: visible;
}

.frequency-labels span {
  position: absolute;
  right: 6px;
  width: auto;
  text-align: right;
  --tick-pos: 50%;
  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
  font-size: 0.62rem;
  line-height: 1;
  white-space: nowrap;
}

.frequency-labels span::after {
  content: "";
  position: absolute;
  right: -6px;
  top: var(--tick-pos);
  width: 5px;
  height: 1px;
  background: var(--color-text-secondary);
  opacity: 0.6;
}

/* Vertical zoom reset button */
.freq-zoom-reset-btn {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  opacity: 0.8;
  transition: opacity 0.15s;
}

.freq-zoom-reset-btn:hover {
  opacity: 1;
  background: var(--color-hover);
}

.freq-zoom-reset-btn[hidden] {
  display: none;
}

/* Vertical frequency scrollbar (visible when Y-zoomed) */
.freq-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background: transparent;
  z-index: 8;
  pointer-events: auto;
  cursor: ns-resize;
  transition: opacity 0.15s;
  opacity: 0.5;
}

.freq-scrollbar:hover,
.freq-scrollbar.active {
  opacity: 0.9;
}

.freq-scrollbar[hidden] {
  display: none;
}

.freq-scrollbar-thumb {
  position: absolute;
  right: 0;
  width: 6px;
  min-height: 12px;
  border-radius: 3px;
  background: var(--color-text-secondary);
  opacity: 0.45;
  transition: opacity 0.12s;
}

.freq-scrollbar-thumb:hover,
.freq-scrollbar.active .freq-scrollbar-thumb {
  opacity: 0.7;
}

/* Overview strip — minimap + label tracks */
.overview-container {
  position: relative;
  height: 48px;
  min-height: 48px;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

[data-aw=overviewCanvas] {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.overview-window {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
  background: rgba(56, 189, 248, 0.08);
  pointer-events: auto;
  cursor: grab;
  box-sizing: border-box;
}

.overview-window:active {
  cursor: grabbing;
}

.overview-window .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  background: rgba(56, 189, 248, 0.6);
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}

.overview-window .handle.left {
  left: -4px;
}

.overview-window .handle.right {
  right: -4px;
}

/* ═══ Overview Label Section (collapsible) ═══ */
.overview-label-section {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.overview-label-section[hidden] {
  display: none;
}

.overview-label-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0 6px;
  height: 16px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}

.overview-label-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
}

.overview-label-tab-chevron {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.18s ease;
}

.overview-label-section.collapsed .overview-label-tab-chevron {
  transform: rotate(-90deg);
}

.overview-label-section.collapsed .overview-label-tracks {
  display: none;
}

/* ═══ Overview Label Tracks ═══ */
.overview-label-tracks {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  overflow: hidden;
}

.overview-label-tracks:empty {
  display: none;
}

.overview-label-group-header {
  height: 12px;
  line-height: 12px;
  padding: 0 4px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.overview-label-row {
  position: relative;
  height: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  background: var(--label-tint, rgba(30, 41, 59, 0.6));
}

.overview-label-row-name {
  position: absolute;
  left: 3px;
  top: 0;
  z-index: 2;
  padding: 0 2px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: none;
  pointer-events: none;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.9);
}

.overview-label-row-track {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.overview-label-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.35);
  min-width: 2px;
  cursor: pointer;
  transition: background 0.1s;
}

.overview-label-segment:hover {
  background: rgba(255, 255, 255, 0.55);
}

.overview-label-segment.multi-selected {
  background: rgba(56, 189, 248, 0.65);
  outline: 1px solid rgba(56, 189, 248, 0.9);
  outline-offset: 1px;
}

/* Status bar — migrated from player.css */
.statusbar {
  display: flex;
  align-items: center;
  height: var(--statusbar-height);
  min-height: var(--statusbar-height);
  padding: 0 10px;
  background: var(--color-statusbar);
  border-top: 1px solid var(--color-border);
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  user-select: none;
  gap: 4px;
}

.statusbar-section {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  white-space: nowrap;
}

.statusbar-section:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.statusbar-spacer {
  flex: 1;
}

.statusbar-label {
  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
}

/* Buttons partial for Audio-Workbench (SCSS)
   Uses CSS custom properties for colors so runtime theming remains possible.
*/
/* Provide both new `.aw-btn` and legacy selectors for an easy, opt-in
   migration without breaking legacy CSS immediately. */
.aw-btn, .toolbar-btn, .tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s;
}

/* Legacy danger variant used in demo */
.tb-btn.danger {
  border-color: #5c2020;
  color: var(--color-danger);
}

.aw-btn:hover, .toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-accent);
}

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

.toolbar-btn.toggle-btn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
}

.toolbar-btn.flex-shrink-0 {
  flex-shrink: 0;
}

.aw-btn--primary, .toolbar-btn.file-btn {
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}

.aw-btn--primary:hover, .toolbar-btn.file-btn:hover {
  background: var(--color-accent-hover);
}

.mini-btn {
  background: var(--color-bg-surface, #2a2a3e);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 5px;
  cursor: pointer;
  line-height: 1.3;
}

.mini-btn:hover:not(:disabled) {
  color: var(--color-text-primary);
  border-color: var(--color-accent);
}

/* Toolbar partial for Audio-Workbench (SCSS)
   Re-usable toolbar layout and separators.
*/
.aw-toolbar, .toolbar, .topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-height: var(--toolbar-height);
  padding: 4px 8px;
  background: var(--color-toolbar);
  border-bottom: 1px solid var(--color-border);
  user-select: none;
  position: relative;
}

.toolbar-primary,
.toolbar-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.toolbar-sep, .tb-sep {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  flex-shrink: 0;
}

.toolbar-label {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.toolbar-select {
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: 0.78rem;
  cursor: pointer;
  flex-shrink: 0;
}

.compact-more-btn {
  display: none !important;
}

.toolbar-range {
  width: 100px;
  min-width: 60px;
  max-width: 140px;
  height: 4px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 1;
}

.toolbar-range-zoom {
  width: 64px;
  min-width: 44px;
  max-width: 90px;
}

.toolbar-range-sm {
  width: 64px;
  min-width: 40px;
  max-width: 80px;
}

.zoom-controls-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.zoom-controls-row .toolbar-label {
  min-width: unset;
  font-size: 0.62rem;
  opacity: 0.6;
}

.freq-zoom-label {
  margin-left: 4px;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
}

.icon-btn:hover {
  color: var(--color-text-primary);
}

.icon-btn.muted {
  color: var(--color-accent-dim, #664444);
}

.toolbar-value {
  font-size: 0.72rem;
  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
  color: var(--color-text-secondary);
  min-width: 56px;
  flex-shrink: 0;
}

.toolbar-value-sm {
  min-width: 40px;
  font-size: 0.65rem;
}

/* Settings toggle button */
.settings-toggle-btn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
}

.toggle-btn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
}

/* Lightweight legacy helpers used in demo HTML */
.tb-spacer {
  flex: 1;
}

.tb-meta {
  color: var(--color-text-secondary);
  font-size: 11px;
}

/* Transport component */
.transport {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.transport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.transport-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
}

.transport-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.transport-btn.play-btn {
  width: 34px;
  height: 30px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 6px;
}

.transport-btn.play-btn:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.transport-btn.play-btn:disabled {
  opacity: 0.4;
}

.daw-shell.transport-style-hero .transport-btn:not(.play-btn) {
  display: none;
}

.daw-shell.transport-style-hero .transport {
  gap: 0;
}

.daw-shell.transport-style-hero .transport-btn.play-btn {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.35);
}

.daw-shell.transport-style-hero .toolbar {
  min-height: 64px;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
}

.daw-shell.transport-overlay .toolbar {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: transparent;
  border: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.daw-shell.transport-overlay .toolbar-secondary {
  display: none !important;
}

.daw-shell.transport-overlay .toolbar-primary > :not(.transport) {
  display: none !important;
}

.daw-shell.transport-overlay .views-panel {
  position: relative;
}

.daw-shell.transport-overlay .view-split-handle,
.daw-shell.transport-overlay .spectrogram-resize-handle {
  display: none !important;
}

.daw-shell.transport-overlay .waveform-container,
.daw-shell.transport-overlay .spectrogram-container {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
}

.daw-shell.transport-overlay .canvas-wrapper,
.daw-shell.transport-overlay .waveform-wrapper {
  scrollbar-width: none;
}

.daw-shell.transport-overlay .canvas-wrapper::-webkit-scrollbar,
.daw-shell.transport-overlay .waveform-wrapper::-webkit-scrollbar {
  display: none;
}

.daw-shell.transport-overlay .transport {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 32;
}

.daw-shell.transport-overlay .transport-btn:not(.play-btn) {
  display: none;
}

.daw-shell.transport-overlay .transport-btn.play-btn {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: rgba(14, 165, 233, 0.82);
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 26px rgba(14, 165, 233, 0.35), 0 0 0 2px rgba(2, 6, 23, 0.42);
}

.daw-shell.transport-overlay .transport-btn.play-btn:hover:not(:disabled) {
  background: rgba(2, 132, 199, 0.9);
}

.daw-shell.transport-overlay .transport-btn.play-btn.playing {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.daw-shell.transport-overlay .transport-btn.play-btn.playing:hover {
  opacity: 0.45;
  transform: scale(1);
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.transport-btn.play-btn.playing .icon-play {
  display: none;
}

.transport-btn.play-btn.playing::after {
  content: "";
  display: block;
  width: 12px;
  height: 14px;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
}

.daw-shell.transport-overlay .transport-btn.play-btn.playing::after {
  width: 24px;
  height: 28px;
  border-left: 7px solid #fff;
  border-right: 7px solid #fff;
}

/* Playhead component */
.playhead {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-playhead);
  pointer-events: auto;
  cursor: ew-resize;
  z-index: 10;
  box-shadow: 0 0 6px var(--color-playhead);
  touch-action: none;
  will-change: transform;
}

.playhead::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -4px;
  width: 10px;
  height: 10px;
  background: var(--color-playhead);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 0 6px var(--color-playhead);
}

.playhead-secondary {
  top: 0;
  bottom: 0;
  box-shadow: 0 0 6px var(--color-playhead);
}

.playhead-secondary::before {
  display: none;
}

/* Settings side-panel */
.settings-panel {
  position: absolute;
  top: var(--toolbar-height);
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85%;
  background: var(--color-toolbar);
  border-left: 1px solid var(--color-border);
  z-index: 40;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

.daw-shell.settings-panel-open .settings-panel {
  transform: translateX(0);
}

.settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.settings-panel-title {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-primary);
}

.settings-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.settings-panel-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
}

.settings-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}

.settings-section-title {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.settings-row:last-child {
  margin-bottom: 0;
}

.settings-label {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--color-text-secondary);
  min-width: 65px;
  font-size: 0.74rem;
  flex-shrink: 0;
}

.settings-select {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: 0.78rem;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
}

.settings-range {
  flex: 1;
  height: 4px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.settings-number {
  width: 72px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: 0.78rem;
  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
}

/* ─── Quality Slider ─── */
.quality-slider-section {
  padding-bottom: 6px;
}

.quality-slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quality-end-label {
  font-size: 0.85rem;
  flex-shrink: 0;
  user-select: none;
}

.quality-range {
  flex: 1;
  height: 6px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.quality-label-bar {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: var(--color-text-secondary);
  padding: 2px 22px 0;
  opacity: 0.7;
  user-select: none;
}

.quality-level-display {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 2px;
  letter-spacing: 0.03em;
}

/* Annotation component migrated incrementally from src/player.css */
.annotation-layer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 6;
}

.annotation-region {
  --annotation-color-fill: rgba(56, 189, 248, 0.18);
  --annotation-color-edge: rgba(56, 189, 248, 0.9);
  --annotation-color-soft: rgba(56, 189, 248, 0.45);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px solid var(--annotation-color-edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.04)), var(--annotation-color-fill);
  color: var(--color-text-primary);
  border-radius: 2px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 4px;
  font-size: 10px;
  line-height: 1.1;
  cursor: pointer;
  pointer-events: auto;
  overflow: hidden;
  white-space: nowrap;
}

.annotation-region.active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  background: rgba(239, 68, 68, 0.25);
}

.annotation-region.multi-selected {
  outline: 2px dashed rgba(56, 189, 248, 0.9);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35);
}

.annotation-region.editing {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: -2px;
}

.annotation-region.linked-live {
  outline: 2px solid var(--annotation-color-edge);
  outline-offset: -2px;
  box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.85), 0 0 12px var(--annotation-color-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  background: var(--annotation-color-fill);
  animation: linkedPulse 0.9s ease-in-out infinite;
}

.annotation-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.annotation-confidence {
  color: var(--color-text-secondary);
}

.annotation-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  cursor: ew-resize;
  transform: none;
}

/* Subtle visual indicator on hover */
.annotation-region:hover {
  z-index: 2;
}

.annotation-region:hover .annotation-handle {
  background: linear-gradient(180deg, transparent 5%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.5) 75%, transparent 95%);
}

.annotation-handle.handle-l {
  left: -5px;
  cursor: ew-resize;
}

.annotation-handle.handle-r {
  right: -5px;
  cursor: ew-resize;
}

.annotation-handle.handle-t {
  top: -5px;
  left: 10px;
  right: 10px;
  height: 10px;
  cursor: ns-resize;
  transform: none;
}

.annotation-handle.handle-b {
  bottom: -5px;
  left: 10px;
  right: 10px;
  height: 10px;
  cursor: ns-resize;
  transform: none;
}

/* ── Readonly annotations (XC-imported, not editable) ── */
.annotation-region--readonly {
  cursor: default;
  border-style: dashed;
  opacity: 0.75;
}

.annotation-region--readonly:hover {
  opacity: 0.9;
}

.annotation-region--readonly .annotation-handle {
  display: none !important;
}

.annotation-lock {
  font-size: 9px;
  line-height: 1;
  opacity: 0.85;
  margin-left: 2px;
  pointer-events: none;
}

.annotation-ai-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 2px;
  background: rgba(99, 102, 241, 0.75);
  color: #e0e7ff;
  border: 1px solid rgba(165, 180, 252, 0.5);
  vertical-align: middle;
  pointer-events: none;
  margin-left: 2px;
}

/* Spectrogram label regions, handles, ghost, draft, action buttons.
   Migrated from player.css */
.spectrogram-label-layer {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 7;
}

.spectrogram-label-region {
  --spectrogram-label-color: rgba(15, 118, 110, 0.10);
  --spectrogram-label-edge: rgba(255, 255, 255, 0.98);
  --spectrogram-label-soft: rgba(15, 118, 110, 0.58);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  border: 2px solid var(--spectrogram-label-edge);
  outline: 1px solid rgba(0, 0, 0, 0.95);
  outline-offset: -3px;
  border-radius: 3px;
  background: var(--spectrogram-label-color);
  color: #ffffff;
  font-size: 11px;
  line-height: 1.2;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  overflow: visible;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.spectrogram-label-region:hover {
  z-index: 10;
  border-color: #ffffff;
  outline-color: rgb(0, 0, 0);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.45), 0 4px 12px rgba(0, 0, 0, 0.42);
}

.spectrogram-label-region:active,
.spectrogram-label-region:focus,
.spectrogram-label-region:focus-visible {
  background: var(--spectrogram-label-color);
  color: #ffffff;
}

.spectrogram-label-region.active {
  border-color: var(--spectrogram-label-edge);
  outline-color: rgba(0, 0, 0, 0.65);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.spectrogram-label-region.focused {
  z-index: 11;
  border-color: #f8fafc;
  outline-color: #020617;
  box-shadow: inset 0 0 0 2px rgb(255, 255, 255), inset 0 0 0 3px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.55), 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* .selected — explicitly clicked/chosen label (sticky until another is selected) */
.spectrogram-label-region.selected {
  border-color: #ffffff;
  outline-color: rgb(0, 0, 0);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.55), 0 4px 12px rgba(0, 0, 0, 0.42);
  z-index: 9;
}

/* .highlighted — kept for backwards compatibility, same visual as .selected */
.spectrogram-label-region.highlighted {
  border-color: #ffffff;
  outline-color: rgb(0, 0, 0);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.45), 0 4px 12px rgba(0, 0, 0, 0.42);
  z-index: 8;
}

/* .multi-selected — part of a Ctrl+Click bulk selection */
.spectrogram-label-region.multi-selected {
  outline: 2px dashed rgba(56, 189, 248, 0.9);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35), 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 8;
}

.spectrogram-label-region.editing {
  border-color: #ffffff;
  outline: 2px solid #020617;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 2px rgb(255, 255, 255), inset 0 0 0 4px rgba(2, 6, 23, 0.85), 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 16px rgba(2, 6, 23, 0.6);
}

.spectrogram-label-region.linked-live {
  border-color: var(--spectrogram-label-edge);
  outline: 2px solid rgba(8, 47, 73, 0.98);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95), inset 0 0 0 4px var(--spectrogram-label-soft), 0 0 0 2px var(--spectrogram-label-soft), 0 0 18px var(--spectrogram-label-soft);
  animation: linkedPulse 0.9s ease-in-out infinite;
}

/* ── Suggestion labels (BirdNET, xeno-canto — not yet accepted) ── */
.spectrogram-label-region.suggestion {
  border-image: repeating-linear-gradient(-45deg, var(--spectrogram-label-edge) 0 4px, transparent 4px 8px) 6;
  border-width: 3px;
  border-style: solid;
  outline: none;
  opacity: 0.85;
}

.spectrogram-label-region.suggestion:hover {
  opacity: 1;
}

/* ── Accept / Discard buttons (suggestion labels) ── */
.label-accept-btn,
.label-discard-btn {
  position: absolute;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.7);
  color: #e2e8f0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, background 0.12s;
  padding: 0;
  z-index: 5;
}

.label-accept-btn {
  right: 2px;
}

.label-discard-btn {
  right: 24px;
}

.spectrogram-label-region.suggestion:hover .label-accept-btn,
.spectrogram-label-region.suggestion:hover .label-discard-btn {
  opacity: 1;
  pointer-events: auto;
}

.label-accept-btn:hover {
  background: rgba(34, 197, 94, 0.45);
  border-color: rgba(34, 197, 94, 0.85);
  color: #bbf7d0;
}

.label-discard-btn:hover {
  background: rgba(239, 68, 68, 0.45);
  border-color: rgba(239, 68, 68, 0.85);
  color: #fca5a5;
}

/* hide edit/delete buttons for suggestions — accept/discard take priority */
.spectrogram-label-region.suggestion .label-edit-btn,
.spectrogram-label-region.suggestion .label-delete-btn {
  display: none;
}

/* ── Shared keyframe used by both spectrogram-label and annotation linked-live ── */
@keyframes linkedPulse {
  0% {
    transform: translateZ(0) scale(1);
    filter: saturate(1);
  }
  50% {
    transform: translateZ(0) scale(1.01);
    filter: saturate(1.2);
  }
  100% {
    transform: translateZ(0) scale(1);
    filter: saturate(1);
  }
}
/* ── Label text badge ── */
.spectrogram-label-text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 10px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 0 3px 0;
  padding: 0 5px 1px;
  max-width: max(70%, 100px);
  pointer-events: auto;
  line-height: 1.4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.85);
  -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.7);
  z-index: 1;
}

/* Text badge nudged to bottom-left when colliding with another label */
.spectrogram-label-text.label-text-bottom {
  top: auto;
  bottom: 0;
  border-radius: 0 3px 0 0;
  border-bottom: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.spectrogram-label-meta {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  font-size: 9px;
  color: #e2e8f0;
  background: rgba(0, 0, 0, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 0 0 3px;
  padding: 0 4px 1px;
  max-width: 40%;
  pointer-events: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95);
}

.spectrogram-label-draft {
  position: absolute;
  border: 2px dashed rgba(255, 255, 255, 0.98);
  outline: 2px solid rgba(2, 6, 23, 0.95);
  outline-offset: -3px;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.18) 0%, transparent 50%);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 2px rgba(0, 0, 0, 0.42);
}

/* ── Ghost stamp preview ── */
.spectrogram-label-ghost {
  position: absolute;
  pointer-events: none;
  border: 2px dashed var(--ghost-color, rgba(255, 255, 255, 0.7));
  background: var(--ghost-fill, rgba(14, 165, 233, 0.12));
  border-radius: 2px;
  opacity: 0.65;
  transition: opacity 0.1s;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.75);
  padding: 1px 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
  z-index: 30;
}

.spectrogram-label-ghost.axis-locked {
  border-style: solid;
  border-color: var(--ghost-color, rgba(255, 200, 60, 0.85));
  opacity: 0.8;
}

/* ═══ Corner & Edge handles ═══ */
.label-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff 0 50%, #0f172a 50% 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.15s;
  outline: 6px solid transparent;
  outline-offset: 0;
}

.spectrogram-label-region:hover .label-handle,
.spectrogram-label-region.editing .label-handle {
  opacity: 1;
}

/* Edge handles: invisible strips spanning the full edge */
.label-handle.handle-l,
.label-handle.handle-r,
.label-handle.handle-t,
.label-handle.handle-b {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  opacity: 1;
}

/* Thin visible accent line on hover */
.spectrogram-label-region:hover .label-handle.handle-l,
.spectrogram-label-region:hover .label-handle.handle-r {
  background: linear-gradient(180deg, transparent 10%, rgba(255, 255, 255, 0.45) 30%, rgba(255, 255, 255, 0.45) 70%, transparent 90%);
}

.spectrogram-label-region:hover .label-handle.handle-t,
.spectrogram-label-region:hover .label-handle.handle-b {
  background: linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, 0.45) 30%, rgba(255, 255, 255, 0.45) 70%, transparent 90%);
}

.label-handle.handle-l {
  left: -5px;
  top: 10px;
  bottom: 10px;
  width: 10px;
  height: auto;
  cursor: ew-resize;
  transform: none;
}

.label-handle.handle-r {
  right: -5px;
  top: 10px;
  bottom: 10px;
  width: 10px;
  height: auto;
  cursor: ew-resize;
  transform: none;
}

.label-handle.handle-t {
  top: -5px;
  left: 10px;
  right: 10px;
  height: 10px;
  width: auto;
  cursor: ns-resize;
  transform: none;
}

.label-handle.handle-b {
  bottom: -5px;
  left: 10px;
  right: 10px;
  height: 10px;
  width: auto;
  cursor: ns-resize;
  transform: none;
}

/* Corner positions */
.label-handle.handle-tl {
  left: -7px;
  top: -7px;
  cursor: nwse-resize;
}

.label-handle.handle-tr {
  right: -7px;
  top: -7px;
  cursor: nesw-resize;
}

.label-handle.handle-bl {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}

.label-handle.handle-br {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

/* ── Label edit button on hover ── */
.label-edit-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.7);
  color: #e2e8f0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, background 0.12s;
  padding: 0;
  z-index: 5;
}

.spectrogram-label-region:hover .label-edit-btn {
  opacity: 1;
  pointer-events: auto;
}

.label-edit-btn:hover {
  background: rgba(56, 189, 248, 0.35);
  border-color: rgba(56, 189, 248, 0.8);
  color: #bae6fd;
}

/* ── Label delete button on hover ── */
.label-delete-btn {
  position: absolute;
  bottom: 2px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.7);
  color: #e2e8f0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, background 0.12s;
  padding: 0;
  z-index: 5;
}

.spectrogram-label-region:hover .label-delete-btn {
  opacity: 1;
  pointer-events: auto;
}

.label-delete-btn:hover {
  background: rgba(239, 68, 68, 0.45);
  border-color: rgba(239, 68, 68, 0.85);
  color: #fca5a5;
}

/* Locked labels — no resize handles, no-drop cursor */
.spectrogram-label-region--locked {
  cursor: not-allowed;
}

.spectrogram-label-region--locked .label-handle {
  display: none !important;
}

.spectrogram-label-region--locked:hover .label-handle {
  display: none !important;
}

/* ── Readonly labels (XC-imported, not editable) ── */
.spectrogram-label-region--readonly {
  cursor: default;
  border-style: dashed;
  opacity: 0.75;
}

.spectrogram-label-region--readonly:hover {
  opacity: 0.9;
}

.spectrogram-label-region--readonly .label-handle {
  display: none !important;
}

.spectrogram-label-region--readonly:hover .label-handle {
  display: none !important;
}

.spectrogram-label-lock {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 9px;
  line-height: 1.4;
  padding: 0 3px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0 0 0 3px;
  pointer-events: none;
  z-index: 2;
}

.spectrogram-label-ai-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 4px 2px;
  background: rgba(99, 102, 241, 0.8);
  color: #e0e7ff;
  border-top: 1px solid rgba(165, 180, 252, 0.5);
  border-right: 1px solid rgba(165, 180, 252, 0.5);
  border-radius: 0 3px 0 0;
  pointer-events: none;
  z-index: 2;
}

/* Modal and overlay rules moved to _overlays.scss */
/* See src/styles/components/_overlays.scss for label-editor and popover styles. */
/* Labeling app styles migrated to SCSS partial.
   Tokens (CSS variables) are provided via /src/styles/tokens.css linked in HTML.
*/
* {
  box-sizing: border-box;
  margin: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  color-scheme: dark;
  font-family: "Segoe UI", "Inter", system-ui, sans-serif;
  font-size: 13px;
}

.app {
  display: grid;
  grid-template-rows: 40px 1fr;
  /* Reserve space for the app footer so content is not hidden when footer is fixed */
  padding-bottom: var(--statusbar-height);
  width: 100%;
  height: 100%;
}

/* ── Topbar (delegates to toolbar partial for component rules) */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7fe8ff, #39b5ff);
  box-shadow: 0 0 10px rgba(57, 181, 255, 0.7);
}

.file-label {
  color: var(--color-text-secondary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

/* Buttons: legacy `.tb-*` classes are mapped to AW components in buttons partial */
/* Ensure topbar selects use tokenized colors and win over legacy player rules */
.topbar .tb-select,
.tb-select {
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 11px;
  padding: 3px 6px;
}

.topbar .tb-select option,
.tb-select option {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* ── Species Search Bar ── */
/* Component rules live in _species-search.scss — only topbar layout here. */
.species-search {
  flex: 0 1 320px;
  min-width: 120px;
  display: flex;
  align-items: center;
}

/* ── Workspace (activity bar and sidebar moved to their own partials) */
.workspace {
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* Activity bar styles moved to src/styles/components/_activity-bar.scss */
/* Sidebar styles moved to src/styles/components/_sidebar.scss */
/* Main area */
.main-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.stage {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 5px;
}

#playerRoot {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-secondary);
}

/* App footer — keep visual style consistent with statusbar but fixed to viewport bottom */
.app-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  height: var(--statusbar-height);
  min-height: var(--statusbar-height);
  padding: 0 10px;
  background: var(--color-statusbar);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* Panel helpers */
/* ── Help ── */
.help-content {
  padding: 12px 14px;
}

.help-section {
  margin-bottom: 14px;
}

.help-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin: 0 0 6px;
  font-weight: 600;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 12px;
}

.shortcut-grid kbd {
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  white-space: nowrap;
  text-align: center;
}

.shortcut-grid .sc-desc {
  color: var(--color-text-secondary);
}

.help-section p {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.panel-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.panel-hint {
  padding: 4px 12px;
  color: var(--color-text-secondary);
  font-size: 10px;
  border-bottom: 1px solid rgba(30, 45, 71, 0.4);
  flex-shrink: 0;
}

/* Misc small helpers (badges) */
.meta {
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* Responsive */
@media (max-width: 700px) {
  /* Activity bar and sidebar responsive rules moved to respective component partials */
  .panel-hint {
    display: none;
  }
}
/* ── Recording Explorer ── */
.recording-explorer {
  display: flex;
  flex-direction: column;
  /* Distinct background + bottom border separates explorer from the label list */
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.18));
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 4px;
}

/* Set header (hierarchy parent node) */
.rec-set-header {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Slightly taller hit target for comfortable clicking */
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  /* Floating card look */
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow-strong);
  position: relative;
  z-index: 2;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.rec-set-header:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent), var(--color-bg-surface);
}

.rec-set-header:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: -1px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(56, 189, 248, 0.06);
}

/* Chevron — bigger and easier to read */
.rec-set-chevron {
  font-size: 11px;
  width: 13px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  line-height: 1;
  transition: color 0.1s;
}

.rec-set-header:hover .rec-set-chevron {
  color: var(--color-text-primary);
}

/* Set name — larger than the child recording rows */
.rec-set-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

/* Body — indented children */
.rec-set-body {
  margin-top: 8px;
  padding: 8px 8px 8px 12px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding-left: 12px;
  position: relative;
  z-index: 1;
}

.rec-set-body[hidden] {
  display: none;
}

.recording-explorer-empty {
  padding: 5px 12px;
  font-size: 10px;
  color: var(--color-text-secondary);
}

.recording-explorer-list {
  list-style: none;
  margin: 0;
  padding: 2px 0;
}

.recording-explorer-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background 0.08s, color 0.08s;
  border-radius: 0;
}

.recording-explorer-row:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
  color: var(--color-text-primary);
}

.recording-explorer-row.active {
  color: var(--color-text-primary);
  font-weight: 600;
}

.recording-explorer-icon {
  font-size: 9px;
  width: 10px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.recording-explorer-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shared base for hover-action buttons on rows and header */
.recording-explorer-remove,
.recording-explorer-reset {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recording-explorer-row:hover .recording-explorer-remove,
.recording-explorer-row:hover .recording-explorer-reset {
  opacity: 1;
}

.recording-explorer-remove:hover {
  color: var(--color-danger);
}

.recording-explorer-reset:hover {
  color: var(--color-accent);
}

/* Set-level reset in header */
.recording-explorer-reset-set {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
  padding: 0 2px;
}

.rec-set-header:hover .recording-explorer-reset-set {
  opacity: 1;
}

.recording-explorer-reset-set:hover {
  color: var(--color-accent);
}

.recording-explorer-add-row {
  padding: 3px 10px 5px;
}

.recording-explorer-add-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 10px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.1s;
}

.recording-explorer-add-btn:hover {
  color: var(--color-accent);
}

.recording-explorer-add-btn span {
  font-size: 14px;
  line-height: 1;
}

/* ── Add recording popover ── */
.recording-explorer-popover {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  min-width: 260px;
}

.rec-pop-row {
  display: flex;
  gap: 5px;
  align-items: center;
}

.rec-pop-input {
  flex: 1;
  height: 24px;
  font-size: 11px;
}

.rec-pop-hint {
  font-size: 10px;
  color: var(--color-warning, #f59e0b);
  padding: 2px 2px 0;
}

/*
  Species Search — shared component
  ──────────────────────────────────
  Used in two contexts:
    1. Topbar search bar (.species-search wrapper, created from static HTML)
    2. Inline label-editor widget (.species-search-widget, created by createSpeciesSearchWidget)
  Both share the same inner structure and dropdown anatomy.

  Context-specific layout (flex sizing for the topbar) lives in _labeling-app.scss.
*/
/* ── Input wrapper ── */
.species-search-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--input-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.species-search-inner:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* ── Parts ── */
.species-search-icon {
  color: var(--color-text-secondary);
  margin-right: 4px;
  flex-shrink: 0;
}

.species-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 11px;
  font-weight: 500;
}

.species-search-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.7;
}

.species-search-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 2px;
  border: none;
  border-radius: 50%;
  background: var(--input-bg-weak);
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.species-search-clear:hover {
  background: var(--input-hover-bg);
  color: var(--color-text-primary);
}

.species-search-clear.hidden {
  display: none;
}

/* ── Dropdown ── */
.species-search-dropdown {
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px var(--shadow-strong);
  z-index: 200;
  scrollbar-width: thin;
}

.species-search-dropdown.hidden {
  display: none;
}

.species-search-dropdown::-webkit-scrollbar {
  width: 5px;
}

.species-search-dropdown::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

/* ── Result row ── */
.species-search-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  transition: background 0.08s;
}

.species-search-item:hover,
.species-search-item.active {
  background: var(--input-hover-bg);
}

/* Row anatomy — all optional, rendered by JS */
.search-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.search-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-sci {
  font-style: italic;
  color: var(--color-text-secondary);
  font-size: 10px;
  flex-shrink: 0;
}

.search-badge {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--input-bg-weak);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* ── Widget root (JS-created variant, portals dropdown to body) ── */
.species-search-widget {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.species-search-widget .species-search-dropdown {
  /* When portalled to <body> the dropdown is fixed-positioned via JS inline
     styles — no `position: absolute` needed here. */
  position: fixed;
}

/* ── Static-HTML topbar variant ── */
.species-search {
  /* Layout sizing lives in _labeling-app.scss (.topbar context).
     This rule only adds the relative positioning needed for the
     absolutely-positioned dropdown in the static-HTML variant. */
  position: relative;
}
.species-search .species-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
}

/* Geo-map modal — Leaflet/OSM location picker */
/* ── Modal backdrop & shell ── */
.geo-map-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-bg);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.geo-map-modal {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  width: min(780px, 100%);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* ── Header ── */
.geo-map-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  gap: 8px;
  flex-shrink: 0;
}

.geo-map-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

.geo-map-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.geo-map-close:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

/* ── Coordinate input bar ── */
.geo-map-coord-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.geo-map-coord-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.geo-map-coord-label .input {
  width: 110px;
  padding: 4px 7px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.geo-map-coord-readonly {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

/* ── Map container ── */
.geo-map-container {
  flex: 1;
  min-height: 380px;
}

.geo-map-attribution-hint {
  font-size: 10px;
  color: var(--color-text-muted);
  padding: 4px 14px;
  text-align: center;
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

/* ── Footer ── */
.geo-map-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ── Shared geo action button ──────────────────────────────────────────
   Extends .tb-btn look with geo-specific sizing. Used in:
   - BirdNET panel (Locate / Map pair)
   - Properties panel (Show on Map)
   - XC panel (Pick on Map)
   - Map modal coord bar (Locate)
   ─────────────────────────────────────────────────────────────────── */
.geo-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.geo-action-btn svg {
  flex-shrink: 0;
}
.geo-action-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}
.geo-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.geo-action-btn.primary {
  background: var(--color-accent-faint);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.geo-action-btn.primary:hover {
  background: var(--color-accent-faint);
  filter: brightness(1.15);
}

.geo-action-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.geo-action-row .geo-action-btn {
  flex: 1;
  justify-content: center;
}

/* ── BirdNET panel — coordinate inputs ── */
.geo-input-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.geo-input-row > .input {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Properties panel — inline coordinate + map button ── */
.props-coord-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.props-coord-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.props-coord-map-btn svg {
  display: block;
}
.props-coord-map-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-faint);
}

/* ── Leaflet overrides ── */
.leaflet-container {
  font-family: inherit;
}

.leaflet-control-attribution {
  font-size: 9px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Explore panel — two-tab species explorer (Explore + Statistics)
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Panel shell ─────────────────────────────────────────────────────── */
.explore-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ── Tab bar ─────────────────────────────────────────────────────────── */
.ep-tab-bar {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.ep-tab {
  flex: 1;
  padding: 7px 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.ep-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.ep-tab:hover:not(.active) {
  color: var(--color-text-primary);
}

/* ── Controls row (Explore pane only) ───────────────────────────────── */
.ep-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.ep-status {
  flex: 1;
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Pane content area ───────────────────────────────────────────────── */
.ep-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.ep-pane.ep-pane--hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Species card grid
   ═══════════════════════════════════════════════════════════════════════ */
.sp-cards {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.sp-cards-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ── Individual card ─────────────────────────────────────────────────── */
.sp-card {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.sp-card.sp-card--clickable {
  cursor: pointer;
}
.sp-card.sp-card--clickable:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.sp-card.sp-card--clickable:active {
  background: var(--color-accent-faint);
}
.sp-card.sp-card--flash {
  background: var(--color-accent-faint);
  border-color: var(--color-accent);
  transition: background 0s, border-color 0s;
}
.sp-card.sp-card--labeled::after {
  content: "✓";
  position: absolute;
  bottom: 5px;
  left: 46px;
  z-index: 2;
  width: 18px;
  height: 18px;
  background: #22c55e;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Bird photo wrapper — clips image to rounded left corners */
.sp-card-img-wrap {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.sp-card-img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  background: var(--color-bg-tertiary);
  display: block;
}

/* Card content */
.sp-card-body {
  flex: 1;
  min-width: 0;
  padding: 7px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Top row: common name + badge */
.sp-card-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sp-card-common {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Occurrence % or detection count badge */
.sp-card-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  background: var(--color-accent-faint);
  border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.5;
}

/* Scientific name */
.sp-card-sci {
  font-size: 10px;
  font-style: italic;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Occurrence / confidence bar */
.sp-card-bar-track {
  height: 3px;
  background: var(--color-bg-tertiary);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}

.sp-card-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.35s ease;
}

/* Meta row at the bottom */
.sp-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 10px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.sp-card-meta-l {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-card-meta-r {
  flex-shrink: 0;
}

/* ── Statistics section header ───────────────────────────────────────── */
.sp-section-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 8px 4px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
}

.sp-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
}

.sp-section-count {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-left: auto;
}

/* ── Explore: inline model-load progress ────────────────────────────── */
.ep-progress-wrap {
  width: 80%;
  max-width: 220px;
  height: 3px;
  background: var(--color-bg-tertiary);
  border-radius: 2px;
  margin: 0 auto 8px;
  overflow: hidden;
}

.ep-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.2s ease;
}

.ep-load-status {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Explore: informational infobox ───────────────────────────────────── */
.ep-infobox {
  margin: 8px 10px;
  padding: 8px 10px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.ep-infobox strong {
  display: block;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  font-weight: 600;
}

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

/* ── Explore: single-action empty state ─────────────────────────────── */
.ep-action-msg {
  margin-bottom: 12px;
}

.ep-action-btn {
  margin: 0 auto;
}

/* Activity Bar component — migrated from legacy demo CSS */
.activity-bar {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  border-right: 1px solid var(--color-border);
}

.activity-btn-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 4px 0;
  gap: 0;
}

.activity-btn {
  position: relative;
  width: 100%;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 0;
  transition: color 0.15s, background 0.15s;
}

.activity-btn:hover {
  color: var(--color-text-primary);
  background: rgba(57, 181, 255, 0.08);
}

.activity-btn.active {
  color: var(--color-accent);
  background: rgba(57, 181, 255, 0.12);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.activity-btn-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  stroke-width: 1.5;
}

.activity-btn-label {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.activity-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 13px;
  height: 13px;
  border-radius: 7px;
  background: var(--color-accent);
  color: #000;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  line-height: 1;
}

/* Flash animation — draws attention to a tab without switching */
@keyframes activity-btn-flash {
  0% {
    box-shadow: none;
    background: transparent;
  }
  20% {
    box-shadow: inset 2px 0 0 var(--color-accent), 0 0 10px rgba(57, 181, 255, 0.5);
    background: rgba(57, 181, 255, 0.2);
  }
  50% {
    box-shadow: none;
    background: transparent;
  }
  70% {
    box-shadow: inset 2px 0 0 var(--color-accent), 0 0 10px rgba(57, 181, 255, 0.5);
    background: rgba(57, 181, 255, 0.2);
  }
  100% {
    box-shadow: none;
    background: transparent;
  }
}
.activity-btn--flash {
  animation: activity-btn-flash 0.7s ease-in-out;
}

@media (max-width: 700px) {
  .activity-bar {
    width: 30px;
  }
  .activity-btn-label {
    font-size: 8px;
  }
  .activity-btn-icon svg {
    width: 15px;
    height: 15px;
  }
}
/* Sidebar component — base, collapse and resize behaviour */
.sidebar {
  width: var(--sidebar-width, 300px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
  min-height: 0;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 0;
  border-right: none;
  overflow: hidden;
}

.sidebar.sidebar--right {
  width: var(--sidebar-right-width, 300px);
  border-right: none;
  border-left: 1px solid var(--color-border);
}

.sidebar--right.collapsed {
  width: 0;
  border-left: none;
}

.sidebar-resize {
  width: 4px;
  flex-shrink: 0;
  cursor: ew-resize;
  background: transparent;
  transition: background 0.15s;
  user-select: none;
  touch-action: none;
}

.sidebar-resize:hover, .sidebar-resize.dragging {
  background: var(--color-accent);
}

.sidebar-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  min-height: 36px;
}

.sidebar-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
}

@media (max-width: 700px) {
  .sidebar {
    --sidebar-width: 240px;
  }
  .sidebar--right {
    --sidebar-right-width: 240px;
  }
}
/* Make sidebar panels and their inner bodies scroll when content overflows.
   Uses flex layout so headers/toolbars remain fixed while content scrolls. */
.sidebar-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* allow children to use min-height for overflow handling */
  overflow: hidden;
}

.sidebar-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* Keep toolbar/hints/actions at natural size, let the main body scroll */
.sidebar-panel > .panel-toolbar,
.sidebar-panel > .panel-hint,
.sidebar-panel > .panel-section,
.sidebar-panel > .panel-actions {
  flex: 0 0 auto;
}

/* Common scrollable containers inside panels */
.sidebar-panel > .label-list-scroll,
.sidebar-panel .props-section-body,
.sidebar-panel .panel-body,
.sidebar-panel .help-content,
.scroll-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Panels: form sections, XC helper rows, and action/status styles */
.panel-section {
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-border);
}

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

.field-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.field-select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 11px;
  padding: 5px 7px;
}

.field-select option {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* Ensure selects and option lists follow the theme (fix white dropdowns in darkmode) */
.field-select,
.props-select,
.detail-select,
.xc-set-selector-row select,
.select-compact {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border);
  -webkit-appearance: none;
  appearance: none;
}

.field-select option,
.detail-select option,
.xc-set-selector-row select option,
.props-select option {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
}

/* hide native expand glyph where supported to keep styling consistent */
select::-ms-expand {
  display: none;
}

.field-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-primary);
  cursor: pointer;
}

.field-check input[type=checkbox] {
  accent-color: var(--color-accent);
}

.field-hint {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

.slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.slider-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--color-text-primary);
}

.range-input {
  width: 100%;
  accent-color: var(--color-accent);
}

.panel-actions {
  padding: 8px 14px;
  display: grid;
  /* columns try to be between 140px and 260px; don't stretch wider than 260px */
  grid-template-columns: repeat(auto-fit, minmax(140px, 260px));
  gap: 8px;
  align-items: stretch;
  justify-content: center; /* center the grid so small number of buttons look balanced */
}

.panel-actions .sidebar-action-btn {
  width: 100%;
  min-width: 0;
  max-width: none;
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 480px) {
  .panel-actions {
    grid-template-columns: 1fr;
  }
  .panel-actions .sidebar-action-btn {
    max-width: none;
  }
}
.panel-actions {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  max-width: none;
}

.panel-desc {
  padding: 4px 14px 0;
  line-height: 1.4;
}

.sidebar-action-btn {
  width: 100%;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  background: var(--color-accent-faint);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.sidebar-action-btn:hover {
  background: var(--color-accent-faint);
}

.sidebar-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (min-width: 520px) {
  .panel-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .panel-actions .sidebar-action-btn {
    width: auto;
    flex: 0 1 160px;
    max-width: 240px;
  }
}
/* XC Load row */
.xc-load-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.xc-load-row .input {
  flex: 1;
}

/* XC Recording metadata grid */
.xc-meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.4;
}

.xc-meta-grid dt {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.xc-meta-grid dd {
  margin: 0;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.xc-recording-section {
  max-height: 180px;
  overflow-y: auto;
}

.xc-recording-meta {
  max-height: 180px;
  overflow-y: auto;
}

/* XC annotation set form */
.xc-set-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Align set metadata rows as two-column grid (label | input) for consistent alignment
   with the XC editable rows and the Properties panel. Falls back to stacked layout
   on small screens. */
.set-meta-field {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 4px 10px;
  align-items: center;
  min-width: 0;
}

.set-meta-field .field-label {
  font-size: 11px;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.set-meta-field .input,
.set-meta-field .field-select {
  font-size: 12px;
  padding: 4px 6px;
  width: 100%;
  min-width: 0;
}

@media (max-width: 480px) {
  .set-meta-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
}
/* XC action row */
.xc-action-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.xc-action-row .sidebar-action-btn {
  flex: 1;
}

.sidebar-action-btn.secondary {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.sidebar-action-btn.secondary:hover {
  background: var(--input-bg);
  border-color: var(--color-border);
}

.xc-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* XC status */
.xc-status {
  padding: 6px 14px;
  font-size: 11px;
  line-height: 1.4;
}

.xc-status-info {
  color: var(--color-text-secondary);
}

.xc-status-success {
  color: var(--color-success);
}

.xc-status-error {
  color: var(--color-danger);
}

/* XC section header: extends props-section-title with flex for optional action button */
.xc-section-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
}

.xc-section-hdr span {
  flex: 1;
}

.xc-toggle-edit-btn {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  height: 18px;
  line-height: 1;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.xc-toggle-edit-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-faint);
}

.xc-toggle-edit-btn.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-faint);
}

/* XC editable recording fields — uses props-section-body padding, just add a top separator */
.xc-recording-edit {
  border-top: 1px solid var(--color-border);
}

/* XC annotation set container */
.xc-set-container {
  display: flex;
  flex-direction: column;
}

/* Set selector row — sits inside props-section-body padding */
.xc-set-selector-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 14px 8px;
}

.xc-set-selector-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.xc-set-selector-row select {
  flex: 1;
  height: 24px;
  padding: 0 5px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

.xc-set-selector-row select:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* Set form — uses props-section-body padding + props-grid inside */
.xc-set-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 14px 8px;
}

/* Generic field row used in set form and recording edit */
.xc-field {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 0;
}

.xc-field .field-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xc-field .input {
  height: 22px;
  padding: 1px 5px;
  font-size: 11px;
  border-radius: 3px;
}

.xc-field .xc-textarea {
  height: auto;
  min-height: 44px;
  padding: 3px 5px;
  font-size: 11px;
  border-radius: 3px;
  resize: vertical;
}

/* Collapsible sub-section (Project / Scope) */
.xc-collapsible {
  margin-top: 10px;
  position: relative;
}

.xc-collapsible-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  transition: color 0.12s, transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow-strong);
  z-index: 2;
}

.xc-collapsible-hdr:hover {
  color: var(--color-text-primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent), var(--color-bg-surface);
}

.xc-collapsible-hdr:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: -1px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(56, 189, 248, 0.06);
}

.xc-collapsible-chevron {
  font-size: 14px;
  line-height: 1;
  margin-right: 6px;
  transition: transform 0.15s ease;
  display: inline-block;
}

.xc-collapsible.expanded .xc-collapsible-chevron {
  transform: rotate(90deg);
}

.xc-collapsible-body {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  z-index: 1;
}

.xc-collapsible.expanded .xc-collapsible-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* BibTeX collapsible in About panel: use theme colors instead of hardcoded light background */
.help-content details.bibtex-collapsible {
  margin-top: 8px;
}

.help-content details.bibtex-collapsible summary {
  cursor: pointer;
  color: var(--color-accent);
  font-weight: 600;
}

.help-content pre.bibtex {
  white-space: pre-wrap;
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  overflow: auto;
}

/* Override: simple, content-sized action buttons for about panel and similar uses
   - stacked by default (column) so they line up exactly under each other
   - on wider screens they flow inline and size to their content
   - use gap for spacing, no inline margins
*/
.panel-actions {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.panel-actions .sidebar-action-btn {
  width: auto; /* size to content */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sidebar-action-btn.danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

@media (min-width: 520px) {
  .panel-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .panel-actions .sidebar-action-btn {
    width: auto;
    flex: 0 0 auto;
  }
}
@media (max-width: 420px) {
  .panel-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .panel-actions .sidebar-action-btn {
    width: 100%;
  }
}
/* ── XC sub-tabs (Author / Set) ── */
.xc-sub-tabs-wrap {
  display: flex;
  flex-direction: column;
}

.xc-sub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 0 14px;
}

.xc-sub-tab {
  flex: 1;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.xc-sub-tab:hover {
  color: var(--color-text-primary);
}

.xc-sub-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.xc-sub-tab-content {
  display: flex;
  flex-direction: column;
}

/* ── Onboarding banner ── */
.xc-onboarding-banner {
  margin: 10px 14px 4px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: var(--color-text-primary);
  font-size: 11px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xc-onboarding-banner p {
  margin: 0;
}

.xc-onboarding-dismiss {
  align-self: flex-end;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.15);
  color: var(--color-accent);
  cursor: pointer;
  transition: background 0.12s;
}

.xc-onboarding-dismiss:hover {
  background: rgba(56, 189, 248, 0.28);
}

/* ── Author container ── */
.xc-author-container {
  padding: 6px 14px 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Label list — 2-level hierarchy: annotation set → species → instances
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Active set selector bar ─────────────────────────────────────────── */
.label-active-set-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  flex-shrink: 0;
}

.label-active-set-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.label-active-set-select {
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

.label-active-set-select:focus {
  border-color: var(--color-accent);
  outline: none;
}

.label-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Origin header (kept for legacy / fallback) ───────────────────────── */
.label-origin-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}

.label-origin-add-set-btn {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  height: 16px;
  line-height: 1;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.12s, background 0.12s;
}

.label-origin-header:hover .label-origin-add-set-btn,
.label-origin-add-set-btn:hover {
  opacity: 1;
  background: var(--color-accent-faint);
}

/* ── Annotation set section — LEVEL 1 ────────────────────────────────── */
.label-set-section {
  margin-bottom: 12px;
  padding-bottom: 0;
  border-left: 4px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.label-set-section:has(.label-set-origin--birdnet) {
  border-left-color: rgba(16, 185, 129, 0.5);
}

.label-set-section:has(.label-set-origin--xeno-canto) {
  border-left-color: rgba(56, 189, 248, 0.5);
}

.label-set-section:has(.label-set-origin--manual) {
  border-left-color: rgba(148, 163, 184, 0.35);
}

.label-set-section--locked {
  opacity: 0.88;
}
.label-set-section--locked > .label-set-header {
  cursor: default;
}
.label-set-section--locked .label-set-lock-btn--locked {
  opacity: 1 !important;
  color: #fbbf24 !important;
}

.label-set-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  /* Floating card look for set header */
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  position: relative;
  z-index: 3;
}

.label-set-header:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent), var(--color-bg-surface);
}

.label-set-section.expanded > .label-set-header {
  border-bottom-color: var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0));
}

.label-set-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
  transition: transform 0.18s ease, color 0.15s;
}
.label-set-chevron svg {
  width: 14px;
  height: 14px;
  display: block;
}

.label-set-header:hover .label-set-chevron {
  color: var(--color-text-primary);
}

.label-set-section.expanded > .label-set-header .label-set-chevron {
  transform: rotate(90deg);
}

.label-set-name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.label-set-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.label-set-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make set names behave like group names on hover (underline, pointer) */
.label-set-name {
  cursor: text;
}

.label-set-name:hover {
  text-decoration: underline dashed;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-accent);
}

/* Origin badge on set header */
.label-set-origin-badge {
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}

.label-set-origin--manual {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text-secondary);
}

.label-set-origin--xeno-canto {
  background: rgba(56, 189, 248, 0.15);
  color: var(--color-accent);
}

.label-set-origin--birdnet {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

.label-set-link {
  font-size: 9px;
  color: var(--color-accent);
  text-decoration: none;
  margin-left: 4px;
  opacity: 0.7;
}

.label-set-link:hover {
  opacity: 1;
}

.label-set-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.label-set-creator {
  font-size: 9px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.label-set-license {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.label-set-count {
  flex-shrink: 0;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.1);
  color: var(--color-accent);
  font-weight: 700;
}

/* Set action buttons — shown on hover */
.label-set-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.label-set-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
  padding: 0;
}

.label-set-header:hover .label-set-action-btn {
  opacity: 1;
}

.label-set-action-btn:hover {
  background: var(--color-accent-faint);
  color: var(--color-accent);
  border-color: var(--color-border);
}

.label-set-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}

/* Drag-over highlight on set headers */
.label-set-header.drag-over {
  outline: 2px dashed var(--color-accent);
  outline-offset: -2px;
  background: rgba(56, 189, 248, 0.08);
}

/* Set body — visual container under the floating header */
.label-set-body {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 1;
}

/* Group row drop target */
.label-group-row.drag-over {
  outline: 2px dashed var(--color-accent);
  outline-offset: -2px;
  background: rgba(56, 189, 248, 0.1);
}

/* Dragging instance */
.label-instance.dragging {
  opacity: 0.35;
}

/* ── Bird thumbnail in group header ─────────────────────────────────── */
.lbl-group-img-wrap {
  flex-shrink: 0;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  overflow: visible;
  background: var(--color-bg-tertiary);
  cursor: zoom-in;
}

.lbl-group-img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Hover popover — larger bird image preview */
.lbl-img-popover {
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-50%) scale(0.92);
  z-index: 200;
  width: 160px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.lbl-img-popover img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  display: block;
}

.lbl-img-popover-caption {
  display: block;
  padding: 5px 8px 6px;
  font-size: 10px;
  font-style: italic;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lbl-group-img-wrap:hover .lbl-img-popover {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ── Species group — LEVEL 2 ──────────────────────────────────────────── */
.label-group {
  border-bottom: 1px solid var(--color-border);
}

/* Groups inside a set: lighter border, no bottom on last */
.label-set-body .label-group {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.label-set-body .label-group:last-child {
  border-bottom: none;
}

.label-group-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
  min-height: 36px;
}

.label-group-row:hover {
  background: var(--color-accent-faint);
}

/* LEVEL 2 inside set: indent + slightly lighter bg to distinguish from set header */
.label-set-body .label-group-row {
  padding-left: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.label-set-body .label-group-row:hover {
  background: var(--color-accent-faint);
}

.label-group-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
  transition: transform 0.18s ease, color 0.15s;
}
.label-group-chevron svg {
  width: 13px;
  height: 13px;
  display: block;
}

.label-group-row:hover .label-group-chevron {
  color: var(--color-text-primary);
}

.label-group.expanded > .label-group-row > .label-group-chevron {
  transform: rotate(90deg);
}

.color-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.85;
}

.label-group-name {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  line-height: 1.35;
  min-width: 0;
}

.label-group-name:hover {
  text-decoration: underline dashed;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-accent);
}

.label-group-count {
  font-size: 9px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--color-accent-faint);
  color: var(--color-accent);
  font-weight: 600;
  line-height: 16px;
  flex-shrink: 0;
}

.label-group-row .act-btn {
  opacity: 0;
  transition: opacity 0.15s;
}

.label-group-row:hover .act-btn {
  opacity: 1;
}

/* Italic scientific name below group header (shown when sci ≠ display name) */
.label-group-sci {
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: 10px;
  padding: 0 10px 3px 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Instance list ────────────────────────────────────────────────────── */
.label-group-instances {
  padding-left: 0;
}

/* Smooth accordion animation for expanding/collapsing groups. */
.label-group-instances {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease;
}

.label-group.expanded > .label-group-instances {
  /* When expanded via class, opacity is shown. Exact height is managed
     by JS for smooth and accurate transitions. */
  opacity: 1;
}

/* ── Single label instance card ──────────────────────────────────────── */
.label-instance {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0;
  padding-left: 24px;
  cursor: pointer;
  border-top: 1px solid var(--color-border);
  transition: background 0.1s;
  overflow: hidden;
}

/* Content wrapper */
.lbl-content {
  flex: 1;
  min-width: 0;
  padding: 4px 8px 4px 0;
  display: flex;
  flex-direction: column;
}

/* Confidence bar row */
.lbl-conf-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  padding-left: 17px;
}

.lbl-conf-bar-track {
  flex: 1;
  height: 3px;
  background: var(--color-bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.lbl-conf-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.lbl-conf-pct {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  line-height: 1;
}

/* Colored left accent bar — indented to show hierarchy under group */
.label-instance::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--lbl-color, transparent);
  border-radius: 2px;
  opacity: 0.9;
}

.label-instance:hover {
  background: var(--color-accent-faint);
}

.label-instance.highlighted {
  background: rgba(56, 189, 248, 0.08);
}

.label-instance.selected {
  background: rgba(56, 189, 248, 0.13);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.label-instance.multi-selected {
  background: rgba(56, 189, 248, 0.17);
  box-shadow: inset 3px 0 0 var(--color-accent);
  outline: 1px solid rgba(56, 189, 248, 0.3);
  outline-offset: -1px;
}

/* LEVEL 3: instances inside a set — bar shifts right with the extra indent */
.label-set-body .label-instance {
  padding-left: 34px;
  background: rgba(0, 0, 0, 0.08);
  border-top-color: rgba(255, 255, 255, 0.04);
}

.label-set-body .label-instance::before {
  left: 20px;
}

.label-set-body .label-instance:hover {
  background: var(--color-accent-faint);
}

/* ── Instance header row ─────────────────────────────────────────────── */
.label-instance-header {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* Multi-select checkbox */
.label-instance-cb {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s;
  accent-color: var(--color-accent);
}

.label-instance:hover .label-instance-cb,
.label-instance-cb:checked,
.label-instance.multi-active .label-instance-cb {
  opacity: 1;
}

/* Time + freq meta */
.label-instance-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.lbl-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.lbl-freq {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Action buttons (species label, edit toggle, delete) */
.label-instance-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.label-instance .act-btn {
  opacity: 0;
  transition: opacity 0.12s;
}

.label-instance:hover .act-btn {
  opacity: 1;
}

.label-instance .edit-toggle,
.label-instance .species-edit-btn {
  opacity: 0;
}

.label-instance:hover .edit-toggle,
.label-instance:hover .species-edit-btn,
.label-instance.expanded .edit-toggle {
  opacity: 1;
}

.label-instance.expanded .edit-toggle {
  color: var(--color-accent);
}

/* ── Always-visible tag pills ─────────────────────────────────────────── */
.label-instance-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
  padding-left: 17px;
}

.label-instance-tags:empty {
  display: none;
}

.lbl-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Sex */
.lbl-pill--sex {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.lbl-pill--sex-male {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

.lbl-pill--sex-female {
  background: rgba(236, 72, 153, 0.15);
  color: #f9a8d4;
}

/* Life stage */
.lbl-pill--stage {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

/* Sound type */
.lbl-pill--sound {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

/* Confidence (BirdNET) */
.lbl-pill--conf {
  background: rgba(56, 189, 248, 0.12);
  color: var(--color-accent);
}

/* Custom / unknown tags */
.lbl-pill--custom {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text-secondary);
}

/* ── Expandable detail section ────────────────────────────────────────── */
.label-card-detail {
  padding: 5px 0 3px;
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  overflow: hidden;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  min-width: 0;
}

.detail-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  width: 56px;
  text-transform: capitalize;
  flex-shrink: 0;
}

.detail-row .esel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.detail-row .esel-trigger {
  width: 100%;
  min-width: 0;
  height: 20px;
  font-size: 10px;
  padding: 0 14px 0 4px;
  background-position: right 3px center;
}

.detail-select {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 11px;
  padding: 3px 5px;
  cursor: pointer;
}

.detail-select option {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.detail-custom-tags {
  padding: 2px 0 4px;
}

/* ── Multi-select toolbar ─────────────────────────────────────────────── */
.label-multi-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--color-accent-faint);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  flex-shrink: 0;
}

.label-multi-toolbar .label-multi-info {
  color: var(--color-accent);
  font-weight: 600;
  flex: 1;
}

.label-multi-toolbar .tb-btn {
  font-size: 10px;
  padding: 2px 8px;
  height: 22px;
}

/* Multi-select on table rows (label-table.js) */
tr.multi-selected {
  background: rgba(56, 189, 248, 0.18);
  box-shadow: inset 2px 0 0 var(--color-accent);
  outline: 1px solid rgba(56, 189, 248, 0.35);
}

/* Force stronger species header styling inside labels panel */
#panelLabels .label-group-name {
  color: var(--color-text-primary) !important;
  font-weight: 800 !important;
}

/* ── Lock button — always visible when set is locked ─────────────────── */
.label-set-lock-btn svg {
  width: 12px;
  height: 12px;
}

.label-set-lock-btn--locked {
  opacity: 1 !important;
  color: #fbbf24 !important;
}

/* ── Locked instance card ─────────────────────────────────────────────── */
.label-instance--locked {
  pointer-events: auto;
  cursor: default;
}
.label-instance--locked::before {
  opacity: 0.4;
}
.label-instance--locked:hover {
  background: transparent !important;
}

/* ── Visual hierarchy helpers ─────────────────────────────────────────── */
.label-set-body .label-group-sci {
  padding-left: 34px;
}

/* Tags & small shared helpers used by the label UI */
.color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.inline-name-input {
  width: 100%;
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 1px 4px;
  outline: none;
}

.act-btn {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 3px;
  border-radius: 3px;
  flex-shrink: 0;
}

.act-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-accent-faint);
}

.act-btn.danger:hover {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.labels-empty {
  padding: 24px 14px;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-align: center;
}

.labels-empty kbd {
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 4px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

/* mini tag tokens used in label lists */
.tag-mini {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.tag-mini.conf {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tag-mini.origin {
  border-style: dashed;
}

tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--color-bg-surface);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  margin: 1px 4px;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
}

.tag-badge .tag-key {
  color: var(--color-accent);
  opacity: 0.95;
}

.tag-badge .tag-del {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  line-height: 1;
}

.tag-badge .tag-del:hover {
  color: var(--color-danger);
}

.tag-add-btn {
  display: inline-block;
  border: 1px dashed var(--color-border);
  border-radius: 3px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 10px;
  padding: 1px 5px;
  cursor: pointer;
  vertical-align: middle;
}

.tag-add-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-text-secondary);
}

.tag-popover {
  position: fixed;
  z-index: 9999;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 8px 24px var(--shadow-strong);
  min-width: 180px;
}

.tag-popover input {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--color-text-primary);
  font-size: 11px;
  padding: 3px 5px;
}

.tag-popover .tag-pop-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Add-tag helper used in properties */
.props-tag-add {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border: 1px dashed var(--color-border);
  border-radius: 3px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 10px;
  cursor: pointer;
}

.props-tag-add:hover {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

/* Legacy label classes (override old player.css) */
.label-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
}

.label-tag-select {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 11px;
  padding: 2px 4px;
  cursor: pointer;
  outline: none;
}

.label-tag-select:focus {
  border-color: var(--color-accent);
}

.label-tag-combo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.label-tag-custom-input {
  width: 110px;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 11px;
  padding: 2px 5px;
  outline: none;
}

.label-tag-custom-input::placeholder {
  color: var(--color-text-secondary);
  font-style: italic;
}

.label-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--color-bg-surface);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  white-space: nowrap;
  font-weight: 600;
}

.label-tag-badge-del {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 12px;
  padding: 0 1px;
  line-height: 1;
}

.label-tag-badge-del:hover {
  color: var(--color-danger);
}

.label-tag-add {
  border: 1px dashed var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
}

.label-tag-add:hover {
  border-color: var(--color-accent);
  color: var(--color-text-secondary);
}

/* Strong overrides for label/tag pills inside the Labels panel to beat legacy rules */
#panelLabels .tag-badge,
#panelLabels .label-tag-badge,
#panelLabels .tag-mini {
  background: var(--color-bg-surface) !important;
  color: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

#panelLabels .tag-badge .tag-del,
#panelLabels .label-tag-badge-del,
#panelLabels .tag-mini .tag-del {
  color: var(--color-text-secondary) !important;
}

#panelLabels .tag-popover,
#panelLabels .tag-popover input {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Reusable context menu
   ═══════════════════════════════════════════════════════════════════════ */
.ctx-menu {
  position: fixed;
  z-index: 9999;
  min-width: 160px;
  padding: 4px 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
  outline: none;
  user-select: none;
  opacity: 0;
  transform: scale(0.93);
  transform-origin: top left;
  transition: opacity 0.1s ease, transform 0.1s ease;
  pointer-events: none;
}
.ctx-menu.ctx-menu--open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ── Item ──────────────────────────────────────────────────────────────── */
.ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-primary);
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.08s;
}
.ctx-item:hover, .ctx-item.ctx-item--active {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.ctx-item.ctx-item--danger {
  color: #ef4444;
}
.ctx-item.ctx-item--danger:hover, .ctx-item.ctx-item--danger.ctx-item--active {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.ctx-item.ctx-item--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* ── Icon wrapper ──────────────────────────────────────────────────────── */
.ctx-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  opacity: 0.75;
}
.ctx-item-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* ── Separator ─────────────────────────────────────────────────────────── */
.ctx-sep {
  height: 1px;
  background: var(--color-border);
  margin: 3px 0;
}

/*
 * Overlays & Modals
 * Consolidated modal and popover-like rules (close button, backdrops,
 * dialogs, dropdowns used as overlays).
 */
/* Label editor modal (search palette) */
.label-editor-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  /* Hidden by default; .show is added by ModalManager.open() */
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12%;
  background: var(--color-overlay-bg);
}

.label-editor-backdrop.show {
  display: flex;
}

.label-name-editor {
  position: relative;
  z-index: 41;
  min-width: 280px;
  max-width: 380px;
  width: 92%;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  box-shadow: 0 20px 50px var(--shadow-strong), 0 0 0 1px rgba(255, 255, 255, 0.03);
  color: var(--color-text-primary);
  overflow: hidden;
}

/* Header strip: title + close button side-by-side */
.label-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 6px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  gap: 8px;
}

.label-editor-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-search-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  gap: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.label-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: #f8fafc;
  font-size: 14px;
  outline: none;
  padding: 4px 0;
}

.label-search-input::placeholder {
  color: var(--color-text-secondary);
}

.label-search-color {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 2px solid rgba(148, 163, 184, 0.5);
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.label-search-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.label-search-color::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.label-search-results {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.label-search-results:empty::after {
  content: "Type to search…";
  display: block;
  padding: 12px 14px;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.label-search-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.08s;
}

.label-search-item:last-child {
  border-bottom: none;
}

.label-search-item:hover,
.label-search-item.active {
  background: rgba(56, 189, 248, 0.14);
}

.label-search-item.active {
  background: rgba(56, 189, 248, 0.22);
}

.label-search-item.selected {
  background: rgba(56, 189, 248, 0.18);
  box-shadow: inset 2px 0 0 rgba(56, 189, 248, 0.8);
}

.label-search-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
}

.label-search-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-search-sci {
  color: var(--color-text-secondary);
  font-size: 11px;
  white-space: nowrap;
  margin-left: auto;
}

.label-search-detail {
  color: var(--color-text-secondary);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-basis: 100%;
  padding-left: 16px;
}

.label-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.label-search-hints {
  color: var(--color-text-secondary);
  font-size: 10px;
  letter-spacing: 0.01em;
}

.label-search-delete {
  border: 1px solid rgba(239, 68, 68, 0.5);
  background: transparent;
  color: var(--color-danger);
  border-radius: 4px;
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
}

.label-search-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.8);
}

.label-search-confirm {
  margin-left: auto;
  border: 1px solid rgba(57, 181, 255, 0.6);
  background: rgba(57, 181, 255, 0.15);
  color: #7dd3fc;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 14px;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.label-search-confirm:hover {
  background: rgba(57, 181, 255, 0.3);
  border-color: rgba(57, 181, 255, 0.9);
  color: #bae6fd;
}

/* species-search-* rules live in _species-search.scss */
/* Editable Select styles → co-located in src/ui/components/editable-select/editable-select.scss */
/* XC no-key modal (migrated from demo/labeling-app.legacy.css) */
.xc-nokey-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay-bg);
  animation: fadeIn 0.15s ease;
}

.xc-nokey-backdrop:not([hidden]) {
  display: flex;
}

.xc-nokey-dialog {
  position: relative; /* needed so .modal-close--injected positions inside the dialog */
  max-width: 420px;
  width: 92%;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 16px 48px var(--shadow-strong);
  color: var(--color-text-primary);
  font-size: 13px;
  line-height: 1.5;
}

.xc-nokey-dialog h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.xc-nokey-dialog p {
  margin: 0 0 8px;
  color: var(--color-text-secondary);
}

.xc-nokey-hint {
  font-size: 11.5px;
}

.xc-nokey-input-row {
  margin: 10px 0 4px;
}

.xc-nokey-input-row .input {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 6px 8px;
}

.xc-nokey-dismiss-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--color-text-secondary);
  margin: 12px 0 14px;
  cursor: pointer;
}

.xc-nokey-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.xc-nokey-actions .tb-btn:first-child {
  color: var(--color-success);
  border-color: var(--color-success-soft);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* .modal-close / .modal-close--injected → co-located in src/ui/components/modal/modal.scss */
/* Export dialog: larger and responsive */
.xc-export-dialog {
  max-width: 1200px;
  width: min(96vw, 1200px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 18px;
}

.xc-export-dialog pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-primary);
}

.xc-export-dialog .json-key {
  color: var(--color-accent);
  font-weight: 600;
}

.xc-export-dialog .json-string {
  color: #7dd3fc;
}

.xc-export-dialog .json-number {
  color: #f59e0b;
}

.xc-export-dialog .json-boolean {
  color: #f97316;
}

.xc-export-dialog .json-null {
  color: #9ca3af;
}

/* Collapsible JSON renderer styles */
.xc-export-dialog .json-pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", monospace;
}

.xc-export-dialog .json-line {
  display: block;
  padding: 2px 0;
}

.xc-export-dialog .json-node {
  margin: 2px 0;
}

.xc-export-dialog .json-node > .json-children {
  margin-left: 18px;
  border-left: 1px dashed rgba(255, 255, 255, 0.03);
  padding-left: 8px;
}

.xc-export-dialog .json-children.collapsed {
  display: none;
}

.xc-export-dialog .json-toggle {
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  width: 22px;
  font-size: 12px;
  padding: 0 4px;
}

.xc-export-dialog .json-toggle:focus {
  outline: 2px solid var(--color-accent);
}

.xc-export-dialog .json-summary {
  color: var(--color-text-secondary);
  margin-left: 6px;
}

/* JSONEditor styles moved to components/_jsoneditor.scss */
/* Improve contrast in light theme */
html[data-theme=light] .xc-export-dialog .json-string {
  color: #0369a1;
}

html[data-theme=light] .xc-export-dialog .json-key {
  color: #065f46;
}

html[data-theme=light] .xc-export-dialog .json-number {
  color: #b45309;
}

html[data-theme=light] .xc-export-dialog .json-boolean {
  color: #b45309;
}

html[data-theme=light] .xc-export-dialog .json-null {
  color: #6b7280;
}

/* .daily-tip-* → co-located in src/ui/components/daily-tips/daily-tips.scss */
/* JSONEditor — theme-aware dark/light tweaks
   Extracted from _overlays.scss to keep editor styles modular */
.jsoneditor,
.jsoneditor * {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", monospace;
  color: var(--color-text-primary);
}

.jsoneditor {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: 6px;
}

.jsoneditor .jsoneditor-outer,
.jsoneditor .jsoneditor-inner,
.jsoneditor .jsoneditor-tree,
.jsoneditor .jsoneditor-content,
.jsoneditor .jsoneditor-menu,
.jsoneditor .jsoneditor-search,
.jsoneditor .jsoneditor-main {
  background: transparent;
  color: var(--color-text-primary);
}

/* Token colours (dark theme defaults) */
.jsoneditor .jsoneditor-value-string {
  color: #9cdcfe;
}

.jsoneditor .jsoneditor-value-number {
  color: #b5cea8;
}

.jsoneditor .jsoneditor-value-boolean {
  color: #d7ba7d;
}

.jsoneditor .jsoneditor-quote {
  color: #c586c0;
}

.jsoneditor .jsoneditor-property {
  color: #8fbcbb;
}

.jsoneditor div.jsoneditor-field,
.jsoneditor div.jsoneditor-field p,
.jsoneditor div.jsoneditor-field .jsoneditor-property {
  color: #8fbcbb;
}

.jsoneditor .jsoneditor-icon {
  color: var(--color-text-secondary);
}

.jsoneditor .jsoneditor-selected {
  background: rgba(56, 189, 248, 0.12);
}

.jsoneditor .jsoneditor-selected .jsoneditor-property {
  color: var(--color-accent);
}

.jsoneditor .jsoneditor-menu {
  border-bottom: 1px solid var(--color-border);
  padding: 6px;
}

.jsoneditor .jsoneditor-menu button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  padding: 4px 8px;
  border-radius: 4px;
}

.jsoneditor .jsoneditor-menu button:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.04);
}

/* Stronger overrides for the top/header area (override vendor defaults)
   Ensure the top bar/tree uses app tokens in dark mode and when theme toggles. */
.jsoneditor div.jsoneditor-tree {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
}

.jsoneditor .jsoneditor-menu,
.jsoneditor .jsoneditor-search,
.jsoneditor .jsoneditor-main,
.jsoneditor .jsoneditor-outer,
.jsoneditor .jsoneditor-inner {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}

.jsoneditor .jsoneditor-menu {
  background: var(--color-bg-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* If JSONEditor modal header is used, make it follow tokens too */
.jsoneditor-modal .pico-modal-header {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Breadcrumb / treepath (top white strip) */
.jsoneditor .jsoneditor-treepath,
.jsoneditor .jsoneditor-treepath *,
.jsoneditor .jsoneditor-treepath .jsoneditor-path,
.jsoneditor .jsoneditor-treepath .jsoneditor-preview {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

/* Light theme overrides */
html[data-theme=light] .jsoneditor {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

html[data-theme=light] .jsoneditor .jsoneditor-value-string {
  color: #0369a1;
}

html[data-theme=light] .jsoneditor .jsoneditor-value-number {
  color: #b45309;
}

html[data-theme=light] .jsoneditor .jsoneditor-value-boolean {
  color: #b45309;
}

html[data-theme=light] .jsoneditor .jsoneditor-property {
  color: #065f46;
}

html[data-theme=light] .jsoneditor div.jsoneditor-field,
html[data-theme=light] .jsoneditor div.jsoneditor-field p,
html[data-theme=light] .jsoneditor div.jsoneditor-field .jsoneditor-property {
  color: #065f46;
}

/* Form controls and input components
   Migrated from demo/labeling-app.css and player styles.
   Depends on tokens in ../tokens.css for colors/sizing.
*/
.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.form-label {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--color-text-secondary);
  min-width: 92px;
}

/* Generic input style used across the app */
.input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--color-text-primary);
  padding: 7px 9px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}

.input:hover {
  border-color: var(--color-border);
}

.input:focus {
  border-color: var(--color-accent);
  background: var(--input-hover-bg);
}

/* XC API key input: inline eye toggle inside the input field
   Keep input type=text but mask visually via -webkit-text-security when needed. */
.xc-key-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xc-key-input-wrap {
  position: relative;
  width: 100%;
}

.xc-key-input-wrap .input {
  padding-right: 44px;
}

.xc-key-input-wrap .xc-key-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
}

.xc-key-input-wrap .xc-key-eye:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.02);
}

.xc-key-input-wrap .xc-key-eye .xc-eye-hide {
  display: none;
}

.xc-key-input-wrap .xc-key-eye.revealed .xc-eye-hide {
  display: inline-block;
}

.xc-key-input-wrap .xc-key-eye.revealed .xc-eye-show {
  display: none;
}

/* Visual masking while keeping `type=text` to avoid browser password heuristics */
.input.xc-key-masked {
  -webkit-text-security: disc;
  text-security: disc;
}

.input[type=number] {
  -moz-appearance: textfield;
}

.input[type=range] {
  appearance: none;
  height: 6px;
  background: var(--color-border);
  border-radius: 6px;
}

.input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 6px rgba(57, 181, 255, 0.15);
}

.form-help {
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* compact select that matches inputs */
.select-compact {
  width: 100%;
  height: 32px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* Small inline control used in sidebars */
.control-inline {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* Toggle / checkbox helpers */
.toggle {
  width: 36px;
  height: 20px;
  border-radius: 12px;
  background: var(--input-bg);
  position: relative;
  cursor: pointer;
}

.toggle .thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(0);
  transition: transform 0.12s;
}

.toggle.on {
  background: linear-gradient(90deg, rgba(57, 181, 255, 0.18), rgba(57, 181, 255, 0.28));
}

.toggle.on .thumb {
  transform: translateX(16px);
  background: var(--color-accent);
}

/* Small utilities for props tag row & xc inputs */
.props-number {
  min-width: 72px;
}

.input-compact {
  padding: 4px 6px;
  height: 28px;
  border-radius: 4px;
}

/* Accessibility: focus-visible ring */
.input:focus-visible, .select-compact:focus-visible {
  box-shadow: 0 0 0 3px rgba(57, 181, 255, 0.06);
}

/* Properties panel specific helpers (compat layer for existing markup) */
.properties-panel {
  padding: 0;
}

.props-section {
  border-bottom: 1px solid var(--color-border);
}

.props-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  padding: 10px 14px 6px;
}

.props-section-body {
  padding: 0 14px 10px;
}

.props-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.5;
  overflow: hidden;
}

.props-grid dt {
  color: var(--color-text-primary);
  white-space: nowrap;
}

.props-grid dd {
  margin: 0;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.props-grid dd .esel {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.props-grid dd .esel-trigger {
  width: 100%;
  min-width: 0;
}

.props-empty {
  font-size: 11px;
  color: var(--color-text-secondary);
  padding: 2px 0;
}

.props-tag-header {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.props-color-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

.props-section-title.props-hover-hint {
  color: var(--color-accent);
  font-style: italic;
}

/* Highlight animation — triggered when navigating from label list */
@keyframes props-section-highlight {
  0% {
    box-shadow: none;
    background: transparent;
  }
  15% {
    box-shadow: 0 0 0 2px var(--color-accent);
    background: rgba(57, 181, 255, 0.08);
  }
  60% {
    box-shadow: 0 0 0 2px var(--color-accent);
    background: rgba(57, 181, 255, 0.08);
  }
  100% {
    box-shadow: none;
    background: transparent;
  }
}
.props-section--highlight {
  animation: props-section-highlight 0.9s ease-in-out;
  border-radius: 4px;
}

/* Annotation set section — subtle tint to distinguish from recording/label sections */
.props-section--set .props-section-title {
  color: rgba(56, 189, 248, 0.65);
}

.props-section--set .props-section-body {
  background: rgba(56, 189, 248, 0.03);
}

.props-readonly {
  opacity: 0.65;
}

/* props-input: compatible with legacy markup but kept small height */
.props-input {
  width: 100%;
  box-sizing: border-box;
  height: 22px;
  padding: 1px 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--input-bg-weak);
  color: var(--color-text-primary);
  font-size: 11px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.props-input:hover {
  border-color: var(--color-border);
}

.props-input:focus {
  border-color: var(--color-accent);
  background: var(--input-hover-bg);
}

.props-input-number {
  width: auto;
  min-width: 64px;
  font-family: "Cascadia Code", "Consolas", monospace;
}

.props-number-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.props-suffix {
  font-size: 10px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* color editor */
.props-color-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.props-color-input {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.props-color-input::-webkit-color-swatch-wrapper {
  padding: 1px;
}

.props-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

.props-input-color-text {
  width: auto;
  flex: 1;
  min-width: 0;
  font-family: "Cascadia Code", "Consolas", monospace;
}

/* select & combobox compatibility */
.props-select {
  width: 100%;
  height: 22px;
  padding: 0 4px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 11px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.props-select:hover {
  border-color: var(--color-accent);
}

.props-select:focus {
  border-color: var(--color-accent);
}

/* editable-select & tag row helpers */
.props-input-tag-key {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  padding: 0;
  width: 100%;
  pointer-events: none;
}

.props-custom-tag-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.props-custom-tag-wrap .props-input {
  flex: 1;
  min-width: 0;
}

.props-tag-del {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}

.props-tag-del:hover {
  color: var(--color-danger);
}

.props-tag-add {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border: 1px dashed var(--color-border);
  border-radius: 3px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 10px;
  cursor: pointer;
}

.props-tag-add:hover {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

/* Spectrogram Settings panel styles migrated from demo/labeling-app.css */
.spectrogram-settings-panel {
  padding: 0;
}

.spectrogram-settings-panel .settings-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}

.spectrogram-settings-panel .settings-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.spectrogram-settings-panel .settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.spectrogram-settings-panel .settings-row:last-child {
  margin-bottom: 0;
}

.spectrogram-settings-panel .settings-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  min-width: 65px;
  flex-shrink: 0;
}

.spectrogram-settings-panel .settings-select {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 11px;
}

.spectrogram-settings-panel .settings-number {
  width: 68px;
  height: 26px;
  padding: 0 5px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 11px;
  font-family: "Cascadia Code", "Consolas", monospace;
}

.spectrogram-settings-panel .settings-range {
  flex: 1;
  height: 4px;
  accent-color: var(--color-accent);
}

.spectrogram-settings-panel .quality-label-bar {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--color-text-secondary);
  padding: 2px 20px 0;
  opacity: 0.7;
}

.spectrogram-settings-panel .quality-level-display {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 2px;
}

.spectrogram-settings-panel .mini-btn {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
}

.spectrogram-settings-panel .mini-btn:hover {
  color: var(--color-text-primary);
  border-color: #3a5580;
}

/* Preset manager inline panel — migrated from player.css */
.preset-save-row {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.preset-save-row input {
  flex: 1;
  min-width: 0;
  height: 24px;
  border-radius: 5px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
  font-size: 0.76rem;
  padding: 0 6px;
}

.preset-save-row input:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.6);
}

.preset-save-row .mini-btn.pm-confirm {
  color: #4ade80;
}

.preset-manager-inline {
  margin-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  padding-top: 6px;
}

.preset-manager-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 240px;
}

.pm-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 4px;
  border-radius: 4px;
  font-size: 0.76rem;
  color: #e2e8f0;
}

.pm-item:hover {
  background: rgba(148, 163, 184, 0.08);
}

.pm-item .pm-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.pm-item .pm-name:hover {
  color: #93c5fd;
}

.pm-item .pm-badge {
  color: #64748b;
  font-size: 0.65rem;
}

.pm-fav-btn {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.12s;
}

.pm-fav-btn:hover,
.pm-fav-btn.active {
  color: #eab308;
}

.pm-icon-btn {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
}

.pm-icon-btn:hover {
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.15);
}

.pm-delete-btn:hover,
.pm-delete-btn.pm-confirm-delete {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.2);
}

.pm-rename-input {
  flex: 1;
  min-width: 0;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(96, 165, 250, 0.5);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
  font-size: 0.76rem;
  padding: 0 5px;
}

.pm-rename-input:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.8);
}

.pm-empty {
  padding: 12px 4px;
  text-align: center;
  color: #475569;
  font-size: 0.76rem;
}

.pm-actions {
  display: flex;
  gap: 6px;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.pm-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  border-radius: 5px;
  font-size: 0.72rem;
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.06);
  color: #94a3b8;
  padding: 0 8px;
  transition: background 0.12s, color 0.12s;
}

.pm-action-btn:hover {
  background: rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
}

.pm-status {
  font-size: 0.72rem;
  color: #4ade80;
  opacity: 0;
  transition: opacity 0.2s;
  margin-left: auto;
}

.pm-status.pm-status-visible {
  opacity: 1;
}

.pm-status.pm-status-error {
  color: #f87171;
}

.preset-section .mini-btn.active {
  color: #eab308;
}

/* Shared animations, media queries, dev overlays — migrated from player.css */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@media (max-width: 900px) {
  .toolbar {
    gap: 4px;
    padding: 0 4px;
  }
  .toolbar-btn {
    padding: 0 6px;
    font-size: 0.72rem;
  }
  .transport-btn {
    width: 26px;
    height: 26px;
  }
}
.abp-perf-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  min-width: 210px;
  max-width: 320px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.82);
  color: #e2e8f0;
  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

.abp-perf-title {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  color: #38bdf8;
}

/* Scrollbar styling (uses tokens in src/styles/tokens.css)
   - `scrollbar-color` supports Firefox
   - WebKit uses ::-webkit-scrollbar pseudo elements
   These values adapt automatically when `html[data-theme="light"]` is set.
*/
:root {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
}

/* Ensure thin scrollbars on typical panel containers */
.sidebar-body,
.settings-panel,
.label-search-results,
.preset-manager-list,
.label-card-detail,
.pm-list {
  scrollbar-width: thin;
}
