/* ===================== DESIGN TOKENS ===================== */
:root {
  /* Colours read the shared --px-* tokens (pixel-ui.css / PixelTheme) so the
     workspace theme can recolour the editor; the literals are the fallbacks. */
  --bg-canvas: var(--px-bg, #16161a);
  --bg-panel: var(--px-panel, #1f1f24);
  --bg-panel-raised: var(--px-raised, #26262d);
  --bg-field: var(--px-field, #2c2c34);
  --border-subtle: var(--px-line, #34343d);
  --border-strong: var(--px-line-strong, #46464f);
  /* "r, g, b" triplets, so translucent overlays follow the panel colours */
  --bg-panel-rgb: var(--px-panel-rgb, 31, 31, 36);
  --bg-canvas-rgb: var(--px-bg-rgb, 22, 22, 26);

  --text-primary: var(--px-text, #ececec);
  --text-secondary: var(--px-text-2, #9a9aa4);
  --text-tertiary: var(--px-text-3, #6b6b75);

  --accent: var(--px-accent, #39ff7a);
  --accent-rgb: var(--px-accent-rgb, 57, 255, 122);
  --accent-hover: var(--px-accent-hover, #4dffa0);
  --accent-dim: var(--px-accent-dim, #1f8c47);
  --accent-text-on: var(--px-on-accent, #0c1f10);
  --amber: var(--px-amber, #ffb454);
  --danger: var(--px-danger, #ff5c5c);
  --gold: var(--px-gold, #ffd23d);
  --on-gold: var(--px-on-gold, #1c1606);

  --font-display: "JetBrains Mono", "SF Mono", monospace;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --topbar-h: 56px;
  --rail-left-w: 76px;
  --panel-w: var(--user-panel-w, 320px);
  --rail-right-w: 240px;
}

* , *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  height: 100vh;
  overflow: hidden;
}

/* ===================== BOOT SCREEN ===================== */
#boot-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.25s ease;
}
#boot-screen.boot-hidden {
  opacity: 0;
  pointer-events: none;
}
.boot-inner { text-align: center; }
.boot-mark {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 28px;
  display: block;
  margin-bottom: 14px;
  animation: boot-pulse 1.1s ease-in-out infinite;
}
@keyframes boot-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.boot-text {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}
.boot-error {
  margin-top: 16px;
  max-width: 360px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--danger);
  background: rgba(255,92,92,0.08);
  border: 1px solid rgba(255,92,92,0.3);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  text-align: left;
}

button, input, select {
  font-family: inherit;
  color: inherit;
}

/* subtle pixel-grid texture on the deepest background */
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  background-color: var(--bg-canvas);
}

/* ===================== TOP BAR ===================== */
.topbar {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 20;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;          /* never let the topbar squeeze the wordmark into a 3-line wrap */
  white-space: nowrap;
}
.brand-name, .brand-tag { white-space: nowrap; }

.brand-mark {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 14px;
  letter-spacing: -1px;
}

/* Pixel-P logo (GameBoy palette) — sizes for topbar / boot / 3D loading */
.logo-mark { width: 20px; height: 22px; display: inline-block; vertical-align: -3px; }
.logo-mark-md { width: 32px; height: 35px; display: block; margin: 0 auto; }
.logo-mark-lg { width: 44px; height: 48px; display: block; margin: 0 auto; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.brand-tag {
  font-size: 12px;
  color: var(--text-tertiary);
  display: none;
}

/* PIXELATO GOLD member styling (applied by JS when premium) */
.brand.is-gold .brand-name {
  color: #ffd23d;
  text-shadow: 0 0 10px rgba(255, 210, 61, 0.45);
}
.brand.is-gold .logo-mark { filter: drop-shadow(0 0 4px rgba(255, 210, 61, 0.5)); }

@media (min-width: 720px) {
  .brand-tag { display: inline; }
}

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

.divider-v {
  width: 1px;
  height: 22px;
  background: var(--border-subtle);
  margin: 0 4px;
}

.divider-h {
  height: 1px;
  background: var(--border-subtle);
  margin: 18px 0;
}

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, opacity 0.15s;
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
a.btn { text-decoration: none; }

.btn-ghost {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-field);
  color: var(--text-primary);
}

.btn-accent {
  background: var(--accent);
  color: var(--accent-text-on);
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-hover); }

.btn-secondary {
  background: var(--bg-field);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--accent-dim); }

.btn-amber {
  background: var(--amber);
  color: #2a1a04;
  border-color: var(--amber);
  font-weight: 600;
}
.btn-amber:hover:not(:disabled) {
  background: color-mix(in srgb, var(--amber) 82%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent);
}
.btn-amber:disabled { background: var(--bg-field); color: var(--text-tertiary); border-color: var(--border-subtle); }

.xfactor-spinning {
  animation: xfactor-spin-pulse 0.3s ease-in-out infinite;
}
@keyframes xfactor-spin-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.full-width { width: 100%; justify-content: center; }

.btn-flash {
  animation: btn-flash-pulse 0.3s ease 3;
}
@keyframes btn-flash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.25); }
}

.icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-field);
  color: var(--text-secondary);
  cursor: pointer;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
}

/* ===================== WORKSPACE GRID ===================== */
.workspace {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

/* ---- left icon rail ---- */
.rail-left {
  width: var(--rail-left-w);
  flex: 0 0 auto;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 6px;
  gap: 4px;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 2px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 10.5px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}

.tab i { font-size: 19px; }

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

.tab.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

/* ---- tool panel ---- */
.panel {
  width: var(--panel-w);
  flex: 0 0 auto;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  position: relative;
}

.panel-section { padding: 20px; }

.panel-title {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin: 0 0 18px;
}

.panel-subtitle {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

.panel-help {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin: -6px 0 16px;
}

.field { margin-bottom: 18px; }

.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.field-label-row label, .field-label-solo {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
}

.field-label-solo { display: block; margin-bottom: 8px; }

.field-value {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 1px 7px;
  border-radius: 99px;
}

.field-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 6px 0 0;
}

/* range sliders */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--bg-field);
  border-radius: 99px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-panel);
  box-shadow: 0 0 0 1px var(--border-strong);
}
input[type=range]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-panel);
}

/* select */
.select {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-field);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
}

