/* ============================================
   KRATEO SETMASTER — Styles
   Midnight Club: dark + green accent
   ============================================ */

:root {
  --bg:         #080d08;
  --bg2:        #0e160e;
  --bg3:        #162016;
  --rule:       #1e2b1e;
  --dim:        #4d6650;
  --mid:        #7a9c7d;
  --light:      #c5d9c6;
  --white:      #edf5ee;
  --warm:       #d0dfd1;
  --accent:     #22C55E;
  --accent-dim: #16A34A;
  --green:      #22C55E;
  --green-dim:  #16A34A;
  --green-light: #4ADE80;
  --hi:         rgba(34, 197, 94, 0.04);
  --hi-border:  rgba(34, 197, 94, 0.12);

  /* #223 — Neutral grey palette for waveform-area UI.  Used for section
     tints, diamonds, editing guides, and any element that is NOT the audio
     signal itself or the composed gain result.  Green stays reserved for
     those two "signal" elements; everything else becomes pure brightness. */
  --neutral-300: #3a4048;  /* darkest — section tints */
  --neutral-400: #5a6068;  /* muted foreground */
  --neutral-500: #7a828a;  /* outline guides */
  --neutral-600: #9ba5ad;  /* default diamond fill */
  --neutral-700: #c5cdd5;  /* hovered / bright muted */

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Barlow Condensed', sans-serif;
  --font-mono:    'DM Mono', monospace;
}

/* ---- Reset ---- */

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

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

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Focus & selection ---- */

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Inputs with custom focus styles suppress the outline */
.slider-volume:focus-visible {
  outline: none;
}

::selection {
  background: rgba(34, 197, 94, 0.25);
  color: var(--white);
}

/* ---- Grain overlay ---- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* ---- Views ---- */

.view {
  display: none;
  width: 100%;
  height: 100%;
}

.view.active {
  display: flex;
}

/* ============================================
   UPLOAD VIEW
   ============================================ */

#view-upload {
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.upload-container {
  width: 100%;
  max-width: 640px;
  padding: 2rem;
}

.upload-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  color: var(--white);
  text-align: center;
  margin-bottom: 3rem;
}

.logo-accent {
  color: var(--accent);
}

/* Drop zone */

.drop-zone {
  position: relative;
  border: 2px dashed var(--rule);
  border-radius: 8px;
  padding: 4rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.drop-zone:hover {
  border-color: var(--dim);
  background-color: var(--hi);
}

.drop-zone.drag-over {
  border-color: var(--accent);
  background-color: rgba(34, 197, 94, 0.04);
}

.drop-zone-inner {
  pointer-events: none;
}

.drop-icon {
  width: 48px;
  height: 48px;
  color: var(--dim);
  margin-bottom: 1.5rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.drop-zone:hover .drop-icon {
  color: var(--mid);
}

.drop-zone.drag-over .drop-icon {
  color: var(--accent);
  transform: translateY(-2px);
}

.drop-headline {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.drop-subtext {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--dim);
}

/* Upload meta info */

.upload-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--dim);
  letter-spacing: 0.04em;
}

.meta-sep {
  color: var(--rule);
}

/* Progress container */

.progress-container {
  margin-top: 2rem;
}

.progress-container.hidden {
  display: none;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.progress-filename {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
}

.progress-percent {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  flex-shrink: 0;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
}

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

.progress-status {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--dim);
  margin-top: 0.75rem;
  text-align: center;
}

/* ============================================
   EDITOR VIEW
   ============================================ */

#view-editor {
  flex-direction: column;
}

/* Editor Header */

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 48px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
  background: var(--bg2);
}

.editor-header-left,
.editor-header-right {
  flex: 0 0 auto;
}

.editor-header-center {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.header-logo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: var(--white);
}

.editor-filename {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--light);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-sep {
  color: var(--rule);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.editor-duration {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--dim);
}

.editor-job-id {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--dim);
  letter-spacing: 0.02em;
}

/* Waveform */

.waveform-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1rem 1.5rem 0.5rem;
}

.waveform-container {
  flex: 1;
  /* #216 — Reserve a minimum vertical budget so the waveform can't be
     squeezed to nothing when the Set Leveler mounts below.  The leveler
     (flex-shrink:0) will claim its own content height; anything beyond
     this minimum still goes to the waveform.  If the viewport is too
     short to fit both, .editor-content scrolls (overflow-y:auto). */
  min-height: 220px;
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  /* Inset shadow frames the waveform and adds depth around the edges */
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(34,197,94,0.06);
  position: relative;
}

