/* ==========================================================================
   Sprite Forge — Pixel Art Sprite Dataset Builder
   Design: dark editor workspace (Aseprite/annotation-tool register),
   phosphor-green confidence accent, monospace data + Inter UI chrome.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --canvas: #15171c;
  --panel: #1d2027;
  --panel-raised: #262a33;
  --panel-raised-2: #2e333e;
  --line: #363b47;
  --line-soft: #2a2e38;
  --ink: #e8e9ed;
  --ink-dim: #8b90a0;
  --ink-faint: #5a5f6e;

  --accent: #7fe08b;
  --accent-dim: #4d9e59;
  --accent-wash: rgba(127, 224, 139, 0.12);

  --warn: #f2b84b;
  --warn-wash: rgba(242, 184, 75, 0.14);

  --danger: #e8607a;
  --danger-wash: rgba(232, 96, 122, 0.14);

  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 3px;
  --radius-md: 5px;

  --topbar-h: 52px;
  --statusbar-h: 44px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
}

button {
  font-family: inherit;
}

::selection {
  background: var(--accent-wash);
  color: var(--ink);
}

/* Scrollbars: thin, editor-style */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--panel-raised-2);
  border-radius: 6px;
  border: 2px solid var(--panel);
}
::-webkit-scrollbar-thumb:hover { background: var(--line); }

/* ==========================================================================
   App shell
   ========================================================================== */

#app {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--statusbar-h);
  height: 100vh;
}

/* ---- topbar ---- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.brand-mark {
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 18px;
  height: 18px;
  gap: 1px;
}
.brand-mark span {
  background: var(--line);
}
.brand-mark span:nth-child(2),
.brand-mark span:nth-child(5),
.brand-mark span:nth-child(6),
.brand-mark span:nth-child(9),
.brand-mark span:nth-child(11),
.brand-mark span:nth-child(15) {
  background: var(--accent);
}

.topbar-actions {
  display: flex;
  gap: 8px;
}

.topbar-spacer { flex: 1; }

.topbar-stat {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.topbar-stat b {
  color: var(--ink);
  font-weight: 600;
}

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.btn:hover { background: var(--panel-raised-2); border-color: var(--ink-faint); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--panel-raised); border-color: var(--line); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0d1f10;
  font-weight: 600;
}
.btn-primary:hover { background: #93e79d; border-color: #93e79d; }

.btn-danger {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}
.btn-danger:hover { background: var(--danger-wash); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-dim);
}
.btn-ghost:hover { background: var(--panel-raised); color: var(--ink); }

.btn-sm { padding: 4px 9px; font-size: 11.5px; }
.btn-block { width: 100%; justify-content: center; }

/* ==========================================================================
   Workspace: three-pane layout
   ========================================================================== */

.workspace {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  overflow: hidden;
}

.pane {
  overflow-y: auto;
  min-height: 0;
}

.pane-left {
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.pane-center {
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pane-right {
  background: var(--panel);
  border-left: 1px solid var(--line);
}

.pane-section {
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.pane-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px 0;
}

/* ---- sheets list (left pane) ---- */

.sheet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 12.5px;
}
.sheet-item:hover { background: var(--panel-raised); color: var(--ink); }
.sheet-item.active {
  background: var(--accent-wash);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent);
}
.sheet-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.sheet-item-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.empty-hint {
  color: var(--ink-faint);
  font-size: 12px;
  padding: 6px 10px 2px;
  line-height: 1.6;
}

/* ---- upload dropzone ---- */