/* segmented control */
.seg-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bg-field);
  padding: 4px;
  border-radius: var(--radius-md);
}

.seg {
  flex: 1 1 auto;
  padding: 6px 10px;
  font-size: 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

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

.seg.active {
  background: var(--accent);
  color: var(--accent-text-on);
  font-weight: 600;
}

/* switch / checkbox rows */
.row-field { display: flex; }

.switch-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.switch-label input[type=checkbox] {
  appearance: none;
  width: 34px;
  height: 19px;
  background: var(--bg-field);
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.15s;
}
.switch-label input[type=checkbox]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  background: var(--text-tertiary);
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
.switch-label input[type=checkbox]:checked {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.switch-label input[type=checkbox]:checked::after {
  transform: translateX(15px);
  background: var(--accent);
}

/* palette grid */
.palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.palette-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 9px;
  background: var(--bg-field);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.palette-chip:hover { border-color: var(--border-strong); }

.palette-chip.active {
  border-color: var(--accent);
  color: var(--text-primary);
  background: rgba(var(--accent-rgb), 0.06);
}

.chip-swatches {
  display: flex;
  gap: 2px;
}
.chip-swatches i {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  display: block;
}

/* progress bar (gif export) */
.progress-track {
  height: 6px;
  background: var(--bg-field);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 6px;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.2s;
}

/* batch list */
.batch-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.batch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-field);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
}
.batch-item img {
  width: 28px; height: 28px;
  object-fit: cover;
  border-radius: 3px;
}
.batch-item .batch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.batch-item button {
  background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 13px;
}
.batch-item button:hover { color: var(--danger); }

/* ===================== EMPTY STATE (inside panel) ===================== */
.empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-panel);
  z-index: 5;
}
/* Belt-and-suspenders: even if the `hidden` attribute is somehow not applied
   by JS (race condition, script error before that line runs), this rule
   ensures the overlay can never visually appear OR intercept clicks once
   an image is loaded. JS toggles the data-loaded attribute on <body>. */