/* Subtle horizontal vignette — dims the left/right ends so the
   waveform doesn't look clipped at the container edges */
.waveform-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(14,22,14,0.45) 0%,
    transparent 6%,
    transparent 94%,
    rgba(14,22,14,0.45) 100%
  );
}

.waveform-zoom {
  width: 100%;
  /* #237 — Reserve a 72 px strip at the bottom for the Set Leveler lane so
     the waveform is shown fully and not clipped by the LUFS bars below. */
  height: calc(100% - 72px);
}

.waveform-overview-container {
  margin-top: 0.5rem;
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  /* Lighter inset shadow — overview is a secondary element */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
  position: relative;
}

/* Matching left/right vignette on the overview strip */
.waveform-overview-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    rgba(14,22,14,0.55) 0%,
    transparent 4%,
    transparent 96%,
    rgba(14,22,14,0.55) 100%
  );
}

.waveform-overview {
  width: 100%;
  height: 48px;
}

/* Overview Zoom Overlay */

.overview-zoom-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.zoom-box {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.08);
  border-left: 2px solid rgba(255, 255, 255, 0.7);
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  cursor: grab;
  min-width: 4px;
}

.zoom-box:active {
  cursor: grabbing;
}

.zoom-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  cursor: ew-resize;
  z-index: 6;
  background: rgba(240, 237, 232, 0.15);
  border: 1px solid rgba(240, 237, 232, 0.4);
  transition: background 0.15s, border-color 0.15s;
}

.zoom-handle:hover {
  background: rgba(240, 237, 232, 0.35);
  border-color: rgba(240, 237, 232, 0.7);
}

.zoom-handle-left {
  left: -11px;
  border-right: 2px solid rgba(240, 237, 232, 0.5);
}

.zoom-handle-right {
  right: -11px;
  border-left: 2px solid rgba(240, 237, 232, 0.5);
}

/* Grip — 3 vertical lines */
.zoom-handle::before,
.zoom-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(240, 237, 232, 0.7);
  border-radius: 1px;
  transition: background 0.15s, height 0.15s;
}

.zoom-handle::before {
  left: 6px;
  box-shadow: 4px 0 0 rgba(240, 237, 232, 0.7);
}

.zoom-handle::after {
  /* third line is the box-shadow of ::before, so ::after just adds the second */
  left: 10px;
}

.zoom-handle:hover::before,
.zoom-handle:hover::after {
  background: rgba(240, 237, 232, 0.95);
  height: 26px;
  box-shadow: 4px 0 0 rgba(240, 237, 232, 0.95);
}

/* #222 Hardware-style tool cards — live between the overview and playback
   controls.  Two side-by-side cards (leveler + edit) on wide screens, stacked
   on narrow.  Match the "subtle bordered card" feel of a rack unit.  */

.tool-cards-row {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem 0.5rem;
  flex-shrink: 0;
  align-items: stretch;
}

.tool-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  /* Inner shadow — hint of a hardware recess, matches the waveform container's
     inset-shadow language. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02),
              inset 0 0 14px rgba(0, 0, 0, 0.35),
              0 1px 0 rgba(0, 0, 0, 0.35);
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.leveler-tool-card {
  flex: 1 1 auto;
  min-width: 0;
}

.edit-tool-card {
  flex: 0 0 auto;
  min-width: 320px;
}

.tool-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 16px;
}

.tool-card-title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--dim);
  text-transform: uppercase;
}

.tool-card-header-right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Narrow viewports — stack the two cards vertically. */
@media (max-width: 900px) {
  .tool-cards-row {
    flex-direction: column;
  }
  .edit-tool-card {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Crop/Cut Toolbar */

.crop-cut-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  flex-shrink: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  gap: 0.25rem;
}

.btn-tool {
  height: 26px;
  padding: 0 0.6rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--light);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}

.btn-tool:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--hi);
}

.btn-tool:active {
  background: rgba(34, 197, 94, 0.1);
  transform: scale(0.95);
}

.btn-tool-danger:hover {
  border-color: #EF4444;
  color: #EF4444;
}

.btn-tool-danger:active {
  background: rgba(239, 68, 68, 0.1);
}

/* Toggle / mode button — active state uses the accent fill so the user
   sees which mode they are in at a glance.  Used for CUT MODE. */
