:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  overflow: hidden;
}

#app { height: 100vh; }

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 16px;
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #334155;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: #94a3b8; font-size: 13px; }

.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 12px;
  text-align: center;
  padding: 24px;
}
.message h2 { margin: 0; font-size: 18px; }
.message p { margin: 0; color: #94a3b8; max-width: 480px; line-height: 1.5; }
.message button {
  margin-top: 16px;
  padding: 10px 24px;
  background: #2563eb;
  color: white;
  border: 1px solid #2563eb;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.message button:hover { background: #1d4ed8; }

.app {
  display: grid;
  grid-template-columns: 1fr 360px;
  /* 4 rows: header / stage+panel / step-strip (auto = collapses to 0
     when the strip is hidden) / footer. */
  grid-template-rows: 56px 1fr auto 64px;
  height: 100vh;
  position: relative; /* anchor for fullscreen overlay children */
}

header {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
  border-bottom: 1px solid #1e293b;
  display: flex; align-items: center; padding: 0 20px;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.vz-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.vz-brand-logo {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  color: white; font-weight: 700; font-size: 15px;
  letter-spacing: -0.5px;
  box-shadow: 0 1px 6px rgba(56, 189, 248, 0.35);
  flex: none;
}
header h1 { font-size: 14px; font-weight: 600; margin: 0; color: #f1f5f9; flex: 1; min-width: 0; }
header .meta { color: #64748b; font-size: 11.5px; }
header .signout,
header .ctrl {
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 100ms, border-color 100ms, color 100ms;
}
header .signout:hover,
header .ctrl:hover { background: #25324a; border-color: #475569; color: #f1f5f9; }

.stage {
  grid-column: 1; grid-row: 2;
  background: #020617;
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.stage .frame {
  position: relative;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 56px - 64px - 32px);
  object-fit: contain;
}
.stage .empty {
  color: #475569; font-size: 14px;
  background: #0f172a;
  border: 1px dashed #1e293b;
  padding: 40px 60px;
  border-radius: 6px;
}
/* Click-to-advance (phase 8a). When armed, the frame shows a subtle
   "click somewhere" cursor and a brief red flash on a wrong click.
   Hint banner sits at the bottom of the panel after 2 wrong clicks. */
.stage .frame.click-to-advance-armed { cursor: pointer; }
.stage .frame.click-to-advance-flash {
  animation: vz-click-flash 0.35s ease-out;
}
@keyframes vz-click-flash {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0), 0 10px 40px rgba(0,0,0,0.5); }
  40%  { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.55), 0 10px 40px rgba(0,0,0,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0), 0 10px 40px rgba(0,0,0,0.5); }
}
.click-fallback-banner {
  margin-top: 14px;
  padding: 10px 12px;
  background: #1e293b;
  border: 1px solid #ef4444;
  color: #fca5a5;
  font-size: 12px;
  border-radius: 4px;
  line-height: 1.5;
}

/* Multi-target overlays (8b/9). Each target is a clickable region on
   top of the screenshot; the label sits in the corner. Z-index above
   blur but below the input prompt. Kind-coloured variants:
   yellow rect = inline text input, purple rect = variable choice. */
.target-overlay {
  position: absolute;
  z-index: 3;
  border: 2px dashed #38bdf8;
  background: rgba(56, 189, 248, 0.10);
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.target-overlay:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: #0ea5e9;
}
.target-overlay[data-kind="input"] {
  border-color: #facc15;
  background: rgba(250, 204, 21, 0.10);
  cursor: text;
  padding: 0;
}
.target-overlay[data-kind="input"]:hover {
  background: rgba(250, 204, 21, 0.20);
  border-color: #eab308;
}
.target-overlay[data-kind="variable"] {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
}
.target-overlay[data-kind="variable"]:hover {
  background: rgba(167, 139, 250, 0.26);
  border-color: #8b5cf6;
}
.target-overlay[data-kind="display"],
.target-overlay-display {
  /* Seamless variable display in the viewer: drop the red dashed
     border + label badge so the painted value reads as if it was the
     form field's own filled value. The white background still hides
     whatever the engineer's recording baked into the screenshot
     underneath. (The editor keeps the red border via the separate
     .editor-target-overlay[data-kind="display"] rule.) */
  border: none;
  background: rgba(255, 255, 255, 0.96);
  cursor: default;
  padding: 0;
  box-shadow: none;
}
.target-overlay[data-kind="display"]:hover {
  background: rgba(255, 255, 255, 0.96);
  border: none;
}
.target-overlay[data-kind="display"] .target-label {
  display: none;
}
.target-display-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: #1f2937;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Tooltip target — green hit-area with a styled speech bubble that
   appears on hover or click. The hit-area itself stays subtle so it
   doesn't dominate the screenshot; the bubble carries the styling. */
.target-overlay[data-kind="tooltip"] {
  border: 2px dashed rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.10);
  cursor: help;
}
.target-overlay[data-kind="tooltip"]:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: #10b981;
}
.target-tooltip-bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -8px);
  background: #1e293b;
  color: white;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  max-width: 320px;
  min-width: 80px;
  white-space: pre-wrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 6;
  pointer-events: none;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.target-tooltip-bubble.shape-rounded { border-radius: 8px; }
.target-tooltip-bubble.shape-square  { border-radius: 0; }
.target-tooltip-bubble.shape-pill    { border-radius: 999px; padding: 8px 18px; }
.target-tooltip-bubble.shape-speech  { border-radius: 12px; }
.target-tooltip-bubble.shape-speech::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: inherit;
  /* Inherit doesn't capture background-color here; fall back to a
     dark slate so the tail is visible against most page backgrounds.
     CSS variables would let the engineer override but the bubbleColor
     JS-injected style on the bubble itself wins through cascade for
     the body. */
  border-top-color: #1e293b;
}
.target-tooltip-bubble[hidden] { display: none; }

/* Image target — overlays imageUrl into the rect; the underlying
   screenshot peeks through any transparent pixels. The rect's border
   is invisible by default so the image looks native. */