body[data-image-loaded="true"] .empty-state {
  display: none;
  pointer-events: none;
  visibility: hidden;
}
.empty-state[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.empty-state-inner { text-align: center; }
.empty-icon { font-size: 40px; color: var(--text-tertiary); margin-bottom: 14px; display: block; }
.empty-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.empty-sub { font-size: 12px; color: var(--text-tertiary); margin: 0 0 18px; }

/* ===================== CENTER STAGE ===================== */
.stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background:
    repeating-conic-gradient(#1a1a1f 0% 25%, #1d1d22 0% 50%) 50% / 22px 22px;
}

.dropzone-overlay {
  position: absolute;
  inset: 16px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bg-canvas-rgb),0.4);
  transition: border-color 0.2s, background 0.2s;
  z-index: 10;
}
.dropzone-overlay.drag-over {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
}

.dropzone-card { text-align: center; max-width: 320px; }
.dropzone-icon { font-size: 44px; color: var(--text-tertiary); margin-bottom: 16px; display: block; }
.dropzone-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.dropzone-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; }
.dropzone-formats { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-display); }

/* ===================== QUICK BAR (always-visible pixel size + shape + X factor) ===================== */
.quickbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  background: linear-gradient(180deg, var(--bg-panel-raised), rgba(var(--bg-panel-rgb),0.75));
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  z-index: 9;
}

.quickbar-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quickbar-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.quickbar-label i { font-size: 14px; color: var(--accent); }

.quickbar-group input[type=range] {
  width: 140px;
}

.quickbar-val {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  padding: 1px 8px;
  border-radius: 99px;
  min-width: 38px;
  text-align: center;
}

.seg-group-compact {
  padding: 3px;
}
.seg-group-compact .seg {
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1;
}

.quickbar-xfactor {
  margin-left: auto;
  position: relative;
  overflow: hidden;
}
.quickbar-xfactor::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: xfactor-shine 2.6s ease-in-out infinite;
}
@keyframes xfactor-shine {
  0% { left: -60%; }
  50% { left: 130%; }
  100% { left: 130%; }
}

@media (max-width: 720px) {
  .quickbar { gap: 10px; padding: 10px 12px; }
  .quickbar-group input[type=range] { width: 90px; }
  .quickbar-xfactor { margin-left: 0; }
}

.canvas-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(var(--bg-panel-rgb),0.6);
  backdrop-filter: blur(6px);
  z-index: 8;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-secondary);
}
#zoom-level { min-width: 38px; text-align: center; }

.canvas-meta {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-tertiary);
}

.hud-readout {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The stack is centred with auto margins (not justify/align-content), so
   when it is bigger than the viewport it overflows to the right/bottom
   only and every edge stays scrollable. Zoom resizes the stack itself. */
.canvas-viewport {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  position: relative;
  padding: 24px;
}

.canvas-stack {
  position: relative;
  flex: none;
  margin: auto;
  line-height: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  cursor: crosshair;
}

.canvas-stack canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  border-radius: 2px;
}

#original-canvas { position: relative; z-index: 1; visibility: hidden; }
#output-canvas { z-index: 2; }
/* the mask canvas is a derived raster of the selected areas (read by the
   3D view); the overlay draws the visible outline and tint instead */
#mask-canvas { z-index: 3; pointer-events: none; opacity: 0; }
#overlay-canvas { z-index: 4; pointer-events: none; image-rendering: auto; }
.canvas-stack.rg-live #overlay-canvas { pointer-events: auto; touch-action: none; }
.canvas-stack.rg-hand #overlay-canvas { cursor: grab; }
.canvas-stack.rg-hand.rg-panning #overlay-canvas { cursor: grabbing; }