.btn-tool-mode.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
}

.btn-tool-mode.active:hover {
  background: var(--accent-dim);
  color: var(--bg);
}

/* #247 — ADD DROP button: green outline/text, green fill when active. */
.btn-add-drop {
  border-color: #22C55E;
  color: #22C55E;
}

.btn-add-drop:hover {
  background: rgba(34, 197, 94, 0.12);
  border-color: #22C55E;
  color: #22C55E;
}

.btn-add-drop.active {
  background: #22C55E;
  border-color: #22C55E;
  color: #0a0a0a;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
}

.btn-add-drop.active:hover {
  background: #16A34A;
  border-color: #16A34A;
  color: #0a0a0a;
}

/* #247 — REMOVE DROP button: red outline/text, red fill when active. */
.btn-remove-drop {
  border-color: #EF4444;
  color: #EF4444;
}

.btn-remove-drop:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #EF4444;
  color: #EF4444;
}

.btn-remove-drop.active {
  background: #EF4444;
  border-color: #EF4444;
  color: #0a0a0a;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.btn-remove-drop.active:hover {
  background: #DC2626;
  border-color: #DC2626;
  color: #0a0a0a;
}

.toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--rule);
  align-self: center;
}

.toolbar-mono {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--dim);
  letter-spacing: 0.04em;
}

/* Fade overlay canvas — draws sine curves at cut edges with interactive handles */

.fade-overlay-canvas {
  /* #237 — Match the waveform's 72 px bottom inset so fade handles line up
     with the visible waveform, not the leveler lane below it. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 72px);
  z-index: 4;
  pointer-events: auto;
}

/* #229 Leveler lane — overlaid on the zoom waveform, full-width.
   Sits in a thin strip at the bottom of the waveform container so the
   LUFS bars / gain curve sit below the waveform body without covering it.
   Clicks pass through to the automation layer (pointer-events:none). */
.leveler-lane-canvas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 72px;
  z-index: 3;
  pointer-events: none;
}


/* #222 Cut-draw overlay canvas — hidden until cut mode is toggled on.
   When active, it sits above the automation canvas so click-drag goes here.
   Visually: dim amber wash + thin red "[ ]" brackets for each pending region. */
.cut-draw-canvas {
  /* #237 — Match the waveform's 72 px bottom inset. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 72px);
  z-index: 7;
  pointer-events: auto;
  cursor: crosshair;
}

.cut-draw-canvas.hidden {
  display: none;
}

/* When cut mode is active, visually hint that the waveform is hijacked. */
.waveform-container.cut-mode {
  box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.2),
              inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.waveform-container {
  position: relative;
}

/* Automation Lane */

/* ---- Set Leveler ---- */

.leveler-section {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: transparent;
  /* #229 — Card now contains ONLY the ON/OFF toggle + pull slider; the lane
     canvas was moved onto the waveform overlay.  Zero outer padding so the
     card's own .tool-card padding is the single source of spacing. */
  padding: 0;
}

/* Fallback (non-#229) leveler canvas if mounted inside the card. */
.leveler-section .leveler-canvas {
  max-width: 100%;
  display: block;
}

.leveler-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.leveler-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
}

.leveler-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  margin-top: -5px;
}

.leveler-slider::-moz-range-track {
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  border: none;
}

.leveler-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
  transform: translateY(calc((4px - 14px) / 2));
}

/* Automation overlay — sits directly on top of the waveform inside
   .waveform-container. Sections tint, gain curve, and draggable points
   all render here with a transparent background so the waveform reads
   through. z-index:5 keeps it above the fade-overlay (4). */
.automation-canvas {
  /* #237 — Match the waveform's 72 px bottom inset. Keeps section tint +
     automation points aligned with the visible waveform pixels. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 72px);
  z-index: 5;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.automation-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--bg3);
  border: 1px solid var(--rule);
  color: var(--light);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 10;
  transition: opacity 0.1s ease;
}

/* #220 — Automation lane toolbar.  Absolutely positioned top-right over the
   waveform so it doesn't steal vertical space from the audio visualisation.
   Buttons are added dynamically by automation.js (addSnapToggleUI). */
.automation-toolbar {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}
.automation-toolbar:empty {
  display: none;
}

.automation-tooltip.hidden {
  display: none;
}

/* Playback Controls */

.controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 56px;
  border-top: 1px solid var(--rule);
  flex-shrink: 0;
  background: var(--bg2);
}

