:root {
  --ink: #0b0d12;
  --paper: #f5f3ef;
  --accent: #6ee7ff;
  --muted: #8b93a7;
  --line: #262b36;
  font-family: "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; background: var(--ink); color: var(--paper); }

/* One centered column instead of content anchored to the left edge of a
   wide window — reads oddly once the video stopped filling the page. */
header, main { max-width: 1100px; margin-left: auto; margin-right: auto; }

header { padding: 1.2rem 1.5rem 0.4rem; }
.site-header, .header-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.site-header { padding: 1.2rem 1.5rem 0; }
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand-link { color: inherit; text-decoration: none; }
.primary-link, .primary-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #062028; border: none; border-radius: 6px;
  padding: 8px 14px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.primary-link:hover, .primary-btn:hover { filter: brightness(1.08); }
.account { position: relative; }
.account-btn {
  display: flex; align-items: center; gap: 0.5rem;
  background: transparent; border-color: transparent; padding: 4px 6px;
  -webkit-tap-highlight-color: transparent;
}
.account-btn:hover, .account-btn:focus { border-color: transparent; outline: none; }
.account-btn:focus-visible .avatar, .account-btn[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent); }
.account-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #062028; font-weight: 700; font-size: 0.85rem;
}
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 200px; max-width: calc(100vw - 2rem); padding: 6px;
  background: #161a22; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column;
}
.account-menu[hidden] { display: none; }
.account-menu-head {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.account-menu-name, .account-menu-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-name { font-weight: 650; }
.account-menu-email { color: var(--muted); font-size: 0.8rem; }
.account-menu-email:empty { display: none; }
.account-menu a, .account-menu button {
  display: flex; align-items: center; min-height: 40px;
  text-align: left; background: transparent; border: none; color: var(--paper);
  text-decoration: none; border-radius: 6px; padding: 8px 10px; font-size: 0.9rem;
}
.account-menu .logout-btn { color: #ff9b9b; }
.account-menu a:hover, .account-menu button:hover { background: rgba(110, 231, 255, 0.12); }
.home, .auth-page, .profile-page { padding: 1.5rem 1.5rem 3rem; }
.home-copy { max-width: 38rem; }
.eyebrow { margin: 0 0 0.4rem; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }
.home-copy h2 { margin: 0 0 0.8rem; font-size: 2rem; line-height: 1.15; }
.home-copy p { color: var(--muted); line-height: 1.5; }
.home-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.2rem; }
.home-signed-in { margin: 0; }
/* Editor `main` is a flex row for side-by-side panels; auth/profile need a
   single centered column instead of scattering their children horizontally. */
.auth-page, .profile-page { display: flex; justify-content: center; }
.auth-panel, .profile-panel {
  width: min(400px, 100%); display: flex; flex-direction: column; gap: 0.7rem;
}
.auth-panel h2, .profile-panel h2 { margin: 0.4rem 0 0; }
.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.field input {
  background: #12151c; color: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px; font-size: 1rem;
}
.auth-error { margin: 0; color: #ff9b9b; font-size: 0.85rem; }
.auth-links { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.text-btn, .text-link { background: none; border: none; color: var(--accent); padding: 0; text-decoration: none; cursor: pointer; }
.profile-card {
  margin-top: 0.4rem;
  background: #12151c; border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem;
}
.profile-head {
  display: flex; align-items: center; gap: 0.85rem;
  padding-bottom: 0.9rem;
}
.profile-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #062028; font-weight: 700; font-size: 1.15rem;
}
.profile-head-text { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.profile-name { font-weight: 650; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-email { color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-email:empty { display: none; }
.profile-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem; padding: 0.7rem 0; border-top: 1px solid var(--line); align-items: center; }
.profile-row div:first-child { color: var(--muted); }
.profile-row div:last-child { overflow-wrap: anywhere; }
.profile-actions { display: flex; margin-top: 0.3rem; }
.logo {
  width: 40px; height: 40px; flex: none; display: block;
  color: #c5cbd6;
}
h1 { margin: 0 0 0.2rem; font-size: 1.3rem; }
.hint { margin: 0; color: var(--muted); font-size: 0.9rem; }

.upload-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 0.8rem; }

/* Two presets, each a big button whose icon is the camera matrix at the
   real cell aspect — 3×4 landscape cells, or 3×3 portrait cells. */
.format-picker { display: flex; gap: 0.7rem; width: 100%; }
.format-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 0.55rem; min-height: 168px; padding: 0.85rem 0.6rem 0.7rem;
  background: #12151c; border: 1px solid var(--line); border-radius: 10px;
}
.format-card[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: rgba(110, 231, 255, 0.07);
}
.format-icon {
  display: grid; gap: 3px; height: 88px; padding: 4px;
  background: #000; border-radius: 4px; box-sizing: content-box;
}
.format-icon span {
  background: rgba(110, 231, 255, 0.38); border-radius: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; line-height: 1; color: #fff;
}
.format-card[aria-checked="true"] .format-icon span { background: rgba(242, 255, 0, 0.62); color: #1c1e00; }
/* Cameras that look through the back lens keep their own color in both
   states, matching their outlines on the lens circles. */
.format-icon span.rear,
.format-card[aria-checked="true"] .format-icon span.rear { background: rgba(255, 180, 84, 0.7); color: #2a1700; }
.format-icon span:hover { outline: 2px solid #fff; }
/* Must beat the selected-cell rule — otherwise YouTube's blinds go yellow. */
.format-icon span.blind,
.format-card[aria-checked="true"] .format-icon span.blind {
  background: transparent; outline: 1px solid rgba(255, 255, 255, 0.1);
}

/* Lens map (lensmap.js): a lens as a circle, each camera's view outlined on
   it. Sizes are in viewBox units (the circle's radius is 100), except the
   strokes, which stay the same width at any size. */
.lens-map .lens-cover { fill: #000; }
.lens-map .lens-rim { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lens-map .lens-fp {
  fill: rgba(110, 231, 255, 0.08); stroke: rgba(110, 231, 255, 0.85);
  stroke-width: 1px; vector-effect: non-scaling-stroke;
}
.lens-map .lens-fp.rear { fill: rgba(255, 180, 84, 0.1); stroke: rgba(255, 180, 84, 0.95); }
.lens-map .lens-fp.hover { fill: rgba(110, 231, 255, 0.45); stroke-width: 2px; }
.lens-map .lens-fp.rear.hover { fill: rgba(255, 180, 84, 0.5); }
.lens-map .lens-fp.active { fill: rgba(242, 255, 0, 0.3); stroke: #f2ff00; stroke-width: 2px; }
.lens-map .lens-fp.target { stroke: #f2ff00; stroke-width: 2px; stroke-dasharray: 5 4; }
.lens-map .lens-num {
  font-size: 20px; font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: #fff;
  stroke: rgba(0, 0, 0, 0.7); stroke-width: 4px; paint-order: stroke;
  pointer-events: none;
}
.lens-map .lens-num.ghost {
  font-weight: 400; font-size: 14px; opacity: 0.55;
  stroke-width: 2px; stroke: rgba(0, 0, 0, 0.45);
}
.lens-map .lens-num.hover { font-size: 26px; }
.lens-map .lens-num.active { fill: #f2ff00; }
.format-caption { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; font-size: 0.78rem; color: var(--muted); }
.format-caption strong { color: var(--paper); font-size: 0.95rem; font-weight: 650; }
/* display:contents so the ? stays in the Upload/Reset row; only the open
   panel takes a full-width line underneath (flex-basis:100% on the panel). */
.upload-tip { display: contents; }
.upload-tip-btn {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; min-height: 0; padding: 0;
  border-radius: 50%; border: 1px solid #ffb454; color: #ffb454;
  background: #12151c; font-size: 0.85rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.upload-tip-btn::-webkit-details-marker { display: none; }
.upload-tip-btn::marker { content: ''; }
.upload-tip-btn:hover, .upload-tip[open] .upload-tip-btn {
  background: rgba(255, 180, 84, 0.12); border-color: #ffb454;
}
.upload-tip-panel {
  display: flex; align-items: flex-start; gap: 0.55rem;
  flex: 1 1 100%; width: 100%; margin: 0; box-sizing: border-box;
  padding: 0.65rem 0.7rem 0.65rem 0.8rem; border-radius: 8px;
  background: #161a22; border: 1px solid var(--line);
  color: #ffb454; font-size: 0.8rem; line-height: 1.4;
}
.upload-tip-panel p { margin: 0; flex: 1; min-width: 0; }
.upload-tip-close {
  flex: none; width: 28px; height: 28px; min-height: 0; padding: 0;
  border-radius: 6px; border-color: transparent; color: #ffb454;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.upload-tip-close:hover { background: rgba(255, 180, 84, 0.12); border-color: transparent; }
.progress-col { flex: 1 1 100%; min-width: 200px; }
.progress-col .preview-status { margin-top: 0; }
.upload-progress-head { display: flex; align-items: center; gap: 0.7rem; }
.upload-progress-head .preview-status { flex: 1; white-space: nowrap; }
#uploadStopBtn { flex: none; }
/* Segmented meter from the mixdeck playlist player: a row of boxes, the
   current one and the next outlined, fill growing from the left. */
.seg-bar {
  display: flex; align-items: center; gap: 2px;
  height: 18px; margin-top: 4px; min-width: 0;
}
.seg-bar__box {
  position: relative; flex: 1 1 0; min-width: 0; height: 6px;
  border-radius: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.12);
}
.seg-bar__ring {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  border: 0.5px solid rgba(242, 255, 0, 0.45); border-radius: 1px; box-sizing: border-box;
}
.seg-bar__fill {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #f2ff00; transform: scaleX(0); transform-origin: left center;
}
.bar {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12);
  margin-top: 4px; overflow: hidden;
}
.bar > div { height: 100%; width: 0; background: #f2ff00; transition: width 0.15s ease; }
/* Unknown duration (assembling on the server, a remote RunPod build) — a
   sliding segment instead of a stalled 0% bar that looks broken. */
.bar.indeterminate > div {
  width: 40% !important; transition: none;
  animation: bar-indeterminate 1.1s ease-in-out infinite;
}
@keyframes bar-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

main { display: flex; gap: 1.5rem; padding: 1rem 1.5rem 2rem; flex-wrap: wrap; align-items: flex-start; justify-content: center; }

/* Same cap as #previewVideo/#finalVideo (640px) — picking cameras and
   reviewing the result should be directly comparable sizes, not one much
   bigger than the other. */
.stage { flex: 0 1 640px; min-width: min(360px, 100%); }

.video-wrap { position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 16/9; background: #000; }
.video-wrap video { width: 100%; height: 100%; display: block; }

/* Skeleton placeholder filling the same reserved box the video occupies, so
   clearing footage doesn't collapse or reflow the layout around it. */
.video-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.5rem; color: var(--muted); font-size: 0.9rem;
  background: repeating-linear-gradient(135deg, #14171f, #14171f 10px, #191c25 10px, #191c25 20px);
}

/* Same striped placeholder, but pulsing — this one means "actively working",
   not "empty", so it needs to read as busy rather than static. Sized like
   #previewVideo/#finalVideo so nothing shifts once the real player replaces it. */
.video-skeleton {
  width: 100%; max-width: var(--out-max-width, 640px); aspect-ratio: var(--out-aspect, 16/9); margin: 1rem auto 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.9rem;
  background: repeating-linear-gradient(135deg, #14171f, #14171f 10px, #191c25 10px, #191c25 20px);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.overlay {
  position: absolute; inset: 0;
  display: grid;
  pointer-events: none;
}
.overlay .cell {
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.1s ease;
}
.overlay .cell:hover { background: rgba(110, 231, 255, 0.22); }
.overlay .cell.blind {
  pointer-events: none; cursor: default;
  background: #000; border-color: transparent;
}
.overlay .cell.blind:hover { background: #000; }
/* A lens tile: the video underneath shows the whole lens as a fisheye
   square centered in the cell, and the map sits exactly on that square. */
.overlay .cell.lens {
  position: relative; pointer-events: none; cursor: default; border-color: transparent;
}
.overlay .cell.lens[title] { pointer-events: auto; cursor: pointer; }
.overlay .cell.lens[title]:hover .lens-rim { stroke: var(--accent); }
.overlay .cell.lens svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Layout preview: no video yet (or it is being rebuilt), so the cells show
   their own numbers and the caption sits along the bottom edge. */
.video-wrap.layout-preview video { visibility: hidden; }
.video-wrap.layout-preview .video-empty {
  inset: auto 0 0 0; padding: 0.4rem 0.6rem; font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.7); pointer-events: none;
}
.overlay.preview .cell:not(.blind):not(.lens) {
  display: flex; align-items: center; justify-content: center;
  background: rgba(110, 231, 255, 0.14); border-color: rgba(255, 255, 255, 0.25);
  cursor: default;
}
.overlay.preview .cell.rear:not(.blind):not(.lens) { background: rgba(255, 180, 84, 0.2); }
.overlay.preview .cell .cell-num { font-size: 1.3rem; font-weight: 700; color: #fff; pointer-events: none; }
.lens-label {
  position: absolute; top: 3px; left: 5px; z-index: 1;
  font-size: 0.68rem; color: var(--muted); white-space: nowrap;
  text-shadow: 0 0 3px #000;
}


/* No text label here — `matrix` already burns the camera number into the
   video itself (drawtext, for when the grid is watched standalone outside
   this editor). Drawing our own number on top of that in the overlay
   doubled it up, slightly offset, into a ghosted-looking duplicate. */

/* Which camera the EDL currently has live at the playhead, and — mid-pan —
   which one it's sweeping toward. Everything else dims down so the pick
   actually pops instead of just being one highlighted cell among 25. */
.overlay .cell.dim { background: rgba(0, 0, 0, 0.42); }
.overlay .cell.active {
  outline: 4px solid #f2ff00;
  outline-offset: -4px;
  background: rgba(242, 255, 0, 0.1);
  box-shadow: 0 0 14px rgba(242, 255, 0, 0.5);
}
.overlay .cell.target {
  outline: 4px dashed #f2ff00;
  outline-offset: -4px;
}

/* A camera some earlier entry already used, before the current one — dimmed
   like anything unused right now, but a thin border marks it as "already
   shown", not "never picked". */
.overlay .cell.used { outline: 1px solid rgba(242, 255, 0, 0.45); outline-offset: -1px; }

.transport-hint { color: #ffb454; white-space: nowrap; font-size: 0.82rem; }

/* Full width below the stage, not a side column — a proportional timeline
   needs room to actually show duration, not be squeezed into 360px. */
.footage-tabs {
  display: flex; gap: 0.35rem; overflow-x: auto;
  margin-top: 0.55rem; padding-bottom: 2px;
}
.footage-tab {
  display: flex; align-items: stretch; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 6px; background: #12151c;
  max-width: 14rem;
}
.footage-tab.active { border-color: var(--accent); }
.footage-tab-name {
  background: transparent; border: none; color: var(--paper);
  padding: 4px 8px; cursor: pointer; font-size: 0.82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.footage-tab-del {
  background: transparent; border: none; border-left: 1px solid var(--line);
  color: #ff9b9b; padding: 0 8px; cursor: pointer; font-size: 0.9rem;
}
.footage-tab-del:hover { color: #fff; background: rgba(255, 155, 155, 0.15); }
.footage-tabs.busy { opacity: 0.65; pointer-events: none; }
.footage-tab-name:disabled, .footage-tab-del:disabled { cursor: wait; opacity: 0.7; }

.edl { flex: 1 1 100%; margin-top: 0.35rem; }

.timeline-scale {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
}

.uniform-pan-row {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; color: var(--muted); white-space: nowrap;
}
.uniform-pan-row input[type="range"] { width: 8em; accent-color: #f2ff00; }
.uniform-pan-row #uniformPanValue { color: #f2ff00; font-variant-numeric: tabular-nums; }

/* One control per transition between camera picks, positioned at the exact
   time it happens (same left% math as the timeline blocks below it), so
   "set this cut to a pan" reads as an action on that specific transition —
   not a mode you had to remember to flip before clicking the next camera. */
.timeline-transitions { position: relative; height: 24px; }
.timeline-transitions:empty { height: 0; }
.transition { position: absolute; top: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; }
.transition-btn {
  background: #12151c; color: var(--muted); border: 1px solid var(--line);
  border-radius: 10px; padding: 1px 7px; font-size: 0.68rem; line-height: 1.4;
  cursor: pointer; white-space: nowrap;
}
.transition-btn:hover { border-color: var(--accent); }
.transition-btn.pan { color: #f2ff00; border-color: #f2ff00; background: rgba(242, 255, 0, 0.12); }
.transition-duration { width: 4.5em; height: 12px; accent-color: #f2ff00; cursor: pointer; }
.transition-duration-value {
  font-size: 0.68rem; color: #f2ff00; font-variant-numeric: tabular-nums; min-width: 2.4em;
}

.timeline {
  position: relative; height: 56px;
  background: #12151c; border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; cursor: ew-resize; touch-action: none;
}
.timeline-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.85rem; pointer-events: none;
}

/* One block per EDL segment — a hold (fixed camera) or a pan (sweep between
   two). Position/width are percentages of the container, so they're always
   proportional to the video's real duration regardless of pixel width. */
.seg {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid rgba(0, 0, 0, 0.5);
  font-size: 0.8rem; font-weight: 700; color: #fff;
  cursor: pointer; overflow: hidden; white-space: nowrap;
}
.seg.hold { background: linear-gradient(180deg, #2b3142, #1d222d); }
.seg.hold:hover { background: linear-gradient(180deg, #363d53, #262c3a); }
.seg.pan {
  font-size: 0.7rem;
  background: repeating-linear-gradient(135deg, #3a3f1f, #3a3f1f 7px, #4a5024 7px, #4a5024 14px);
}
.seg.active {
  outline: 3px solid #f2ff00; outline-offset: -3px;
  background: rgba(242, 255, 0, 0.16);
  z-index: 2;
}
.seg-del {
  position: absolute; top: 2px; right: 2px;
  background: rgba(0, 0, 0, 0.55); color: #ff9b9b; border: none; border-radius: 3px;
  font-size: 0.68rem; line-height: 1; padding: 1px 4px; cursor: pointer;
}

/* The line where one camera hands off to the next. Wide enough to grab,
   drawn as a thin bar so the rest of the block still seeks. */
.cut-handle {
  position: absolute; top: 0; bottom: 0; width: 12px; margin-left: -6px;
  z-index: 4; cursor: col-resize; touch-action: none;
}
.cut-handle::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px;
  background: transparent;
}
.cut-handle:hover::after,
.cut-handle.dragging::after { background: #fff; }
body.cutting, body.cutting * { cursor: col-resize !important; }

.playhead {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: #fff; box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
  pointer-events: none; z-index: 3;
}
.playhead::before {
  content: ""; position: absolute; top: 0; left: -4px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid #fff;
}

button {
  background: #12151c; color: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 0.85rem;
}
button:hover { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }
select {
  background: #12151c; color: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; font-size: 0.85rem; cursor: pointer;
}
select:hover { border-color: var(--accent); }
select:disabled { opacity: 0.5; cursor: default; }
button.danger { color: #ff9b9b; }

.action-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  margin-top: 0.45rem;
}
.action-spacer { flex: 1 1 0.5rem; }
#time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; white-space: nowrap; }

/* Tracks whether the preview below actually reflects the table above —
   editing the list after a render leaves the old preview showing with no
   other hint that it's now stale. */
.preview-status {
  margin-top: 0.6rem; padding: 5px 9px; border-radius: 5px;
  font-size: 0.82rem; display: inline-flex; align-items: center; gap: 0.4em;
}
.status--none { color: var(--muted); }
.status--rendering { color: #f2ff00; }
.status--ready { color: #7CFF9B; background: rgba(124, 255, 155, 0.1); }
.status--stale { color: #ffb454; background: rgba(255, 180, 84, 0.1); }
.status--error { color: #ff9b9b; background: rgba(255, 155, 155, 0.1); }

/* The timeline section is full-width (it needs the room), but a rendered
   result stretched to that same full width was comically large — cap it
   like any other video player instead of matching the timeline's width.
   Capping the width without centering just left it stranded on the left
   edge of that full-width section, so margin: auto to actually center it. */
/* --out-aspect / --out-max-width follow the output format (set from
   /config): a 9:16 Reels render at 640px wide would be over 1100px tall. */
#previewVideo { width: 100%; max-width: var(--out-max-width, 640px); margin: 1rem auto 0; background: #000; display: block; cursor: pointer; }

/* Preview/final use the same full-width EDL bar as the picker. Play sits
   under it, same as the picker transport — not beside the bar, which
   shrank the blocks so they no longer lined up. */
.output-transport { margin-top: 0.4rem; }
.output-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; white-space: nowrap; }

.final-res-btn { border-color: #7CFF9B; color: #7CFF9B; }
.final-res-btn:hover { background: rgba(124, 255, 155, 0.1); }
.token-balance { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }

.stage-log {
  margin-top: 0.5rem; padding: 8px 10px; border-radius: 5px;
  background: #0b0e0c; color: #9fb3a8; font-size: 0.75rem; line-height: 1.5;
  max-height: 160px; overflow-y: auto; white-space: pre-wrap;
}

@media (max-width: 640px) {
  header { padding: 0.9rem 1rem 0.4rem; }
  .site-header { padding: 0.9rem 1rem 0; }
  main { padding: 0.75rem 1rem 1.5rem; gap: 1rem; }
  .home, .auth-page, .profile-page { padding: 1rem 1rem 2rem; }
  .home-copy h2 { font-size: 1.5rem; }
  .brand .hint { display: none; }
  .account-name { display: none; }
  .account-btn { min-height: 44px; min-width: 44px; justify-content: center; }
  .account-menu a, .account-menu button { min-height: 44px; }
  .format-picker { gap: 0.5rem; }
  .format-card { min-height: 140px; padding: 0.6rem 0.4rem; }
  .format-icon { height: 64px; }
  .profile-row { grid-template-columns: 1fr; gap: 0.2rem; }
  button, select, .primary-btn, .primary-link { min-height: 44px; }
  .upload-tip-btn, .upload-tip-close { min-height: 0; width: 36px; height: 36px; }
  .action-bar { gap: 0.5rem; }
  .action-spacer { flex-basis: 100%; }
  .uniform-pan-row { white-space: normal; }
  #uniformPanDuration { flex: 1 1 8em; }
  .timeline { height: 64px; }
  .timeline-transitions { height: 32px; }
  .transition-btn { min-height: 28px; padding: 3px 9px; font-size: 0.75rem; }
  .transition-duration { width: 3.5em; height: 20px; }
  .seg-del { padding: 6px 9px; font-size: 0.8rem; }
  .overlay .cell:hover { background: transparent; }
  .progress-col { min-width: 0; flex-basis: 100%; }
  .transport-hint { white-space: normal; }
  .video-wrap.layout-preview .video-empty { padding: 0.15rem 0.5rem; font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .lens-label { display: none; }
  .overlay.preview .cell .cell-num { font-size: 1.1rem; }
}

/* Bottom sheet for confirms / notices — slides up over a dimmed backdrop. */
.sheet {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.sheet[hidden] { display: none; }
.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity 0.2s ease;
  pointer-events: auto;
}
.sheet-card {
  position: relative; z-index: 1;
  width: min(28rem, 100%);
  margin: 0; padding: 1.1rem 1.15rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  background: #161a22; border: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  transform: translateY(110%);
  transition: transform 0.22s ease;
  pointer-events: auto;
}
.sheet--open .sheet-backdrop { opacity: 1; }
.sheet--open .sheet-card { transform: translateY(0); }
.sheet-title { margin: 0 0 0.45rem; font-size: 1.1rem; font-weight: 650; }
.sheet-message { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.sheet-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem;
  margin-top: 1.1rem;
}
.sheet-cancel { min-width: 5.5rem; }
.sheet-confirm { min-width: 5.5rem; }
.sheet-confirm.danger {
  background: rgba(255, 155, 155, 0.14); border-color: #ff9b9b; color: #ff9b9b;
}
.sheet-confirm.danger:hover { background: rgba(255, 155, 155, 0.22); border-color: #ff9b9b; }
@media (prefers-reduced-motion: reduce) {
  .sheet-backdrop, .sheet-card { transition: none; }
}

/* Lens editor (lenseditor.js): one lens at full size, numbers draggable. */
.lens-editor {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0, 0, 0, 0.7);
}
.lens-editor-panel {
  width: min(520px, 100%); max-height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem;
  background: #161a22; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.lens-editor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.lens-editor-tabs { display: flex; gap: 0.4rem; }
.lens-editor-tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
.lens-editor-stage {
  width: min(100%, 60vh); aspect-ratio: 1; margin: 0 auto;
  background: #000; border-radius: 50%; touch-action: none; cursor: grab;
}
.lens-editor-stage.locked { cursor: default; }
.lens-editor-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lens-editor-stage .lens-num { font-size: 14px; }
.lens-editor-stage .lens-num.ghost { font-size: 11px; font-weight: 400; }
.lens-editor-stage .lens-num.active { font-size: 18px; }
.lens-map.colored .lens-fp { fill-opacity: 0.12; }
.lens-map.colored .lens-fp.active { fill-opacity: 0.4; stroke-width: 3px; }
/* Other lens's cameras on this view: dashed outline, no fill. */
.lens-map .lens-fp.ghost {
  fill: none; fill-opacity: 0; stroke-opacity: 0.7;
  stroke-width: 1.5px; stroke-dasharray: 3 3; pointer-events: none;
}
.lens-map.colored .lens-fp.ghost { fill-opacity: 0; }
.lens-editor-cams { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.lens-cam {
  min-width: 40px; min-height: 40px; padding: 0 8px; border-radius: 20px;
  border: 2px solid var(--cam); color: var(--cam); background: transparent; font-weight: 700;
}
.lens-cam:hover { border-color: var(--cam); }
.lens-cam[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; border-style: dashed; }
.lens-cam:disabled { cursor: default; }
.lens-editor-hint { margin: 0; color: var(--muted); font-size: 0.85rem; }
.lens-editor-actions { display: flex; align-items: center; gap: 0.5rem; }