.dropzone {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 18px 10px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--accent-dim);
  background: var(--accent-wash);
  color: var(--ink-dim);
}
.dropzone-icon {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.padding-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.padding-chip {
  flex: 1;
  text-align: center;
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  cursor: pointer;
  background: transparent;
}
.padding-chip:hover { border-color: var(--ink-faint); }
.padding-chip.active {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

/* ==========================================================================
   Center canvas: sheet + bounding box overlay
   ========================================================================== */

.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.canvas-toolbar-title {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-toolbar-spacer { flex: 1; }

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-dim);
}

.canvas-scroll {
  flex: 1;
  overflow: auto;
  position: relative;
  /* checkerboard = the actual transparency convention every image editor
     uses, doubles as the canvas's textural identity */
  background-color: var(--canvas);
  background-image:
    linear-gradient(45deg, #1b1e24 25%, transparent 25%),
    linear-gradient(-45deg, #1b1e24 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1b1e24 75%),
    linear-gradient(-45deg, transparent 75%, #1b1e24 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 40px;
}

.sheet-stage {
  position: relative;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  box-shadow: 0 0 0 1px var(--line);
}

.sheet-stage img {
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* ---- bounding box overlay: the signature element ---- */

.bbox {
  position: absolute;
  border: 1px solid var(--bbox-color, var(--accent));
  cursor: pointer;
  transition: box-shadow 100ms ease;
}
.bbox:hover {
  box-shadow: 0 0 0 1px var(--bbox-color, var(--accent)), 0 0 8px 0 var(--bbox-color, var(--accent));
  z-index: 5;
}

@media (max-width: 880px) {
  /* Small sprites (a handful of source pixels, scaled down further to
     fit a phone screen) can end up as a 4-6px tappable box -- well under
     any usable touch target. An invisible ::before hit-area extends the
     actual tap region without changing the visible box size or shifting
     layout (position:absolute + inset avoids affecting sibling sprites'
     boxes, since each bbox is independently absolutely positioned). */
  .bbox::before {
    content: '';
    position: absolute;
    inset: -6px;
  }
}
.bbox-tag {
  position: absolute;
  top: -1px;
  left: -1px;
  transform: translateY(-100%);
  background: var(--bbox-color, var(--accent));
  color: #0d1f10;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 3px;
  white-space: nowrap;
  pointer-events: none;
}

/* Reviewed sprites stay identifiable at a glance: accepted gets a solid
   filled tag + checkmark, rejected gets a dimmed dashed border. Relying on
   opacity alone was too subtle against small, already-dark sprites. */
.bbox.status-accepted {
  border-style: solid;
  box-shadow: 0 0 0 1px var(--accent);
}
.bbox.status-accepted .bbox-tag {
  background: var(--accent);
  color: #0d1f10;
}
.bbox.status-accepted .bbox-tag::after {
  content: ' ✓';
}
.bbox.status-rejected {
  border-style: dashed;
  opacity: 0.4;
}
.bbox.status-rejected .bbox-tag {
  background: var(--panel-raised-2);
  color: var(--ink-faint);
  text-decoration: line-through;
}

.bbox.selected {
  border-color: var(--ink);
  animation: marching-ants 550ms linear infinite;
  z-index: 6;
}
.bbox.selected::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1px dashed var(--ink);
  animation: marching-ants 550ms linear infinite;
}

@keyframes marching-ants {
  to { background-position: 8px 0; }
}
.bbox.selected {
  background-image: repeating-linear-gradient(
    90deg, var(--ink) 0 4px, transparent 4px 8px
  );
  background-size: 8px 1px;
  background-repeat: repeat-x;
  background-position: 0 0;
  border: none;
  outline: 1px solid var(--ink);
}
.bbox.selected::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bbox.selected { animation: none; }
}

.canvas-empty {
  margin: auto;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  max-width: 320px;
}
.canvas-empty-mark {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--line);
  margin-bottom: 12px;
}

/* ==========================================================================
   Right pane: inspector
   ========================================================================== */

.inspector-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.7;
}

.preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--canvas);
  background-image:
    linear-gradient(45deg, #1b1e24 25%, transparent 25%),
    linear-gradient(-45deg, #1b1e24 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1b1e24 75%),
    linear-gradient(-45deg, transparent 75%, #1b1e24 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  height: 200px;
  overflow: hidden;
}
.preview-frame img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  max-width: 100%;
  max-height: 100%;
}

.sprite-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 8px;
  word-break: break-all;
}

.dim-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  font-family: var(--font-mono);
}
.dim-row .dims { font-size: 15px; font-weight: 600; color: var(--ink); }
.dim-row .source { font-size: 10.5px; color: var(--ink-faint); }