.controls-left,
.controls-center,
.controls-right {
  display: flex;
  align-items: center;
}

.controls-left {
  flex: 0 0 auto;
}

.controls-center {
  gap: 0.5rem;
}

.controls-right {
  flex: 0 0 auto;
  gap: 0.75rem;
}

.btn-reset-audio {
  background: transparent;
  border: none;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.btn-reset-audio:hover {
  color: var(--light);
  background-color: var(--hi);
}

.btn-reset-audio.is-busy {
  color: var(--accent);
  pointer-events: none;
}

.btn-reset-audio.is-done {
  color: #22C55E;
}

.btn-control {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.btn-control:hover {
  border-color: var(--accent);
  color: var(--accent);
  background-color: var(--hi);
}

.btn-control:active {
  background-color: rgba(34, 197, 94, 0.08);
}

.control-icon {
  width: 18px;
  height: 18px;
}

.control-icon.hidden {
  display: none;
}

.time-display {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--light);
  letter-spacing: 0.04em;
  min-width: 5.5em;
  text-align: center;
}

.time-sep {
  color: var(--rule);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* Volume */

.volume-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.volume-icon {
  width: 18px;
  height: 18px;
  color: var(--dim);
  flex-shrink: 0;
}

.slider-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.slider-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.slider-volume::-webkit-slider-thumb:hover {
  background: var(--accent);
}

.slider-volume::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
}

.slider-volume::-moz-range-track {
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  border: none;
}

.slider-volume::-moz-range-progress {
  height: 4px;
  background: var(--dim);
  border-radius: 2px;
}

.slider-volume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  cursor: pointer;
}

.slider-volume::-moz-range-thumb:hover {
  background: var(--accent);
}

/* Peak Meter */

.editor-main {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
}

.editor-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.peak-meter-container {
  width: 60px;
  flex-shrink: 0;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  background: #0D0D0D;
}

.peak-meter-canvas {
  display: block;
}

/* ---- Editor header right ---- */

.editor-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ---- Stepper navigation (#249 Phase A) ---- */

.stepper {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  height: 48px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
  gap: 0;
  user-select: none;
}

.stepper-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.6rem;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  transition: color 0.15s ease;
  outline: none;
}

.stepper-item[data-state='locked'] {
  cursor: not-allowed;
  color: var(--rule);
}

.stepper-item[data-state='visited'] {
  color: var(--light);
}

.stepper-item[data-state='active'] {
  color: var(--accent);
}

.stepper-item:focus-visible {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
  border-radius: 4px;
}

.stepper-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--bg);
  background: transparent;
  border: 1px solid currentColor;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.stepper-item[data-state='locked'] .stepper-dot {
  color: var(--rule);
  background: transparent;
}

.stepper-item[data-state='visited'] .stepper-dot {
  color: var(--mid);
  background: transparent;
}

.stepper-item[data-state='visited']:hover .stepper-dot {
  color: var(--accent);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.25);
}

.stepper-item[data-state='visited']:hover {
  color: var(--accent);
}

.stepper-item[data-state='active'] .stepper-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.stepper-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1;
}

.stepper-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.stepper-connector {
  flex: 0 0 24px;
  height: 1px;
  background: var(--rule);
  align-self: center;
  opacity: 0.6;
}

/* ---- Step panels ---- */

.step-panel {
  display: none;
  flex-direction: column;
  min-height: 0;
  opacity: 1;
}

.step-panel.active {
  display: flex;
}

/* Phase C (#251): crossfade between step panels. JS adds .is-fading-out for
   200ms on the outgoing panel, then swaps active and adds .is-fading-in for
   the first frame of the new panel so it starts at opacity 0 and animates
   to 1 over 100ms. */
.step-panel.is-fading-out {
  display: flex;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.step-panel.is-fading-in {
  opacity: 0;
}

.step-panel.active:not(.is-fading-in):not(.is-fading-out) {
  transition: opacity 0.1s ease;
}

.step-panel#step-panel-eq,
.step-panel#step-panel-pan {
  flex: 1;
}

/* Hide the big waveform on EQ / PAN steps; keep the overview strip visible
   as a navigation aid. */
.waveform-section.waveform-zoom-hidden .waveform-container {
  display: none;
}

.waveform-section.waveform-zoom-hidden {
  flex: 0 0 auto;
}