/* ---------- Mask tab: area select (pixelato-region.js) ---------- */
.rg-tools .seg { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
.rg-tools .seg i { font-size: 15px; }
.rg-lock { font-size: 11px; opacity: 0.75; }
.seg.active .rg-lock { opacity: 1; }
.rg-editing { font-size: 11px; color: var(--text-tertiary); margin: 0 0 8px; }
.rg-editing strong { color: var(--text-secondary); font-weight: 600; }
.rg-inline { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.rg-inline input[type=color] { width: 36px; height: 30px; padding: 0; border: 2px solid var(--border-strong); background: none; cursor: pointer; }
.rg-inline .select { flex: 1 1 auto; }
.rg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rg-list:empty::before { content: 'No areas yet. Drag on the photo to select one.'; font-size: 11.5px; color: var(--text-tertiary); }
.rg-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 2px solid var(--border-subtle); background: var(--bg-field); font-size: 12px; color: var(--text-secondary); }
.rg-item.is-selected { border-color: var(--accent); color: var(--text-primary); }
.rg-item .rg-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; padding: 4px 0; }
.rg-item .icon-btn { width: 30px; height: 30px; flex: none; }
.rg-item .rg-own.is-on { color: var(--accent); border-color: var(--accent-dim); }
.rg-keys { font-size: 11px; color: var(--text-tertiary); line-height: 1.6; margin: 6px 0 0; }
.rg-keys kbd { font-family: var(--font-display); font-size: 10.5px; border: 1px solid var(--border-strong); padding: 0 4px; }
@media (hover: none) { .rg-keys { display: none; } }

/* ===================== RIGHT INFO RAIL ===================== */
.rail-right {
  width: var(--rail-right-w);
  flex: 0 0 auto;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-subtle);
  padding: 18px;
  overflow-y: auto;
  display: none;
}

@media (min-width: 1100px) {
  .rail-right { display: block; }
}
/* Workspace theme: the right info rail can be forced on/off (PixelTheme rightRail) */
html[data-rail="show"] .rail-right { display: block; }
html[data-rail="hide"] .rail-right { display: none; }
/* Workspace theme: density reshapes the bars and rails */
html[data-density="compact"] { --topbar-h: 48px; --rail-left-w: 68px; }
html[data-density="comfy"] { --topbar-h: 64px; --rail-left-w: 84px; }

.info-block { margin-bottom: 24px; }

.info-title {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  margin: 0 0 10px;
}

#histogram-canvas {
  width: 100%;
  height: 90px;
  background: var(--bg-field);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.swatch-readout {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-field);
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.swatch-box {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  flex: 0 0 auto;
  background: #444;
}

.swatch-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--text-secondary);
  gap: 2px;
}

.stat-list { margin: 0; }
.stat-list div {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}
.stat-list div:last-child { border-bottom: none; }
.stat-list dt { color: var(--text-tertiary); }
.stat-list dd { margin: 0; color: var(--text-primary); font-family: var(--font-display); font-size: 11.5px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  :root { --panel-w: min(280px, var(--user-panel-w, 280px)); }
  .brand-tag { display: none; }
}

@media (max-width: 720px) {
  .workspace { flex-direction: column; }
  .rail-left {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 6px;
  }
  .tab { flex-direction: row; font-size: 11px; padding: 8px 10px; }
  .panel { width: 100%; max-height: 38vh; }
  .stage { min-height: 40vh; }
}

/* scrollbars */
.panel::-webkit-scrollbar, .rail-right::-webkit-scrollbar, .canvas-viewport::-webkit-scrollbar {
  width: 8px; height: 8px;
}
.panel::-webkit-scrollbar-thumb, .rail-right::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
}
.panel::-webkit-scrollbar-track, .rail-right::-webkit-scrollbar-track { background: transparent; }

/* ===================== 3D VOXEL VIEWPORT ===================== */
.three-viewport {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.three-viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}
.three-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(var(--bg-panel-rgb),0.85);
  border: 1px solid var(--border-subtle);
  padding: 5px 14px;
  border-radius: 99px;
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}
.three-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bg-canvas-rgb),0.88);
  z-index: 4;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-secondary);
}

/* Topbar 3D toggle lights up while the 3D view is active */
#view-3d-btn.active {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(var(--accent-rgb), 0.08);
}

/* ===================== MODAL (camera capture) ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
.modal-card {
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 18px;
  width: min(560px, 92vw);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.modal-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#camera-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: #000;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ===================== EXTRA LOADER BUTTONS ===================== */
.dropzone-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.empty-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