.confidence-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  border: 1px solid var(--line);
}
.confidence-banner.high { border-color: var(--accent-dim); background: var(--accent-wash); color: var(--accent); }
.confidence-banner.mid { border-color: #b88a2c; background: var(--warn-wash); color: var(--warn); }
.confidence-banner.low { border-color: #b8425a; background: var(--danger-wash); color: var(--danger); }
.confidence-banner .conf-value { font-family: var(--font-mono); font-weight: 700; }
.confidence-reasons {
  margin: 6px 0 0 0;
  padding-left: 16px;
  font-size: 11px;
  color: var(--ink-dim);
}

.score-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  margin-top: 10px;
  font-size: 11.5px;
}
.score-grid .k { color: var(--ink-dim); }
.score-grid .v { font-family: var(--font-mono); color: var(--ink); text-align: right; }

.score-bar {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
  margin: -3px 0 4px;
}
.score-bar-fill { height: 100%; background: var(--accent); }

.field-group { margin-top: 14px; }
.field-label {
  display: block;
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 5px;
}
.field-select, .field-input {
  width: 100%;
  padding: 7px 9px;
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12.5px;
}
.field-select:focus, .field-input:focus {
  outline: none;
  border-color: var(--accent-dim);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  background: var(--panel-raised-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
}
.tag-chip button {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  line-height: 1;
}
.tag-chip button:hover { color: var(--danger); }

.dup-banner {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid #7a5230;
  background: var(--warn-wash);
  font-size: 11.5px;
  color: var(--warn);
}
.dup-banner b { font-family: var(--font-mono); }

.bg-toggle {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.bg-toggle .padding-chip { flex: 1; }

.action-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.action-row .btn { flex: 1; justify-content: center; }

.edit-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.edit-row label {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.edit-row input {
  width: 100%;
  padding: 5px 6px;
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

/* ==========================================================================
   Status bar
   ========================================================================== */

.statusbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-dim);
}
.stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 1px;
}
.stat-dot.accepted { background: var(--accent); }
.stat-dot.rejected { background: var(--danger); }
.stat-dot.pending { background: var(--ink-faint); }
.stat-dot.duplicates { background: var(--warn); }
.stat b { color: var(--ink); font-weight: 600; }

.statusbar-spacer { flex: 1; }

.batch-controls {
  display: flex;
  gap: 6px;
}

/* ==========================================================================
   Toasts
   ========================================================================== */

#toast-stack {
  position: fixed;
  bottom: calc(var(--statusbar-h) + 14px);
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}
.toast {
  padding: 10px 14px;
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  max-width: 320px;
  animation: toast-in 180ms ease;
}
.toast.error { border-left-color: var(--danger); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Modal (merge/split)
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 14, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal {
  width: 420px;
  max-width: calc(100vw - 40px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.modal-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}
.modal-desc {
  font-size: 12px;
  color: var(--ink-dim);
  margin: 0 0 14px;
  line-height: 1.6;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ==========================================================================
   Responsive: mobile layout below ~880px
   ==========================================================================
   Desktop uses a fixed 100vh grid where each pane scrolls independently
   (an editor-window model). That model breaks down on a phone: three
   panes stacked vertically inside a fixed viewport height leaves each
   one too short to use. Below the breakpoint we switch to natural page
   scroll instead -- the whole app becomes one tall scrollable column,
   sections stack in the order you actually use them (upload → canvas →
   inspector), and only the sprite-sheet canvas keeps its own internal
   scroll (it needs horizontal pan/zoom regardless of viewport). */

@media (max-width: 880px) {
  html, body {
    height: auto;
  }
  body {
    overflow-y: auto;
    overflow-x: hidden;
    /* bottom padding is set later in this block once the fixed
       statusbar's mobile height (two rows) is known */
  }

  #app {
    height: auto;
    min-height: 100vh;
    display: block;
  }

  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 12px;
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .topbar-stat { display: none; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn {
    padding: 9px 12px; /* keep tap targets >= ~40px tall */
    font-size: 12px;
  }

  .workspace {
    display: block;
    overflow: visible;
  }

  .pane { overflow: visible; }

  .pane-left {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .pane-left .pane-section { padding: 12px; }

  /* Sheets list: horizontal chip scroller instead of a tall vertical
     list, so it doesn't push the canvas below the fold on a phone. */
  #sheet-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  #sheet-list .empty-hint { white-space: normal; min-width: 220px; }
  .sheet-item {
    flex: 0 0 auto;
    min-width: 120px;
  }

  .dropzone { padding: 14px 10px; }

  .pane-center {
    overflow: visible;
  }
  .canvas-toolbar {
    position: sticky;
    top: var(--topbar-h);
    z-index: 15;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .canvas-toolbar-title { font-size: 11.5px; }
  .zoom-controls .btn { padding: 8px 10px; min-height: 40px; }

  /* The canvas itself: allow real horizontal + vertical panning with a
     thumb, and let the browser's native pinch-zoom work on it (desktop
     disables that nowhere, but touch-action defaults can interfere with
     drag-scroll -- pan-x pan-y keeps both working together). */
  .canvas-scroll {
    height: 62vh;
    min-height: 320px;
    max-height: 520px;
    padding: 16px;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .canvas-empty { font-size: 12.5px; padding: 0 8px; }

  .pane-right {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .inspector-empty { padding: 24px 20px; }

  .preview-frame { height: 160px; }

  .score-grid { font-size: 11px; }

  .action-row .btn { padding: 11px 10px; } /* bigger tap target */

  /* Baseline tap-target floor: anything clickable gets at least ~40px of
     height on touch, even where desktop uses a tighter, mouse-precision
     padding (padding-chips, sm buttons, tag remove buttons, etc). */
  .btn, .padding-chip, .sheet-item, select, input[type="number"], input[type="text"] {
    min-height: 40px;
  }
  .btn-sm { min-height: 38px; }
  .tag-chip button { min-width: 24px; min-height: 24px; }
  .field-select, .field-input { padding: 10px 9px; }

  /* Status bar: at phone widths the counts + batch actions no longer
     fit on one row. Instead of overflowing off-screen, the bar becomes
     two stacked rows -- counts on top (always visible, compact), batch
     action buttons in a horizontally-scrollable strip below -- and
     stays pinned to the viewport bottom like on desktop, since it's the
     primary place review actions live. */
  .statusbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 12px;
    z-index: 25;
  }
  .statusbar .stat { flex: 0 0 auto; font-size: 11px; }
  .statusbar-spacer { display: none; flex-basis: 100%; height: 0; }
  .batch-controls {
    flex: 0 0 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .batch-controls .btn {
    flex: 0 0 auto;
    padding: 10px 13px;
    font-size: 11.5px;
  }

  body { padding-bottom: 92px; } /* clears the now-taller fixed statusbar */

  .modal { width: calc(100vw - 32px); }
  .edit-row { grid-template-columns: repeat(2, 1fr); row-gap: 8px; }

  #toast-stack {
    left: 12px;
    right: 12px;
    bottom: 100px;
  }
  .toast { max-width: none; }
}

@media (max-width: 460px) {
  .brand { font-size: 12.5px; }
  .brand-mark { width: 15px; height: 15px; }
  .topbar-actions .btn span.btn-label-full { display: none; }
}

/* Focus visibility (kept intentional, not suppressed) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Auto-labelling notice
   ========================================================================== */

.auto-tag-banner {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid #3c5470;
  background: rgba(96, 152, 232, 0.12);
  font-size: 11.5px;
  color: #8fb4e8;
  line-height: 1.55;
}
.auto-tag-banner b { font-family: var(--font-mono); }

/* ==========================================================================
   Bulk assign panel
   ========================================================================== */

.field-hint {
  color: var(--ink-faint);
  font-weight: 400;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--ink-dim);
  cursor: pointer;
}
.checkbox-row input { accent-color: var(--accent-dim); }

.mono { font-family: var(--font-mono); }

/* ==========================================================================
   Animation preview
   ========================================================================== */

.modal-wide {
  width: 560px;
}
.modal-scroll {
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

.anim-stage {
  position: relative;
  margin: 14px auto 4px;
  background:
    repeating-conic-gradient(#22252c 0% 25%, #1a1d23 0% 50%) 50% / 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.anim-frame {
  position: absolute;
  display: none;
  image-rendering: pixelated;
}
.anim-frame.visible { display: block; }

.anim-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.anim-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  min-width: 62px;
  text-align: center;
}
.anim-fps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-dim);
}
.anim-fps input { width: 96px; accent-color: var(--accent-dim); }

/* ==========================================================================
   Dataset report
   ========================================================================== */

.report-warnings {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0 4px;
}
.report-warning {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid #7a5230;
  background: var(--warn-wash);
  color: var(--warn);
  font-size: 11.5px;
  line-height: 1.55;
}
.report-ok {
  margin: 12px 0 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-dim);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 11.5px;
}
.report-note {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
  border: 1px solid var(--line-soft);
  color: var(--ink-dim);
  font-size: 11.5px;
  line-height: 1.6;
}

.dist-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.dist-row {
  display: grid;
  grid-template-columns: 130px 1fr 78px;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.dist-name {
  font-family: var(--font-mono);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dist-bar {
  height: 7px;
  background: var(--panel-raised);
  border-radius: 99px;
  overflow: hidden;
}
.dist-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent-dim);
}
.dist-count {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  text-align: right;
}

@media (max-width: 880px) {
  .dist-row { grid-template-columns: 96px 1fr 66px; }
  .modal-wide { width: auto; }
}