/* #283 — On EQ / PAN the big waveform is hidden, so the overview's zoom-box
   and its left/right ew-resize handles point at nothing.  Hide them and let
   the overlay catch clicks for seek-only navigation. */
.waveform-section.waveform-zoom-hidden .zoom-box {
  display: none;
}

/* Locked indicators for CROP / SECTIONS after Compute has run. */
.step-locked-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--dim);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px 6px;
  text-transform: uppercase;
  background: transparent;
}

.step-locked-badge.hidden {
  display: none;
}

.step-locked .btn-tool {
  pointer-events: none;
  opacity: 0.45;
}

.step-locked .crop-cut-toolbar {
  filter: grayscale(0.4);
}

/* When sections are locked, the section-boundary handles on the automation
   canvas are made non-interactive by JS, but the CUT MODE overlay should
   also be hidden since the user is past editing. */
.waveform-container.sections-locked .cut-draw-canvas {
  pointer-events: none;
}

/* Pending placeholder for the leveler when analysis is still running. */
.leveler-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--mid);
  text-transform: uppercase;
}

.leveler-pending.hidden {
  display: none;
}

.leveler-pending-text::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  animation: stepper-pulse 1.2s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes stepper-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1.0; transform: scale(1.05); }
}

/* Step navigation bar (Back / Next) — sits above the playback controls. */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  border-top: 1px solid var(--rule);
  background: var(--bg2);
  flex-shrink: 0;
  gap: 1rem;
}

.step-nav:empty {
  display: none;
}

.btn-step {
  height: 30px;
  padding: 0 1rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--light);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-step:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--hi);
}

.btn-step-next {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(34, 197, 94, 0.08);
  margin-left: auto;
}

.btn-step-next:hover {
  background: var(--accent);
  color: var(--bg);
}

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

.btn-step.hidden {
  visibility: hidden;
}

/* Fullwidth tool cards used by single-card step panels. */
.edit-tool-card-fullwidth,
.leveler-tool-card-fullwidth {
  flex: 1 1 auto;
  min-width: 0;
}

/* Legacy tab-content class kept so EQ / PAN modules that look up
   .tab-content continue to function. */
.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tab-content.hidden {
  display: none !important;
}

/* ---- EQ Toggle (bypass switch, used in EQ tab header) ---- */

.eq-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 22px;
  padding: 0 0.5rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  outline: none;
  margin-right: 0.25rem;
}

.eq-toggle:hover {
  border-color: var(--dim);
}

.eq-toggle--on {
  border-color: var(--accent);
  background: rgba(34, 197, 94, 0.08);
}

.eq-toggle--on:hover {
  background: rgba(34, 197, 94, 0.14);
}

.eq-toggle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
  transition: background 0.15s;
}

.eq-toggle-dot--on {
  background: var(--accent);
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
}

.eq-toggle-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  transition: color 0.15s;
}

.eq-toggle--on .eq-toggle-label {
  color: var(--accent);
}

/* ---- Parametric EQ Visualizer ---- */

.eq-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem;
  min-height: 0;
}

.eq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.eq-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--white);
}

.eq-canvas-wrap {
  flex: 1 1 auto;
  min-height: 320px;
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.eq-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.eq-knob-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin-top: 0.6rem;
  padding: 0.35rem 0.5rem;
  flex-shrink: 0;
  gap: 0.5rem;
}

.eq-knob-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 52px;
}

.eq-knob-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

.eq-knob-svg {
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: block;
}

.eq-knob-value {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: #888888;
  letter-spacing: 0.02em;
}

.eq-slope-badge {
  position: absolute;
  box-sizing: border-box;
  background: #0d0d0e;
  border: 1px solid #FB923C;
  border-radius: 3px;
  color: #FB923C;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  padding: 0;
  transition: background-color 0.1s;
  z-index: 2;
}

.eq-slope-badge:hover {
  background: rgba(251, 146, 60, 0.15);
}

/* ---- Panning (single large knob) ---- */

.pan-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  min-height: 0;
  gap: 1.5rem;
}

.pan-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.pan-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--white);
}

.pan-subtitle {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--dim);
}

.pan-knob-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 520px;
}

.pan-axis-label {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--dim);
  width: 1.5rem;
  text-align: center;
  user-select: none;
  flex-shrink: 0;
}

.pan-canvas-wrap {
  position: relative;
  width: min(340px, 60vh);
  height: min(340px, 60vh);
  min-width: 200px;
  min-height: 200px;
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.06) inset;
}