.target-overlay[data-kind="image"] {
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.target-overlay[data-kind="image"]:hover {
  border-color: rgba(6, 182, 212, 0.7);
}
.target-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.target-overlay[data-kind="input"] .target-label,
.target-overlay[data-kind="variable"] .target-label {
  /* Lift the kind label slightly so it doesn't overlap the field's
     own text on input rects. */
  top: -22px;
}
.target-overlay[data-kind="input"] .target-label {
  background: #facc15;
  color: #422006;
}
.target-overlay[data-kind="variable"] .target-label {
  background: #a78bfa;
  color: #1e1b4b;
}
/* Inline input field that fills the kind=input overlay's rect.
   Transparent-ish white with a yellow border so it looks like an
   active form field overlaid on the recorded screenshot. JS sets
   font-size/font-family/color via applyDetectedFontStyle so the
   typed text matches the surrounding UI. */
.target-input-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.96);
  color: #1f2937;
  border: 2px solid #facc15;
  border-radius: 2px;
  padding: 0 8px;
  font: inherit;
  font-size: 14px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.22);
  z-index: 4;
  resize: none;
}
textarea.target-input-field { padding: 6px 8px; }
.target-input-field:focus {
  outline: none;
  border-color: #eab308;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.32);
}
.target-overlay .target-label {
  position: absolute;
  top: -22px;
  left: 0;
  background: #38bdf8;
  color: #082f49;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.target-input-prompt {
  position: absolute;
  z-index: 4;
  bottom: -6px;
  left: 0;
  right: 0;
  transform: translateY(100%);
  display: flex;
  gap: 6px;
  padding: 6px;
  background: #0f172a;
  border: 1px solid #38bdf8;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  cursor: default;
}
.target-input-prompt .target-input {
  flex: 1;
  background: #020617;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.target-input-prompt .target-input:focus { border-color: #38bdf8; }
.target-input-prompt .target-input-submit {
  background: #2563eb;
  color: white;
  border: 1px solid #2563eb;
  border-radius: 3px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.target-input-prompt.shake { animation: vz-shake 0.35s ease-out; }
@keyframes vz-shake {
  0%, 100% { transform: translateY(100%) translateX(0); }
  25%      { transform: translateY(100%) translateX(-6px); }
  75%      { transform: translateY(100%) translateX(6px); }
}

/* Editor toggle row (used by 8a click-to-advance, future binary
   per-step toggles). */
.editor-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: start;
  margin: 0;
  padding: 10px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 120ms;
}
.editor-toggle:hover { border-color: #475569; }
.editor-toggle input[type="checkbox"] { margin-top: 3px; }
.editor-toggle > span:not(.editor-toggle-hint) {
  color: #e2e8f0;
  font-size: 13px;
}
.editor-toggle-hint {
  grid-column: 2;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: #94a3b8;
}

/* Step picker thumbnail strip (phase 7b). Read-only, end-user
   surface. Sits between the stage/panel row and the footer when
   visible. Horizontal scroll for long sessions; mouse-wheel scrolls
   horizontally because the strip's vertical extent is fixed. */
.step-strip {
  grid-column: 1 / -1;
  background: #0b1220;
  border-top: 1px solid #1e293b;
  padding: 10px 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  scrollbar-width: thin;
}
.step-strip[hidden] { display: none; }
.step-strip-tile {
  flex: 0 0 auto;
  position: relative;
  width: 96px; height: 60px;
  padding: 0;
  background: #020617;
  border: 2px solid #1e293b;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-strip-tile:hover { border-color: #475569; }
.step-strip-tile.active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35); }
.step-strip-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step-strip-num {
  position: absolute;
  bottom: 2px; left: 4px;
  background: rgba(0,0,0,0.65);
  color: white;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
}
.step-strip-empty { color: #475569; font-size: 10px; }
.step-strip-slide {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; letter-spacing: 0.1em;
  color: white;
  background: linear-gradient(180deg, #1e293b 0%, #0b1220 100%);
}
.step-strip-slide.kind-title { background: linear-gradient(180deg, #1e3a8a 0%, #0b1220 100%); }
.step-strip-slide.kind-ending { background: linear-gradient(180deg, #334155 0%, #0b1220 100%); }
.step-strip-slide.kind-placeholder { background: linear-gradient(180deg, #92400e 0%, #1c1917 100%); color: #fcd34d; }

/* Title / ending slides (phase 7a). Full-bleed centred card with
   no screenshot - just heading + narrated body. Distinct color rims
   for kind=title (blue) vs kind=ending (slate) so the engineer can
   tell them apart at a glance in the picker / timeline. */
.stage .frame.slide {
  width: min(72%, 920px);
  max-width: calc(100% - 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1e293b 0%, #0b1220 100%);
  border-radius: 14px;
  border: 1px solid #334155;
  padding: 56px 48px;
  min-height: 320px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.stage .frame.slide.kind-title { border-color: #2563eb; }
.stage .frame.slide.kind-ending { border-color: #475569; }
.stage .frame.slide.kind-placeholder { border-color: #f59e0b; background: linear-gradient(180deg, #3a1f0b 0%, #0b1220 100%); }
.stage .frame.slide.kind-placeholder .slide-kind-label { color: #fcd34d; }
.slide-card { text-align: center; max-width: 720px; }
.slide-kind-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 14px;
}
.slide-caption {
  font-size: 38px;
  line-height: 1.2;
  color: white;
  margin: 0 0 18px;
  font-weight: 600;
}
.slide-narration {
  font-size: 16px;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0;
  white-space: pre-wrap;
}

.blur-rect {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  backdrop-filter: blur(16px) saturate(0.4);
  -webkit-backdrop-filter: blur(16px) saturate(0.4);
  background: rgba(15, 23, 42, 0.35);
  border-radius: 2px;
}
.hotspot {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.hotspot.kind-rect {
  border: 2px solid #f59e0b;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
  animation: vz-pulse-ring 1.6s ease-in-out infinite;
}
/* Dot / pulse render as squares (not circles) so the HTML / inline
   viewer / instructions doc / MP4 / DOCX bakes all draw the same
   shape - ffmpeg's drawbox filter has no native circle primitive
   without bundled-font hacks, and consistency across surfaces beats
   a slightly nicer-looking HTML circle. */
.hotspot.kind-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35);
}
.hotspot.kind-pulse {
  background: #f59e0b;
  animation: vz-pulse-dot 1.4s ease-out infinite;
}
@keyframes vz-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50%      { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
}
@keyframes vz-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.panel {
  grid-column: 2; grid-row: 2;
  background: #0f172a;
  border-left: 1px solid #1e293b;
  overflow-y: auto;
  padding: 22px 24px;
}
.panel .step-num {
  color: #64748b;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.panel h2 { font-size: 18px; line-height: 1.35; margin: 6px 0 14px; color: #f1f5f9; font-weight: 600; }
.panel h2 strong { color: #fcd34d; font-weight: 700; }
.panel .narration { color: #cbd5e1; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.panel .step-meta {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #1e293b;
  color: #475569;
  font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  word-break: break-all;
}

footer {
  grid-column: 1 / -1; grid-row: 4;
  background: linear-gradient(180deg, #172033 0%, #1e293b 100%);
  border-top: 1px solid #1e293b;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 20px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.step-strip { grid-column: 1 / -1; grid-row: 3; }
button.ctrl {
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #334155;
  border-radius: 6px;
  font-size: 12px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 100ms, border-color 100ms, color 100ms;
}
button.ctrl:hover { background: #25324a; border-color: #475569; color: #f1f5f9; }
button.ctrl.primary {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border-color: #1d4ed8;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 4px rgba(37, 99, 235, 0.35);
}
button.ctrl.primary:hover { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); border-color: #2563eb; color: white; }
button.ctrl:disabled { opacity: 0.4; cursor: not-allowed; }
/* Next-chapter button — visually distinct so it reads as a transition
   away from the current chapter rather than another in-chapter step. */
button.ctrl.ctrl-chapter {
  background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
  border-color: #0ea5e9;
  color: #082f49;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(56, 189, 248, 0.35);
}
button.ctrl.ctrl-chapter:hover { background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 100%); }
button.ctrl.ctrl-chapter[hidden] { display: none; }
.progress { color: #94a3b8; font-size: 12px; min-width: 80px; text-align: center; }
.progress strong { color: white; font-weight: 600; }

/* Fullscreen mode (F or the ⛶ button) — hide chrome, expand stage to
   100% of the screen, and overlay caption + narration in curved
   pill-style boxes that float above the screenshot. The stage itself
   keeps interactivity (hotspots / inputs work) since only the side
   panel + footer are visually displaced. */
.vz-fs-title,
.vz-fs-narration {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(900px, 80vw);
  z-index: 30;
  pointer-events: none;
  font-family: inherit;
  text-align: center;
  background: rgba(15, 23, 42, 0.78);
  color: #f1f5f9;
  border: 1px solid rgba(148, 163, 184, 0.25);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  display: none;
}
.vz-fs-title {
  top: 28px;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.vz-fs-title strong { color: #fcd34d; font-weight: 700; }
.vz-fs-narration {
  bottom: 32px;
  padding: 16px 32px;
  border-radius: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #e2e8f0;
  white-space: pre-wrap;
}
.app.vz-fullscreen > header,
.app.vz-fullscreen > .panel,
.app.vz-fullscreen > footer {
  display: none;
}
.app.vz-fullscreen > .step-strip {
  position: absolute;
  bottom: 110px; left: 50%; transform: translateX(-50%);
  z-index: 40;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 14px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  backdrop-filter: blur(10px);
  max-width: 90vw;
}
.app.vz-fullscreen > .step-strip[hidden] { display: none; }
.app.vz-fullscreen > .stage {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.app.vz-fullscreen .vz-fs-title:not([hidden]),
.app.vz-fullscreen .vz-fs-narration:not([hidden]) { display: block; }
.app.vz-fullscreen img {
  max-height: 100vh !important;
}

/* Picker (project + session selection) */
.picker {
  display: flex; flex-direction: column;
  height: 100vh;
  background: #0b1220;
}
/* Brand header — same V mark + gradient as the editor so the picker
   feels like the entry point to the same app rather than a separate
   page. */
.picker-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
  border-bottom: 1px solid #1e293b;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.picker-header::before {
  content: 'V';
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  color: white; font-weight: 700; font-size: 15px;
  letter-spacing: -0.5px;
  box-shadow: 0 1px 6px rgba(56, 189, 248, 0.35);
  flex: none;
}
.picker-header h1 {
  font-size: 14px; font-weight: 600;
  margin: 0; color: #f1f5f9;
  flex: 1;
  letter-spacing: 0;
}
.picker-header .meta {
  color: #64748b;
  font-size: 11.5px;
}
.picker-header .signout,
.picker-header .back-to-picker {
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 100ms, border-color 100ms, color 100ms;
}
.picker-header .signout:hover,
.picker-header .back-to-picker:hover { background: #25324a; border-color: #475569; color: #f1f5f9; }
.picker-header .admin-link {
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.picker-header .admin-link:hover { background: rgba(56, 189, 248, 0.20); border-color: #38bdf8; }

/* Show-deleted toggle in the picker header. Quiet by default; pulses
   amber when on so the user remembers they are looking at trash. */
.picker-show-deleted {
  display: inline-flex; align-items: center; gap: 6px;
  color: #94a3b8;
  font-size: 11.5px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: #1e293b;
  user-select: none;
  transition: background 100ms, border-color 100ms, color 100ms;
}
.picker-show-deleted:hover { background: #25324a; border-color: #475569; color: #cbd5e1; }
.picker-show-deleted input { margin: 0; cursor: pointer; accent-color: #f59e0b; }
.picker-show-deleted:has(input:checked) {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.10);
}

.picker-customer-host {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}
.customer-label {
  display: flex; align-items: center; gap: 6px;
  color: #64748b; font-size: 11.5px;
}
.customer-label-single strong { color: #e2e8f0; }
.customer-select {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  font-family: inherit;
  min-width: 180px;
  transition: border-color 100ms, box-shadow 100ms;
}
.customer-select:hover { border-color: #475569; }
.customer-select:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18); }

/* Admin page */
.admin { display: flex; flex-direction: column; height: 100vh; }
.admin-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
  display: flex; flex-direction: column; gap: 24px;
}
.admin-section { background: #1e293b; border: 1px solid #334155; border-radius: 6px; padding: 18px 22px; }
.admin-section h2 { margin: 0 0 14px; font-size: 14px; color: #cbd5e1; font-weight: 600; }
.admin-customers { display: flex; flex-direction: column; gap: 10px; }
.admin-customer-row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 4px;
}
.admin-customer-summary { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.admin-customer-summary strong { color: #e2e8f0; font-size: 14px; }
.admin-customer-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: #64748b; }
.admin-customer-desc { font-size: 12px; }
.admin-customer-groups { font-size: 11px; }
.admin-customer-actions { display: flex; gap: 8px; }
.admin-customer-edit {
  padding: 14px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 4px;
}
.admin-customer-actions button,
.admin-form button {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.admin-customer-actions button:hover,
.admin-form button:hover { border-color: #475569; }
.admin-form button.primary { background: #2563eb; border-color: #2563eb; color: white; }
.admin-form button.primary:hover { background: #1d4ed8; }
.admin-form button.danger { color: #fca5a5; border-color: #b91c1c; }
.admin-form button.danger:hover { background: #7f1d1d; color: white; }

.admin-form { display: flex; flex-direction: column; gap: 12px; }
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #94a3b8; }
.admin-form input[type="text"],
.admin-form textarea {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
.admin-form textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.admin-form .form-hint { color: #64748b; font-size: 11px; }
.admin-form .form-hint code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: #0f172a;
  padding: 1px 4px;
  border-radius: 3px;
}
.admin-form .form-actions { display: flex; gap: 12px; align-items: center; padding-top: 4px; }
.admin-form .form-status { color: #94a3b8; font-size: 12px; }
.admin-form .form-status.form-error { color: #fca5a5; }

.pill.pill-info { background: #1e40af; color: #bfdbfe; }

/* Phase 14b: interactive input controls overlaid on the screenshot. */
.input-overlay {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #2563eb;
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.input-overlay .input-text {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
}
.input-overlay textarea.input-text { font-family: inherit; resize: vertical; }
.input-overlay .input-text:focus { outline: none; border-color: #2563eb; }
.input-overlay .input-select {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
}
.input-overlay .input-radio,
.input-overlay .input-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e2e8f0;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
}
.input-overlay .input-submit {
  background: #2563eb;
  color: white;
  border: 1px solid #2563eb;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  align-self: flex-start;
}
.input-overlay .input-submit:hover { background: #1d4ed8; }
.input-overlay .input-error {
  color: #fca5a5;
  font-size: 12px;
}

/* Phase 14 follow-up (2026-05-12): when the input is positioned over
   the real form field (inputRect derived from the anchor capture's
   meta.rect), drop the dark card chrome so the underlying form field
   shows through. The input itself becomes a transparent text field
   sized to the form's input. The Continue button has been removed —
   Enter submits text, Ctrl+Enter submits multiline, and the footer's
   Next button takes over as the universal "go" affordance. */
.input-overlay.transparent {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  gap: 0;
  flex-direction: column;
  align-items: stretch;
}
.input-overlay.transparent .input-text,
.input-overlay.transparent textarea.input-text {
  flex: 1;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.96);
  color: #1f2937;
  border: 2px solid #2563eb;
  border-radius: 2px;
  padding: 0 8px;
  font-family: inherit;
  /* font-size is set by JS via applyDetectedFontStyle so it scales
     with the rendered control's height. CSS gives a safe fallback. */
  font-size: 14px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
  resize: none;
}
.input-overlay.transparent textarea.input-text { padding: 6px 8px; }
.input-overlay.transparent .input-text:focus {
  outline: none;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.32);
}
.input-overlay.transparent .input-select {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.96);
  color: #1f2937;
  border: 2px solid #2563eb;
  border-radius: 2px;
  padding: 0 8px;
  font-family: inherit;
  font-size: 14px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
  cursor: pointer;
}
.input-overlay.transparent .input-error {
  /* Error sits just below the field, off the right edge so the form
     field stays readable. */
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: rgba(127, 29, 29, 0.92);
  color: #fecaca;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Radio + checkbox + any other "list" input that can't sit on a single
   form-field rect. Rendered as a small white card anchored near the
   inputRect with the option list inside. The card is allowed to grow
   past the rect — width:auto, height:auto — so all options stay
   visible regardless of how small the anchor capture's element was. */
.input-overlay.list-card {
  background: rgba(255, 255, 255, 0.97);
  border: 2px solid #2563eb;
  color: #1f2937;
  border-radius: 4px;
  padding: 12px 14px;
  gap: 6px;
  flex-direction: column;
  align-items: flex-start;
  min-width: 200px;
  width: max-content;
  max-width: min(420px, 80vw);
  height: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.input-overlay.list-card .input-radio,
.input-overlay.list-card .input-checkbox {
  color: #1f2937;
}
.input-overlay.list-card .input-error {
  color: #b91c1c;
  background: transparent;
  padding: 0;
  margin-top: 4px;
}

/* Phase 14 follow-up (2026-05-12): substituted-value overlay drawn on
   top of the recorded screenshot at the field's rect. The recorded
   "john.doe" stays in the underlying PNG; this overlay paints over it
   with the viewer's actual typed value so subsequent type screens
   read as the viewer's session, not the engineer's. */
.value-overlay {
  background: rgba(255, 255, 255, 0.98);
  color: #1f2937;
  /* font-size + font-family + color get overridden by JS via
     applyDetectedFontStyle so they track the recorded field. CSS
     gives a safe fallback for tainted-canvas / no-image cases. */
  font-size: 14px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #93c5fd;
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame .input-hotspot-pick {
  border: 2px dashed rgba(37, 99, 235, 0.6);
  background: rgba(37, 99, 235, 0.08);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.frame .input-hotspot-pick:hover {
  background: rgba(37, 99, 235, 0.2);
  border-color: #60a5fa;
}
.display-variable-slide .display-variable-card {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #e2e8f0;
  padding: 24px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  min-height: 80px;
  max-width: 80%;
  margin: auto;
}
.display-variable-slide .display-variable-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 48px;
  width: 100%;
}
/* Constrain the content inside the scroll host instead of the scroll
   host itself — keeps the scrollbar pinned to the window edge while
   the cards stay readable-width-centered. */
.picker-body > * {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.picker-loading, .picker-empty-row {
  color: #64748b;
  font-size: 13px;
  padding: 12px 0;
  font-style: italic;
}

.picker-empty {
  text-align: center;
  padding: 80px 16px;
  color: #94a3b8;
}
.picker-empty h2 { margin: 0 0 8px; color: #e2e8f0; font-size: 18px; }
.picker-empty p { margin: 0 auto; max-width: 480px; line-height: 1.55; font-size: 13px; color: #64748b; }

.picker-error {
  color: #fca5a5;
  font-size: 13px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.10);
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.30);
}

.picker-project {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 16px 20px 18px;
  margin-bottom: 14px;
  transition: border-color 100ms;
}
.picker-project:hover { border-color: #334155; }
.picker-project header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid #1e293b;
}
.picker-project-title { flex: 1; min-width: 0; }
.picker-project header h2 { margin: 0; font-size: 14.5px; font-weight: 600; color: #f1f5f9; }
.picker-project .picker-meta { color: #64748b; font-size: 11.5px; margin-top: 3px; display: block; }
.picker-project-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Phase 15: per-project cost pill on the picker — tenant admins only.
   Inline with the access / lock pills; same shape as the editor's
   ed-cost pill so the visual vocabulary is consistent. */
.picker-cost-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  color: #86efac;
  font-variant-numeric: tabular-nums;
}
.picker-cost-pill .picker-cost-icon {
  color: #4ade80;
  font-weight: 700;
  font-size: 12px;
}
.picker-cost-pill .picker-cost-value::before { content: ''; }
.picker-cost-pill.picker-cost-warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.40);
  color: #fcd34d;
}
.picker-cost-pill.picker-cost-warn .picker-cost-icon { color: #fbbf24; }
.picker-project-actions { display: flex; align-items: center; gap: 4px; flex: none; }

/* Deleted projects fade slightly so the active ones still read first. */
.picker-project-deleted {
  background: #0c111c;
  border-color: rgba(239, 68, 68, 0.25);
  opacity: 0.92;
}
.picker-project-deleted:hover { border-color: rgba(239, 68, 68, 0.45); }
.picker-project-deleted .picker-project-title h2 { color: #cbd5e1; }

/* Soft-delete pill — same shape as the status pills, amber tone so it
   contrasts with the green "ready" and reads as an alert state. */
.pill.pill-deleted {
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.40);
}
/* Phase 15: completion lock + contributor-only pills. */
.pill.pill-locked {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.40);
  font-variant-emoji: text;
}
.pill.pill-contributor {
  background: rgba(56, 189, 248, 0.10);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.35);
}
.picker-contributor-hint {
  background: rgba(56, 189, 248, 0.06);
  border: 1px dashed rgba(56, 189, 248, 0.30);
  color: #cbd5e1;
  font-style: normal;
  padding: 12px 14px;
  border-radius: 6px;
  line-height: 1.5;
}
.picker-contributor-hint strong { color: #7dd3fc; }
.picker-purge-note {
  font-size: 11px; color: #94a3b8;
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed rgba(245, 158, 11, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Compact icon buttons (✎ pencil / 🗑 trash / ↺ restore) — match the
   editor's quiet ed-icon style so the picker reads as the same app. */
.picker-icon-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #334155;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 100ms, border-color 100ms, color 100ms;
}
.picker-icon-btn:hover { background: #25324a; border-color: #475569; color: #f1f5f9; }
.picker-icon-btn-danger:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}
.picker-icon-btn-label { font-size: 11.5px; }
.picker-restore {
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
}
.picker-restore:hover { background: rgba(56, 189, 248, 0.22); border-color: #38bdf8; color: #e0f2fe; }
.picker-row-hint { font-size: 11px; color: #94a3b8; font-style: italic; }

.picker-sessions { display: flex; flex-direction: column; gap: 6px; }
.picker-session {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid #1e293b;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 100ms, border-color 100ms;
}
.picker-session:hover:not(.picker-session-disabled) {
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.35);
}
.picker-session-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.picker-session-when { color: #f1f5f9; font-weight: 500; }
.picker-session-counts { color: #64748b; font-size: 11.5px; }
.picker-session .pill {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
  border: 1px solid transparent;
}
.picker-session .pill.ok   { background: rgba(16, 185, 129, 0.12);  color: #6ee7b7; border-color: rgba(16, 185, 129, 0.30); }
.picker-session .pill.warn { background: rgba(245, 158, 11, 0.12);  color: #fcd34d; border-color: rgba(245, 158, 11, 0.30); }
.picker-session .pill.bad  { background: rgba(239, 68, 68, 0.12);   color: #fca5a5; border-color: rgba(239, 68, 68, 0.30); }

.picker-session-actions { display: flex; gap: 6px; }
.picker-session-actions button {
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #334155;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: background 100ms, border-color 100ms;
}
.picker-session-actions button:hover:not(:disabled) {
  color: #f1f5f9;
  border-color: #475569;
  background: #25324a;
}
.picker-session-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* New-recording / new-project CTA in the picker (Edit / View / New
   recording buttons) — picks up the primary gradient so it stands out
   from the row's transparent / quiet styling. */
.picker-session-actions button.picker-action-primary {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border-color: #1d4ed8;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 4px rgba(37, 99, 235, 0.35);
}
.picker-session-actions button.picker-action-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: #2563eb;
}

/* Editor (caption + narration) */
.editor {
  display: grid;
  grid-template-columns: 240px 1fr 420px;
  grid-template-rows: 56px 1fr;
  height: 100vh;
}
.editor > header.ed-header {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
  border-bottom: 1px solid #1e293b;
  display: flex; align-items: center; padding: 0 16px;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* Brand cluster on the left — V logo + project name + session meta. */
.ed-brand {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  max-width: 320px;
}
.ed-brand-logo {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  color: white;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.5px;
  box-shadow: 0 1px 6px rgba(56, 189, 248, 0.35);
  flex: none;
}
.ed-brand-text { min-width: 0; line-height: 1.2; }
.ed-brand-text h1 {
  font-size: 13px; font-weight: 600; margin: 0; color: #f1f5f9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 0; max-width: 100%;
}
#ed-project-name {
  overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.ed-project-rename {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: #475569;
  width: 20px; height: 20px;
  padding: 0;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms, color 80ms, background 80ms, border-color 80ms;
  flex: none;
}
.ed-brand-text h1:hover .ed-project-rename { opacity: 1; }
.ed-project-rename:hover {
  color: #e2e8f0;
  background: #1e293b;
  border-color: #334155;
}
.ed-brand-text .meta {
  display: block;
  color: #64748b;
  font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Chapter switcher — lives in the brand area and looks like a quiet
   secondary meta row until hovered/opened. Single-line summary
   collapses to ellipsis on narrow screens. */
.ed-chapter-switcher { display: block; }
.ed-chapter-switcher > summary { display: block; }
.ed-chapter-summary {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 1px 6px 1px 4px !important;
  margin-top: 1px;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  border-radius: 4px !important;
  white-space: nowrap;
  cursor: pointer;
  max-width: 260px;
}
.ed-chapter-summary:hover { background: rgba(56, 189, 248, 0.08) !important; color: #cbd5e1 !important; }
.ed-chapter-switcher[open] > .ed-chapter-summary {
  background: rgba(56, 189, 248, 0.10) !important;
  color: #e2e8f0 !important;
  border-color: transparent !important;
}
.ed-chapter-summary-title {
  font-weight: 500;
  color: #cbd5e1;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-chapter-switcher[open] .ed-chapter-summary-title { color: #f1f5f9; }
.ed-chapter-summary-meta {
  color: #64748b;
  font-size: 11px;
}
.ed-chapter-pop {
  min-width: 280px;
  max-width: 360px;
}
.ed-chapter-list {
  display: flex; flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}
.ed-chapter-loading, .ed-chapter-empty {
  padding: 8px 10px;
  color: #64748b;
  font-size: 12px;
  font-style: italic;
}
.ed-chapter-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 4px 10px;
  border-radius: 6px;
  transition: background 80ms;
}
.ed-chapter-item:hover { background: #1e293b; }
.ed-chapter-item.active { background: rgba(56, 189, 248, 0.10); }
.ed-chapter-item.active:hover { background: rgba(56, 189, 248, 0.14); }
.ed-chapter-item.editing { background: rgba(56, 189, 248, 0.10); }
.ed-chapter-item-num {
  flex: none;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #1e293b;
  color: #94a3b8;
  font-size: 11px; font-weight: 600;
  border: 1px solid #334155;
}
.ed-chapter-item.active .ed-chapter-item-num {
  background: #38bdf8;
  color: #082f49;
  border-color: #38bdf8;
}
/* Main click target — uses flex so the title + meta stack inside the
   row. Set as a button so keyboard focus + Enter still navigate. */
.ed-chapter-go {
  appearance: none;
  background: transparent;
  border: none;
  color: #e2e8f0;
  padding: 4px 4px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column;
  min-width: 0; flex: 1;
  gap: 1px;
}
.ed-chapter-item.active .ed-chapter-go { cursor: default; }
.ed-chapter-item-title {
  font-size: 12.5px;
  color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-chapter-item-meta {
  font-size: 11px;
  color: #64748b;
}
/* Inline edit input — replaces .ed-chapter-go when editing. */
.ed-chapter-edit-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 12.5px;
  padding: 5px 8px;
  background: #0b1220;
  border: 1px solid #38bdf8;
  border-radius: 4px;
  color: #f1f5f9;
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18);
}
/* Pencil rename button — invisible until the row is hovered or the
   row is currently being edited. */
.ed-chapter-rename {
  flex: none;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: #64748b;
  width: 24px; height: 24px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms, background 80ms, color 80ms, border-color 80ms;
}
.ed-chapter-item:hover .ed-chapter-rename,
.ed-chapter-item:focus-within .ed-chapter-rename { opacity: 1; }
.ed-chapter-rename:hover {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}
.ed-chapter-item.editing .ed-chapter-rename { display: none; }
.ed-chapter-item.editing .ed-chapter-delete { display: none; }
/* Trash button — same opacity-on-hover pattern as the pencil but
   tints red on hover so it reads as destructive. */
.ed-chapter-delete {
  flex: none;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: #64748b;
  width: 24px; height: 24px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms, background 80ms, color 80ms, border-color 80ms;
}
.ed-chapter-item:hover .ed-chapter-delete,
.ed-chapter-item:focus-within .ed-chapter-delete { opacity: 1; }
.ed-chapter-delete:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
}
.ed-menu-hint {
  font-size: 10.5px;
  color: #64748b;
  padding: 4px 10px 2px;
  font-style: italic;
}

.ed-header-spacer { flex: 1 1 auto; min-width: 0; }

/* Cost button — at-a-glance project spend. Click to refresh; tooltip
   carries the per-service breakdown. */
.ed-cost {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #334155;
  color: #cbd5e1;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, border-color 120ms;
}
.ed-cost:hover { background: rgba(15, 23, 42, 0.85); border-color: #475569; }
.ed-cost-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #2563eb;
  color: white;
  font-size: 10.5px;
  font-weight: 700;
}
.ed-cost-value { letter-spacing: 0; min-width: 24px; text-align: center; }
.ed-cost-value::before { content: '$'; opacity: 0.55; margin-right: 1px; }
.ed-cost.ed-cost-warn {
  background: #422006;
  border-color: #b45309;
  color: #fed7aa;
}
.ed-cost.ed-cost-warn .ed-cost-icon { background: #f59e0b; }
.ed-cost.ed-cost-refreshing {
  animation: ed-cost-pulse 0.7s ease-in-out;
}
@keyframes ed-cost-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6); }
  50%  { box-shadow: 0 0 0 6px rgba(56, 189, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

/* Right-side action cluster — dropdowns + primary "Open viewer" +
   user menu. Spacing is tight enough that 4 menus + 1 button + 1
   icon menu fit comfortably on a 1366px screen. */
.ed-toolbar {
  display: flex; align-items: center; gap: 6px;
  flex: none;
}

/* Dropdown menu (native <details>). Marker is hidden — we render our
   own caret in the summary so we can position it where we want. */
.ed-menu { position: relative; }
.ed-menu > summary { list-style: none; }
.ed-menu > summary::-webkit-details-marker { display: none; }
.ed-menu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #cbd5e1;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 100ms, border-color 100ms, color 100ms;
}
.ed-menu-btn:hover { background: #1e293b; color: #f1f5f9; }
.ed-menu[open] > .ed-menu-btn {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
.ed-menu-btn-icon { padding: 6px 8px; }
.ed-caret {
  font-size: 9px;
  opacity: 0.65;
  transition: transform 150ms;
}
.ed-menu[open] .ed-caret { transform: rotate(180deg); opacity: 1; }
.ed-user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #334155;
  color: #cbd5e1;
  font-size: 12px;
  letter-spacing: 1px;
}

/* The popout. Floats below the summary; right-anchored variant pulls
   the user menu / right-most menus back into the viewport. */
.ed-menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-width: 320px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 50;
  animation: ed-menu-pop-in 120ms ease-out;
}
.ed-menu-pop-right { left: auto; right: 0; }
@keyframes ed-menu-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ed-menu-section {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  padding: 6px 10px 2px;
}
.ed-menu-divider {
  height: 1px;
  background: #1e293b;
  margin: 4px 0;
}
.ed-menu-item {
  appearance: none;
  background: transparent;
  border: none;
  color: #e2e8f0;
  padding: 7px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  transition: background 80ms;
}
.ed-menu-item:hover { background: #1e293b; }
.ed-menu-item:active { background: #334155; }
.ed-menu-item:disabled { color: #475569; cursor: not-allowed; background: transparent; }
.ed-menu-item-action {
  color: #7dd3fc;
  font-weight: 500;
}
.ed-menu-item-action:hover { background: rgba(56, 189, 248, 0.12); color: #e0f2fe; }
.ed-menu-item-danger { color: #fca5a5; }
.ed-menu-item-danger:hover { background: rgba(248, 113, 113, 0.12); color: #fecaca; }

/* Primary "Open viewer" call-to-action sits between the dropdowns and
   the user menu; subtle gradient + brand sky-blue to communicate it's
   the main play path. */
.ed-primary-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border: 1px solid #1d4ed8;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 4px rgba(37, 99, 235, 0.35);
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.ed-primary-btn:hover {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 2px 10px rgba(37, 99, 235, 0.45);
}

.editor-list {
  grid-column: 1; grid-row: 2;
  background: #1e293b;
  border-right: 1px solid #334155;
  overflow-y: auto;
  padding: 12px 0;
}
.editor-row {
  display: grid;
  grid-template-columns: 16px 28px 1fr auto auto;
  align-items: center;
  width: 100%;
  padding: 10px 10px 10px 8px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 12px;
  gap: 8px;
  user-select: none;
  position: relative;
}
.editor-row:hover { background: #0f172a; }
.editor-row.selected {
  background: #0f172a;
  border-left-color: #2563eb;
  color: white;
}
.editor-row.selected:focus { outline: none; }
.editor-row.dragging { opacity: 0.4; }
.editor-row.drop-before { border-top-color: #2563eb; }
.editor-row.drop-after { border-bottom-color: #2563eb; }
.editor-drag-handle {
  color: #475569;
  cursor: grab;
  font-size: 12px;
  letter-spacing: -2px;
  text-align: center;
  line-height: 1;
}
.editor-row:hover .editor-drag-handle { color: #94a3b8; }
.editor-drag-handle:active { cursor: grabbing; }
.editor-row-num {
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
}
.editor-row-cap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.editor-row.selected .editor-row-num { color: #94a3b8; }
.editor-row-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f59e0b;
}
/* Slide-kind badge in the row (T = title, E = ending). Sits between
   the row number and caption so the engineer can spot pseudo-steps
   in the timeline at a glance. */
.editor-row-slide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #334155;
}
.editor-row-slide-title { background: #1e3a8a; color: #bfdbfe; border-color: #2563eb; }
.editor-row-slide-ending { background: #334155; color: #cbd5e1; border-color: #475569; }
.editor-row-slide-placeholder { background: #92400e; color: #fcd34d; border-color: #f59e0b; }

/* Slide preview on the editor stage. Mirrors the player's slide-card
   styling so the engineer sees what the renderers will show. The
   form pane on the right keeps caption + narration editable - this
   pane is read-only preview only. */
.editor-stage-slide {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  background: linear-gradient(180deg, #1e293b 0%, #0b1220 100%);
  border-radius: 12px;
  border: 1px solid #334155;
  margin: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.editor-stage-slide.kind-title { border-color: #2563eb; }
.editor-stage-slide.kind-ending { border-color: #475569; }
.editor-stage-slide.kind-placeholder { border-color: #f59e0b; background: linear-gradient(180deg, #3a1f0b 0%, #0b1220 100%); }
.editor-stage-slide.kind-placeholder .slide-kind-label { color: #fcd34d; }
.editor-stage-slide .slide-card { text-align: center; max-width: 720px; color: #e2e8f0; }
.editor-stage-slide .slide-caption { font-size: 38px; line-height: 1.2; color: white; margin: 0 0 18px; font-weight: 600; min-height: 1.2em; }
.editor-stage-slide .slide-narration { font-size: 16px; line-height: 1.55; color: #cbd5e1; margin: 0 0 24px; white-space: pre-wrap; min-height: 1.55em; }
.editor-stage-slide .slide-edit-hint { font-size: 12px; color: #64748b; margin: 0; padding-top: 12px; border-top: 1px solid #334155; }

.editor-row-delete,
.editor-row-duplicate {
  background: transparent;
  border: none;
  color: #475569;
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editor-row:hover .editor-row-delete,
.editor-row:hover .editor-row-duplicate { color: #94a3b8; }
.editor-row-delete:hover { background: #7f1d1d; color: white; }
.editor-row-duplicate:hover { background: #1e3a8a; color: white; }

.editor-stage {
  grid-column: 2; grid-row: 2;
  background: #020617;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  position: relative;
}
/* When zoomed beyond 100% the frame may exceed viewport size; switch
   to overflow:auto and pin layout to top-left so scrollbars work and
   the user can pan with the scroll wheel / drag the scrollbars. */
.editor-stage.ed-stage-zoomed {
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
}
.editor-stage-frame {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Zoom pill — floats top-right of the stage. Stays on screen at z>1
   because it's a child of the stage element, not the frame, and the
   stage is position:relative. position:sticky keeps it pinned to the
   top-right corner even when the stage is scrolled. */
.ed-stage-zoom-pill {
  position: absolute;
  top: 12px;
  right: 20px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  font-family: inherit;
}
.editor-stage.ed-stage-zoomed .ed-stage-zoom-pill {
  position: sticky;
  top: 12px;
  align-self: flex-end;
  margin-right: 8px;
  margin-left: auto;
}
.ed-stage-zoom-pill button {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  min-width: 28px;
}
.ed-stage-zoom-pill button:hover { background: #1e293b; color: #f1f5f9; }
.ed-stage-zoom-pill button:active { background: #25324a; }
.ed-stage-zoom-pill .ed-stage-zoom-reset {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  color: #94a3b8;
  border-left: 1px solid #1e293b;
  border-right: 1px solid #1e293b;
  border-radius: 0;
  padding: 6px 8px;
}

.editor-hotspot {
  position: absolute;
  cursor: move;
  user-select: none;
  box-sizing: border-box;
}
.editor-hotspot.kind-rect {
  border: 2px solid #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.editor-hotspot.kind-dot,
.editor-hotspot.kind-pulse {
  background: #38bdf8;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 0 0 5px rgba(56, 189, 248, 0.35);
}
.editor-hotspot-handle {
  position: absolute;
  width: 10px; height: 10px;
  background: white;
  border: 1px solid #38bdf8;
  border-radius: 1px;
  display: none;
}
.editor-hotspot.kind-rect .editor-hotspot-handle { display: block; }
.editor-hotspot-handle.h-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.editor-hotspot-handle.h-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.editor-hotspot-handle.h-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.editor-hotspot-handle.h-se { bottom: -6px; right: -6px; cursor: nwse-resize; }

.editor-hotspot-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.editor-hotspot-kinds .kind-btn {
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, border-color 120ms;
}
.editor-hotspot-kinds .kind-btn:hover { background: #334155; border-color: #475569; }
.editor-hotspot-kinds .kind-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}
.editor-hotspot-kinds .ed-hotspot-reset {
  margin-left: auto;
  background: transparent;
  color: #94a3b8;
}
.editor-hotspot-kinds .ed-hotspot-reset:hover { background: #1e293b; color: #e2e8f0; }
.editor-hotspot-size {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
  font-size: 12px;
  color: #94a3b8;
}
.editor-hotspot-size[hidden] { display: none; }
.editor-hotspot-size input[type="range"] { flex: 1; min-width: 0; }
.editor-hotspot-size-val {
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #cbd5e1;
  width: 48px;
  text-align: right;
}
.editor-stage-frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  border-radius: 4px;
}
.editor-empty {
  color: #475569; font-size: 14px;
  background: #0f172a;
  border: 1px dashed #1e293b;
  padding: 40px 60px;
  border-radius: 6px;
}

.editor-replace-image {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
}
.editor-replace-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.editor-replace-toggle,
.editor-replace-upload button {
  background: transparent;
  color: #94a3b8;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.editor-replace-toggle:hover,
.editor-replace-upload button:hover { background: #1e293b; color: white; }
.editor-replace-status { font-size: 11px; }
.editor-stage-frame.drop-active {
  outline: 2px dashed #38bdf8;
  outline-offset: 4px;
}

/* Crop tool: dimmed overlay + draggable rect with corner handles
   on top of the screenshot. Same shape as the hotspot overlay but
   different color so the two are visually distinct. */
.editor-crop-rect {
  position: absolute;
  cursor: move;
  user-select: none;
  box-sizing: border-box;
  border: 2px solid #34d399;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}
.editor-crop-rect.zoom {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.08);
}
.editor-crop-rect.zoom .editor-crop-handle { border-color: #818cf8; }
/* Persistent indicator showing the saved zoom region on the editor
   stage. Non-interactive, just a visual hint. */
.editor-zoom-indicator {
  position: absolute;
  pointer-events: none;
  border: 2px dashed #818cf8;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.06);
  box-sizing: border-box;
}
/* Saved blur regions on the editor stage. Solid-fill so the engineer
   can see the redaction without pixel-snapping artifacts; the actual
   renderers (player, viewer, doc, MP4) apply real blur. The little ×
   handle deletes the rect. */
.editor-blur-rect {
  position: absolute;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(248, 113, 113, 0.85);
  border-radius: 2px;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: move;
}

/* Phase 15: alignment guides that appear during hotspot / target /
   blur drags whenever an edge or centerline snaps. Cyan to match the
   editor's accent color; thin 1px line with a subtle glow so it's
   visible against both light and dark screenshot regions. */
.editor-snap-guide {
  position: absolute;
  pointer-events: none;
  z-index: 9;
  background: #38bdf8;
  box-shadow: 0 0 4px rgba(56, 189, 248, 0.85),
              0 0 1px rgba(255, 255, 255, 0.4);
}
.editor-snap-guide-v { width: 1px; }
.editor-snap-guide-h { height: 1px; }

/* Phase 15: blur / target context menu refinements — new section
   header + divider when the menu has multiple groups (align / delete). */
.editor-blur-menu-divider {
  border-top: 1px solid #1e293b;
  margin: 4px 0;
}
.editor-blur-menu-section {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  padding: 4px 12px;
  font-weight: 600;
}

/* Phase 15: shared step picker modal (Duplicate to slide…). Card
   shape mirrors the Sharing modal so the editor feels consistent. */
.vz-step-picker-card {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 10px;
  width: min(560px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.vz-step-picker-card header {
  padding: 16px 22px 12px;
  border-bottom: 1px solid #1e293b;
  display: flex; align-items: center; gap: 12px;
}
.vz-step-picker-card header h2 {
  font-size: 15px; font-weight: 600; margin: 0; color: white; flex: 1;
}
.vz-step-picker-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border-bottom: 1px solid #1e293b;
  background: rgba(15, 23, 42, 0.5);
}
.vz-step-picker-toolbar button {
  background: transparent;
  border: 1px solid #334155;
  color: #cbd5e1;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.vz-step-picker-toolbar button:hover { background: #1e293b; color: white; border-color: #475569; }
.vz-step-picker-count { font-size: 11.5px; color: #94a3b8; margin-left: auto; }
.vz-step-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.vz-step-picker-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 6px;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.vz-step-picker-row:hover {
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.30);
}
.vz-step-picker-row input { margin: 0; accent-color: #38bdf8; flex: none; }
.vz-step-picker-thumb {
  width: 96px; height: 54px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #1e293b;
  background: #020617;
  flex: none;
}
.vz-step-picker-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  color: #475569;
  font-size: 22px; font-weight: 700;
}
.vz-step-picker-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vz-step-picker-num {
  font-size: 10.5px; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.vz-step-picker-cap {
  color: #e2e8f0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vz-step-picker-card footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 12px 22px;
  border-top: 1px solid #1e293b;
}
.vz-step-picker-apply.primary {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border: 1px solid #1d4ed8;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 1px 4px rgba(37,99,235,0.35);
}
.vz-step-picker-apply.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}
.vz-step-picker-apply.primary:disabled { opacity: 0.4; cursor: not-allowed; }
.editor-blur-rect.preview {
  background: rgba(15, 23, 42, 0.35);
  border-style: dashed;
  pointer-events: none;
}
.editor-blur-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: white;
  border: 2px solid #f87171;
  border-radius: 1px;
  box-sizing: border-box;
}
.editor-blur-handle.h-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.editor-blur-handle.h-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.editor-blur-handle.h-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.editor-blur-handle.h-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.editor-blur-remove {
  position: absolute;
  top: -9px; right: -9px;
  width: 18px; height: 18px;
  background: #ef4444;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-family: inherit;
}
.editor-blur-remove:hover { background: #b91c1c; }

/* Right-click context menu on a blur rect. Small dark dropdown
   positioned at the click point with a Duplicate action (and Delete
   for symmetry with the × hover button). */
.editor-blur-menu {
  position: fixed;
  z-index: 200;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 140px;
  font-family: inherit;
}
.editor-blur-menu button {
  display: block;
  width: 100%;
  background: transparent;
  color: #e2e8f0;
  border: none;
  padding: 6px 12px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
}
.editor-blur-menu button:hover { background: #1e3a8a; }
.editor-blur-menu button[data-action="del"]:hover { background: #7f1d1d; }
/* Multi-target branching (8b/9). Editor surfaces. */
.editor-targets {
  /* Flows as a regular .editor-form-section now — no margin/border
     overrides. The shared section gap handles spacing. */
}
.editor-targets-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.editor-targets-empty { padding: 6px 0; font-size: 12px; }
.editor-target-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  transition: border-color 120ms;
}
.editor-target-row:hover { border-color: #475569; }
.editor-target-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: #38bdf8; color: #082f49;
  font-size: 11px; font-weight: 700;
  border-radius: 3px;
}
.editor-target-meta { min-width: 0; }
.editor-target-label { color: #e2e8f0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-target-detail { font-size: 11px; margin-top: 2px; }
.editor-target-badge {
  background: #1e293b;
  color: #94a3b8;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.editor-target-edit, .editor-target-delete {
  background: transparent; border: none;
  color: #475569;
  width: 22px; height: 22px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.editor-target-row:hover .editor-target-edit,
.editor-target-row:hover .editor-target-delete { color: #94a3b8; }
.editor-target-edit:hover { background: #1e3a8a; color: white; }
.editor-target-delete:hover { background: #7f1d1d; color: white; }
.editor-targets-actions { display: flex; gap: 8px; margin-top: 4px; }
.editor-targets-empty + .editor-targets-actions { margin-top: 0; }

/* Armed state for the "Add target..." button while paint mode is
   active — yellow background + dashed border so it's obvious that
   the cursor will draw a rect. Pairs with .editor-stage-frame.paint-armed
   below which shows the crosshair on the stage. */
.editor-targets-actions button.ctrl.armed {
  background: #facc15;
  color: #422006;
  border-color: #eab308;
  cursor: crosshair;
  animation: vz-target-armed-pulse 1.4s ease-in-out infinite;
}
.editor-stage-frame.paint-armed { cursor: crosshair; }
@keyframes vz-target-armed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(234, 179, 8, 0); }
}

/* Drag-paint overlay for new targets - same shape as the blur paint
   tool but in target-blue. */
.editor-target-paint {
  position: absolute;
  cursor: crosshair;
  background: rgba(56, 189, 248, 0.05);
  border: 1px dashed rgba(56, 189, 248, 0.6);
  box-sizing: border-box;
  z-index: 10;
}
.editor-target-preview {
  position: absolute;
  background: rgba(56, 189, 248, 0.18);
  border: 2px dashed #38bdf8;
  border-radius: 3px;
  box-sizing: border-box;
  pointer-events: none;
}

/* Read-only target overlays on the editor stage. Slightly translucent
   blue rectangles with a numbered badge in the top-left corner. Kind-
   coloured variants (yellow=input, purple=variable, red=display)
   painted via data-kind attribute so the engineer can spot at a glance
   what each rect does without opening the row in the targets drawer.
   Now draggable (body) + resizable (corner handles) + right-clickable
   (context menu). */
.editor-target-overlay {
  position: absolute;
  border: 2px dashed #38bdf8;
  background: rgba(56, 189, 248, 0.10);
  border-radius: 3px;
  box-sizing: border-box;
  cursor: move;
  pointer-events: auto;
  user-select: none;
}
/* Corner handles, same shape as the blur-rect handles so the editing
   vocabulary stays consistent across both tools. */
.editor-target-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: white;
  border: 2px solid currentColor;
  border-radius: 1px;
  box-sizing: border-box;
}
.editor-target-handle.h-nw { top: -7px; left: -7px; cursor: nwse-resize; color: #38bdf8; }
.editor-target-handle.h-ne { top: -7px; right: -7px; cursor: nesw-resize; color: #38bdf8; }
.editor-target-handle.h-sw { bottom: -7px; left: -7px; cursor: nesw-resize; color: #38bdf8; }
.editor-target-handle.h-se { bottom: -7px; right: -7px; cursor: nwse-resize; color: #38bdf8; }
.editor-target-overlay[data-kind="input"] .editor-target-handle { color: #facc15; }
.editor-target-overlay[data-kind="variable"] .editor-target-handle { color: #a78bfa; }
.editor-target-overlay[data-kind="display"] .editor-target-handle { color: #f87171; }
.editor-target-overlay[data-kind="tooltip"] .editor-target-handle { color: #10b981; }
.editor-target-overlay[data-kind="image"] .editor-target-handle { color: #06b6d4; }
.editor-target-overlay:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #0ea5e9;
}
.editor-target-overlay-num {
  position: absolute;
  top: -1px; left: -1px;
  background: #38bdf8;
  color: #082f49;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 0 0 3px 0;
}
.editor-target-overlay[data-kind="input"] {
  border-color: #facc15;
  background: rgba(250, 204, 21, 0.10);
}
.editor-target-overlay[data-kind="input"]:hover {
  background: rgba(250, 204, 21, 0.22);
  border-color: #eab308;
}
.editor-target-overlay[data-kind="input"] .editor-target-overlay-num {
  background: #facc15;
  color: #422006;
}
.editor-target-overlay[data-kind="variable"] {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
}
.editor-target-overlay[data-kind="variable"]:hover {
  background: rgba(167, 139, 250, 0.26);
  border-color: #8b5cf6;
}
.editor-target-overlay[data-kind="variable"] .editor-target-overlay-num {
  background: #a78bfa;
  color: #1e1b4b;
}
.editor-target-overlay[data-kind="display"] {
  border-color: #f87171;
  background: rgba(248, 113, 113, 0.10);
}
.editor-target-overlay[data-kind="display"]:hover {
  background: rgba(248, 113, 113, 0.22);
  border-color: #ef4444;
}
.editor-target-overlay[data-kind="display"] .editor-target-overlay-num {
  background: #f87171;
  color: #450a0a;
}
.editor-target-overlay[data-kind="tooltip"] {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.12);
}
.editor-target-overlay[data-kind="tooltip"]:hover {
  background: rgba(16, 185, 129, 0.24);
  border-color: #059669;
}
.editor-target-overlay[data-kind="tooltip"] .editor-target-overlay-num {
  background: #10b981;
  color: #022c1f;
}
.editor-target-overlay[data-kind="image"] {
  border-color: #06b6d4;
  background: rgba(6, 182, 212, 0.10);
}
.editor-target-overlay[data-kind="image"]:hover {
  background: rgba(6, 182, 212, 0.22);
  border-color: #0891b2;
}
.editor-target-overlay[data-kind="image"] .editor-target-overlay-num {
  background: #06b6d4;
  color: #062c34;
}
/* Inline preview inside editor stage rects so the engineer can see
   what the player will paint without opening the modal. */
.editor-target-tooltip-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-size: 11px;
  color: #6ee7b7;
  background: rgba(6, 78, 59, 0.30);
  pointer-events: none;
  overflow: hidden;
  text-align: center;
  line-height: 1.3;
}
.editor-target-image-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Read-only preview of what the player will paint inside a display
   rect (e.g. "Region: {{region}}"). Sits centred and dimmed so the
   author sees the shape without thinking it's interactive. */
.editor-target-display-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.30);
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Kind badge inside the targets drawer row. Tints match the overlay
   colour so the list + the stage tell the same story. */
.editor-target-badge.kind-input {
  background: rgba(250, 204, 21, 0.18);
  color: #fde68a;
  border: 1px solid rgba(250, 204, 21, 0.4);
}
.editor-target-badge.kind-variable {
  background: rgba(167, 139, 250, 0.20);
  color: #ddd6fe;
  border: 1px solid rgba(167, 139, 250, 0.4);
}
.editor-target-badge.kind-display {
  background: rgba(248, 113, 113, 0.20);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.4);
}
.editor-target-badge.kind-tooltip {
  background: rgba(16, 185, 129, 0.20);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.editor-target-badge.kind-image {
  background: rgba(6, 182, 212, 0.20);
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, 0.4);
}
.editor-target-overlay-label {
  position: absolute;
  top: -22px;
  left: 0;
  background: #0f172a;
  border: 1px solid #38bdf8;
  color: #e2e8f0;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Target editor modal. Matches the auto-blur modal styling so the
   editor's modal vocabulary stays consistent. */
.vz-target-modal {
  position: fixed; inset: 0;
  background: rgba(2, 6, 23, 0.78);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

/* Phase 15: Sharing & permissions modal — uses the same dark card +
   tabs language as the rest of the editor. */
.vz-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(2, 6, 23, 0.78);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.vz-sharing-card {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 10px;
  width: min(640px, 100%);
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.vz-sharing-card header {
  padding: 16px 22px 12px;
  border-bottom: 1px solid #1e293b;
  display: flex; align-items: center; gap: 12px;
}
.vz-sharing-card header h2 {
  font-size: 15px; font-weight: 600; margin: 0; color: white; flex: 1;
}
.vz-sharing-close {
  background: transparent; border: 1px solid #334155; color: #cbd5e1;
  border-radius: 5px; padding: 2px 10px; font-size: 16px; cursor: pointer;
  line-height: 1; font-family: inherit;
}
.vz-sharing-close:hover { background: #1e293b; color: white; }
.vz-sharing-tabs {
  display: flex; gap: 4px;
  padding: 12px 22px 0;
  border-bottom: 1px solid #1e293b;
}
.vz-sharing-tab {
  background: transparent;
  color: #94a3b8;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.vz-sharing-tab:hover { color: #e2e8f0; }
.vz-sharing-tab.active {
  color: #f1f5f9;
  border-bottom-color: #38bdf8;
}
.vz-sharing-body {
  padding: 16px 22px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 18px;
}
.vz-sharing-blurb {
  font-size: 11.5px; color: #94a3b8; margin: 0;
  line-height: 1.55;
}
.vz-sharing-blurb strong { color: #fcd34d; }
.vz-sharing-narrow-note { display: block; margin-top: 4px; color: #64748b; font-style: italic; }
.vz-sharing-role-block {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 12px 14px;
}
.vz-sharing-role-block h3 {
  margin: 0 0 4px;
  font-size: 13px; font-weight: 600;
  color: #f1f5f9;
}
.vz-sharing-role-desc {
  font-size: 11.5px; color: #64748b; line-height: 1.5;
  margin-bottom: 10px;
}
.vz-sharing-list {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.vz-sharing-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 5px;
  font-size: 12px;
}
.vz-sharing-list li.vz-sharing-empty {
  font-style: italic;
  color: #64748b;
  background: transparent;
  border-style: dashed;
}
.vz-sharing-person { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vz-sharing-person-display { color: #e2e8f0; font-weight: 500; }
.vz-sharing-person-oid { color: #475569; font-size: 10.5px; font-family: ui-monospace, SFMono-Regular, monospace; overflow: hidden; text-overflow: ellipsis; }
.vz-sharing-remove {
  background: transparent;
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.vz-sharing-remove:hover { background: rgba(239, 68, 68, 0.14); }
.vz-sharing-add { position: relative; }
.vz-sharing-add-input {
  width: 100%;
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}
.vz-sharing-add-input:focus {
  outline: none; border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.vz-sharing-add-results {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 4px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.vz-sharing-add-row {
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid #1e293b;
  color: #e2e8f0;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.vz-sharing-add-row:last-child { border-bottom: none; }
.vz-sharing-add-row:hover { background: rgba(56, 189, 248, 0.10); }
.vz-sharing-add-row.muted { color: #64748b; cursor: default; font-style: italic; }
.vz-sharing-add-row.muted:hover { background: transparent; }
.vz-sharing-add-name { color: #f1f5f9; }
.vz-sharing-add-upn { color: #64748b; font-size: 11px; }
.vz-sharing-card footer {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid #1e293b;
}
.vz-sharing-status { flex: 1; font-size: 11.5px; }
.vz-sharing-close-bottom {
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.vz-sharing-close-bottom:hover { background: #25324a; color: white; }

.vz-target-card {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 8px;
  width: min(560px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.vz-target-card header { padding: 16px 22px 12px; border-bottom: 1px solid #1e293b; }
.vz-target-card header h2 { font-size: 15px; font-weight: 600; margin: 0; color: white; }
.vz-target-body {
  padding: 16px 22px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
}
.vz-target-body label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: #94a3b8;
}
.vz-target-body input,
.vz-target-body select {
  background: #020617; color: #e2e8f0;
  border: 1px solid #334155; border-radius: 3px;
  padding: 6px 8px; font-size: 13px;
  font-family: inherit;
}
.vz-target-body input:focus,
.vz-target-body select:focus { outline: 1px solid #38bdf8; }
.vz-target-card footer {
  padding: 12px 22px;
  border-top: 1px solid #1e293b;
  display: flex; justify-content: flex-end; gap: 10px;
}
.vz-target-card footer button {
  background: #1e293b; color: #e2e8f0;
  border: 1px solid #334155; border-radius: 4px;
  padding: 6px 14px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.vz-target-card footer button:hover { background: #334155; }
.vz-target-card footer button.tt-delete {
  background: #7f1d1d; border-color: #ef4444; color: white;
  margin-right: auto;
}
.vz-target-card footer button.primary {
  background: #2563eb; border-color: #2563eb; color: white;
}
.vz-target-card footer button.primary:hover { background: #1d4ed8; }

/* Known-variables chips under the varName input — click to drop the
   name straight into the field. Faster than typing + scrolling the
   <datalist> when reusing a name. */
.tt-known-vars-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  align-items: center;
}
.tt-known-vars-chips .muted { color: #64748b; }
.tt-var-chip {
  background: #1e293b;
  color: #93c5fd;
  border: 1px solid #334155;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  cursor: pointer;
}
.tt-var-chip:hover { background: #1e40af; color: white; border-color: #2563eb; }

/* Two-column grid inside the modal for paired fields (bubble colour
   + shape). Falls back to stacked on narrow widths via flex-wrap. */
.tt-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .tt-grid-2 { grid-template-columns: 1fr; }
}

/* Drag-paint capture layer. Sits on top of the screenshot and consumes
   pointer events while paint mode is active. */
.editor-blur-paint {
  position: absolute;
  cursor: crosshair;
  background: rgba(248, 113, 113, 0.05);
  border: 1px dashed rgba(248, 113, 113, 0.6);
  box-sizing: border-box;
  z-index: 10;
}

/* Auto-blur suggestion modal. Single-pane card centered over the
   editor; dismissable via Cancel, backdrop click, or Esc. Each row
   shows a thumbnail, the click-target label, the matched patterns,
   and a checkbox to opt-in. */
.vz-autoblur-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vz-autoblur-card {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 8px;
  width: min(720px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.vz-autoblur-card header {
  padding: 18px 22px 12px;
  border-bottom: 1px solid #1e293b;
}
.vz-autoblur-card header h2 {
  font-size: 16px; font-weight: 600; margin: 0 0 6px; color: white;
}
.vz-autoblur-card header p { font-size: 13px; margin: 0; }
.vz-autoblur-controls {
  padding: 10px 22px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #1e293b;
}
.vz-autoblur-controls button {
  background: #1e293b; color: #cbd5e1; border: 1px solid #334155;
  border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px;
  font-family: inherit;
}
.vz-autoblur-controls button:hover { background: #334155; }
.vz-autoblur-list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1;
}
.vz-autoblur-list li {
  border-bottom: 1px solid #1e293b;
}
.vz-autoblur-list li:last-child { border-bottom: none; }
.vz-autoblur-list label {
  display: grid;
  grid-template-columns: auto 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 22px;
  cursor: pointer;
}
.vz-autoblur-list label:hover { background: rgba(56, 189, 248, 0.04); }
.vz-autoblur-list input[type="checkbox"] { margin: 0; }
.vz-autoblur-thumb {
  width: 96px; height: 54px;
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 3px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.vz-autoblur-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vz-autoblur-noimg { color: #475569; font-size: 11px; }
.vz-autoblur-meta { min-width: 0; }
.vz-autoblur-step {
  font-size: 13px; font-weight: 500; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vz-autoblur-target { font-size: 11px; margin-top: 2px; }
.vz-autoblur-target code {
  background: #1e293b; padding: 1px 4px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.vz-autoblur-matches { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.vz-autoblur-match {
  background: #b91c1c33; color: #fca5a5;
  font-size: 10.5px; padding: 2px 6px; border-radius: 10px;
  border: 1px solid #b91c1c66;
}
.vz-autoblur-source {
  display: inline-block;
  font-size: 10px; line-height: 1; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 6px; border-radius: 9px;
  margin-right: 6px; vertical-align: middle;
  border: 1px solid transparent;
}
.vz-autoblur-source-text {
  background: #1e3a8a55; color: #93c5fd;
  border-color: #1d4ed8aa;
}
.vz-autoblur-source-ocr {
  background: #4c1d9555; color: #c4b5fd;
  border-color: #6d28d9aa;
}
.muted-strong { color: #cbd5e1; }
.vz-autoblur-card footer {
  padding: 12px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #1e293b;
}
.vz-autoblur-card footer button {
  background: #1e293b; color: #e2e8f0; border: 1px solid #334155;
  border-radius: 4px; padding: 6px 14px; cursor: pointer; font-size: 13px;
  font-family: inherit;
}
.vz-autoblur-card footer button:hover:not(:disabled) { background: #334155; }
.vz-autoblur-card footer button.primary {
  background: #2563eb; border-color: #2563eb; color: white;
}
.vz-autoblur-card footer button.primary:hover:not(:disabled) { background: #1d4ed8; }
.vz-autoblur-card footer button:disabled { opacity: 0.5; cursor: not-allowed; }
.editor-crop-handle {
  position: absolute;
  width: 14px; height: 14px;
  background: white;
  border: 2px solid #34d399;
  border-radius: 1px;
}
.editor-crop-handle.h-nw { top: -8px; left: -8px; cursor: nwse-resize; }
.editor-crop-handle.h-ne { top: -8px; right: -8px; cursor: nesw-resize; }
.editor-crop-handle.h-sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.editor-crop-handle.h-se { bottom: -8px; right: -8px; cursor: nwse-resize; }
.editor-crop-actions {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.editor-crop-hint {
  color: #94a3b8;
  font-size: 12px;
  margin-right: 8px;
}
.editor-crop-actions button {
  background: #334155;
  color: #cbd5e1;
  border: 1px solid #475569;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.editor-crop-actions button:hover { background: #475569; color: white; }
.editor-crop-actions button.primary {
  background: #10b981;
  border-color: #10b981;
  color: white;
}
.editor-crop-actions button.primary:hover:not(:disabled) { background: #059669; }
.editor-crop-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Default-hidden state needs explicit display:none because the CSS
   below sets display:flex which has higher specificity than the UA's
   built-in `[hidden]` rule. Without this the strip never collapses
   when the toggle is closed and the screenshot stays cramped. */
.editor-replace-strip[hidden] { display: none; }
.editor-replace-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 4px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 6px;
  max-height: 110px;
}
.editor-replace-tile {
  position: relative;
  flex: 0 0 auto;
  width: 120px;
  height: 80px;
  background: #020617;
  border: 1px solid #334155;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.editor-replace-tile:hover { border-color: #38bdf8; }
.editor-replace-tile.busy { opacity: 0.4; pointer-events: none; }
.editor-replace-tile.archived {
  border-style: dashed;
  border-color: #475569;
  opacity: 0.7;
}
.editor-replace-tile.archived:hover { opacity: 1; border-color: #38bdf8; }
.editor-replace-tile.archived .editor-replace-num {
  background: rgba(127, 29, 29, 0.85);
  color: #fecaca;
}
.editor-replace-restore {
  position: absolute;
  top: 2px; right: 4px;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.92);
  color: #f1f5f9;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #334155;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
}
.editor-replace-restore:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: white;
}
.editor-replace-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.editor-replace-num {
  position: absolute;
  top: 2px; left: 4px;
  background: rgba(15, 23, 42, 0.85);
  color: #f1f5f9;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.editor-form {
  grid-column: 3; grid-row: 2;
  background: #0f172a;
  border-left: 1px solid #1e293b;
  padding: 18px 20px 24px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.editor-form-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1e293b;
}
.editor-form-head-main { flex: 1; min-width: 0; }
.editor-form-head-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex: none;
}
.editor-form-num {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.editor-form-meta {
  color: #64748b;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  word-break: break-all;
  margin-top: 4px;
  line-height: 1.45;
}
.editor-form-status {
  font-size: 11px;
  color: #f59e0b;
  text-align: right;
  flex: none;
}

/* Each form section pairs a label + hint header with one or more
   inputs. Sections gap from each other; inside, header→input is tight
   so it reads as a unit and doesn't feel "squashed" the way the old
   floating ALL-CAPS label did. */
.editor-form-section {
  display: flex; flex-direction: column; gap: 6px;
}
.editor-section-head {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}
.editor-section-hint {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}
.editor-section-hint code {
  background: #1e293b;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10.5px;
  color: #cbd5e1;
}
.editor-label {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.editor-form textarea {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
  min-height: 64px;
  transition: border-color 120ms, box-shadow 120ms;
}
.editor-form textarea::placeholder {
  color: #475569;
}
.editor-form textarea:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.editor-preview {
  background: rgba(15, 23, 42, 0.45);
  border: 1px dashed #1e293b;
  border-radius: 6px;
  padding: 8px 12px;
  color: #94a3b8;
  font-size: 12.5px;
  line-height: 1.5;
  font-style: italic;
}
.editor-preview:empty { display: none; }
.editor-preview strong { color: #fbbf24; font-weight: 600; font-style: normal; }

.editor-form-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #1e293b;
}
.editor-form .ctrl {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, border-color 120ms;
}
.editor-form .ctrl:hover:not(:disabled) { background: #334155; border-color: #475569; }
.editor-form .ctrl.ctrl-sm {
  padding: 4px 10px;
  font-size: 11.5px;
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
}
.editor-form .ctrl.ctrl-sm:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.20);
  border-color: #38bdf8;
  color: #e0f2fe;
}
.editor-form .ctrl.primary { background: #2563eb; border-color: #2563eb; color: white; }
.editor-form .ctrl.primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.editor-form .ctrl:disabled { opacity: 0.4; cursor: not-allowed; }