/* native color input, restyled to match fields */
.color-input {
  width: 100%;
  height: 34px;
  padding: 2px;
  background: var(--bg-field);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Enforce the hidden attribute even on elements whose class sets a display
   value (author CSS otherwise overrides the browser's [hidden] rule). */
[hidden] { display: none !important; }

/* ===================== CUSTOM PALETTE EDITOR ===================== */
.userpal-swatches {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.userpal-cell { position: relative; width: 30px; height: 30px; }
.userpal-cell input[type=color] {
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: none; cursor: pointer;
}
.userpal-del {
  position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; line-height: 13px;
  border-radius: 50%; border: none; background: var(--danger); color: #300; font-size: 12px;
  cursor: pointer; padding: 0; text-align: center;
}
.userpal-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.mini { font-size: 11px; padding: 5px 8px; }

/* ===================== AI ASSISTANT ===================== */
#assistant-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 400;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text-on); border: none;
  font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 0 rgba(var(--accent-rgb), 0.4);
  animation: fab-pulse 2.6s ease-in-out infinite;
}
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 0 rgba(var(--accent-rgb), 0.35); }
  50% { box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 22px 4px rgba(var(--accent-rgb), 0.2); }
}
#assistant-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 401;
  width: min(360px, calc(100vw - 40px)); height: min(500px, calc(100vh - 90px));
  display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: 0 24px 80px rgba(0,0,0,0.6); overflow: hidden;
}
.assistant-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-panel-raised);
}
.assistant-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 7px; }
.assistant-log { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.a-msg { font-size: 13px; line-height: 1.5; padding: 8px 11px; border-radius: 10px; max-width: 88%; white-space: pre-wrap; }
.a-msg.bot { background: var(--bg-field); color: var(--text-primary); align-self: flex-start; border-bottom-left-radius: 3px; }
.a-msg.user { background: var(--accent-dim); color: var(--accent-text-on); align-self: flex-end; border-bottom-right-radius: 3px; }
.assistant-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.a-chip {
  font-size: 11.5px; padding: 5px 10px; border-radius: 99px; cursor: pointer;
  background: var(--bg-field); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.a-chip:hover { border-color: var(--accent-dim); color: var(--text-primary); }
.assistant-input { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border-subtle); }
.assistant-input input {
  flex: 1; background: var(--bg-field); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); color: var(--text-primary); padding: 8px 10px; font-size: 13px;
}
.assistant-input .btn { padding: 8px 12px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* focus visibility */
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* ===================== VIDEO VIEWPORT ===================== */
.video-viewport {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.video-stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 18px;
}
.video-stage canvas {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #000;
  image-rendering: pixelated;
}
.video-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}
.video-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-subtle);
}
.video-controls input[type="range"] { flex: 1 1 auto; }
.video-time {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* recording state pulses red so it is impossible to miss */
#video-record-btn.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,92,92,0.55); }
  50% { box-shadow: 0 0 0 7px rgba(255,92,92,0); }
}

/* ===================== ART STYLE CHIPS ===================== */
.art-chip .art-icon {
  display: block;
  font-size: 17px;
  line-height: 1;
  margin-bottom: 4px;
  filter: saturate(1.15);
}

/* ===================== GOLD CHIPS + EXPORT SIZE ===================== */
/* A small "GOLD" tag beside anything PIXELATO GOLD unlocks; flat, no glow. */
.gold-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: transparent;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  vertical-align: middle;
  white-space: nowrap;
}
.gold-chip[hidden] { display: none; }
.seg.active .gold-chip { color: var(--accent-text-on); border-color: currentColor; }
.gold-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); margin-left: 26px; margin-top: 2px; }
.gold-hint .gold-chip { margin-left: 0; }
.row-field { flex-wrap: wrap; }
.row-field > .gold-hint { flex: 0 0 auto; margin: 4px 0 0 44px; }
.panel-subtitle .gold-chip { margin-left: 8px; }
.field-hint .gold-chip { margin: 0 2px; }
.seg.is-locked { color: var(--text-tertiary); }

.seg-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-wrap .seg { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 44px; }
.seg-wrap .seg[data-size="custom"] { grid-column: span 2; }
.seg-wrap .seg .size-px { font-family: var(--font-display); font-size: 10px; font-weight: 400; opacity: 0.75; }
.seg-wrap .seg .size-px:empty { display: none; }
.seg-wrap .seg .gold-chip { margin: 2px 0 0; }
#format-group .seg .gold-chip { margin-left: 4px; }

@media (max-width: 900px) {
  #workspace-btn .btn-label { display: none; }
}