.pan-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

.pan-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  user-select: none;
}

.pan-value-label {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  letter-spacing: 0.22em;
  color: var(--green);
  min-height: 1.6em;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
}

.pan-value-label--centre {
  color: var(--mid);
  text-shadow: none;
}

.pan-hint {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--dim);
}

@media (max-width: 768px) {
  .pan-container {
    padding: 1rem;
    gap: 1rem;
  }

  .pan-canvas-wrap {
    width: min(260px, 60vw);
    height: min(260px, 60vw);
  }

  .pan-value-label {
    font-size: 1.05rem;
  }
}

/* ---- Utility ---- */

.hidden {
  display: none !important;
}

/* ---- Responsive ---- */

/* Prevent horizontal overflow at any width */
#view-editor {
  min-width: 0;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .upload-container {
    padding: 1.5rem;
  }

  .drop-zone {
    padding: 3rem 1.5rem;
  }

  .drop-headline {
    font-size: 1.5rem;
  }

  .editor-header {
    padding: 0 1rem;
  }

  .editor-header-center {
    display: none;
  }

  .waveform-section {
    padding: 0.5rem 0.75rem 0.25rem;
  }

  .tool-cards-row {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .controls-bar {
    padding: 0 1rem;
  }

  .slider-volume {
    width: 60px;
  }

  .eq-container {
    padding: 0.75rem;
  }
}

/* Large screens: slightly more breathing room */
@media (min-width: 1600px) {
  .waveform-section {
    padding: 1.25rem 2rem 0.5rem;
  }

  .controls-bar,
  .editor-header {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .tool-cards-row {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .eq-container {
    padding: 1.25rem 2rem;
  }

  .eq-canvas-wrap {
    min-height: 420px;
  }
}

/* ============================================
   HANDOFF STEP (#250 Phase B)
   ============================================ */

.handoff-root {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  gap: 16px;
  min-height: 0;
}

.handoff {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.handoff-form,
.handoff-pills,
.handoff-done {
  display: flex;
  flex-direction: column;
}

.handoff-form[hidden],
.handoff-pills[hidden],
.handoff-done[hidden] {
  display: none !important;
}

.handoff-form {
  gap: 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 16px 18px;
  background: var(--bg2);
}

.handoff-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.handoff-form-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--white);
  text-transform: uppercase;
}

/* ---- Handoff loudness panel ---- */

.handoff-loudness {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 12px 14px;
  background: var(--bg3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.handoff-loudness-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.handoff-loudness-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--light);
  line-height: 1.4;
}

.handoff-loudness-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.handoff-loudness-reduce-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.handoff-loudness-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.handoff-loudness-floor,
.handoff-loudness-max {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.handoff-loudness-max {
  color: var(--accent);
}

.handoff-loudness-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, var(--accent) var(--pct, 100%), var(--rule) var(--pct, 100%));
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.handoff-loudness-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}

.handoff-loudness-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}

.handoff-loudness-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.handoff-loudness-value-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--dim);
  letter-spacing: 0.04em;
}

.handoff-loudness-value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 500;
}

.handoff-tier-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  color: var(--mid);
  text-transform: uppercase;
}

.handoff-tier-badge[data-tier="paid"] {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(34, 197, 94, 0.08);
}

.handoff-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.handoff-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.handoff-field-email,
.handoff-field-title {
  grid-column: 1 / -1;
}

.handoff-field-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
}

.handoff-field-required {
  color: var(--accent);
  margin-left: 4px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.handoff-input {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.15s ease;
}

.handoff-input:focus {
  border-color: var(--accent);
}

.handoff-input::placeholder {
  color: var(--dim);
}

.handoff-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.handoff-estimate {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mid);
}

.handoff-estimate.hidden {
  display: none !important;
}

.handoff-estimate-label {
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

.handoff-estimate-value {
  color: var(--white);
}

.handoff-estimate-hint {
  color: var(--accent);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.handoff-estimate-hint.hidden {
  display: none !important;
}

.btn-handoff-render {
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #0a0a0a;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 10px 22px;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.18);
  transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
  margin-left: auto;
}

.btn-handoff-render:hover {
  background: var(--accent-dim);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.32);
}

.btn-handoff-render:active {
  transform: scale(0.97);
}

.handoff-form-message {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #ef4444;
  letter-spacing: 0.04em;
}

.handoff-form-message.hidden {
  display: none !important;
}

/* ---- Pill chain ---- */

.handoff-pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 12px 14px;
  background: var(--bg2);
}

.handoff-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--mid);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.handoff-pill-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  flex-shrink: 0;
  position: relative;
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.handoff-pill[data-state="pending"] {
  color: var(--mid);
}

.handoff-pill[data-state="pending"] .handoff-pill-icon {
  border-color: var(--rule);
}

.handoff-pill[data-state="active"] {
  color: var(--white);
  background: rgba(34, 197, 94, 0.06);
}

.handoff-pill[data-state="active"] .handoff-pill-icon {
  border-color: var(--accent);
  animation: handoff-pulse 1.2s ease-in-out infinite;
}

.handoff-pill[data-state="done"] {
  color: var(--light);
}

.handoff-pill[data-state="done"] .handoff-pill-icon {
  background: var(--accent);
  border-color: var(--accent);
}

.handoff-pill[data-state="done"] .handoff-pill-icon::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #0a0a0a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.handoff-pill[data-state="error"] {
  color: #ef4444;
}

.handoff-pill[data-state="error"] .handoff-pill-icon {
  border-color: #ef4444;
  background: #ef4444;
}

.handoff-pill[data-state="error"] .handoff-pill-icon::before,
.handoff-pill[data-state="error"] .handoff-pill-icon::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 2px;
  height: 8px;
  background: #0a0a0a;
}

.handoff-pill[data-state="error"] .handoff-pill-icon::before {
  transform: rotate(45deg);
}

.handoff-pill[data-state="error"] .handoff-pill-icon::after {
  transform: rotate(-45deg);
}

.handoff-pill[data-state="skipped"] {
  color: var(--dim);
}

.handoff-pill[data-state="skipped"] .handoff-pill-label {
  text-decoration: line-through;
}

@keyframes handoff-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
  }
}

/* ---- Done state ---- */

.handoff-done {
  gap: 14px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 18px 20px;
  background: rgba(34, 197, 94, 0.04);
}

.handoff-done-headline {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--white);
  text-transform: uppercase;
}

.handoff-done-sub {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--mid);
  margin: 0;
}

.handoff-done-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-handoff-download {
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #0a0a0a;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 10px 22px;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.22);
  transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.btn-handoff-download:hover {
  background: var(--accent-dim);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.32);
}

.btn-handoff-download:active {
  transform: scale(0.97);
}

.btn-handoff-restart {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--light);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  padding: 9px 18px;
  text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-handoff-restart:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.handoff-magic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.handoff-magic[hidden] {
  display: none !important;
}

.handoff-magic-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
}

.handoff-magic-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--light);
  word-break: break-all;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 8px 10px;
}

/* ============================================
   STEPPER TOOLTIP (#251 Phase C)
   ============================================ */

.stepper-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  background: #050505;
  color: var(--white);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.stepper-tooltip[hidden] {
  display: none;
}

.stepper-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.stepper-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #050505;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transform: translateX(-50%) rotate(45deg);
}

/* ============================================
   MOBILE MAGIC-LINK VIEW (#251 Phase C)
   ============================================ */

.view-mobile-magic {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  color: var(--white);
}

.mobile-magic-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  max-width: 420px;
  width: 100%;
  padding: 28px 22px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.04);
  text-align: center;
}

.mobile-magic-logo {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  font-size: 1.2rem;
  color: var(--light);
  text-align: center;
}

.mobile-magic-status {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}

.mobile-magic-sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mid);
  margin: 0;
}

.mobile-magic-sub:empty {
  display: none;
}

.btn-mobile-magic-download {
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #0a0a0a;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 14px 22px;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.25);
  transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.btn-mobile-magic-download:hover {
  background: var(--accent-dim);
  box-shadow: 0 0 22px rgba(34, 197, 94, 0.4);
}

.btn-mobile-magic-download:active {
  transform: scale(0.97);
}

.mobile-magic-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--dim);
  letter-spacing: 0.08em;
}

.mobile-magic-meta:empty {
  display: none;
}

.mobile-magic-hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ============================================
   CONNECTION BANNER (#259)
   Shown when the browser reports `offline`. Sits above the grain overlay
   so it stays visible regardless of which view is active.
   ============================================ */

.connection-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: #2a1010;
  color: #fda4af;
  border-bottom: 1px solid #4a1818;
  padding: 8px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.connection-banner-text {
  display: inline-block;
}

/* ============================================
   PAYMENT / UPGRADE (#261 / #287)
   ============================================ */

/* ---- Upgrade modal backdrop ---- */

.upgrade-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: upgrade-backdrop-in 0.18s ease;
}

.upgrade-modal-backdrop.hidden {
  display: none;
}

@keyframes upgrade-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.upgrade-modal {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 28px 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(34, 197, 94, 0.12);
  animation: upgrade-modal-in 0.2s ease;
}

@keyframes upgrade-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.upgrade-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 3px;
  transition: color 0.15s ease;
}

.upgrade-modal-close:hover {
  color: var(--white);
}

.upgrade-modal-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.upgrade-modal-logo {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--mid);
}

.upgrade-modal-logo-accent {
  color: var(--accent);
}

.upgrade-modal-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--white);
  text-transform: uppercase;
  font-weight: 400;
}

.upgrade-modal-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mid);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ---- Plan cards ---- */

.upgrade-plans {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upgrade-plan-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 2px 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.upgrade-plan-card:hover:not([disabled]) {
  border-color: var(--accent);
  background: rgba(34, 197, 94, 0.04);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.upgrade-plan-card:active:not([disabled]) {
  transform: scale(0.99);
}

.upgrade-plan-card[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.upgrade-plan-name {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--white);
  grid-column: 1;
  grid-row: 1;
  text-transform: uppercase;
}

.upgrade-plan-price {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent);
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
  font-weight: 500;
}

.upgrade-plan-desc {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--dim);
  letter-spacing: 0.04em;
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 2px;
}

.upgrade-modal-err {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #ef4444;
  letter-spacing: 0.04em;
  margin-top: 10px;
}

.upgrade-modal-err.hidden {
  display: none !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* ---- Editor lock overlay ---- */

.editor-lock-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--locked-pct, 40%);
  z-index: 20;
  pointer-events: auto;
}

.editor-lock-fill {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 6px,
    rgba(0, 0, 0, 0.28) 6px,
    rgba(0, 0, 0, 0.28) 12px
  );
  background-color: rgba(8, 13, 8, 0.55);
  border-left: 2px dashed rgba(34, 197, 94, 0.35);
}

.editor-lock-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 12px;
  white-space: nowrap;
}

.editor-lock-icon {
  color: var(--accent);
  display: flex;
  align-items: center;
}

.editor-lock-icon svg {
  width: 20px;
  height: 20px;
}

.editor-lock-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--light);
  text-transform: uppercase;
}

.editor-lock-btn {
  background: var(--accent);
  border: none;
  border-radius: 3px;
  color: #0a0a0a;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 7px 16px;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
  transition: background-color 0.15s ease, box-shadow 0.2s ease;
}

.editor-lock-btn:hover {
  background: var(--accent-dim);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.38);
}

/* ---- Upload view upgrade nudge ---- */

.upload-upgrade-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 1.5rem;
  padding: 12px 14px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 4px;
  flex-wrap: wrap;
}

.upload-nudge-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--light);
  letter-spacing: 0.04em;
  flex: 1;
  min-width: 0;
}

.upload-nudge-btn {
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 6px 14px;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.upload-nudge-btn:hover {
  background: var(--accent);
  color: #0a0a0a;
}

/* ---- Leveler step upgrade nudge ---- */

.leveler-upgrade-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 14px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 4px;
  flex-wrap: wrap;
}

.leveler-nudge-text {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--light);
  letter-spacing: 0.04em;
  flex: 1;
}

.leveler-nudge-btn {
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 5px 12px;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.leveler-nudge-btn:hover {
  background: var(--accent);
  color: #0a0a0a;
}

/* ---- Handoff upgrade nudge ---- */

.handoff-upgrade-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 4px;
  flex-wrap: wrap;
}

.handoff-upgrade-nudge.hidden {
  display: none !important;
}

.handoff-nudge-text {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--light);
  letter-spacing: 0.04em;
  flex: 1;
}

.handoff-nudge-btn {
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 6px 14px;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.handoff-nudge-btn:hover {
  background: var(--accent);
  color: #0a0a0a;
}

/* ---- Done / email delivery ---- */

.handoff-done-email-msg {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  margin: 0;
  letter-spacing: 0.03em;
}

.handoff-done-email-msg:empty {
  display: none;
}