* {
  box-sizing: border-box;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Rubik", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
}

[hidden] {
  display: none !important;
}

.page {
  display: grid;
  grid-template-columns: 320px 1fr 1fr;
  gap: 20px;
  min-height: 100vh;
  padding: 20px;
}

.panel {
  background: linear-gradient(180deg, rgba(24, 35, 52, 0.96), rgba(14, 20, 32, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

h1,
h2 {
  margin: 0 0 8px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

select,
button,
input[type="range"] {
  width: 100%;
}

select,
button {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  padding: 12px;
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
}

button {
  cursor: pointer;
  background: linear-gradient(135deg, #d2ff00, #a8f000);
  color: #071018;
  font-weight: 700;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.status,
.hint,
.selected-info {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.5;
}

.player-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #020617;
  border-radius: 18px;
  overflow: hidden;
  container-type: inline-size;
}

video {
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

.overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.overlay-layer.selection-active {
  pointer-events: auto;
  cursor: crosshair;
}

.text-preview-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  container-type: inline-size;
  font-family: "Rubik", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
}

/* ─── Match context bar ──────────────────────────────────────────────────
   Sizing mirrors Remotion's MatchContextBar.jsx (rendered at 1920×1080).
   Each px in the final render maps to (px/1920)*100 cqw, so the preview
   inside .player-shell / .global-player-shell (both container-type:
   inline-size, aspect-ratio 16/9) is a faithful approximation of the final
   video at any size. Don't replace cqw with vw — vw scales with the
   browser, not the video, which is exactly the bug we just fixed.
   Reference: backend/remotion/src/MatchContextBar.jsx

   Phase 2 (logos + team colours): the bar is split into two team "zones"
   (.editor-match-home / .editor-match-away). Each zone reads --team-primary
   and --team-secondary from inline style (set by renderMatchZone() in
   app.js) and paints its own brand-coloured gradient. The .vs pill stays
   in the middle, unaffected.
*/
.editor-match-preview {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 96cqw;                   /* fixed width so zones actually grow to fit names */
  min-height: 4.06cqw;            /* Remotion: min-height 78 */
  padding: 0;                     /* zones draw flush to the edges */
  border-radius: 1.77cqw;         /* Remotion: 34px */
  /* Bar shell is just a thin border + drop shadow. The team zones below
     supply the actual fill colour. */
  background: rgba(7, 12, 17, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    0 1.15cqw 3.02cqw rgba(0, 0, 0, 0.42),  /* Remotion: 0 22 58 */
    0 0 0 1px rgba(126, 232, 255, 0.10) inset;
  color: #f8fafc;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  direction: ltr;
  text-align: center;
  overflow: hidden;
}

/* Each team gets its own zone with a gradient sweeping from its primary
   colour at the outer edge to a darkened secondary at the inner edge.
   The two zones meet in the middle where the VS pill sits. */
.editor-match-zone {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  padding: 0.68cqw 2.5cqw 0.78cqw;
  /* Fallback gradient if no team matched — neutral dark. */
  background: linear-gradient(
    var(--zone-angle, 90deg),
    var(--team-primary, rgba(7,12,17,0.92)) 0%,
    color-mix(in srgb, var(--team-primary, #0c1217) 55%, var(--team-secondary, #ffffff) 45%) 100%
  );
}
.editor-match-zone.editor-match-home {
  --zone-angle: 270deg;          /* outer edge = left = home */
}
.editor-match-zone.editor-match-away {
  --zone-angle: 90deg;            /* outer edge = right = away */
}
.editor-match-preview.is-rtl .editor-match-zone.editor-match-home {
  --zone-angle: 90deg;            /* RTL flips which side is outer */
}
.editor-match-preview.is-rtl .editor-match-zone.editor-match-away {
  --zone-angle: 270deg;
}

/* Logo — sits next to the team name, on the OUTER edge of its zone.
   Sized in cqw so it scales identically with the rest of the bar.
   Remotion equivalent: ~62px in 1920 → 3.23cqw. */
.editor-match-logo {
  flex: 0 0 auto;
  width: 3.23cqw;
  height: 3.23cqw;
  object-fit: contain;
  /* White-bg crests against bright primaries still need a tiny halo. */
  filter: drop-shadow(0 0.1cqw 0.2cqw rgba(0,0,0,0.45));
}

.editor-match-preview::before {
  content: "";
  position: absolute;
  left: 1.25cqw;                  /* Remotion: 24 */
  right: 1.25cqw;
  top: 0;
  height: 0.26cqw;                /* Remotion: 5 */
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #f2c84b, #fff5b8, #f2c84b, transparent);
  opacity: 0.92;
}

/* Subtle inner vignette across the whole bar. The previous amber/cyan
   tints were removed — they fight with the per-team gradients now that
   each zone owns its own brand colours. */
.editor-match-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.20) 100%);
}

.editor-match-preview.is-rtl {
  direction: rtl;
}

/* Vertical positions match Remotion's outer layout:
     top   → paddingTop 14 in 1080 frame = 0.73cqw
     center→ centered
     bottom→ bottom 118 in 1080 frame = 6.15cqw */
.editor-match-preview[data-pos="top"] {
  top: 0.73cqw;
}

.editor-match-preview[data-pos="center"] {
  top: 50%;
  transform: translate(-50%, -50%);
}

.editor-match-preview[data-pos="bottom"] {
  bottom: 6.15cqw;
}

.editor-match-team {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.7cqw;              /* Remotion: 44px (LTR) — scaled down for UI fit */
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 0.156cqw 0 rgba(0,0,0,0.35), 0 0 0.94cqw rgba(255,255,255,0.14);
}

.editor-match-preview.is-rtl .editor-match-team {
  font-size: 2.0cqw;              /* Remotion: 50px (RTL) — scaled down for UI fit */
}

.editor-match-vs {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 2.92cqw;             /* Remotion: 56 */
  height: 1.77cqw;                /* Remotion: 34 */
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(126, 232, 255, 0.34);
  background: rgba(4, 10, 16, 0.70);
  color: rgba(126, 232, 255, 0.95);
  font-size: 0.83cqw;             /* Remotion: 16 */
  font-weight: 900;
  letter-spacing: 0.156cqw;       /* Remotion: 3 */
  box-shadow: 0 0 0.94cqw rgba(126, 232, 255, 0.14);
}

/* ── Vertical match preview (Quick Reel) ─────────────────────────────
   Mirrors backend/remotion/src/MatchContextBarVertical.jsx:
     - Narrower than landscape (≤ 92% of the shell width).
     - Each team name stacked one word per line.
     - Word size scales down with character count.
   Only emitted by renderTextOverlay() when appMode === 'quickReel'.
   Lives next to .editor-match-preview so the landscape variant is
   untouched.                                                          */
.editor-match-preview-vertical {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 9:16 shell is narrow; reserve 92% of width so there's air on the
     sides while each zone still has real estate for stacked names. */
  width: 92cqw;
  min-height: 12.2cqw;             /* MatchContextBarVertical: 132px in 1080px-wide canvas */
  padding: 0;
  border-radius: 2.6cqw;           /* JSX: 28px → 28/1080 */
  background: rgba(7, 12, 17, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    0 2.0cqw 5.4cqw rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(126, 232, 255, 0.10) inset;
  color: #f8fafc;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.4cqw minmax(0, 1fr);
  align-items: stretch;
  direction: ltr;
  overflow: hidden;
}

.editor-match-preview-vertical.is-rtl {
  direction: rtl;
}

.editor-match-preview-vertical[data-pos="top"] {
  top: 5.5cqw;
}
.editor-match-preview-vertical[data-pos="center"] {
  top: 50%;
  transform: translate(-50%, -50%);
}
.editor-match-preview-vertical[data-pos="bottom"] {
  bottom: 14.8cqw;                 /* JSX: 160px / 1080 */
}

/* Top accent strip — same broadcast cue as the JSX. */
.editor-match-preview-vertical::before {
  content: "";
  position: absolute;
  left: 1.67cqw;                   /* 18 / 1080 */
  right: 1.67cqw;
  top: 0;
  height: 0.37cqw;                 /* 4 / 1080 */
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #f2c84b, #fff5b8, #f2c84b, transparent);
  opacity: 0.92;
  z-index: 2;
}

.editor-match-zone-v {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55cqw;
  padding: 1.3cqw 1.3cqw 1.48cqw;  /* JSX: 14/14/16 px in 1080-wide canvas */
  background: linear-gradient(
    var(--zone-angle, 90deg),
    var(--team-primary, rgba(7,12,17,0.92)) 0%,
    color-mix(in srgb, var(--team-primary, #0c1217) 55%, var(--team-secondary, #ffffff) 45%) 100%
  );
}
.editor-match-zone-v.editor-match-home { --zone-angle: 270deg; }
.editor-match-zone-v.editor-match-away { --zone-angle: 90deg; }
.editor-match-preview-vertical.is-rtl .editor-match-zone-v.editor-match-home { --zone-angle: 90deg; }
.editor-match-preview-vertical.is-rtl .editor-match-zone-v.editor-match-away { --zone-angle: 270deg; }

.editor-match-logo-v {
  flex: 0 0 auto;
  width: 3.9cqw;                   /* 42 / 1080 */
  height: 3.9cqw;
  object-fit: contain;
  filter: drop-shadow(0 0.18cqw 0.37cqw rgba(0,0,0,0.55));
}

.editor-match-name-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 0.28cqw 0 rgba(0,0,0,0.42), 0 0 1.67cqw rgba(255,255,255,0.14);
}

/* One word per line. Bucket size by character count, same shape as
   lineFontSize() in MatchContextBarVertical.jsx. Values in cqw
   against the player-shell so the bar scales naturally with the
   preview viewport.

   The JSX uses pixel sizes against a 1080-wide canvas:
     RTL (Hebrew)   base 40 / 32 / 27 / 22  →  3.70 / 2.96 / 2.50 / 2.04 cqw
     LTR (English)  base 38 / 30 / 25 / 20  →  3.52 / 2.78 / 2.31 / 1.85 cqw
   The default values below match LTR; the .is-rtl overrides bump
   them to RTL so Hebrew preview = Hebrew render (the regression the
   user reported: "preview titles are noticeably smaller than the
   final video"). */
.editor-match-team-v {
  font-family: "Rubik", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}
.editor-match-team-v-lg { font-size: 3.52cqw; }   /* ≤6 chars LTR (38px / 1080) */
.editor-match-team-v-md { font-size: 2.78cqw; }   /* 7-9 chars LTR (30px / 1080) */
.editor-match-team-v-sm { font-size: 2.31cqw; }   /* 10-12 chars LTR (25px / 1080) */
.editor-match-team-v-xs { font-size: 1.85cqw; }   /* 13+ chars LTR (20px / 1080) */

/* RTL bump — Hebrew tokens get the same +2px nudge the JSX gives them. */
.editor-match-preview-vertical.is-rtl .editor-match-team-v {
  text-transform: none;
}
.editor-match-preview-vertical.is-rtl .editor-match-team-v-lg { font-size: 3.70cqw; } /* 40 / 1080 */
.editor-match-preview-vertical.is-rtl .editor-match-team-v-md { font-size: 2.96cqw; } /* 32 / 1080 */
.editor-match-preview-vertical.is-rtl .editor-match-team-v-sm { font-size: 2.50cqw; } /* 27 / 1080 */
.editor-match-preview-vertical.is-rtl .editor-match-team-v-xs { font-size: 2.04cqw; } /* 22 / 1080 */

.editor-match-vs-v {
  position: relative;
  z-index: 3;
  align-self: center;
  min-width: 4.4cqw;
  height: 2.8cqw;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(126, 232, 255, 0.34);
  background: rgba(4, 10, 16, 0.86);
  color: rgba(126, 232, 255, 0.95);
  font-family: "Rubik", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
  font-size: 1.3cqw;
  font-weight: 800;
  letter-spacing: 0.23cqw;
  box-shadow: 0 0 1.67cqw rgba(126, 232, 255, 0.18);
}

.editor-action-preview {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: "Rubik", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.95;
  text-transform: uppercase;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.65),
    0 0 18px rgba(255, 200, 30, 0.55),
    0 8px 26px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

/* Score pill — sits just inside the bar's edge (above if bottom, below
   if top), mirrors the Quick Reel ScoreTextOverlay so the user sees the
   live preview match what the final render will draw. */
.editor-score-preview {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.editor-score-preview[data-pos="bottom"] { bottom: 11.5cqw; }
.editor-score-preview[data-pos="top"]    { top: 11.5cqw; }
.editor-score-preview[data-pos="center"] { top: 54%; }
.editor-score-preview span {
  padding: 0.55cqw 1.6cqw;
  border-radius: 999px;
  background: rgba(4, 10, 16, 0.82);
  border: 1px solid rgba(126, 232, 255, 0.34);
  color: #7ee8ff;
  font-family: "Rubik", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  font-size: 2.1cqw;
  letter-spacing: 0.1em;
  text-align: center;
  box-shadow: 0 0 14px rgba(126, 232, 255, 0.18);
}

/* Mirrors Remotion ActionStamp.jsx positions:
     top    → top 150 in 1080 frame = 7.81cqw
     center → centered
     bottom → bottom 130 in 1080 frame = 6.77cqw
   Reference: backend/remotion/src/ActionStamp.jsx */
.editor-action-preview[data-pos="top"] {
  top: 7.81cqw;
}

.editor-action-preview[data-pos="center"] {
  top: 50%;
  transform: translate(-50%, -50%);
}

.editor-action-preview[data-pos="bottom"] {
  bottom: 6.77cqw;
}

.selection-label {
  position: absolute;
  top: -20px;
  left: -2px;
  transform: none;
  padding: 1px 6px;
  border-radius: 0;
  background: #ff7a00;
  color: #111827;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
}

/* ── Smooth player ring — broadcast-grade ───────────────────── */
.player-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.93);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: ring-breathe 2.8s ease-in-out infinite;
}

@keyframes ring-breathe {
  0%, 100% { transform: scale(1.00); opacity: 1.0; }
  50%       { transform: scale(1.03); opacity: 0.80; }
}

/* ── Tracking loader dots ───────────────────────────────────── */

.loader-dots { display: flex; gap: 5px; }

.loader-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #d2ff00;
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1.0; }
}

/* ── Selection-mode player boxes ────────────────────────────── */
.player-dot {
  position: absolute;
  border: 2px solid rgba(251, 191, 36, 0.7);
  background: transparent;
  pointer-events: none;
}

.player-dot .selection-label {
  background: rgba(251, 191, 36, 0.85);
  color: #111;
  white-space: nowrap;
}

.player-dot.marker-only {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.player-dot.marker-only .selection-label {
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 16px;
  padding: 2px 6px 2px 5px;
  border-radius: 999px;
  border: 1px solid rgba(47, 230, 205, 0.55);
  background: rgba(4, 10, 15, 0.86);
  color: #f7fbff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
}

.player-dot.marker-only .selection-label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d2ff00;
  box-shadow: 0 0 0 2px rgba(210, 255, 0, 0.18);
  flex: 0 0 auto;
}

.player-dot.marker-only .selection-label-id {
  font-variant-numeric: tabular-nums;
}

.player-dot.show-box {
  border: 2px solid rgba(251, 191, 36, 0.7);
  background: transparent;
}

.player-dot.show-box .selection-label {
  background: rgba(251, 191, 36, 0.85);
  color: #111;
}

@media (max-width: 640px) {
  .overlay-layer.selection-active {
    cursor: default;
  }

  .player-dot {
    border: 1px solid rgba(251, 191, 36, 0.52);
    background: rgba(251, 191, 36, 0.03);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  }

  .player-dot .selection-label {
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(7, 12, 18, 0.82);
    border: 1px solid rgba(251, 191, 36, 0.72);
    color: #ffd66b;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  }

  .player-dot.marker-only {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .player-dot.marker-only .selection-label {
    top: -13px;
    padding: 2px 5px;
    border-color: rgba(47, 230, 205, 0.58);
    background: rgba(4, 10, 15, 0.88);
    color: #f7fbff;
    font-size: 7px;
  }

  .player-dot.show-box {
    border: 1px solid rgba(251, 191, 36, 0.52);
    background: rgba(251, 191, 36, 0.03);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  }
}

.metadata-panel {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
}

.metadata-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
}

.meta-key {
  color: #64748b;
  white-space: nowrap;
}

.meta-val {
  color: #e2e8f0;
  font-family: monospace;
  font-size: 13px;
}

.meta-val.ok   { color: #34d399; }
.meta-val.warn { color: #fbbf24; }

.meta-warning {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 11px;
}

.segment-render-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.segment-render-status {
  color: #d2ff00;
  font-size: 13px;
  font-weight: 700;
}

.segment-render-video {
  width: 100%;
  margin-top: 10px;
  border-radius: 12px;
  background: #000;
}

/* ── Ring interaction handles ───────────────────────────────── */
.ring-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.rh-handle {
  position: absolute;
  width: 13px;
  height: 13px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 10;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.55);
  transition: transform 0.1s;
  /* Block default touch gestures (page scroll, zoom) so drag works on phones */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Invisible 44×44px hit-area extension — meets touch-target accessibility size
   without changing the dot's visual footprint. */
.rh-handle::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
}

.rh-handle:hover {
  transform: translate(-50%, -50%) scale(1.35);
}

.rh-handle[data-rh="nw"] { cursor: nw-resize; }
.rh-handle[data-rh="ne"] { cursor: ne-resize; }
.rh-handle[data-rh="sw"] { cursor: sw-resize; }
.rh-handle[data-rh="se"] { cursor: se-resize; }

.rh-handle.rh-center {
  width: 10px;
  height: 10px;
  background: rgba(255, 210, 50, 0.95);
  border-color: rgba(0, 0, 0, 0.5);
  cursor: move;
}

/* Correction mode — playerShell gets crosshair cursor */
.player-shell.correction-active {
  cursor: crosshair;
  /* Stop the browser from interpreting drags as scroll/zoom while we're
     in correction mode — otherwise touchmove gets cancelled on mobile. */
  touch-action: none;
}

/* ── Spotlight overlay — stage cone from above ──────────────── */
.spotlight-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* gradient set dynamically by JS */
}

/* Cone beam above the player */
.spotlight-beam {
  position: absolute;
  pointer-events: none;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 220, 0) 0%,
    rgba(255, 255, 200, 0.06) 60%,
    rgba(255, 255, 220, 0.18) 100%
  );
}

/* ── Ground circle — focus shadow under player ──────────────── */
.ground-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: ground-pulse 2.8s ease-in-out infinite;
}

@keyframes ground-pulse {
  0%, 100% { opacity: 0.70; transform: scaleX(1.00); }
  50%       { opacity: 0.45; transform: scaleX(1.06); }
}

/* ── Target crosshair overlay ───────────────────────────────── */
.target-overlay {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(239, 68, 68, 0.9);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(239, 68, 68, 0.4);
  pointer-events: none;
  animation: target-scan 3.6s linear infinite;
}

@keyframes target-scan {
  from { box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 0 10px rgba(239,68,68,0.4); }
  50%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 0 20px rgba(239,68,68,0.7); }
  to   { box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 0 10px rgba(239,68,68,0.4); }
}

.target-hline {
  position: absolute;
  top: 50%;
  left: -32px;
  right: -32px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(239,68,68,0.8) 20%, rgba(239,68,68,0.8) 80%, transparent 100%);
  transform: translateY(-50%);
}

.target-vline {
  position: absolute;
  left: 50%;
  top: -32px;
  bottom: -32px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(239,68,68,0.8) 20%, rgba(239,68,68,0.8) 80%, transparent 100%);
  transform: translateX(-50%);
}

/* ── Edit mode button active state ─────────────────────────── */
button.edit-active {
  background: linear-gradient(135deg, #b45309, #d97706);
  outline: 2px solid #ff7a00;
}

@media (max-width: 1200px) {
  .page {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   MULTI-CLIP MVP — Two-screen architecture
   ══════════════════════════════════════════════════════════════ */

/* ── Screen visibility ──────────────────────────────────────── */

.screen[hidden] {
  display: none !important;
}

/* ── App Header (grid screen) ───────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(24, 35, 52, 0.98), rgba(14, 20, 32, 0.96));
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  gap: 16px;
}

.app-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #d2ff00, #82b300);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Editor Header ──────────────────────────────────────────── */

/* ── Transition style group (label + picker) ─────────────────── */
.trans-style-group {
  display: none;
  align-items: center;
  gap: 8px;
}
.trans-style-label {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ── Transition style picker ────────────────────────────────── */
.trans-style-picker {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 3px;
}

.trans-style-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.trans-style-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.trans-style-btn.trans-style-active {
  background: rgba(210,255,0,0.16);
  color: #d2ff00;
  font-weight: 600;
}

/* ── Buttons ────────────────────────────────────────────────── */

.btn-primary:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

.btn-ghost:hover:not(:disabled) {
  border-color: rgba(148, 163, 184, 0.5);
  color: #f1f5f9;
  background: rgba(15, 23, 42, 0.8);
}

.btn-ghost:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-track:hover:not(:disabled) { opacity: 0.85; }
.btn-track:disabled { opacity: 0.38; cursor: not-allowed; }

.btn-download:hover { opacity: 0.85; }

/* ── Clip strip (horizontal scroll row) ─────────────────────── */

.clip-strip::-webkit-scrollbar {
  height: 5px;
}
.clip-strip::-webkit-scrollbar-track { background: transparent; }
.clip-strip::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 3px;
}

/* ── Individual clip card ───────────────────────────────────── */

.clip-card.add-card:hover {
  border-color: rgba(210, 255, 0, 0.5);
  color: #94a3b8;
  transform: none;
  box-shadow: none;
}

.transition-gap-chip {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  min-height: 78px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: rgba(203, 213, 225, 0.86);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none;
  touch-action: manipulation;
}

.transition-gap-chip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  height: 1px;
  background: linear-gradient(90deg, rgba(126,154,170,0.18), rgba(126,231,255,0.30), rgba(126,154,170,0.18));
  transform: translateY(-50%);
}

.transition-gap-chip:hover {
  color: #ffffff;
}

.transition-gap-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 0, 0.32);
  background:
    radial-gradient(circle at 30% 30%, rgba(210,255,0,0.14), transparent 50%),
    linear-gradient(180deg, rgba(14, 24, 36, 0.98), rgba(6, 10, 17, 0.98));
  color: #d2ff00;
  font-size: 13px;
  line-height: 1;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.transition-gap-label {
  display: block;
  max-width: 76px;
  overflow: hidden;
  color: rgba(226, 232, 240, 0.9);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.transition-options {
  display: grid;
  gap: 12px;
  padding: 4px 0 2px;
}

.transition-option-card {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 104px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(11, 18, 28, 0.78);
  color: #e5f3ff;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.transition-option-card:hover,
.transition-option-card.transition-option-active {
  border-color: rgba(34, 211, 238, 0.82);
  background: rgba(8, 28, 38, 0.92);
}

.transition-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #050a12;
}

.transition-demo-field {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18) 0 2px, transparent 2px 100%),
    radial-gradient(circle at 26% 52%, rgba(255,255,255,0.24), transparent 3px),
    radial-gradient(circle at 48% 44%, rgba(255,255,255,0.24), transparent 3px),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,0.24), transparent 3px),
    linear-gradient(135deg, #176238, #2f8c46 48%, #14542f);
  background-size: 18px 100%, auto, auto, auto, auto;
}

.transition-preview-video,
.transition-demo-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.transition-demo-shot-a {
  background:
    radial-gradient(circle at 30% 42%, #f8fafc 0 4px, transparent 5px),
    linear-gradient(135deg, #174c7a, #2a7c46);
}

.transition-demo-shot-b {
  background:
    radial-gradient(circle at 68% 48%, #f8fafc 0 4px, transparent 5px),
    linear-gradient(135deg, #204b25, #8b9f2d);
  animation: transitionCrossfadePreview 1.7s ease-in-out infinite alternate;
}

@keyframes transitionCrossfadePreview {
  from { opacity: 0; }
  to { opacity: 1; }
}

.transition-option-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.transition-option-copy strong {
  font-size: 15px;
  line-height: 1.2;
}

.transition-option-copy span {
  color: #8ea6b8;
  font-size: 12px;
  line-height: 1.35;
}

/* ── Thumbnail ──────────────────────────────────────────────── */

.clip-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: #0a0f1a;
  color: #334155;
}

/* ── Clip badge (status) ────────────────────────────────────── */

/* ── Clip footer (name + remove) ────────────────────────────── */

.clip-card:hover .clip-remove {
  opacity: 1;
}

/* ── Render progress bar ────────────────────────────────────── */

/* ── Result section ─────────────────────────────────────────── */

.result-section video {
  width: 100%;
  max-width: 640px;
  border-radius: 10px;
  background: #000;
  height: auto;
}

/* ═══════════════════════════════════════════════════════
   PLAYER DATA MODAL
════════════════════════════════════════════════════════ */

.modal-overlay[hidden] { display: none; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.modal-header h2 {
  margin: 0; font-size: 18px; color: #f1f5f9;
}

.modal-footer {
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 10px;
}

.form-row { display: flex; flex-direction: column; gap: 5px; }
.form-row label {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 1px;
}
.form-row-half { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-row-half > div, .form-row-three > div { display: flex; flex-direction: column; gap: 5px; }
.form-row-half > div label, .form-row-three > div label {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 1px;
}

.form-input::placeholder { color: rgba(255,255,255,0.25); }

.form-color {
  width: 38px; height: 34px;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
  background: transparent; cursor: pointer; padding: 2px;
}
.color-hex {
  font-size: 13px; color: rgba(255,255,255,0.5); font-family: monospace;
}

.form-hint {
  font-weight: 400; font-size: 11px; color: rgba(255,255,255,0.3);
  text-transform: none; letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE-FIRST VISUAL SYSTEM
   Keeps existing logic, re-skins the shell for PWA/mobile use.
══════════════════════════════════════════════════════════════ */

:root {
  --bg-0: #071018;
  --bg-1: #0c1722;
  --bg-2: #101d2a;
  --surface-1: rgba(15, 27, 39, 0.94);
  --surface-2: rgba(19, 34, 48, 0.94);
  --surface-3: rgba(10, 19, 29, 0.78);
  --stroke-soft: rgba(142, 185, 204, 0.14);
  --stroke-strong: rgba(210, 255, 0, 0.26);
  --text-0: #f3fbff;
  --text-1: #d6e7f1;
  --text-2: #88a0b2;
  --accent: #d2ff00;
  --accent-2: #a8f000;
  --danger: #f87171;
  --shadow-xl: 0 24px 70px rgba(0, 0, 0, 0.42);
  --radius-card: 24px;
  --radius-soft: 18px;
  --radius-pill: 999px;
  --editor-bg: #03080d;
  --editor-panel: rgba(8, 17, 25, 0.86);
  --editor-panel-strong: rgba(12, 24, 34, 0.94);
  --editor-border: rgba(255, 255, 255, 0.12);
  --editor-muted: #8c99a6;
  --editor-text: #f4f7fa;
  --editor-accent: #d2ff00;
  --editor-accent-2: #82b300;
  --editor-soft: rgba(210, 255, 0, 0.14);
}

body {
  margin: 0;
  font-family: "Rubik", "Noto Sans Hebrew", "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, rgba(210, 255, 0, 0.10), transparent 28%),
    linear-gradient(180deg, #0a131c 0%, #050b11 100%);
  color: var(--text-0);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.16;
  mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 72%);
}

.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0;
  position: relative;
  gap: 0;
}

/* ─── Quick Reel mode — affordances hidden when body[data-app-mode="quickReel"]
   The professional studio UI is still in the DOM (same gridScreen +
   editorScreen) but these elements don't make sense for the single-clip
   vertical-output flow. CSS-only so the hide rule reverts the moment a
   user navigates back to startScreen and picks "Professional". */
body[data-app-mode="quickReel"] #previewAddClipBtn,
body[data-app-mode="quickReel"] #addClipCard,
body[data-app-mode="quickReel"] #playerCardBtn,
body[data-app-mode="quickReel"] #playerCardTile,
body[data-app-mode="quickReel"] .trans-style-group,
/* Quick Reel is a single clip — there's no "between clip A and B" to put
   a transition style on. Hide every gap-chip + the default-transition
   header inside the clip strip. */
body[data-app-mode="quickReel"] .transition-gap-chip {
  display: none !important;
}

/* ─── Start Screen — entry hub after login ──────────────────────────
   Two large cards using the existing design tokens (panel gradient,
   stroke-soft border, radius-card, shadow-xl, accent CTA matching
   btn-primary). No emojis — typography-first, like the rest of the app. */
.screen-start {
  background: var(--bg-0);
  color: var(--text-0);
  padding: max(10px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  gap: 14px;
}
.screen-start::before {
  /* Subtle brand glow at the top — same restrained vibe as the studio
     panels' ::after gloss. Purely decorative, pointer-events: none. */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 360px;
  background:
    radial-gradient(900px 360px at 50% -10%, rgba(210, 255, 0, 0.10), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.screen-start > * { position: relative; z-index: 1; }
/* Header above the cards so the hamburger dropdown never paints behind
   the semi-transparent .start-card backgrounds below. */
.screen-start > .start-header { z-index: 3; }

.screen-start .start-header {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.screen-start .start-header-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.screen-start .app-header-logo-wrap {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}
.screen-start .app-header-logo {
  height: 36px;
  width: auto;
}
/* Start Screen hamburger — same visual as the studio's. The dropdown
   panel anchors to the inline-start edge so it doesn't push off-screen
   on phones, AND sits in its own high stacking context so it never
   bleeds through the semi-transparent card backgrounds below. */
.screen-start .start-account-menu {
  justify-self: start;
  z-index: 50;
}
.screen-start .start-account-menu .account-menu-panel {
  inset-inline-start: 0;
  inset-inline-end: auto;
  left: auto;
  right: auto;
  z-index: 1000;
}
.screen-start .language-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.screen-start .language-toggle-trigger,
#gridScreen .language-toggle-trigger {
  min-width: 56px;
  min-height: 36px;
  padding: 0 12px;
  border: 2px solid var(--stroke-soft);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-main);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.screen-start .language-toggle-trigger:active,
#gridScreen .language-toggle-trigger:active { transform: scale(0.96); }

.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 1200;
  min-width: 148px;
  display: none;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(2, 12, 24, 0.22);
}

.language-toggle.is-open .language-menu,
.language-toggle:focus-within .language-menu {
  display: grid;
  gap: 4px;
}

.language-toggle-btn {
  min-height: 42px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #07113b;
  text-align: start;
  cursor: pointer;
}

.language-toggle-btn strong {
  font-size: 13px;
  font-weight: 900;
}

.language-toggle-btn span {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
}

.language-toggle-btn.is-active {
  background: #eef4ff;
  color: #0b5cff;
}
.screen-start .start-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Sit close to the header — no more dead space at the top. */
  justify-content: flex-start;
  width: min(100%, 580px);
  margin: 0 auto;
  padding-top: 4px;
}

/* Discoverable shortcut to /mvp/profile.html under the two flow cards.
   Deliberately understated — it is a secondary affordance next to the
   two large primary CTAs (new Highlight / new Reel). The hamburger
   menu still links to the same page; this just makes the path visible
   without an extra tap. */
.start-secondary-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-1, #cbd5e1);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.1px;
}
.start-secondary-link:hover,
.start-secondary-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-0, #f8fafc);
  outline: none;
}
.start-secondary-link-arrow {
  font-size: 16px;
  opacity: 0.8;
}
/* RTL flip: in Hebrew the arrow points the wrong way visually after the
   text. Mirror it so it still reads "go forward". */
:dir(rtl) .start-secondary-link-arrow,
[dir="rtl"] .start-secondary-link-arrow {
  transform: scaleX(-1);
}
/* Section title — sits between header and cards. Sized down per polish
   round so it doesn't crowd the visuals. */
.start-section-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--text-0);
  letter-spacing: -0.1px;
}

.start-card {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(180deg, rgba(18, 31, 43, 0.92), rgba(9, 17, 25, 0.96));
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-card);
  padding: 0;
  color: inherit;
  text-align: start;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 220ms ease, transform 80ms ease;
  box-shadow: var(--shadow-xl);
}
.start-card::after {
  /* Same gloss treatment as project-panel::after */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%);
  opacity: 0.85;
  z-index: 2;
}
.start-card > * { position: relative; z-index: 1; }

/* Image visual at top of card. Both images get a fixed-height window so
   the cards stay symmetric even though pro.png is 16:9 and reel.png is 9:16. */
.start-card-visual {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #04080d;
}
.start-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 320ms ease;
}
.start-card-visual::after {
  /* Soft fade from image into card body so text below reads cleanly. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(9, 17, 25, 0.85) 100%);
  pointer-events: none;
}
/* Reel visual: frame the player from head-and-shoulders down, with the
   stadium glow + on-screen social affordances visible at the edges.
   Scale tuned so the face is comfortably in-frame without showing the
   phone status bar at the top. */
.start-card-reel .start-card-visual img {
  object-position: center;
  transform: none;
}

.start-card-content {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.start-card-kicker,
.start-card-meta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* Pulsing live-dot before the Quick Reel meta line — reads as "this is
   ready to publish to social right now". Subtle, never blinking. */
.start-card-reel .start-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.start-card-reel .start-card-meta::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(210, 255, 0, 0.55);
  animation: reelLiveDot 1.8s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes reelLiveDot {
  0%   { box-shadow: 0 0 0 0 rgba(210, 255, 0, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(210, 255, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(210, 255, 0, 0); }
}

/* Hover / focus / active — subtle teal glow. Uses an animated box-shadow
   pulse so the card feels responsive but never gaudy. */
@keyframes startCardGlow {
  0%   { box-shadow: var(--shadow-xl), 0 0 0 1px rgba(210, 255, 0, 0.20) inset, 0 0 18px rgba(210, 255, 0, 0.18); }
  50%  { box-shadow: var(--shadow-xl), 0 0 0 1px rgba(210, 255, 0, 0.34) inset, 0 0 38px rgba(210, 255, 0, 0.32); }
  100% { box-shadow: var(--shadow-xl), 0 0 0 1px rgba(210, 255, 0, 0.20) inset, 0 0 18px rgba(210, 255, 0, 0.18); }
}
.start-card:hover,
.start-card:focus-visible {
  border-color: var(--stroke-strong);
  outline: none;
  animation: startCardGlow 2.4s ease-in-out infinite;
}
.start-card:hover .start-card-visual img,
.start-card:focus-visible .start-card-visual img {
  transform: none;
}
.start-card-reel:hover .start-card-visual img,
.start-card-reel:focus-visible .start-card-visual img {
  transform: none;
}
.start-card:active {
  transform: translateY(1px);
}
.start-card-title {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--text-0);
}
.start-card-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-1);
}
.start-card-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  /* Match btn-primary so the brand language reads consistently */
  background: linear-gradient(135deg, #d2ff00, #a8f000);
  color: #031018;
  border: none;
  box-shadow: 0 16px 34px rgba(163, 204, 0, 0.22);
}
/* Quick Reel CTA — outlined, accent text, with an upload-arrow icon so
   the action reads as "share this NOW" rather than another workflow step.
   Stays on the same teal brand palette as the primary highlight CTA. */
.start-card[data-mode="quickReel"] .start-card-cta,
.start-card-cta-reel {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--stroke-strong);
  box-shadow: none;
  gap: 8px;
}
.start-card-cta-icon {
  flex: 0 0 auto;
  display: block;
}

/* RTL: keep the cards in column flow but ensure text aligns naturally. */
.screen-start.locale-he,
html[dir="rtl"] .screen-start {
  direction: rtl;
}

.screen-body {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 18px 14px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.editor-body {
  width: min(100%, calc(100vw - 16px));
  max-width: 520px;
  min-height: calc(100dvh - 60px);
  padding: 4px 8px 10px;
  gap: 6px;
}

.editor-workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(18, 31, 43, 0.94), rgba(9, 17, 25, 0.97));
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.panel-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-2);
}

.project-header,
.editor-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 16px 14px 14px;
  background:
    linear-gradient(180deg, rgba(4, 10, 15, 0.98), rgba(5, 11, 17, 0.88) 74%, rgba(5, 11, 17, 0));
  border-bottom: none;
  backdrop-filter: blur(18px);
  align-items: flex-start;
}

.project-header {
  flex-direction: column;
  gap: 18px;
  padding-bottom: 18px;
}

.header-copy,
.editor-header h2 {
  min-width: 0;
}

.header-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(214, 255, 92, 0.7);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.screen-editor .section-heading h3 {
  font-size: 12px;
  line-height: 1.1;
}

.screen-editor .section-kicker {
  font-size: 9px;
}

.section-heading h2,
.section-heading h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-0);
}

.section-heading p,
.header-subtitle,

.app-header h1 {
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, #ffffff, #ecff9b 45%, #d2ff00 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* When the h1 contains the brand logo image instead of text, drop the
   gradient-text styling above and let the SVG render at its native
   colours. Height adapts to viewport so the logo stays readable from
   mobile (~44px) up to desktop (~64px). */
.app-header h1.app-header-logo-wrap {
  background: none;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  padding: 0;
  margin: 4px 0 0;
  line-height: 0;
}

.app-header-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(44px, 9vw, 64px);
  object-fit: contain;
}

.export-share-btn {
  margin-top: 8px;
}

.export-share-toast {
  margin-top: 8px;
  min-height: 18px;
  color: var(--accent, #d2ff00);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
}

.editor-header {
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(24, 35, 52, 0.98), rgba(14, 20, 32, 0.96));
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "back actions"
    "title title";
  gap: 8px 10px;
}

.editor-header #backBtn {
  grid-area: back;
  justify-self: start;
}

.editor-header h2 {
  margin: 0;
  font-weight: 700;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-area: title;
  text-align: center;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--text-0);
}

.editor-actions {
  display: inline-flex;
  align-items: center;
  grid-area: actions;
  width: auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.header-actions-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(12, 22, 31, 0.94), rgba(7, 13, 20, 0.98));
  border: 1px solid rgba(126, 154, 170, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 18px 32px rgba(0, 0, 0, 0.22);
}

.project-header #playerCardBtn {
  display: none;
}

.header-music-label {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  max-width: 100%;
  text-align: right;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(226, 232, 240, 0.84);
}

.project-panel,
.editor-panel,
.segment-render-panel,
.metadata-panel,
.corr-confirm-bar,
.result-section {
  background:
    linear-gradient(180deg, rgba(18, 31, 43, 0.92), rgba(9, 17, 25, 0.96));
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.ui-suppressed {
  display: none !important;
}

.project-panel,
.editor-panel {
  padding: 14px;
  gap: 12px;
  display: flex;
  flex-direction: column;
}

.project-body {
  gap: 18px;
  padding-top: 12px;
  padding-bottom: 52px;
}

.project-body > .project-panel {
  position: relative;
}

.project-body > .project-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 22%);
  opacity: 0.85;
}

.editor-workspace > .editor-panel,
.editor-workspace > .corr-confirm-bar {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.editor-workspace > .editor-panel + .editor-panel,
.editor-workspace > .editor-panel + .corr-confirm-bar,
.editor-workspace > .corr-confirm-bar + .editor-panel {
  border-top: 1px solid rgba(126, 154, 170, 0.12);
}

.clip-strip {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
  padding: 0;
  min-height: auto;
  gap: 16px;
  scroll-snap-type: x proximity;
  align-items: stretch;
  padding-bottom: 8px;
}

.clip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  flex-shrink: 0;
  width: 228px;
  min-width: 228px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(17, 29, 41, 0.98), rgba(9, 15, 23, 0.98));
  border: 1px solid rgba(110, 139, 158, 0.16);
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02),
    0 18px 30px rgba(0, 0, 0, 0.18);
}

.clip-card:hover {
  transform: translateY(-2px);
  border-color: rgba(210, 255, 0, 0.28);
  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.28);
}

.clip-strip-reordering {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
  touch-action: none;
}

.clip-card-dragging {
  z-index: 5;
  transform: translateX(var(--drag-x, 0)) translateY(-6px) scale(0.98);
  border-color: rgba(210, 255, 0, 0.7);
  box-shadow:
    0 0 0 1px rgba(210, 255, 0, 0.44),
    0 22px 42px rgba(0, 0, 0, 0.42);
  opacity: 0.92;
}

.clip-card-drop-target {
  border-color: rgba(126, 231, 255, 0.72);
  box-shadow:
    0 0 0 2px rgba(126, 231, 255, 0.26),
    0 18px 34px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px) scale(1.02);
}

.clip-reorder-hint {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(210, 245, 255, 0.82);
  background: rgba(7, 16, 24, 0.74);
  border: 1px solid rgba(126, 231, 255, 0.14);
  font-size: 13px;
  line-height: 1;
  backdrop-filter: blur(10px);
  cursor: grab;
  padding: 0;
  touch-action: none;
  user-select: none;
}

.clip-reorder-hint:active {
  cursor: grabbing;
  border-color: rgba(210, 255, 0, 0.5);
  background: rgba(36, 48, 6, 0.88);
}

.clip-card.add-card {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  min-height: 228px;
  justify-content: center;
  gap: 10px;
  color: var(--text-2);
  border-style: dashed;
  border-color: rgba(68, 103, 121, 0.45);
  background: linear-gradient(180deg, rgba(11, 20, 29, 0.92), rgba(7, 14, 21, 0.98));
}

.add-icon {
  line-height: 1;
  width: 54px;
  height: 54px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(19, 34, 48, 0.82);
  border: 1px solid rgba(210, 255, 0, 0.18);
  color: var(--accent);
  font-size: 28px;
  box-shadow: 0 10px 22px rgba(12, 25, 36, 0.24);
}

.clip-thumb-wrap {
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  background: radial-gradient(circle at center, rgba(210, 255, 0, 0.08), transparent 60%),
    #04090f;
}

.clip-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.clip-upload-shade {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(210, 255, 0, 0.18), transparent 58%),
    rgba(3, 8, 13, 0.58);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

.clip-upload-ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(5, 13, 20, 0.82);
  border: 1px solid rgba(210, 255, 0, 0.42);
  box-shadow: 0 0 18px rgba(210, 255, 0, 0.18);
}

.clip-upload-progress {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.clip-upload-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d2ff00, #a8f000);
  box-shadow: 0 0 12px rgba(210, 255, 0, 0.36);
  transition: width 0.18s ease;
}

.clip-card-body {
  width: 100%;
  padding: 14px 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.clip-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  color: var(--text-0);
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}

.clip-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.45;
}

.clip-card-meta span:last-child {
  color: rgba(126, 231, 255, 0.9);
  font-weight: 700;
}

.clip-badge {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  top: 10px;
  left: 10px;
  border-radius: 999px;
  padding: 5px 10px;
  backdrop-filter: blur(12px);
}

.badge-raw {
  color: #cbd5e1;
  background: rgba(71, 85, 105, 0.72);
}

.badge-tracked {
  color: #fff;
  background: rgba(16, 185, 129, 0.74);
}

.badge-ready {
  color: #fff;
  background: rgba(14, 165, 233, 0.74);
}

.clip-remove {
  position: absolute;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  opacity: 1;
  background: rgba(9, 14, 19, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.clip-remove:hover {
  background: rgba(127, 29, 29, 0.92);
}

.render-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.project-status-bar {
  padding: 2px 4px 0;
}

/* ── Render-bar overlay (highlight + Quick Reel) ──────────────────────
   #renderBar lives at top-level in index.html (it used to be inside
   #gridScreen, which broke Quick Reel because the editor hid the grid
   and cascaded display:none).

   It must look the same regardless of which flow dispatched the render:
     • Highlight: previously inline inside the grid; after the move it
       was top-level but unstyled, so it appeared as a normal-flow
       block at the very end of <body>. The user reported it as
       "appearing above the interface in a strange place" — that's the
       regression this rule fixes.
     • Quick Reel: same overlay, same UX.

   Single unconditional rule — no body[data-app-mode] selector — so the
   bar floats as a bottom overlay in both flows. */
#renderBar.render-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1100;                   /* above #saveBtn (~1) but below modals (1000+) */
  padding: 14px 16px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 27, 39, 0.96), rgba(9, 17, 25, 0.96));
  border: 1px solid rgba(126, 232, 255, 0.22);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  gap: 10px;
}

#renderBar .render-status-text {
  font-size: 14px;
  color: #eef2ff;
}

.render-status-text {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
}

.progress-track {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.24);
}

.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.4s ease;
  background: linear-gradient(90deg, #d2ff00, #a8f000);
  box-shadow: 0 0 20px rgba(210, 255, 0, 0.22);
}

/* Indeterminate state — shown while the render job is still in 'queued'
   status (RunPod cold-starting a worker). No real percentage to report,
   so we sweep a partial fill back and forth instead of pretending it's
   at 0%. The track stays the same; only this fill bar changes behaviour. */
.progress-fill.is-indeterminate {
  width: 35%;
  animation: progress-indeterminate-sweep 1.6s ease-in-out infinite;
}

@keyframes progress-indeterminate-sweep {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(180%); }
  100% { transform: translateX(-100%); }
}

/* Subtle breathing pulse on the determinate bar so the user feels motion
   even while progress is sitting on a long step (e.g. Remotion render
   holds at 60% for ~30s). Purely visual; doesn't lie about the value. */
.progress-fill:not(.is-indeterminate) {
  animation: progress-breathe 2.4s ease-in-out infinite;
}

@keyframes progress-breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(210, 255, 0, 0.22); }
  50%      { box-shadow: 0 0 28px rgba(210, 255, 0, 0.45); }
}

.result-section {
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 18px;
  align-items: stretch;
  background: radial-gradient(circle at top right, rgba(210, 255, 0, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(12, 29, 24, 0.95), rgba(7, 17, 14, 0.98));
  border-color: rgba(20, 184, 166, 0.18);
}

.result-section h3 {
  margin: 0;
  font-size: 16px;
  color: #9bf3d5;
}

/* Download button inside the export modal — same look as other primary
   CTAs but `<a download>` so the browser handles the file save. */
.export-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 22px;
  align-self: center;
  max-width: 320px;
  width: 100%;
}

.btn-primary,
.btn-track,
.btn-download,
.btn-ghost {
  min-height: 46px;
  border-radius: 16px;
  font-family: inherit;
  font-size: 13px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
  width: auto;
  background: linear-gradient(135deg, #d2ff00, #a8f000);
  color: #031018;
  box-shadow: 0 16px 34px rgba(163, 204, 0, 0.22);
  font-weight: 800;
}

.btn-primary:hover:not(:disabled) {
  opacity: 1;
  transform: translateY(-1px) scale(1.01);
}

.btn-render-segment {
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
  font-weight: 800;
  background: linear-gradient(135deg, #d2ff00, #d2ff00);
}

.btn-track {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  width: auto;
  transition: opacity 0.15s;
  background: linear-gradient(135deg, #d2ff00, #a8f000);
  color: #04131b;
  min-width: 104px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  width: auto;
  background: rgba(8, 16, 24, 0.72);
  color: var(--text-1);
  border: 1px solid rgba(126, 154, 170, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.btn-sm {
  border-radius: 7px !important;
  min-height: 32px;
  padding: 4px 8px !important;
  font-size: 11px !important;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: opacity 0.15s;
  width: auto;
  justify-content: center;
  background: linear-gradient(135deg, #d2ff00, #84b900);
  color: #04140e;
}

.trim-bar,
.track-row,
.effect-bar {
  padding: 0;
  border: 0;
  background: transparent;
}

.trim-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trim-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trim-heading-simple {
  min-height: 20px;
}

.trim-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(214, 255, 92, 0.74);
  font-weight: 700;
}

.trim-heading h4 {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-0);
}

.clip-dur-label {
  margin-left: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--text-2);
  background: rgba(8, 15, 22, 0.72);
  border: 1px solid rgba(124, 150, 168, 0.16);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.trim-summary {
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.2;
}

.trim-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(23, 240, 208, 0.10);
  border: 1px solid rgba(23, 240, 208, 0.28);
  color: #4ff3de;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trim-summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-0);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trim-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.trim-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(8, 15, 22, 0.72);
  border: 1px solid rgba(124, 150, 168, 0.16);
}

.trim-chip span {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.trim-chip strong {
  color: var(--text-0);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.trim-rail {
  position: relative;
  height: 52px;
  padding: 0 10px;
}

.trim-rail-track,
.trim-selection {
  position: absolute;
  left: 10px;
  right: 10px;
}

.trim-rail-track {
  top: 22px;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px) 0 50% / 16px 8px repeat-x,
    linear-gradient(180deg, rgba(18, 26, 36, 0.98), rgba(10, 16, 25, 0.98));
  border: 1px solid rgba(129, 154, 173, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.trim-selection {
  top: 16px;
  height: 20px;
  min-width: 28px;
  border: 2px solid #d2ff00;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(210, 255, 0, 0.34), rgba(21, 181, 243, 0.24));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 8px 16px rgba(210, 255, 0, 0.18);
  pointer-events: none;
}

.trim-selection::before,
.trim-selection::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d2ff00;
  border: 3px solid #04131b;
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(210, 255, 0, 0.14);
}

.trim-selection::before {
  left: -9px;
}

.trim-selection::after {
  right: -9px;
}

.trim-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.trim-rail.trim-locked {
  opacity: 0.72;
}

.trim-rail.trim-locked .trim-slider {
  cursor: not-allowed;
}

.trim-slider::-webkit-slider-runnable-track {
  height: 52px;
  background: transparent;
}

.trim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 24px;
  height: 24px;
  margin-top: 14px;
  border-radius: 50%;
  border: 3px solid #04131b;
  background: #d2ff00;
  box-shadow: 0 0 0 4px rgba(210, 255, 0, 0.14);
  cursor: ew-resize;
}

.trim-slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

.trim-slider::-moz-range-track {
  height: 52px;
  background: transparent;
  border: 0;
}

.trim-slider::-moz-range-thumb {
  pointer-events: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #04131b;
  background: #d2ff00;
  box-shadow: 0 0 0 4px rgba(210, 255, 0, 0.14);
  cursor: ew-resize;
}

.trim-slider:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

.trim-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.trim-helper {
  margin: 0;
  flex: 1;
  min-width: 120px;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.35;
}

.trim-helper.trim-helper-warning {
  color: #b54708;
  font-weight: 600;
  font-size: 11px;
}

/* ── Step 3 default summary + advanced disclosure ─────────────────────── */
/* The default-visible card above the advanced details. Shows the chosen
   player, the picked effect and the chosen duration as plain text — no
   buttons, no slider, no decisions. */
.effect-summary-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  margin: 10px 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.effect-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
}
.effect-summary-label {
  color: var(--text-2);
}
.effect-summary-row strong {
  color: var(--text-1, #fff);
  font-weight: 600;
}

/* Continue button promoted above the advanced disclosure so the default
   path is one tap: "המשך ←". Sits between the static summary and the
   collapsed editing controls. */
.effect-primary-action {
  display: flex;
  justify-content: center;
  margin: 8px 0 12px;
}
.step-continue-btn.step-continue-primary {
  min-width: 200px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 700;
}

/* Native <details> styling so the "עריכה מתקדמת" summary looks like a
   button rather than the default tiny disclosure triangle. */
.advanced-effect-options {
  margin-top: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 4px 10px 8px;
}
.advanced-effect-options[open] {
  background: rgba(255, 255, 255, 0.02);
}
.advanced-effect-summary {
  cursor: pointer;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--text-2);
  list-style: none;
  user-select: none;
}
.advanced-effect-summary::-webkit-details-marker {
  display: none;
}
.advanced-effect-summary::before {
  content: '▸';
  display: inline-block;
  margin-inline-end: 6px;
  transition: transform 120ms ease;
}
.advanced-effect-options[open] .advanced-effect-summary::before {
  transform: rotate(90deg);
}

.trim-bar #applyTrimBtn {
  width: auto;
  justify-content: center;
}

.trim-bar.trim-collapsed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(124, 150, 168, 0.16);
  border-radius: 14px;
  background: rgba(8, 15, 22, 0.54);
}

.trim-bar.trim-collapsed .trim-heading {
  justify-content: flex-start;
  min-width: 0;
}

.trim-bar.trim-collapsed .clip-dur-label,
.trim-bar.trim-collapsed .trim-rail,
.trim-bar.trim-collapsed .trim-chips,
.trim-bar.trim-collapsed .trim-helper,
.trim-bar.trim-collapsed #applyTrimBtn {
  display: none;
}

.trim-bar.trim-collapsed .trim-summary {
  display: inline-flex;
}

.trim-bar.trim-collapsed .trim-footer {
  justify-content: flex-end;
}

.trim-bar.trim-collapsed #editTrimBtn {
  display: inline-flex;
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
  white-space: nowrap;
}

#editorScreen .player-shell {
  margin: 0;
  max-height: none;
  border-radius: 26px;
  border: 1px solid rgba(132, 165, 184, 0.14);
  background:
    radial-gradient(circle at center, rgba(210, 255, 0, 0.06), transparent 60%),
    #03070b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* ── Quick Reel editor preview — vertical 9:16 shell ───────────────────
   The editor's .player-shell defaults to 16:9 (line 89). For Quick Reel
   the source clip is 9:16 — without this override the vertical video
   letterboxes inside a wide shell, and every cqw-based overlay
   (.editor-match-preview-vertical, .editor-score-preview,
   .editor-action-preview) is measured against the wide container
   instead of the actual reel frame. That made the match-bar look
   bombastic in production.

   Sizing strategy:
     width:100% + max-width:calc(60vh * 9/16) — width is capped by the
     vertical-height budget, so the height (derived from aspect-ratio)
     never exceeds ~60vh. That leaves room above for the progress dots
     and below for the action panel + "Save & Continue" CTA on tall
     phones, without forcing the page to scroll past the player.

   Quick Reel should always feel like the 9:16 output. Wide sources are
   cover-cropped in the preview; if the user manually drags to reframe, that
   pan is persisted separately and sent to render only as an explicit choice.

   Highlight (professional) mode is untouched.                          */
body[data-app-mode="quickReel"] #editorScreen .player-shell {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: calc(60vh * 9 / 16);
  max-height: 60vh;
  margin-inline: auto;
  overflow: hidden;
  --quick-reel-pan-x: 50%;
}

body[data-app-mode="quickReel"] #editorScreen .player-shell #previewVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--quick-reel-pan-x, 50%) 50%;
}

/* ── Quick Reel framing screen (standalone step) ────────────────────────
   Sits between upload and trim for wide sources. Owns its own video and
   its own pointer handling — nothing here depends on #overlayLayer, which
   is pointer-events:none outside player-selection mode and silently ate
   the previous in-editor drag implementation. */
.screen-qr-framing {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Without this the column defaulted to flex-start and all the slack piled
     up at the bottom, pushing the content high and leaving dead space. */
  justify-content: center;
  gap: 14px;
  /* Bottom padding reserves the fixed bottom nav band (66px tall, sitting
     8px off the bottom, z-index 1200 in app-nav.css). app-nav.js only
     watches #gridScreen / #editorScreen, so on this screen it leaves the
     nav on top of our actions row — Confirm was rendering *underneath* it. */
  padding: max(14px, env(safe-area-inset-top)) 16px calc(88px + env(safe-area-inset-bottom));
  background: var(--bg-0);
  color: var(--text-0);
  min-height: 100dvh;
}
.screen-qr-framing[hidden] { display: none !important; }

/* app-nav.js sets body.kicko-has-bottom-nav while this screen is up (it only
   observes #gridScreen and #editorScreen, both hidden here), which adds an
   88px body padding-bottom *underneath* this screen's own 100dvh box — 88px
   of permanent dead scroll regardless of content. Cancel it; the screen now
   reserves the nav band itself in its own padding above.
   Same body:has() idiom already used for #gridScreen elsewhere in this file.
   :has() takes its argument's specificity, so this (1,1,1) beats
   body.kicko-has-bottom-nav (0,1,1) regardless of stylesheet order. */
body:has(#quickReelFramingScreen:not([hidden])) {
  height: 100dvh;
  padding-bottom: 0;
  overflow: hidden;
}

.qrf-header { text-align: center; }
.qrf-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.1px;
}
.qrf-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-1, #94a9b4);
}

.qrf-stage {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* The 9:16 window. touch-action:none is essential — without it a touch
   drag scrolls the page instead of panning the clip. */
.qrf-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: calc(58dvh * 9 / 16);
  max-height: 58dvh;
  overflow: hidden;
  border-radius: 20px;
  background: #03070b;
  border: 1px solid rgba(132, 165, 184, 0.20);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.qrf-frame.is-dragging { cursor: grabbing; }
.qrf-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;   /* the frame owns the gesture, not the video */
  display: block;
}
/* Rule-of-thirds guides so the user has something to align against. */
.qrf-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,0.14) 33.33%, rgba(255,255,255,0.14) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to right, transparent 66.66%, rgba(255,255,255,0.14) 66.66%, rgba(255,255,255,0.14) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}

/* Transport row under the frame: play/pause + scrub + elapsed time. */
.qrf-transport {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: calc(58dvh * 9 / 16);
}
.qrf-play-btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(210, 255, 0, 0.45);
  background: rgba(4, 10, 15, 0.72);
  color: #d2ff00;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.qrf-seek {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  border-radius: 999px;
  accent-color: #d2ff00;
  cursor: pointer;
}
.qrf-time {
  flex: 0 0 auto;
  min-width: 38px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(247, 251, 255, 0.72);
}

.qrf-hint {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(247, 251, 255, 0.72);
}
.qrf-path-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  flex-wrap: wrap;
}
.qrf-path-remove {
  width: auto;
  border: 0;
  background: transparent;
  color: rgba(247, 251, 255, 0.72);
  text-decoration: underline;
  cursor: pointer;
}
.qrf-path-status {
  flex: 0 0 100%;
  text-align: center;
  min-height: 18px;
  font-size: 12px;
  color: #d2ff00;
}

.qrf-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.qrf-btn {
  flex: 1 1 auto;
  /* The global `button { width: 100% }` (styles.css:52-56) gives every button
     a flex-basis of 100% of the row. With .qrf-btn-ghost also flex-shrink:0,
     Center froze at the full row width and Confirm was squeezed down to its
     min-content size, wrapped to two lines and overflowed the viewport by
     ~98px. width:auto + min-width:0 restores normal flex sizing — the same
     antidote already used on .qrf-seek below. */
  width: auto;
  min-width: 0;
  min-height: 50px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.qrf-btn-ghost {
  flex: 0 0 auto;
  min-width: 104px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-0, #f8fafc);
}
.qrf-btn-primary {
  background: linear-gradient(135deg, #d2ff00, #a8f000);
  border: 1px solid rgba(210, 255, 0, 0.6);
  color: #021015;
}

/* Phone app-shell — same recipe .screen-start and #gridScreen already use:
   a fixed 100dvh box that never scrolls, with exactly one elastic region
   (the 9:16 stage) absorbing the leftover height. Everything else is
   flex: 0 0 auto so the stage is the only thing that flexes. */
@media (max-width: 640px) {
  .screen-qr-framing {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 12px calc(88px + env(safe-area-inset-bottom));
  }
  .qrf-header,
  .qrf-transport,
  .qrf-hint,
  .qrf-actions { flex: 0 0 auto; }

  .qrf-title { font-size: clamp(16px, 2.6dvh, 20px); }
  .qrf-sub   { font-size: 12px; }

  .qrf-stage { flex: 1 1 auto; min-height: 0; }

  /* Let the stage's resolved height drive the 9:16 box rather than a fixed
     dvh cap, so the frame takes exactly the space that is left over. */
  .qrf-frame {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  .qrf-transport { max-width: 100%; }
  .qrf-actions   { max-width: none; }
}

/* Short phones — drop the sub-heading (the hint below the frame already
   carries the instruction) and tighten. Mirrors the existing
   (max-width: 640px) and (max-height: 680px) tier used by .screen-start. */
@media (max-width: 640px) and (max-height: 680px) {
  .screen-qr-framing { gap: 6px; }
  .qrf-sub  { display: none; }
  .qrf-hint { font-size: 12px; }
  .qrf-btn  { min-height: 44px; }
}

/* Re-entry chip in the editor. Framing itself is a separate screen; this
   only reopens it. Visibility driven by updateQuickReelReframeControls()
   via the [hidden] attribute — wide sources only. */
.qr-reframe-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  max-width: calc(60vh * 9 / 16);
  margin: 8px auto 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(4, 10, 15, 0.55);
  border: 1px solid rgba(210, 255, 0, 0.20);
  direction: rtl;
}
.qr-reframe-bar[hidden] { display: none !important; }
.qr-reframe-text {
  color: rgba(247, 251, 255, 0.80);
  font-size: 12px;
  font-weight: 700;
}
.qr-reframe-center {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 0, 0.45);
  background: rgba(4, 10, 15, 0.72);
  color: #d2ff00;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
/* While dragging, damp the video transition so the pan tracks the finger. */
#previewVideo.is-reframing { transition: none !important; }

.track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.track-status {
  min-width: 0;
  grid-column: 1 / -1;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(8, 15, 22, 0.72);
  border: 1px solid rgba(124, 150, 168, 0.16);
  color: var(--text-1);
  font-size: 11px;
  line-height: 1.35;
}

.tracking-panel .panel-hint {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.35;
}

.tracking-panel.tracking-waiting .track-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tracking-panel.tracking-waiting .btn-track {
  min-height: 44px;
}

.tracking-panel.tracking-waiting #selectModeButton,
.tracking-panel.tracking-waiting #editModeButton {
  display: none;
}

.tracking-panel.tracking-ready {
  padding: 10px 12px;
  border: 1px solid rgba(124, 150, 168, 0.16);
  border-radius: 14px;
  background: rgba(8, 15, 22, 0.54);
}

.tracking-panel.tracking-ready .panel-hint,
.tracking-panel.tracking-ready .btn-track,
.tracking-panel.tracking-ready .tracking-loader {
  display: none;
}

.tracking-panel.tracking-ready .track-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
}

.tracking-panel.tracking-ready .track-status {
  order: 1;
  grid-column: auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--text-0);
  font-weight: 700;
}

.tracking-panel.tracking-ready #selectModeButton {
  order: 2;
}

.tracking-panel.tracking-ready #skipTrackingBtn {
  order: 3;
}

.tracking-panel.tracking-ready #editModeButton {
  order: 4;
}

.tracking-panel.tracking-ready:not(.player-selected) #editModeButton {
  display: none;
}

.tracking-panel.tracking-ready.player-selected #selectModeButton {
  color: var(--text-2);
}

.tracking-panel.tracking-skipped {
  padding: 10px 12px;
  border: 1px solid rgba(124, 150, 168, 0.16);
  border-radius: 14px;
  background: rgba(8, 15, 22, 0.54);
}

.tracking-panel.tracking-skipped .detect-visual,
.tracking-panel.tracking-skipped .detect-heading,
.tracking-panel.tracking-skipped .panel-hint,
.tracking-panel.tracking-skipped .tracking-loader,
.tracking-panel.tracking-skipped #selectModeButton,
.tracking-panel.tracking-skipped #editModeButton {
  display: none;
}

.tracking-panel.tracking-skipped .track-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.tracking-panel.tracking-skipped .track-status {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--text-0);
  font-weight: 700;
}

.tracking-loader {
  align-items: center;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}

.track-row .btn-track {
  width: 100%;
  min-width: 0;
}

.track-row .btn-sm {
  min-width: 96px;
  justify-content: center;
}

.effect-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.effect-bar > * {
  margin: 0;
}

.effect-bar label {
  flex: 1 1 220px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(8, 15, 22, 0.72);
  border: 1px solid rgba(124, 150, 168, 0.16);
  color: var(--text-1);
  white-space: normal;
}

.effect-bar select,
.effect-bar input[type="range"] {
  width: 100%;
}

.player-info {
  margin-left: 0;
  flex: 1 1 100%;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(8, 15, 22, 0.72);
  border: 1px solid rgba(124, 150, 168, 0.16);
  color: var(--text-1);
}

.tracking-panel,
.effect-panel-shell {
  padding-top: 6px;
  padding-bottom: 6px;
}

.preview-panel {
  gap: 8px;
  padding-bottom: 10px;
}

.effect-panel-shell,
.tracking-panel {
  padding-top: 10px;
  padding-bottom: 10px;
}

.effect-compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.effect-compact-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.effect-toggle-btn {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border: 1px dashed rgba(126, 154, 170, 0.26);
  border-radius: 14px;
  background: rgba(8, 16, 24, 0.72);
  color: var(--accent);
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.effect-toggle-btn.is-disabled {
  opacity: 0.38;
}

.effect-toggle-btn.is-ready {
  border-style: solid;
  border-color: rgba(210, 255, 0, 0.42);
  box-shadow: 0 10px 24px rgba(210, 255, 0, 0.16);
}

.effect-toggle-btn.is-attention {
  animation: effectPulse 1.8s ease-in-out infinite;
}

.effect-quick-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.effect-choice {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(126, 154, 170, 0.18);
  background: rgba(8, 16, 24, 0.72);
  color: var(--text-1);
  font-size: 11px;
  font-weight: 600;
}

.effect-choice-active {
  border-color: rgba(210, 255, 0, 0.48);
  background: rgba(17, 69, 72, 0.48);
  color: var(--accent);
}

.effect-duration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.effect-duration-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 38px;
  padding: 5px 10px;
  border-radius: 12px;
  background: rgba(8, 15, 22, 0.72);
  border: 1px solid rgba(124, 150, 168, 0.16);
  color: var(--text-1);
  font-size: 11px;
  font-weight: 700;
  max-width: none;
  margin: 0;
  flex-wrap: nowrap;
}

.effect-duration-inline input[type="range"] {
  width: 82px;
  flex: 0 0 auto;
}

.effect-duration-label {
  display: none;
}

.compact-player-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  flex: 1;
  min-height: 38px;
  padding: 5px 10px;
  border-radius: 12px;
  border: 1px solid rgba(124, 150, 168, 0.16);
  background: rgba(8, 15, 22, 0.72);
  color: var(--text-1);
  font-size: 11px;
  font-weight: 700;
}

.player-info strong {
  color: var(--accent);
}

.corr-confirm-bar {
  margin: 0;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(52, 28, 7, 0.9), rgba(34, 19, 5, 0.98));
  border-color: rgba(255, 161, 22, 0.32);
  gap: 8px;
}

#corrConfirmMsg {
  flex: 1;
  font-weight: 600;
  line-height: 1.55;
}

.corr-save-btn,
.corr-cancel-btn {
  min-width: 88px;
  min-height: 30px;
  border-radius: 10px;
  padding: 0 10px;
}

.corr-save-btn {
  background: linear-gradient(135deg, #15803d, #22c55e);
  box-shadow: 0 12px 22px rgba(21, 128, 61, 0.24);
}

.corr-save-btn:hover {
  opacity: 0.92;
}

.corr-cancel-btn {
  background: linear-gradient(135deg, #7f1d1d, #b91c1c);
  box-shadow: 0 12px 22px rgba(127, 29, 29, 0.22);
}

.corr-cancel-btn:hover {
  opacity: 0.92;
}

.segment-render-panel,
.metadata-panel {
  margin: 0;
  padding: 12px;
}

.screen-editor .segment-render-panel,
.screen-editor .metadata-panel {
  max-height: 140px;
  overflow: auto;
}

.segment-render-panel {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(6, 11, 18, 0.96));
}

.segment-render-log {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(51, 65, 85, 0.95);
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  min-height: 120px;
  border-radius: 16px;
  background: rgba(4, 8, 13, 0.98);
}

.metadata-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: rgba(214, 255, 92, 0.7);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 6, 12, 0.82);
  backdrop-filter: blur(14px);
}

.modal-card {
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 620px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(15, 27, 39, 0.98), rgba(9, 17, 25, 0.98));
  border-color: rgba(126, 154, 170, 0.14);
  box-shadow: var(--shadow-xl);
}

.modal-header,
.modal-footer {
  border-color: rgba(126, 154, 170, 0.12);
}

.modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.player-modal-overlay {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(16px);
}

.player-modal-sheet {
  width: min(100%, 560px);
  max-width: 100vw;
  max-height: min(92vh, 860px);
  border-radius: 28px 28px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top, rgba(210, 255, 0, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(17, 20, 27, 0.985), rgba(11, 14, 20, 0.995));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.46);
}

.player-sheet-handle {
  width: 56px;
  height: 4px;
  border-radius: 999px;
  margin: 12px auto 4px;
  background: rgba(255, 255, 255, 0.18);
}

.player-modal-header {
  padding: 10px 22px 14px;
  border-bottom: none;
}

.player-modal-kicker {
  color: rgba(210, 255, 0, 0.84);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.player-modal-header h2 {
  font-size: clamp(34px, 5.8vw, 46px);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 800;
}

.player-close-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #eef2ff;
  font-size: 22px;
  cursor: pointer;
}

.player-modal-body {
  padding: 6px 22px 24px;
  gap: 18px;
  min-height: 0;
  overflow-x: hidden;
  padding-bottom: 112px;
  scrollbar-width: thin;
  scrollbar-color: rgba(210, 255, 0, 0.55) rgba(255, 255, 255, 0.04);
}

.player-modal-body::-webkit-scrollbar {
  width: 6px;
}

.player-modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.player-modal-body::-webkit-scrollbar-thumb {
  background: rgba(210, 255, 0, 0.55);
  border-radius: 999px;
}

.player-photo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 0 2px;
}

.player-photo-preview.photo-preview-area {
  width: 138px;
  height: 138px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at center, rgba(18, 227, 196, 0.14), rgba(9, 13, 19, 0.98) 68%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 0 4px rgba(12, 18, 28, 0.92);
}

.player-photo-ring {
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  border: 2px solid rgba(210, 255, 0, 0.28);
  pointer-events: none;
}

.player-photo-preview .photo-placeholder {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}

.player-photo-actions {
  align-items: center;
  text-align: center;
  gap: 8px;
}

.player-photo-upload {
  min-height: auto;
  border: none;
  background: transparent;
  color: rgba(210, 255, 0, 0.94);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0;
}

.player-clear-photo {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.player-form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.player-form-section .form-row,
.player-form-section .form-row-half,
.player-form-section .form-row-three,
.player-accordion-body .form-row,
.player-accordion-body .form-row-half,
.player-accordion-body .form-row-three,
.player-form-section .form-row-half > div {
  min-width: 0;
}

.player-form-section .form-row,
.player-form-section .form-row-half > div,
.player-form-section .form-row-three > div,
.player-accordion-body .form-row,
.player-accordion-body .form-row-half > div,
.player-accordion-body .form-row-three > div {
  gap: 8px;
  min-width: 0;
}

.player-form-section label,
.player-accordion-body label {
  color: rgba(191, 198, 214, 0.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.player-form-section .form-input,
.player-accordion-body .form-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.05);
  color: #f7f8fb;
  font-size: 17px;
  padding: 14px 16px;
}

.player-form-section .form-input::placeholder,
.player-accordion-body .form-input::placeholder {
  color: rgba(255, 255, 255, 0.22);
}

.player-color-row {
  align-items: end;
}

.player-color-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
}

.color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}

.color-swatch[data-color="#00dcff"] { background: #00dcff; }
.color-swatch[data-color="#a34141"] { background: #a34141; }
.color-swatch[data-color="#b38a86"] { background: #b38a86; }

.color-swatch-active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(210, 255, 0, 0.9);
}

.color-swatch-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 20px;
  font-weight: 700;
}

.player-hidden-color-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.player-color-readout {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.05);
}

/* Small inline crest shown next to the "Club" label when the typed
   club matches a team in the registry. Hidden by default; app.js
   toggles it via the [hidden] attribute. */
.club-logo-preview {
  display: inline-block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-inline-start: 8px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.player-color-chip {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #00dcff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.player-accordion {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: max-content;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.player-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 16px;
  color: #f7f8fb;
  font-size: 18px;
  font-weight: 700;
}

.player-accordion-icon {
  color: rgba(255, 255, 255, 0.58);
  font-size: 20px;
  transition: transform 180ms ease;
}

.player-accordion-body {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.player-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.player-career-body {
  gap: 16px;
}

.player-modal-footer {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 18, 24, 0.94);
  backdrop-filter: blur(20px);
}

.player-save-btn {
  min-height: 60px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.player-clear-btn {
  min-width: 84px;
  min-height: 60px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
  cursor: pointer;
}

.form-input {
  border: 1px solid rgba(255,255,255,0.12);
  color: #f1f5f9;
  font-size: 14px;
  padding: 8px 10px;
  outline: none;
  font-family: inherit;
  min-height: 48px;
  border-radius: 14px;
  background: rgba(8, 16, 24, 0.86);
}

.form-input:focus {
  border-color: rgba(210, 255, 0, 0.46);
  box-shadow: 0 0 0 3px rgba(210, 255, 0, 0.10);
}

select.form-input {
  color: #f7f8fb;
  background-color: rgba(8, 16, 24, 0.96);
}

select.form-input option {
  color: #f7f8fb;
  background: #111a22;
}

@media (min-width: 720px) {
  .screen-body {
    padding: 22px 22px 56px;
    gap: 18px;
  }

  .project-header,
  .editor-header {
    padding-left: 22px;
    padding-right: 22px;
  }

  .project-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .header-actions-grid {
    width: min(420px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-body {
    width: min(100%, calc(100vw - 24px));
    max-width: 560px;
  }

  .project-panel,
  .editor-panel {
    padding: 22px;
  }

  .editor-workspace > .editor-panel {
    padding-left: 22px;
    padding-right: 22px;
  }

  .editor-workspace > .corr-confirm-bar {
    margin-left: 22px;
    margin-right: 22px;
    margin-bottom: 0;
  }

  .trim-bar #applyTrimBtn {
    width: auto;
    min-width: 126px;
  }

  .trim-heading,
  .trim-footer {
    flex-direction: row;
    align-items: center;
  }

  .trim-chips {
    grid-template-columns: 160px 160px;
  }

  .track-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .effect-bar {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(220px, 1fr) minmax(220px, 1fr);
    align-items: stretch;
  }

  .player-info {
    min-height: 92px;
  }
}

@keyframes effectPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 24px rgba(210, 255, 0, 0.16);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 12px 28px rgba(210, 255, 0, 0.28);
  }
}

/* Project screen refinement to match the mobile editor reference */
.result-copy {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
}

.global-player-panel {
  gap: 18px;
}

.global-player-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(210, 255, 0, 0.06), transparent 60%),
    #03070b;
  border: 1px solid rgba(126, 154, 170, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  min-height: 240px;
  /* Same as .player-shell — needed so the live overlays inside can use cqw
     units that match the Remotion final-render sizing. */
  container-type: inline-size;
}

/* ── Custom fullscreen button + pseudo-fullscreen ──────────────────────────
   Why pseudo-fullscreen instead of native video fullscreen?
   On iOS Safari, native <video> fullscreen shows ONLY the video element
   and strips every HTML overlay above it (ring, match context, action
   stamp, etc.). The result is a bare clip with no preview overlays.
   Pseudo-fullscreen puts the whole shell (video + overlays) into a fixed
   16:9 box that fills the viewport, so overlays come along. */
.preview-fs-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 30;
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(4, 10, 16, 0.55);
  color: #f8fafc;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 120ms ease, transform 120ms ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.preview-fs-btn:hover {
  background: rgba(4, 10, 16, 0.78);
}
.preview-fs-btn:active {
  transform: scale(0.95);
}
.preview-fs-btn .preview-fs-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

/* Active state — applied to .global-player-shell when in pseudo-fullscreen.
   Keeps strict 16:9 inside the viewport so overlays sized in cqw remain
   faithful to the Remotion final-render proportions. The body class adds a
   black backdrop and locks page scroll. */
body.preview-fullscreen-active {
  overflow: hidden;
}
body.preview-fullscreen-active::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9998;
}
.global-player-shell.is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  /* Fallback: vh for browsers without dvh support. */
  width:  min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  /* Modern: dvh accounts for the mobile address bar collapsing. */
  width:  min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  border-radius: 0;
  z-index: 9999;
  background: #000;
}
/* Larger / better-positioned button while in fullscreen so it's reachable
   on mobile without overlapping the native video controls along the
   bottom edge. */
.global-player-shell.is-fullscreen .preview-fs-btn {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  font-size: 20px;
}

#globalPreviewVideo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.global-player-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(5, 12, 18, 0.84), rgba(2, 7, 12, 0.98));
}

.global-player-empty[hidden] {
  display: none !important;
}

.global-player-empty-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: rgba(12, 27, 36, 0.94);
  color: var(--accent);
  border: 1px solid rgba(210, 255, 0, 0.18);
  font-size: 22px;
}

.global-player-empty-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.global-player-empty-copy strong {
  font-size: 18px;
  color: var(--text-0);
}

.global-player-empty-copy span {
  color: var(--text-2);
  font-size: 14px;
}

.clip-card-active {
  border-color: rgba(210, 255, 0, 0.55);
  box-shadow:
    0 0 0 1px rgba(210, 255, 0, 0.4),
    0 18px 34px rgba(0, 0, 0, 0.32);
}

.clip-edit {
  position: absolute;
  right: 44px;
  top: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 31, 37, 0.86);
  color: var(--accent);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.clip-edit:hover {
  background: rgba(9, 52, 59, 0.96);
}

@media (hover: none) {
  .clip-card:hover {
    transform: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02),
      0 18px 30px rgba(0, 0, 0, 0.18);
  }

  .clip-card-dragging {
    transform: translateY(-3px) scale(0.98);
  }
}

.player-card-tile {
  text-align: right;
  background:
    radial-gradient(circle at top right, rgba(210, 255, 0, 0.12), transparent 35%),
    linear-gradient(180deg, rgba(18, 31, 43, 0.98), rgba(8, 14, 21, 0.98));
}

.player-card-tile-stats {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(244, 248, 252, 0.92);
  letter-spacing: 0.02em;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.player-card-tile-history {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.88);
}

.clip-thumb-static {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 18px 16px;
  background:
    radial-gradient(circle at top right, rgba(210, 255, 0, 0.20), transparent 42%),
    linear-gradient(180deg, rgba(20, 34, 49, 0.98), rgba(10, 17, 26, 0.98));
}

.project-clips .section-heading {
  margin-bottom: 4px;
}

.project-clips .section-heading p {
  max-width: 44ch;
}

.player-card-glyph,
.player-card-glyph-sub {
  font-weight: 800;
  color: var(--text-0);
}

.player-card-glyph {
  font-size: 11px;
  opacity: 0.72;
  letter-spacing: 0.18em;
}

.player-card-glyph-sub {
  margin-top: 6px;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.project-render #resultVideo {
  display: none;
}

/* Quick Reel output is 9:16. #resultVideo otherwise inherits only the global
   `video { width:100%; height:100%; object-fit:contain }`, so a portrait file
   was laid out in a landscape-ish box and pillarboxed with black bars down
   both sides — the player looked "wide" even though the video was a phone
   ratio. Give the element the output's own aspect so the box IS the video.
   max-height keeps it inside the result sheet on short screens; width:auto
   lets the aspect-ratio derive the width from that height. */
/* The main-screen preview shell is 16:9 by default. In Quick Reel every clip
   and the finished reel are 9:16, so the shell pillarboxed them with black
   bars down both sides — the export was correct but the player around it
   looked wide. Match the shell to the output. */
/* NOTE ON SPECIFICITY: `#gridScreen .global-player-shell` (id + class) sets
   aspect-ratio: 16/9 in three places, including inside two media queries, and
   an id beats [attr]+class. These selectors therefore carry #gridScreen too,
   and the media-query duplicates are re-stated further down this file so the
   cascade cannot put the landscape ratio back. */
body[data-app-mode="quickReel"] #gridScreen .global-player-shell,
body[data-app-mode="quickReel"] .global-player-shell {
  aspect-ratio: 9 / 16;
  /* The width must be DEFINITE. The panel is a column flex container, and
     `margin-inline: auto` opts the shell out of stretch, so `width: auto`
     falls back to shrink-to-fit — and every child of the shell is
     position:absolute, so there is no in-flow content and it collapses to
     ~2px. Give it a real width and let aspect-ratio derive the height. */
  width: min(100%, calc(56dvh * 9 / 16));
  height: auto;
  /* An inherited max-height (the phone rules cap the shell at 34dvh) would
     clamp the derived height and break the ratio again. The width formula
     already bounds the height to 56dvh, so drop the cap. */
  max-height: none;
  min-height: 0;
  margin-inline: auto;
}
body[data-app-mode="quickReel"] #gridScreen .global-player-shell #globalPreviewVideo,
body[data-app-mode="quickReel"] .global-player-shell #globalPreviewVideo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body[data-app-mode="quickReel"] #resultVideo {
  aspect-ratio: 9 / 16;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 62dvh;
  margin-inline: auto;
  border-radius: 14px;
  background: #000;
  object-fit: contain;
}

/* ── Render in flight — everything except the progress bar is inert ──────
   Touching the editor, the step rail, the bottom nav or the export button
   while a job is queued/rendering desynchronises the local clip state from
   the job that was already dispatched, and the returned video no longer
   matches what the user last saw. Toggled by setRenderingLock() in app.js,
   which releases on success, failure, timeout AND the early-return
   validation paths, so the UI can never be left permanently frozen.

   pointer-events is used rather than a full-screen scrim element so nothing
   has to be inserted into the DOM and every screen is covered at once. The
   dim is purely a signal that the UI is busy. */
body.is-rendering .screen,
body.is-rendering .kicko-bottom-nav,
body.is-rendering .kicko-fab,
body.is-rendering #saveBtn,
body.is-rendering .modal-overlay {
  pointer-events: none !important;
  user-select: none;
}
body.is-rendering .screen {
  filter: saturate(0.85) brightness(0.72);
  transition: filter 180ms ease;
}
/* The progress bar itself stays live and undimmed. */
body.is-rendering #renderBar,
body.is-rendering #renderBar * {
  pointer-events: auto !important;
}
body.is-rendering #renderBar {
  filter: none;
}
/* The result sheet appears only after the lock is released, but keep it
   interactive defensively so a race can never trap the user. */
body.is-rendering .export-overlay,
body.is-rendering .export-overlay * {
  pointer-events: auto !important;
}

.export-overlay {
  position: fixed;
  inset: 0;
  /* Modal tier, matching .modal-overlay (1000). This used to be 60 — the same
     z-index as the fixed #saveBtn CTA — and since #saveBtn comes later in the
     DOM it painted ON TOP of the finished-render card. That is why the music
     and export sheets (both .modal-overlay at 1000) correctly covered the CTA
     but the result panel did not. */
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 8, 13, 0.72);
  backdrop-filter: blur(16px);
  /* Safety net: if anything still exceeds the cap on the card, the overlay
     itself can scroll rather than clipping content off the top. */
  overflow-y: auto;
}

.export-overlay[hidden] {
  display: none !important;
}

/* The card is anchored to the bottom (align-items: flex-end above) and had no
   max-height, so once the content grew past the viewport it overflowed off the
   TOP — taking the header, and with it the Close button, out of view. The
   overlay had no overflow either, so there was nothing to scroll to reach it.

   Cap the card to the viewport and make it a column: the header stays pinned
   and Close is always reachable, while only the result body scrolls. */
.export-card {
  width: min(100%, 560px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(210, 255, 0, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(14, 27, 39, 0.98), rgba(7, 14, 21, 0.98));
  border: 1px solid rgba(126, 154, 170, 0.16);
  box-shadow: var(--shadow-xl);
}

.export-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  /* Pinned — Close must never scroll out of reach. */
  flex: 0 0 auto;
}
/* Only the result body scrolls. min-height:0 is required or the flex item
   refuses to shrink below its content and the cap above does nothing. */
#exportOverlay .result-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.export-card-header h3 {
  margin: 6px 0 0;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.export-card .result-section {
  margin: 0;
  border-radius: 22px;
}

/* ─── Photo upload (player modal) ─────────────────────────────────────────── */
.photo-upload-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.photo-preview-area {
  width: 100px;
  height: 130px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.6);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Checkerboard for transparent PNG */
  background-image: linear-gradient(45deg,#1e293b 25%,transparent 25%),
                    linear-gradient(-45deg,#1e293b 25%,transparent 25%),
                    linear-gradient(45deg,transparent 75%,#1e293b 75%),
                    linear-gradient(-45deg,transparent 75%,#1e293b 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
}

.photo-placeholder {
  font-size: 11px;
  color: rgba(148,163,184,0.45);
  text-align: center;
  padding: 8px;
}

.photo-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.photo-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.photo-upload-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.photo-bg-status {
  font-size: 12px;
  color: rgba(148,163,184,0.75);
  line-height: 1.4;
}

.btn-danger-ghost {
  color: rgba(239,68,68,0.8);
  border-color: rgba(239,68,68,0.3);
}

.btn-danger-ghost:hover {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}

/* ─── Clip Context Panel (editor) ─────────────────────────────────────────── */
.clip-context-panel {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 0;
}

.clip-context-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.55);
  margin-bottom: 12px;
}

.clip-context-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clip-context-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clip-context-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(148,163,184,0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 52px;
  flex-shrink: 0;
  display: block;
}

.match-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.form-input-sm {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

.vs-sep {
  font-size: 11px;
  font-weight: 700;
  color: rgba(148,163,184,0.4);
  letter-spacing: 2px;
  flex-shrink: 0;
}

/* Match score row — two compact number inputs with a teal colon
   separator. Mirrors a real scoreboard's visual rhythm. */
.match-score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
}
.match-score-input {
  width: 64px;
  flex: 0 0 64px;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1px;
  /* Kill the spinner arrows on number inputs — they crowd a 2-digit field. */
  -moz-appearance: textfield;
}
.match-score-input::-webkit-outer-spin-button,
.match-score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.match-score-sep {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
}

/* ─── Action chips ───────────────────────────────────────────────────────── */
.action-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.action-style-row {
  align-items: flex-start;
}

.action-style-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.action-size-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: rgba(203, 213, 225, 0.76);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.action-size-control input {
  width: 112px;
  accent-color: #d2ff00;
}

.action-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.7);
  color: rgba(148,163,184,0.75);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: none;
  letter-spacing: 0.04em;
  width: auto;
  height: auto;
}

.action-chip:hover {
  border-color: rgba(148,163,184,0.45);
  color: #f1f5f9;
  background: rgba(148,163,184,0.08);
}

.action-chip-active {
  border-color: #ffc81e !important;
  background: rgba(255,200,30,0.12) !important;
  color: #ffc81e !important;
}

/* ─── Workflow Progress Bar (editor) ──────────────────────────────────────── */
.workflow-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px 12px 6px;
  margin-bottom: 2px;
}

.wf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 48px;
}

.wf-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
}

.wf-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148,163,184,0.3);
}

.wf-line {
  flex: 1;
  height: 2px;
  background: rgba(148,163,184,0.12);
  align-self: flex-start;
  margin-top: 10px;
  max-width: 32px;
}

/* Active step */
.wf-step.is-active .wf-dot {
  border-color: #d2ff00;
  background: rgba(210,255,0,0.14);
  box-shadow: 0 0 0 3px rgba(210,255,0,0.15);
}

.wf-step.is-active .wf-label {
  color: #d2ff00;
}

/* Completed step */
.wf-step.is-done .wf-dot {
  border-color: rgba(34,197,94,0.7);
  background: rgba(34,197,94,0.12);
}

.wf-step.is-done .wf-dot::after {
  content: '✓';
  font-size: 11px;
  font-weight: 700;
  color: #22c55e;
  line-height: 1;
}

.wf-step.is-done .wf-label {
  color: rgba(34,197,94,0.55);
}

/* Pulse animation: draws attention to the next step button */
@keyframes wf-attention {
  0%, 100% { box-shadow: none; }
  35% { box-shadow: 0 0 0 4px rgba(210,255,0,0.3), 0 0 0 8px rgba(210,255,0,0.10); }
}

.wf-attention {
  animation: wf-attention 1.3s ease-out;
  border-radius: 10px;
}

/* ─── Premium guided editor: Trim + Detect pass ─────────────────────────── */
#editorScreen.screen-editor {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% -14%, rgba(210, 255, 0, 0.16), transparent 34%),
    radial-gradient(circle at 8% 24%, rgba(210, 255, 0, 0.08), transparent 26%),
    linear-gradient(180deg, #03080d 0%, #050b11 56%, #03070b 100%);
  color: var(--editor-text);
}

#editorScreen .editor-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "back title actions";
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  background:
    linear-gradient(180deg, rgba(3, 8, 13, 0.98), rgba(3, 8, 13, 0.82) 82%, rgba(3, 8, 13, 0));
  border-bottom: 0;
  backdrop-filter: blur(18px);
}

#editorScreen .editor-back-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: #f4f7fa;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

#editorScreen .editor-title-block {
  grid-area: title;
  min-width: 0;
  text-align: center;
}

#editorScreen .editor-kicker {
  display: block;
  margin-bottom: 3px;
  color: rgba(244, 247, 250, 0.58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#editorScreen .editor-header h2 {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#editorScreen .editor-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  min-width: 44px;
}

#editorScreen[data-editor-step="wfTrim"] #saveBtn,
#editorScreen[data-editor-step="wfTrack"] #saveBtn,
#editorScreen[data-editor-step="wfSelect"] #saveBtn,
#editorScreen[data-editor-step="wfEffect"] #saveBtn,
#editorScreen[data-editor-step="wfZoom"] #saveBtn,
#editorScreen[data-editor-step="wfTags"] #saveBtn,
#editorScreen[data-editor-step="wfMatch"] #saveBtn {
  display: none;
}

/* ═══ STATIONS — Zoom, Tags, Match (Professional Highlight) ═══════════════
   Existing controls given their own place in the bar, not new markup:
     Zoom   #zoomCard          lives inside .effect-panel-shell (player settings)
     Tags   .action-type-row   lives inside .clip-context-panel
     Match  .customize-panel   lives inside the SAME .clip-context-panel
   A station shows its host panel (mobile rules, further down) and hides the
   host's other children here. Every selector carries the Professional scope:
   Quick Reel shares these panels, is owner-locked, and must keep the zoom card
   on its effect step and tags + match together on its save step.
   Guarded by src/utils/editorStations.test.js. */
body:not([data-app-mode="quickReel"]) #editorScreen:not([data-editor-step="wfZoom"]) #zoomCard {
  display: none;
}

body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfZoom"] .select-heading,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfZoom"] .effect-summary-card,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfZoom"] #ringsCard,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfZoom"] .advanced-effect-options {
  display: none;
}

/* The zoom card sits in the player settings with a top margin meant for a
   card below the rings; as the only card of its station it starts the panel. */
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfZoom"] #zoomCard {
  margin-top: 0;
}

body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTags"] .customize-panel {
  display: none;
}

body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfMatch"] .action-type-row,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfMatch"] .clip-context-heading {
  display: none;
}

/* The Match station IS the match details: updateWorkflowStep opens the
   <details>, so its collapse toggle is a way to hide the whole station. */
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfMatch"] .customize-panel > summary {
  display: none;
}

/* Save is the way out. Tags and match each had their own station, so they are
   not shown a second time here — only Back and the Save and continue CTA.
   (The summary rows are a later phase.) */
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfSave"] .clip-context-heading,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfSave"] .action-type-row,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfSave"] .customize-panel {
  display: none;
}

/* ── The sticky stack: header, bar, then the video ──────────────────────
   On the steps where the preview sticks, it has to start exactly where the
   bar ends and the bar has to be opaque — otherwise the page scrolling
   underneath shows through between the bar and the video. Measured on the
   running editor: the bar ends at 126px, and at 97px at ≤500px. The preview
   used to stick at 116px everywhere: a 19px window on phones, a 10px overlap
   under a bar that fades to transparent on wider screens.
   If the header or the bar changes height, these two numbers change with it.
   None of it applies while the fullscreen player picker or zoom gesture is
   open: there the panel is position: fixed, inset: 0, and a top offset here
   pushed the fullscreen player down, left the editor showing above it and
   the selection toolbar below the screen. */
body:not([data-app-mode="quickReel"]) #editorScreen .workflow-bar {
  background: rgb(3, 8, 13);
  backdrop-filter: none;
}

body:not([data-app-mode="quickReel"]) #editorScreen .editor-header {
  background: rgb(3, 8, 13);
}

body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfEffect"] .preview-panel,
body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfZoom"] .preview-panel,
body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfTags"] .preview-panel,
body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfMatch"] .preview-panel,
body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfSave"] .preview-panel {
  top: 126px;
  /* Opaque, and a ground-coloured ring drawn outward and upward: the card's
     own gradient is 94% opaque and its corners are rounded, so without this
     the tags scrolling underneath still show through its top padding and in
     the four corner cut-outs. The shadow is not clipped by overflow:hidden. */
  background: linear-gradient(180deg, rgb(15, 27, 36), rgb(6, 13, 20));
  box-shadow: 0 -12px 0 12px rgb(3, 8, 13);
}

/* The mobile card patch further down sets every editor card's background and
   shadow with !important (≤640px), so the opaque ring has to say so too. */
@media (max-width: 640px) {
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfEffect"] .preview-panel,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfZoom"] .preview-panel,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfTags"] .preview-panel,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfMatch"] .preview-panel,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfSave"] .preview-panel {
    background: linear-gradient(180deg, rgb(15, 27, 36), rgb(6, 13, 20)) !important;
    box-shadow: 0 -12px 0 12px rgb(3, 8, 13) !important;
  }
}

@media (max-width: 500px) {
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfEffect"] .preview-panel,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfZoom"] .preview-panel,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfTags"] .preview-panel,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfMatch"] .preview-panel,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfSave"] .preview-panel {
    top: 97px;
  }
}

/* Tags: the catalog is 25+ chips, which made this the longest page in the
   editor — Continue and Back far below the fold, nothing saying there was
   more. The chips get their own scroll box with a visible edge, and an inset
   shade along its bottom that stays put while the chips scroll under it. */
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTags"] #actionChips {
  max-height: min(32dvh, 300px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 -22px 18px -18px rgba(0, 0, 0, 0.85);
  scrollbar-width: thin;
  scrollbar-color: rgba(210, 255, 0, 0.45) transparent;
  /* As many ~84px columns as fit: three on a 360px phone, more when wider.
     Rows take the chip's real height, so nothing can spill into the next. */
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  grid-auto-rows: minmax(48px, auto);
  align-content: start;
}

/* Compact chips on the Tags station. They were forced squares
   (aspect-ratio 1/1) with a 40px icon disc and, from the mobile card patch, a
   min-height of 82px !important. In the scroll box the square came out taller
   than its grid row — measured at 360px, 95px chips in 90px rows, 23
   overlapping pairs — and on a 640px-tall phone Continue fell off the screen.
   Here a chip is a row: a small marker, then the label, at most two lines.
   !important only where the mobile patch set it. */
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTags"] #actionChips .action-chip {
  aspect-ratio: auto !important;
  height: auto;
  min-height: 48px !important;
  flex-direction: row;
  justify-content: center;
  padding: 12px 5px 6px !important;
  border-radius: 12px !important;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  /* Break between words, never inside one: "pressu|re" at three columns. */
  overflow-wrap: normal;
  word-break: normal;
}

/* The colour marker moves to the corner, so the label gets the full width —
   inline, it left 63px and "Interception" did not fit at three columns. */
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTags"] #actionChips .action-chip::before {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  width: 8px;
  height: 8px;
  border: 0;
  box-shadow: none;
}

/* "None" and "Custom text" have no colour; their glyph marker is dropped. */
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTags"] #actionChips .action-chip:not([data-scout-type])::before {
  display: none;
}

body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTags"] #actionChips .action-chip[data-scout-type]::before {
  background: var(--scout-chip-color, #d2ff00);
}

body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTags"] #actionChips .action-chip[data-action="custom"] {
  min-height: 48px !important;
  justify-content: center;
}

/* Quick tags: the common actions first, the rest of the catalog behind
   "More actions". The caption-language switch and the More toggle span the
   full row. Professional only — Quick Reel never builds these. */
body:not([data-app-mode="quickReel"]) #editorScreen #actionChips:not(.show-more) .action-chip-more {
  display: none !important;
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-lang-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-lang-switch {
  display: inline-flex;
  gap: 6px;
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-lang-label {
  font-size: 12px;
  color: rgba(244, 247, 250, 0.72);
  margin-inline-end: auto;
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-lang-toggle button,
body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-more-toggle {
  min-height: 36px;
  padding: 0 14px;
  /* The global "button { width: 100% }" would stack the switch. */
  width: auto;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: transparent;
  color: rgba(244, 247, 250, 0.86);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-lang-toggle button[aria-pressed="true"] {
  border-color: rgba(210, 255, 0, 0.65);
  color: #d2ff00;
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-more-toggle {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 40px;
  border-style: dashed;
}

/* Favourites head, group titles and the pin editor. */
body:not([data-app-mode="quickReel"]) #editorScreen #actionChips :is(.action-pins-head, .action-group-title, .action-pin-hint) {
  grid-column: 1 / -1;
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-pins-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(244, 247, 250, 0.86);
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-pin-edit {
  width: auto;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: transparent;
  color: rgba(244, 247, 250, 0.86);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-pin-edit[aria-pressed="true"] {
  border-color: rgba(210, 255, 0, 0.65);
  color: #d2ff00;
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-pin-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(244, 247, 250, 0.62);
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips .action-group-title {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(244, 247, 250, 0.6);
}

/* While editing favourites: pinned chips show a pin, the rest read as
   "tap to add". */
body:not([data-app-mode="quickReel"]) #editorScreen #actionChips.pin-editing .action-chip-pinned::after {
  content: "📌";
  position: absolute;
  top: 2px;
  inset-inline-end: 4px;
  font-size: 11px;
}

body:not([data-app-mode="quickReel"]) #editorScreen #actionChips.pin-editing .action-chip:not(.action-chip-pinned) {
  border-style: dashed;
}

/* Save station summary. Hidden everywhere else, including Quick Reel's save
   step, which shares this panel. */
#editorScreen #saveSummary {
  display: none;
}

body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfSave"] #saveSummary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#editorScreen .save-summary-head h3 {
  margin: 0;
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
}

#editorScreen .save-summary-head p {
  margin: 4px 0 0;
  color: rgba(244, 247, 250, 0.6);
  font-size: 13px;
}

#editorScreen .clip-note-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-2, #8a969c);
}
#editorScreen .clip-note-field input {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #f4fbff;
  font: inherit;
  font-size: 15px;
}
#editorScreen .clip-note-field input:focus { border-color: rgba(210, 255, 0, 0.6); outline: none; }

#editorScreen .save-summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#editorScreen .save-summary-row {
  display: grid;
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #f4f7fa;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

#editorScreen .save-summary-row:hover {
  border-color: rgba(210, 255, 0, 0.45);
  background: rgba(210, 255, 0, 0.06);
}

#editorScreen .save-summary-row:focus-visible {
  outline: 2px solid var(--editor-accent, #d2ff00);
  outline-offset: 2px;
}

#editorScreen .save-summary-label {
  color: rgba(244, 247, 250, 0.6);
  font-size: 13px;
  font-weight: 600;
}

#editorScreen .save-summary-value {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#editorScreen .save-summary-value.is-empty {
  color: rgba(244, 247, 250, 0.42);
  font-weight: 600;
}

#editorScreen .save-summary-edit {
  color: var(--editor-accent, #d2ff00);
  font-size: 20px;
  line-height: 1;
}

/* Change player on the player settings screen only. Hidden everywhere else,
   including Quick Reel, which shares this panel. */
#editorScreen #changePlayerBtn {
  display: none;
}

body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfEffect"] #changePlayerBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
}

/* Continue for Tags and Match. Hidden everywhere else — including Quick Reel's
   save step, which shares this panel. The wrapper is hidden, not only the
   button, so no empty margin band is left behind. */
#editorScreen #stationContinue {
  display: none;
}

body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTags"] #stationContinue,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfMatch"] #stationContinue {
  display: flex;
}

#editorScreen .editor-body {
  width: min(100%, 520px);
  max-width: 520px;
  min-height: calc(100dvh - 66px);
  padding: 0 10px calc(18px + env(safe-area-inset-bottom));
  gap: 14px;
}

#editorScreen .workflow-bar {
  position: sticky;
  top: 64px;
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 0;
  margin: 0 -4px 2px;
  padding: 12px 0 10px;
  background:
    linear-gradient(180deg, rgba(3, 8, 13, 0.82), rgba(3, 8, 13, 0));
  backdrop-filter: blur(8px);
}

#editorScreen .workflow-bar .wf-line {
  display: none;
}

/* Two chip sets share the bar; only the current mode's is on screen. The set
   is display: contents, so its buttons are the bar's grid items exactly as
   before and :last-of-type still ends each set's connecting line. */
.wf-chip-set {
  display: contents;
}

body:not([data-app-mode="quickReel"]) .wf-chip-set[data-chip-mode="quickReel"],
body[data-app-mode="quickReel"] .wf-chip-set[data-chip-mode="professional"] {
  display: none;
}

body:not([data-app-mode="quickReel"]) #editorScreen .workflow-bar {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#editorScreen .wf-step {
  position: relative;
  min-width: 0;
  gap: 7px;
  padding: 0 2px;
}

#editorScreen .wf-step::before {
  content: "";
  position: absolute;
  left: 50%;
  right: -50%;
  top: 8px;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  transform: translateX(13px);
}

#editorScreen .wf-step:last-of-type::before {
  display: none;
}

#editorScreen .wf-dot {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  border: 0;
  background: #59646d;
  box-shadow: none;
}

#editorScreen .wf-label {
  color: rgba(220, 230, 238, 0.48);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#editorScreen .wf-step.is-active .wf-dot,
#editorScreen .wf-step.is-done .wf-dot {
  background: var(--editor-accent);
  box-shadow: 0 0 18px rgba(210, 255, 0, 0.42);
}

#editorScreen .wf-step.is-active .wf-label {
  color: var(--editor-accent);
}

#editorScreen .wf-step.is-done .wf-label {
  color: rgba(210, 255, 0, 0.72);
}

#editorScreen .wf-step.is-done .wf-dot::after {
  content: "";
}

/* The chips are <button>s. Undo the global button look (width 100%, lime
   gradient, padding, border, and 0.5 opacity when disabled) so they read
   exactly as the progress bar did. Quick Reel and a locked bar keep them
   disabled; only an open Professional bar shows them as tappable. */
#workflowBar .wf-step {
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 2px 2px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  cursor: default;
}

#workflowBar .wf-step:disabled {
  opacity: 1;
  cursor: default;
}

#editorScreen.editor-nav-open #workflowBar .wf-step:not(:disabled) {
  cursor: pointer;
}

#editorScreen.editor-nav-open #workflowBar .wf-step:not(:disabled):not(.is-active):hover .wf-label {
  color: #ffffff;
}

#workflowBar .wf-step:focus-visible {
  outline: 2px solid var(--editor-accent, #d2ff00);
  outline-offset: 2px;
}

/* "What is missing" for a step reached out of order. */
#editorScreen .editor-step-blocker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 200, 30, 0.38);
  border-radius: 20px;
  background: rgba(255, 200, 30, 0.08);
}

#editorScreen .editor-step-blocker-text {
  margin: 0;
  color: #f4f7fa;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

#editorScreen .editor-step-blocker-go {
  width: auto;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
}

#editorScreen .effect-save-settings.is-saved {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
}

#editorScreen .editor-workspace {
  gap: 14px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#editorScreen .editor-workspace > .editor-panel,
#editorScreen .editor-workspace > .corr-confirm-bar {
  border: 1px solid var(--editor-border);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    linear-gradient(180deg, rgba(10, 18, 26, 0.96), rgba(4, 10, 15, 0.98));
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

#editorScreen .editor-workspace > .editor-panel + .editor-panel,
#editorScreen .editor-workspace > .editor-panel + .corr-confirm-bar,
#editorScreen .editor-workspace > .corr-confirm-bar + .editor-panel {
  border-top: 1px solid var(--editor-border);
}

#editorScreen .preview-panel {
  padding: 10px;
  gap: 14px;
}

#editorScreen #playerShell {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #000;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.42),
    inset 0 -80px 70px rgba(0, 0, 0, 0.26);
}

#editorScreen[data-editor-step="wfTrim"] .preview-panel {
  /* Content-driven height — no artificial floor that causes giant gaps on tall phones */
  min-height: 0;
}

#editorScreen[data-editor-step="wfTrim"] .trim-bar:not(.trim-collapsed) {
  /* Natural height — no flex:1 stretch that spreads content across empty space */
  flex: 0 0 auto;
  padding-top:    clamp(10px, 2.2dvh, 26px);
  padding-bottom: clamp(8px,  1.8dvh, 20px);
  gap:            clamp(8px,  1.4dvh, 14px);
}

#editorScreen[data-editor-step="wfTrim"] .trim-footer {
  /* Flow inline — no margin-top:auto that pushes button to panel bottom */
  margin-top: 0;
}

/* ── Active-step highlight: subtle glow border on the current panel ── */
#editorScreen[data-editor-step="wfTrim"] .preview-panel,
#editorScreen[data-editor-step="wfTrack"] .tracking-panel,
#editorScreen[data-editor-step="wfSelect"] .effect-panel-shell,
#editorScreen[data-editor-step="wfEffect"] .effect-panel-shell,
#editorScreen[data-editor-step="wfZoom"] .effect-panel-shell,
#editorScreen[data-editor-step="wfTags"] .clip-context-panel,
#editorScreen[data-editor-step="wfMatch"] .clip-context-panel {
  border-color: rgba(210, 255, 0, 0.32);
  box-shadow:
    0 0 0 1px rgba(210, 255, 0, 0.14),
    0 22px 60px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  background:
    linear-gradient(180deg, rgba(210, 255, 0, 0.05), rgba(255, 255, 255, 0.014)),
    linear-gradient(180deg, rgba(10, 18, 26, 0.96), rgba(4, 10, 15, 0.98));
}

/* Completed trim panel: minimal pill look already handled by .trim-collapsed */
#editorScreen[data-editor-step="wfTrack"] .preview-panel,
#editorScreen[data-editor-step="wfSelect"] .preview-panel,
#editorScreen[data-editor-step="wfEffect"] .preview-panel {
  padding: 10px;
}

#editorScreen #playerShell::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 32%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.34));
  z-index: 2;
}

#editorScreen .step-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#editorScreen .step-card-head h3 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: 19px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0;
}

#editorScreen .trim-label {
  color: var(--editor-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

#editorScreen .clip-dur-label {
  min-height: 30px;
  padding: 0 10px;
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(244, 247, 250, 0.72);
  font-size: 11px;
}

#editorScreen .trim-bar {
  gap: 14px;
  padding: 14px 10px 6px;
}

#editorScreen .trim-rail {
  height: 64px;
  padding: 0;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(210, 255, 0, 0.10), rgba(210, 255, 0, 0.03)),
    rgba(2, 9, 13, 0.84);
  border: 1px solid rgba(210, 255, 0, 0.18);
  overflow: hidden;
}

#editorScreen .trim-rail-track,
#editorScreen .trim-selection {
  left: 0;
  right: 0;
}

#editorScreen .trim-rail-track {
  top: 50%;
  transform: translateY(-50%);
  height: 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px) 0 50% / 18px 18px repeat-x,
    linear-gradient(90deg, rgba(210, 255, 0, 0.20), rgba(72, 88, 15, 0.54));
  border-color: rgba(210, 255, 0, 0.26);
}

/* Trim bracket — thick side borders ARE the handles, thin top/bottom connect them */
#editorScreen .trim-selection {
  top: 0;
  height: 100%;
  border-top: 3px solid var(--editor-accent);
  border-bottom: 3px solid var(--editor-accent);
  border-left: 16px solid var(--editor-accent);
  border-right: 16px solid var(--editor-accent);
  border-radius: 0;
  background: rgba(210, 255, 0, 0.08);
  box-shadow: none;
}

/* Chevron arrows centered inside each handle */
#editorScreen .trim-selection::before,
#editorScreen .trim-selection::after {
  width: auto;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  box-shadow: none;
  color: rgba(0, 20, 15, 0.65);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  border-radius: 0;
}

#editorScreen .trim-selection::before {
  left: -13px;
  content: '‹';
}

#editorScreen .trim-selection::after {
  right: -13px;
  content: '›';
}

#editorScreen .trim-slider::-webkit-slider-runnable-track {
  height: 64px;
}

#editorScreen .trim-slider::-webkit-slider-thumb {
  width: 22px;
  height: 64px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#editorScreen .trim-slider::-moz-range-track {
  height: 64px;
}

#editorScreen .trim-slider::-moz-range-thumb {
  width: 22px;
  height: 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#editorScreen .trim-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-top: 8px; /* push Confirm Trim button lower */
}

#editorScreen .trim-copy {
  text-align: center;
}

#editorScreen .trim-copy h4 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}

#editorScreen .trim-copy h4 strong {
  color: var(--editor-accent);
  font-variant-numeric: tabular-nums;
}

#editorScreen .trim-helper {
  width: 100%;
  margin: 0 auto;
  color: var(--editor-muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

#editorScreen .trim-bar #applyTrimBtn,
#editorScreen .tracking-panel #trackBtn {
  width: 100%;
  min-height: 54px;
  border-radius: 15px;
  border: 1px solid rgba(210, 255, 0, 0.58);
  background:
    linear-gradient(180deg, rgba(210, 255, 0, 0.96), rgba(132, 176, 0, 0.94));
  color: #001a14;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow:
    0 14px 30px rgba(148, 190, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

#editorScreen .trim-bar #applyTrimBtn::after {
  content: "✓";
  float: right;
  width: 25px;
  height: 25px;
  margin-left: 10px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(0, 26, 20, 0.28);
}

/* ── Collapsed trim bar: minimal single-row pill ── */
#editorScreen .trim-bar.trim-collapsed {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  border-color: rgba(210, 255, 0, 0.20);
  background:
    linear-gradient(180deg, rgba(210, 255, 0, 0.06), rgba(255, 255, 255, 0.01)),
    rgba(8, 17, 25, 0.88);
}

#editorScreen .trim-bar.trim-collapsed .trim-heading {
  display: none;
}

#editorScreen .trim-bar.trim-collapsed .trim-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

#editorScreen .trim-bar.trim-collapsed .trim-summary span {
  min-width: 22px;
  height: 22px;
  width: 22px;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
  color: #001a14;
  background: var(--editor-accent);
  border: 0;
  font-size: 0;
  flex-shrink: 0;
}

#editorScreen .trim-bar.trim-collapsed .trim-summary span::after {
  content: "✓";
  color: #001a14;
  font-size: 11px;
}

#editorScreen .trim-bar.trim-collapsed .trim-summary strong {
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#editorScreen .trim-bar.trim-collapsed .trim-copy,
#editorScreen .trim-bar.trim-collapsed .trim-rail,
#editorScreen .trim-bar.trim-collapsed .trim-chips,
#editorScreen .trim-bar.trim-collapsed #applyTrimBtn {
  display: none;
}

#editorScreen .trim-bar.trim-collapsed .trim-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 0; /* override global footer padding-top */
  flex-shrink: 0;
}

#editorScreen .trim-bar.trim-collapsed #editTrimBtn {
  min-height: 30px;
  padding: 0 11px;
  font-size: 11px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(244, 247, 250, 0.60);
}

#editorScreen .tracking-panel {
  position: relative;
  padding: 22px 14px 14px;
  gap: 16px;
  overflow: hidden;
}

#editorScreen .tracking-panel::before {
  content: "";
  position: absolute;
  inset: -40% auto auto 50%;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(210, 255, 0, 0.16), transparent 66%);
  transform: translateX(-50%);
  pointer-events: none;
}

#editorScreen .tracking-reindex-notice {
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(210, 255, 0, 0.22);
  border-radius: 16px;
  background: rgba(8, 15, 22, 0.72);
  text-align: start;
}

#editorScreen .tracking-reindex-notice > div {
  display: grid;
  gap: 4px;
}

#editorScreen .tracking-reindex-notice strong {
  color: var(--text-0);
  font-size: 16px;
}

#editorScreen .tracking-reindex-notice span:last-child {
  color: var(--editor-muted);
  font-size: 13px;
}

#editorScreen .tracking-reindex-spinner {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(210, 255, 0, 0.22);
  border-top-color: var(--editor-accent);
  border-radius: 999px;
  animation: editor-spin 0.8s linear infinite;
}

#editorScreen .tracking-panel.tracking-reindexing .tracking-reindex-notice {
  display: flex;
}

#editorScreen .tracking-panel.tracking-reindexing .detect-visual,
#editorScreen .tracking-panel.tracking-reindexing .detect-heading,
#editorScreen .tracking-panel.tracking-reindexing .panel-hint,
#editorScreen .tracking-panel.tracking-reindexing .track-row,
#editorScreen .tracking-panel.tracking-reindexing .step-nav-footer {
  display: none;
}

#editorScreen .detect-visual {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 8px auto 2px;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 0, 0.16);
  background:
    radial-gradient(circle, rgba(210, 255, 0, 0.30) 0 9px, transparent 10px),
    repeating-radial-gradient(circle, rgba(210, 255, 0, 0.38) 0 1px, transparent 2px 26px);
}

#editorScreen .detect-visual::before,
#editorScreen .detect-visual::after,
#editorScreen .detect-visual span {
  content: "";
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 0, 0.68);
}

#editorScreen .detect-visual::before {
  inset: 16px;
  animation: editor-spin 3.2s linear infinite;
  border-right-color: transparent;
}

#editorScreen .detect-visual::after {
  inset: 34px;
  animation: editor-spin 1.8s linear infinite reverse;
  border-left-color: transparent;
}

#editorScreen .detect-visual span {
  width: 8px;
  height: 8px;
  background: var(--editor-accent);
  box-shadow: 0 0 14px rgba(210, 255, 0, 0.8);
}

#editorScreen .detect-visual span:nth-child(1) { left: 72px; top: 18px; }
#editorScreen .detect-visual span:nth-child(2) { left: 24px; top: 74px; }
#editorScreen .detect-visual span:nth-child(3) { right: 22px; bottom: 22px; }

@keyframes editor-spin {
  to { transform: rotate(360deg); }
}

#editorScreen .detect-heading {
  justify-content: center;
  text-align: center;
}

#editorScreen .tracking-panel .panel-hint {
  max-width: 280px;
  margin: 0 auto;
  color: var(--editor-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

#editorScreen .tracking-panel .track-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#editorScreen .tracking-panel.tracking-waiting #selectModeButton,
#editorScreen .tracking-panel.tracking-waiting #editModeButton,
#editorScreen .tracking-panel.tracking-waiting:not(.tracking-loading-active) .tracking-loader {
  display: none;
}

#editorScreen .tracking-panel.tracking-loading-active #trackBtn {
  opacity: 0.52;
}

#editorScreen .tracking-panel.tracking-loading-active .detect-visual {
  box-shadow: 0 0 42px rgba(210, 255, 0, 0.18);
}

#editorScreen .tracking-panel .track-status {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(244, 247, 250, 0.78);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

#editorScreen .tracking-panel.tracking-ready .detect-visual,
#editorScreen .tracking-panel.tracking-ready .detect-heading {
  display: none;
}

/* ── Step nav footer (Back / Skip / Continue) ───────────────────── */
#editorScreen .step-nav-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 4px;
}
#editorScreen .step-nav-footer--action {
  justify-content: space-between;
}
#editorScreen .step-back-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: #5a7080;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
#editorScreen .step-back-btn:hover {
  color: #c0cad8;
  border-color: rgba(255,255,255,0.22);
}

/* Professional: ONE Back at the foot of every station, always meaning "the
   previous station" (getPreviousStationStep). It was an 11px grey outline
   that read as disabled. It is the secondary action, so it matches Continue's
   height and never outweighs it; the type follows the screen width. It shares
   Continue's row — see COMPACT STATIONS at the end of this file.
   Quick Reel keeps its own styling. */
body:not([data-app-mode="quickReel"]) #editorScreen .step-back-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #f4f7fa;
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 800;
}

body:not([data-app-mode="quickReel"]) #editorScreen .step-back-btn:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

body:not([data-app-mode="quickReel"]) #editorScreen .step-back-btn:focus-visible {
  outline: 2px solid var(--editor-accent, #d2ff00);
  outline-offset: 2px;
}
#editorScreen .step-skip-btn {
  background: transparent;
  border: 1px solid rgba(210,255,0,0.22);
  color: #d2ff00;
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
#editorScreen .step-skip-btn:hover {
  background: rgba(210,255,0,0.08);
}
#editorScreen .step-continue-btn {
  flex: 1;
  max-width: 220px;
  background: linear-gradient(135deg, #d2ff00, #7da900);
  border: none;
  color: #001a14;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .3px;
  transition: opacity .15s, transform .1s;
}
#editorScreen .step-continue-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* ═══ STEP GATING — one step on screen, at every width ═══════════════════
   Which panel a step shows is behaviour, not layout, so it lives here and not
   inside a media query. It used to sit only in @media (max-width: 640px), and
   on any wider screen every step up to the current one stayed stacked on the
   page. The step bar is the memory of what is done; the page is not. Media
   queries further down keep only what depends on width.

   data-editor-step is the ONLY source for Professional: no !important here,
   and syncEditorProgressPanels no longer sets `hidden` on these panels in
   Professional (`hidden` is display:none !important and would beat this).
   The fullscreen-lock rule that hides the trim bar still wins, as intended.

   The preview (.preview-panel) is permanent and not gated; the trim bar lives
   inside it, so it is gated on its own.

   Quick Reel shares #editorScreen and is owner-locked: it keeps its original
   gating — `hidden` from JS, the mobile-only rules below, and this subset.
   Guarded by src/utils/editorStepGating.test.js. */
body:not([data-app-mode="quickReel"]) #editorScreen .tracking-panel,
body:not([data-app-mode="quickReel"]) #editorScreen .effect-panel-shell,
body:not([data-app-mode="quickReel"]) #editorScreen .clip-context-panel,
body:not([data-app-mode="quickReel"]) #editorScreen .segment-render-panel,
body:not([data-app-mode="quickReel"]) #editorScreen .metadata-panel,
body:not([data-app-mode="quickReel"]) #editorScreen:not([data-editor-step="wfTrim"]) .trim-bar {
  display: none;
}

body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTrim"] .trim-bar,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTrack"] .tracking-panel,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfSelect"] .tracking-panel,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfEffect"] .effect-panel-shell,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfZoom"] .effect-panel-shell,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTags"] .clip-context-panel,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfMatch"] .clip-context-panel,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfSave"] .clip-context-panel {
  display: flex;
}

body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfTrim"] .clip-context-panel,
body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfTrack"] .clip-context-panel,
body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSelect"] .clip-context-panel,
body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfTrim"] .effect-panel-shell,
body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfTrack"] .effect-panel-shell {
  display: none !important;
}

#editorScreen[data-editor-step="wfSave"] .editor-body {
  padding-bottom: calc(170px + env(safe-area-inset-bottom));
}

/* Save/Render button — desktop: centered pill */
#editorScreen[data-editor-step="wfSave"] #saveBtn {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 60;
  width: min(420px, calc(100vw - 48px));
  min-height: 54px;
  transform: translateX(-50%);
  border-radius: 16px;
  border: 1px solid rgba(210, 255, 0, 0.62);
  background:
    linear-gradient(180deg, rgba(210, 255, 0, 0.98), rgba(132, 176, 0, 0.96));
  color: #001a14;
  font-size: 16px;
  font-weight: 900;
  box-shadow:
    0 12px 32px rgba(148, 190, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

#editorScreen[data-editor-step="wfSave"] #saveBtn::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 26, 20, 0.30);
  transform: translateY(-50%);
}

#editorScreen[data-editor-step="wfSelect"] .preview-panel,
#editorScreen[data-editor-step="wfEffect"] .preview-panel,
#editorScreen[data-editor-step="wfZoom"] .preview-panel,
#editorScreen[data-editor-step="wfTags"] .preview-panel,
#editorScreen[data-editor-step="wfMatch"] .preview-panel,
#editorScreen[data-editor-step="wfSave"] .preview-panel {
  padding: 10px;
}

#editorScreen[data-editor-step="wfEffect"] .preview-panel,
#editorScreen[data-editor-step="wfZoom"] .preview-panel,
#editorScreen[data-editor-step="wfTags"] .preview-panel,
#editorScreen[data-editor-step="wfMatch"] .preview-panel,
#editorScreen[data-editor-step="wfSave"] .preview-panel {
  position: sticky;
  top: 116px;
  z-index: 16;
}

#editorScreen[data-editor-step="wfSelect"] .editor-workspace {
  min-height: max(620px, calc(100dvh - 134px));
}

#editorScreen[data-editor-step="wfSelect"] .tracking-panel {
  flex: 1;
  justify-content: center;
}

#editorScreen .frame-nav-bar,
#editorScreen .frame-step-bar {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(4, 10, 15, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

#editorScreen .frame-nav-bar {
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  gap: 8px;
  padding: 9px;
}

#editorScreen .frame-nav-btn,
#editorScreen .frame-step-btn {
  min-height: 44px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: #f4f7fa;
  font-weight: 800;
}

#editorScreen .frame-nav-big {
  background: rgba(210, 255, 0, 0.10);
  border-color: rgba(210, 255, 0, 0.28);
  color: var(--editor-accent);
}

#editorScreen .frame-nav-play {
  min-width: 70px;
  background: rgba(210, 255, 0, 0.16);
  border-color: rgba(210, 255, 0, 0.40);
  color: var(--editor-accent);
}

#editorScreen .frame-nav-time,
#editorScreen .frame-step-time {
  min-width: 62px;
  display: grid;
  place-items: center;
  color: var(--editor-accent);
  font-size: 13px;
  font-weight: 900;
}

#editorScreen .frame-step-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

#editorScreen .frame-play-btn {
  background: rgba(210, 255, 0, 0.16);
  border-color: rgba(210, 255, 0, 0.40);
  color: var(--editor-accent);
}

#editorScreen .frame-step-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--editor-muted);
  font-size: 12px;
  text-align: center;
  white-space: normal;
}

body.selection-fullscreen-lock {
  overflow: hidden;
}

/* Hide native HTML5 video controls — defense in depth (also removed via JS). */
#editorScreen.selection-fullscreen-active #previewVideo::-webkit-media-controls,
#editorScreen.selection-fullscreen-active #previewVideo::-webkit-media-controls-enclosure,
#editorScreen.selection-fullscreen-active #previewVideo::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none !important;
}

#editorScreen.selection-fullscreen-active #playerShell {
  flex: 1;
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

#editorScreen.selection-fullscreen-active #previewVideo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #playerShell {
  flex: 0 1 auto;
  width: min(calc(100dvh * 9 / 16), calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: min(100dvh, calc((100vw - 32px) * 16 / 9));
  max-height: 100dvh;
  margin: auto;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #previewVideo {
  object-fit: cover;
  object-position: var(--quick-reel-pan-x, 50%) 50%;
  cursor: grab;
  touch-action: none;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #previewVideo.is-reframing {
  cursor: grabbing;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #textPreviewLayer {
  display: none !important;
}

#editorScreen.selection-fullscreen-active #playerShell::after {
  display: none;
}

/* ── Landscape Selection HUD (matches the user-supplied mockup) ─────────── */
.ls-hud {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none; /* children opt back in */
}
.ls-hud[hidden] { display: none !important; }

/* "Loading video" over the editor player (initPreviewLoadingNote). Above the
   text layer, below the fullscreen HUD; never takes a tap. Never in Quick
   Reel, which shares #playerShell and is owner-locked. */
.preview-loading-note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(6, 9, 11, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8eef0;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
.preview-loading-note[hidden],
body[data-app-mode="quickReel"] .preview-loading-note { display: none !important; }

/* CRITICAL: override the global `button { width: 100% }` rule from the top of
   this file — otherwise every button below would stretch full-width. */
.ls-hud button,
.ls-hud .ls-btn,
.ls-hud .ls-back-btn { width: auto !important; }

/* Trim button while clip is uploading: looks alive with a soft pulse so user
   doesn't think the app is frozen. The button itself stays disabled. */
#applyTrimBtn.is-uploading {
  opacity: 1 !important;          /* override the global :disabled opacity */
  cursor: progress !important;
  background: linear-gradient(90deg,
    rgba(210, 255, 0, 0.30) 0%,
    rgba(210, 255, 0, 0.55) 50%,
    rgba(210, 255, 0, 0.30) 100%);
  background-size: 200% 100%;
  animation: trimUploadPulse 1.6s ease-in-out infinite;
  color: #021015 !important;
  font-weight: 900;
}
@keyframes trimUploadPulse {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Hidden status text kept for screen-readers / programmatic updates */
.ls-status-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Top-right Back pill — only chrome at the top of the screen */
.ls-back-btn {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  left: auto !important;       /* defeat any inherited left:0 */
  pointer-events: auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 36px;
  width: auto !important;
  max-width: max-content;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 14, 20, 0.86);
  color: #f7fbff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.ls-back-btn:active { background: rgba(8, 14, 20, 0.96); }

.ls-box-toggle {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  pointer-events: auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  width: auto !important;
  max-width: max-content;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 14, 20, 0.74);
  color: rgba(247, 251, 255, 0.88);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}
.ls-box-toggle[aria-pressed="true"] {
  border-color: rgba(251, 191, 36, 0.58);
  background: rgba(251, 191, 36, 0.18);
  color: #ffd66b;
}
.ls-box-toggle:active { background: rgba(8, 14, 20, 0.94); }

.ls-reframe-hint {
  position: absolute;
  top: max(54px, calc(env(safe-area-inset-top) + 54px));
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 0, 0.18);
  background: rgba(4, 10, 15, 0.66);
  color: rgba(247, 251, 255, 0.82);
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.36);
}

body:not([data-app-mode="quickReel"]) .ls-reframe-hint,
body:not([data-app-mode="quickReel"]) .ls-reframe-reset {
  display: none !important;
}

/* Tracking-in-progress overlay (centered "Detecting players…") */
.ls-tracking-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  z-index: 45;
}
.ls-tracking-overlay[hidden] { display: none !important; }
.ls-tracking-spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: #d2ff00;
  border-radius: 50%;
  animation: lsSpin 0.85s linear infinite;
}
@keyframes lsSpin { to { transform: rotate(360deg); } }
.ls-tracking-label {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(4, 10, 15, 0.78);
  color: #f7fbff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  backdrop-filter: blur(14px);
}

/* Single horizontal toolbar — bottom of screen.
   Bottom offset is generous to clear Android navigation gesture area + Samsung
   bottom system bar even when env(safe-area-inset-bottom) reports 0. */
.ls-toolbar {
  position: absolute;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 16px);
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(4, 10, 15, 0.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.ls-toolbar::-webkit-scrollbar { display: none; }

.ls-toolbar.ls-toolbar-tracking > .ls-btn {
  opacity: 0.35;
  pointer-events: none;
}

.ls-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #f7fbff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, background 0.15s;
}
.ls-btn:active { background: rgba(255, 255, 255, 0.12); }
.ls-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
.ls-btn .ls-icon { font-size: 10px; opacity: 0.95; }
.ls-btn .ls-text { font-size: 12px; }
.ls-btn .ls-short { display: none; }

/* Subtle ghost variant for "Choose Again" */
.ls-btn.ls-ghost {
  background: transparent;
  border-color: transparent;
  color: rgba(247, 251, 255, 0.78);
}
.ls-btn.ls-ghost:active { background: rgba(255, 255, 255, 0.06); }

/* Primary green pill — Confirm */
.ls-btn.ls-primary {
  background: linear-gradient(135deg, #d2ff00, #a8f000);
  border-color: rgba(210, 255, 0, 0.55);
  color: #021015;
  font-weight: 900;
  padding: 0 18px;
}

/* Re-edit: "Continue" (the flow's next step) beside the primary "Save &
   close". Outlined, so the save is the obvious way out. */
.ls-btn.ls-continue {
  border-color: rgba(210, 255, 0, 0.45);
  color: #d9ff5c;
  font-weight: 800;
}
/* Top bar, beside Back (which sits at the right edge). */
.ls-btn.ls-save-close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: calc(max(12px, env(safe-area-inset-right)) + 100px);
  min-height: 36px;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.ls-btn.ls-save-close[hidden],
body[data-app-mode="quickReel"] #lsSaveClose { display: none !important; }

/* "Add player" in the fullscreen selection toolbar. Deliberately NOT the
   primary style — Confirm stays the one obvious way out of this screen. */
.ls-btn.ls-add-player {
  border-color: rgba(210, 255, 0, 0.45);
  color: #d9ff5c;
}

.ls-btn.ls-add-player:disabled {
  opacity: 0.4;
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.45);
}

.ls-btn.ls-add-player .ls-icon {
  font-weight: 900;
  margin-inline-end: 4px;
}

/* Player name tag — the look of the lower-third name in every play: black
   panel, club-colour bar, Anton uppercase (Rubik for Hebrew). Sized and
   placed per frame by applyNameTagToDOM; mirrors remotion/src/NameTag.jsx. */
.player-name-tag {
  position: absolute;
  display: flex;
  align-items: stretch;
  transform: translate(-50%, -100%);
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
}
.player-name-tag[hidden] { display: none; }
.player-name-tag .nt-bar {
  width: max(2px, calc(var(--nt-font, 14px) * 0.18));
  flex-shrink: 0;
  background: linear-gradient(to bottom, var(--nt-accent, #00dcff), color-mix(in srgb, var(--nt-accent, #00dcff) 47%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--nt-accent, #00dcff) 53%, transparent);
}
.player-name-tag .nt-text {
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-family: 'Anton', 'Rubik', 'Arial Narrow', sans-serif;
  font-size: var(--nt-font, 14px);
  line-height: 1;
  letter-spacing: calc(var(--nt-font, 14px) * 0.08);
  text-transform: uppercase;
  padding: calc(var(--nt-font, 14px) * 0.3) calc(var(--nt-font, 14px) * 0.6);
}

.ls-btn.ls-name-tag {
  border-color: rgba(255, 255, 255, 0.22);
  color: #f7fbff;
}
.ls-btn.ls-name-tag:disabled {
  opacity: 0.4;
  color: rgba(255, 255, 255, 0.45);
}
.ls-btn.ls-name-tag .ls-icon {
  font-weight: 900;
  margin-inline-end: 4px;
}
body[data-app-mode="quickReel"] #lsNameTagBtn,
body[data-app-mode="quickReel"] #lsNameTagPanel {
  display: none !important;
}
.ls-name-tag-panel {
  position: absolute;
  left: 50%;
  bottom: calc(140px + env(safe-area-inset-bottom)); /* clears #lsToolbar */
  transform: translateX(-50%);
  width: min(340px, calc(100% - 24px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(4, 10, 15, 0.9);
  color: #f7fbff;
  pointer-events: auto;
  z-index: 30;
}
.ls-name-tag-panel[hidden] { display: none !important; }
.ls-name-tag-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
}
.ls-name-tag-size {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(247, 251, 255, 0.75);
}
.ls-name-tag-size input { flex: 1; accent-color: #d2ff00; }
.ls-name-tag-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ls-btn.ls-reframe-reset {
  border-color: rgba(210, 255, 0, 0.28);
  color: #d2ff00;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-toolbar {
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: calc(100% - 18px);
  max-width: calc(100% - 18px);
  min-width: 0;
  box-sizing: border-box;
  padding: 6px;
  gap: clamp(4px, 1.45vw, 7px);
  overflow: hidden;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(8, 15, 20, 0.68), rgba(3, 8, 12, 0.86));
  border-color: rgba(255, 255, 255, 0.13);
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsBack5f,
body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsFwd5f {
  display: none !important;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #selectionFullscreenAgain .ls-full {
  display: none;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #selectionFullscreenAgain .ls-short {
  display: inline;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-btn .ls-text {
  display: none;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsBack1f,
body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsFwd1f,
body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsPlay {
  width: clamp(38px, 12.4vw, 44px) !important;
  min-width: clamp(38px, 12.4vw, 44px) !important;
  height: clamp(38px, 12.4vw, 44px) !important;
  min-height: clamp(38px, 12.4vw, 44px) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  justify-content: center;
  gap: 0;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsBack1f,
body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsFwd1f {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(247, 251, 255, 0.92);
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsBack1f .ls-icon,
body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsFwd1f .ls-icon {
  font-size: 15px;
  line-height: 1;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsPlay {
  width: clamp(44px, 14.3vw, 50px) !important;
  min-width: clamp(44px, 14.3vw, 50px) !important;
  height: clamp(44px, 14.3vw, 50px) !important;
  min-height: clamp(44px, 14.3vw, 50px) !important;
  font-size: 18px;
  box-shadow: 0 0 18px rgba(210, 255, 0, 0.42);
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-reframe-reset,
body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #selectionFullscreenAgain,
body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-primary {
  min-width: 0;
  width: auto !important;
  height: clamp(40px, 12.8vw, 44px);
  min-height: clamp(40px, 12.8vw, 44px);
  padding: 0 clamp(8px, 2.4vw, 12px);
  justify-content: center;
  font-size: clamp(10px, 3.15vw, 12px);
  letter-spacing: -0.01em;
  flex: 1 1 62px;
  max-width: 78px;
  box-sizing: border-box;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #selectionFullscreenAgain {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(247, 251, 255, 0.88);
  font-weight: 850;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #selectionFullscreenAgain:disabled {
  opacity: 0.38;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-reframe-reset {
  background: rgba(4, 10, 15, 0.72);
  border-color: rgba(210, 255, 0, 0.50);
  color: #d2ff00;
}

body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-primary {
  background: linear-gradient(135deg, #d2ff00, #a8f000);
  border-color: rgba(210, 255, 0, 0.60);
  color: #021015;
  box-shadow: 0 0 18px rgba(210, 255, 0, 0.22);
}

@media (max-width: 380px) {
  body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-toolbar {
    width: calc(100% - 14px);
    max-width: calc(100% - 14px);
    gap: 4px;
    padding-inline: 5px;
  }

  body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsBack1f,
  body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsFwd1f {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #lsPlay {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-reframe-reset,
  body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #selectionFullscreenAgain,
  body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-primary {
    flex-basis: 58px;
    max-width: 68px;
    padding-inline: 7px;
    font-size: 10px;
  }
}

@media (max-width: 340px) {
  body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-reframe-reset {
    max-width: 60px;
  }

  body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active #selectionFullscreenAgain {
    max-width: 58px;
  }

  body[data-app-mode="quickReel"] #editorScreen.selection-fullscreen-active .ls-primary {
    max-width: 64px;
  }
}

/* Adjust button — outlined accent when active correction mode would be entered */
.ls-btn.ls-adjust {
  border-color: rgba(210, 255, 0, 0.55);
  color: #d2ff00;
}
.ls-btn.ls-adjust.is-active {
  background: rgba(210, 255, 0, 0.16);
}

/* Center play button — primary green circle (larger than other buttons) */
.ls-btn.ls-play {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #d2ff00, #a8f000);
  border-color: rgba(210, 255, 0, 0.55);
  color: #021015;
  font-size: 18px;
  font-weight: 900;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(210, 255, 0, 0.35);
  margin: 0 2px;
}

/* Tighter sizing for short-height landscape (most mobile phones <450px tall) */
@media (orientation: landscape) and (max-height: 480px) {
  .ls-toolbar {
    bottom: calc(60px + env(safe-area-inset-bottom));
    gap: 4px;
    padding: 5px 6px;
  }
  .ls-btn {
    padding: 0 10px;
    min-height: 32px;
    gap: 5px;
    font-size: 11px;
  }
  .ls-btn .ls-text { font-size: 11px; }
  .ls-btn.ls-play {
    width: 38px; height: 38px; min-height: 38px;
    font-size: 16px;
  }
  .ls-back-btn {
    min-height: 34px;
    padding: 6px 14px;
    font-size: 13px;
    top: max(8px, env(safe-area-inset-top));
  }
  .ls-box-toggle {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 12px;
    top: max(8px, env(safe-area-inset-top));
  }
}

/* In fullscreen, the new unified .ls-toolbar replaces BOTH the original
   frame-step-bar AND frame-nav-bar. Hide them both to prevent duplicate
   controllers (this was the source of the "two stacked bars" bug). */
#editorScreen.selection-fullscreen-active .frame-nav-bar,
#editorScreen.selection-fullscreen-active .frame-step-bar,
#editorScreen.selection-fullscreen-active .frame-step-hint {
  display: none !important;
}

/* ── Player + Zoom workspace (Professional) ─────────────────────────────
   One fullscreen, two acts, set by data-fs-mode on #editorScreen. Both acts
   share #lsToolbar (frame steps + Play); each hides the other act's buttons
   and overlays. Quick Reel never sets data-fs-mode, so none of this reaches
   it. Guarded by src/utils/playerZoomWorkspace.test.js. */
#editorScreen[data-fs-mode="zoom"] #selectionFullscreenAgain,
#editorScreen[data-fs-mode="zoom"] #lsAddPlayer,
#editorScreen[data-fs-mode="zoom"] #lsNameTagBtn,
#editorScreen[data-fs-mode="zoom"] #lsNameTagPanel,
#editorScreen[data-fs-mode="zoom"] #selectionFullscreenDone,
#editorScreen[data-fs-mode="zoom"] #selectionFullscreenAdjust,
#editorScreen[data-fs-mode="zoom"] #selectionBoxesToggle,
#editorScreen[data-fs-mode="zoom"] #lsPlayerSettingsBtn,
#editorScreen[data-fs-mode="zoom"] #lsPlayerPanel {
  display: none !important;
}
#editorScreen:not([data-fs-mode="zoom"]) #lsZoomDone,
#editorScreen:not([data-fs-mode="zoom"]) #lsToolbar #zoomArmBtn,
#editorScreen:not([data-fs-mode="zoom"]) #lsZoomPanel,
#editorScreen:not([data-fs-mode="zoom"]) #lsModeBanner,
#editorScreen:not([data-fs-mode]) #lsPlayerSettingsBtn,
body[data-app-mode="quickReel"] #lsPlayerSettingsBtn,
body[data-app-mode="quickReel"] #lsPlayerPanel {
  display: none !important;
}
.ls-panel[hidden],
.ls-zoom-sheet[hidden],
.ls-mode-banner[hidden] { display: none !important; }

/* The zoom act leaves no trace of the player picker on the video: no boxes,
   no ring or other effect marker, no handles. Touches there are the zoom's. */
#editorScreen[data-fs-mode="zoom"] #overlayLayer > *,
#editorScreen[data-fs-mode="zoom"] #playerShell > :is(.player-ring, .spotlight-overlay, .spotlight-beam, .ground-ring, .target-overlay, .ring-handles, .player-name-tag) {
  display: none !important;
}

/* "Mark again" on the bar is the zoom card's own arm button, dressed as a
   bar button while it is borrowed. */
#lsToolbar #zoomArmBtn {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #f7fbff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ls-settings-toggle {
  position: absolute;
  top: max(54px, calc(env(safe-area-inset-top) + 54px));
  left: max(12px, env(safe-area-inset-left));
  pointer-events: auto;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 14, 20, 0.74);
  color: rgba(247, 251, 255, 0.9);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}
.ls-settings-toggle[aria-expanded="true"] {
  border-color: rgba(210, 255, 0, 0.55);
  color: #d2ff00;
}

/* Zoom act banner: the mode's name, then the one thing to do now. */
.ls-mode-banner {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(620px, calc(100vw - 240px));
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  color: #f7fbff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.6);
}
.ls-mode-title {
  font-size: clamp(22px, 6.5vh, 40px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.ls-mode-accent { color: #d2ff00; }
.ls-mode-hint {
  font-size: clamp(12px, 3.4vh, 15px);
  font-weight: 700;
  line-height: 1.3;
}
.ls-zoom-players-note {
  margin-top: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(210, 255, 0, 0.3);
  border-radius: 999px;
  background: rgba(4, 10, 15, 0.68);
  color: rgba(247, 251, 255, 0.86);
  font-size: clamp(10px, 2.8vh, 12px);
  font-weight: 700;
  line-height: 1.25;
}

/* Player act: effect overlay — a small see-through card under its button,
   as tall as its two rows and no taller. Same treatment as the zoom sheet:
   no blur (a frosted panel reads as a solid slab), shadowed text instead. */
.ls-panel {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  top: max(96px, calc(env(safe-area-inset-top) + 96px));
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  max-height: calc(100% - 250px);
  pointer-events: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(4, 10, 15, 0.22);
  color: #f7fbff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.ls-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ls-panel input[type="range"],
.ls-zoom-sheet input[type="range"] { width: 100%; }
/* IDs: the portrait editor's #editorScreen rules for these same controls
   (stacked label, boxed row) would otherwise win inside the overlay. */
#editorScreen #lsPlayerPanel .effect-quick-picker {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#editorScreen #lsPlayerPanel .effect-choice {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(4, 10, 15, 0.25);
  color: #f7fbff;
  font-size: 11px;
  font-weight: 800;
}
#editorScreen #lsPlayerPanel .effect-choice.effect-choice-active {
  border-color: rgba(210, 255, 0, 0.7);
  color: #d2ff00;
}
#editorScreen #lsPlayerPanel .effect-duration-inline {
  display: flex;
  /* The portrait editor stacks this row (column) for its narrow card. */
  flex-direction: row !important;
  min-height: 0 !important;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
#editorScreen #lsPlayerPanel .effect-duration-inline input[type="range"] {
  flex: 1 1 90px;
  min-width: 90px;
  height: 18px;
  margin: 0 0 0 4px;
  accent-color: #d2ff00;
}
#editorScreen #lsPlayerPanel .effect-duration-inline strong { color: #d2ff00; }

/* Zoom act: a see-through strip right above the bar, holding the zoom card
   itself — two short rows (result + buttons, then all three sliders side by
   side), so the picture stays visible above and through it. No blur: a
   frosted panel reads as a solid slab over the video. Text keeps a shadow to
   stay legible on grass and sky alike. */
.ls-zoom-sheet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(140px + env(safe-area-inset-bottom));
  width: min(720px, calc(100vw - 32px));
  pointer-events: auto;
  padding: 6px 12px 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(4, 10, 15, 0.22);
  color: #f7fbff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.ls-sheet-grip { display: none; }
.ls-sheet-toggle {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(4, 10, 15, 0.25);
  color: #f7fbff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.ls-zoom-sheet.is-collapsed .ls-sheet-toggle { transform: rotate(180deg); }
/* IDs: .ls-hud button { width: auto !important } and the editor's own #zoomCard
   padding rules would otherwise win over the sheet. */
#editorScreen #lsZoomSheetToggle { width: 28px !important; }
#editorScreen #lsZoomPanel #zoomCard { padding-inline-end: 36px !important; }
.ls-zoom-sheet.is-collapsed .zoom-adjust { display: none !important; }

.ls-zoom-sheet .zoom-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head actions"
    "adjust adjust";
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ls-zoom-sheet .zoom-card-head { grid-area: head; margin: 0; }
.ls-zoom-sheet .zoom-card-head .effect-duration-label { display: none; }
.ls-zoom-sheet .zoom-state {
  color: #d2ff00 !important;
  font-size: 14px;
  font-weight: 900;
}
/* The banner above already says what to do next. */
.ls-zoom-sheet .zoom-hint,
.ls-zoom-sheet .zoom-mark-player { display: none !important; }
.ls-zoom-sheet .zoom-card .zoom-actions {
  grid-area: actions;
  display: flex !important;
  gap: 6px;
  margin: 0;
}
.ls-zoom-sheet .zoom-actions .zoom-btn {
  width: auto !important;
  grid-column: auto !important;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 0, 0.6);
  background: rgba(4, 10, 15, 0.25);
  color: #f7fbff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.ls-zoom-sheet .zoom-actions .zoom-play-btn { color: #d2ff00; }

/* From / To / Strength on ONE line. */
.ls-zoom-sheet .zoom-adjust {
  grid-area: adjust;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 2px 0 0;
  border-top: 0;
}
.ls-zoom-sheet .zoom-adjust-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
}
.ls-zoom-sheet .zoom-adjust-row input[type="range"] {
  height: 18px;
  margin: 0;
  accent-color: #d2ff00;
}
.ls-zoom-sheet .zoom-adjust-row strong {
  color: #d2ff00;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

@media (orientation: landscape) and (max-height: 480px) {
  .ls-panel { max-height: calc(100% - 200px); }
  .ls-zoom-sheet { bottom: calc(110px + env(safe-area-inset-bottom)); }
  .ls-settings-toggle { top: max(50px, calc(env(safe-area-inset-top) + 50px)); }
}

/* Chrome on Android answers a long press on a <video> with its own media
   menu. The workspace surface is for picking and marking, so the browser's
   touch gestures and callout stand down for as long as it is open — not only
   while a zoom is armed (see .player-shell.zoom-arming). */
#editorScreen[data-fs-mode] #playerShell {
  -webkit-touch-callout: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

body.selection-fullscreen-lock #corrConfirmBar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(110px + env(safe-area-inset-bottom));
  z-index: 1220;
  max-width: 680px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 18px;
  background: rgba(24, 16, 5, 0.92);
  backdrop-filter: blur(16px);
}

#editorScreen .tracking-panel.tracking-ready {
  border-color: rgba(210, 255, 0, 0.24);
  background: linear-gradient(180deg, rgba(210, 255, 0, 0.08), rgba(255, 255, 255, 0.018)),
    rgba(8, 17, 25, 0.92);
  padding: 16px;
  gap: 14px;
}

#editorScreen .tracking-panel.tracking-ready .track-row {
  grid-template-columns: 1fr;
}

#editorScreen .tracking-panel.tracking-ready .track-status {
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: 800;
  min-height: auto;
  display: block;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
}

#editorScreen .tracking-panel.tracking-ready #selectModeButton,
#editorScreen .tracking-panel.tracking-ready #editModeButton,
#editorScreen .tracking-panel.tracking-ready #skipTrackingBtn {
  width: 100%;
  min-height: 50px;
  border-radius: 15px;
  padding: 8px 10px;
  font-size: 13px !important;
  font-weight: 900;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

#editorScreen .tracking-panel.tracking-ready #selectModeButton {
  border-color: rgba(210, 255, 0, 0.48);
  background: rgba(210, 255, 0, 0.12);
  color: var(--editor-accent);
}

#editorScreen .tracking-panel.tracking-ready.player-selected #selectModeButton,
#editorScreen .tracking-panel.tracking-ready.player-selected #editModeButton,
#editorScreen .tracking-panel.tracking-ready.player-selected #skipTrackingBtn {
  display: inline-flex;
  justify-content: center;
}

#editorScreen .tracking-panel.tracking-ready.player-selected .track-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#editorScreen .tracking-panel.tracking-ready.player-selected .track-status {
  grid-column: 1 / -1;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(210, 255, 0, 0.08);
  border: 1px solid rgba(210, 255, 0, 0.20);
}

#editorScreen .tracking-panel.tracking-skipped {
  padding: 13px 14px;
  border-color: rgba(210, 255, 0, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
    rgba(8, 17, 25, 0.86);
}

#editorScreen .tracking-panel.tracking-skipped .detect-visual,
#editorScreen .tracking-panel.tracking-skipped .detect-heading,
#editorScreen .tracking-panel.tracking-skipped .panel-hint,
#editorScreen .tracking-panel.tracking-skipped .tracking-loader,
#editorScreen .tracking-panel.tracking-skipped #selectModeButton,
#editorScreen .tracking-panel.tracking-skipped #editModeButton {
  display: none;
}

#editorScreen .tracking-panel.tracking-skipped .track-row {
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}

#editorScreen .tracking-panel.tracking-skipped #trackBtn,
#editorScreen .tracking-panel.tracking-skipped #skipTrackingBtn {
  min-height: 44px;
  padding-inline: 14px;
  border-radius: 14px;
  font-size: 13px !important;
}

#editorScreen .tracking-panel.tracking-skipped .track-status {
  min-height: auto;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}

#editorScreen .effect-panel-shell.tracking-skipped .effect-compact-top,
#editorScreen .effect-panel-shell.tracking-skipped .effect-duration-row,
#editorScreen .effect-panel-shell.tracking-skipped .compact-player-info {
  display: none;
}

#editorScreen .effect-panel-shell {
  padding: 16px;
  gap: 14px;
}

#editorScreen .select-heading {
  justify-content: center;
  text-align: center;
}

#editorScreen .effect-compact {
  grid-template-columns: 1fr;
  gap: 14px;
}

#editorScreen .effect-compact-top {
  justify-content: center;
}

#editorScreen .effect-toggle-btn {
  width: 64px;
  min-width: 64px;
  height: 64px;
  border-radius: 20px;
  border-color: rgba(210, 255, 0, 0.30);
  background: rgba(210, 255, 0, 0.10);
  color: var(--editor-accent);
}

#editorScreen .effect-quick-picker {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#editorScreen .effect-choice {
  min-height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(244, 247, 250, 0.78);
}

#editorScreen .effect-choice-active {
  border-color: rgba(210, 255, 0, 0.52);
  background: rgba(210, 255, 0, 0.12);
  color: var(--editor-accent);
}

#editorScreen .effect-duration-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#editorScreen .player-info {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(244, 247, 250, 0.72);
  font-size: 12px;
  font-weight: 700;
}

#editorScreen .compact-player-info span {
  min-width: 0;
}

#editorScreen .effect-duration-inline input[type="range"] {
  width: 110px;
}

#editorScreen .effect-save-settings {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 12px;
  border: 1px solid rgba(210, 255, 0, 0.46);
  background: rgba(210, 255, 0, 0.12);
  color: var(--editor-accent);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

#editorScreen .effect-panel-shell.effect-settings-collapsed {
  padding: 12px 14px;
}

#editorScreen .effect-panel-shell.effect-settings-collapsed .select-heading,
#editorScreen .effect-panel-shell.effect-settings-collapsed .effect-compact-top,
#editorScreen .effect-panel-shell.effect-settings-collapsed .effect-duration-row {
  display: none;
}

#editorScreen .effect-panel-shell.effect-settings-collapsed .effect-compact {
  gap: 0;
}

#editorScreen .effect-panel-shell.effect-settings-collapsed .compact-player-info {
  min-height: 48px;
}

#editorScreen .player-info strong {
  color: var(--editor-accent);
  font-size: 18px;
  font-weight: 900;
}

#editorScreen .effect-duration-inline {
  flex: 0 0 auto;
  gap: 6px;
  min-height: 88px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.035);
  color: #ffffff;
}

#editorScreen .effect-duration-label {
  color: var(--editor-muted);
}

#editorScreen .action-moment-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.035);
}

#editorScreen .action-moment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#editorScreen .action-moment-head strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

#editorScreen .action-moment-btn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(210, 255, 0, 0.42);
  background: rgba(210, 255, 0, 0.14);
  color: var(--editor-accent);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

#editorScreen .action-moment-copy {
  margin: 0;
  color: rgba(228, 235, 241, 0.68);
  font-size: 12px;
  line-height: 1.55;
}

#editorScreen .action-effect-field {
  display: grid;
  gap: 8px;
}

#editorScreen .action-effect-select {
  min-height: 50px;
  border-radius: 15px;
  background: rgba(226, 232, 240, 0.94);
  color: #071018;
  font-size: 15px;
}

#editorScreen .clip-context-panel {
  padding: 18px 14px;
  gap: 16px;
}

#editorScreen .clip-context-heading {
  justify-content: center;
  text-align: center;
}

#editorScreen .clip-context-fields {
  gap: 16px;
}

#editorScreen .clip-context-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
}

#editorScreen .action-type-row {
  position: relative;
}

#editorScreen .clip-context-label {
  color: rgba(244, 247, 250, 0.82);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

#editorScreen .action-type-row .clip-context-label {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

#editorScreen .action-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

#editorScreen .action-chip {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 6px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
}

#editorScreen .action-chip::before {
  content: attr(data-action);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(244, 247, 250, 0.84);
  font-size: 0;
  line-height: 1;
}

#editorScreen .action-chip[data-action="goal"]::before { content: "⚽"; font-size: 24px; }
#editorScreen .action-chip[data-action="assist"]::before { content: "◎"; font-size: 28px; }
#editorScreen .action-chip[data-action="save"]::before { content: "✋"; font-size: 22px; }
#editorScreen .action-chip[data-action="tackle"]::before { content: "⬟"; font-size: 26px; }
#editorScreen .action-chip[data-action="header"]::before { content: "◉"; font-size: 26px; }
#editorScreen .action-chip[data-action="custom"]::before { content: "+"; font-size: 26px; }
#editorScreen .action-chip[data-action=""]::before { content: "-"; font-size: 22px; }

/* ── Scout Mode v4: mature neutral marker ───────────────────────────
   Scout action chips are professional labels first. Keep the visual
   marker uniform across actions; the action-specific meaning lives in
   the text, not in playful emoji glyphs. */
#editorScreen .action-chip[data-scout-type]::before {
  content: "";
  font-size: 0;
  background:
    radial-gradient(circle at center, var(--scout-chip-color, #d2ff00) 0 3px, transparent 4px),
    rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

#editorScreen .action-chip[data-action="custom"] {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  min-height: 64px;
  flex-direction: row;
}

#editorScreen .custom-action-inline {
  width: 100%;
  max-width: none;
  margin: 2px auto 0;
  padding: 0;
  scroll-margin-bottom: 112px;
}

#editorScreen .custom-action-inline .clip-context-label {
  justify-self: stretch;
  text-align: left;
  color: rgba(244, 247, 250, 0.72);
  font-size: 12px;
}

#editorScreen .custom-action-inline .form-input-sm {
  width: 100%;
}

#editorScreen .action-style-popover {
  position: absolute;
  left: 0;
  right: 0;
  top: 42px;
  z-index: 8;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 12px;
  border-radius: 17px;
  border: 1px solid rgba(210, 255, 0, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(6, 13, 19, 0.92);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.22),
    0 0 26px rgba(210, 255, 0, 0.08);
}

#editorScreen .action-style-popover.action-style-below-custom {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  margin-top: 10px;
}

#editorScreen .action-style-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#editorScreen .action-style-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#editorScreen .action-style-title strong {
  display: none;
  color: #ffffff;
  font-size: 19px;
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#editorScreen .action-style-close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 247, 250, 0.86);
  font-size: 19px;
  line-height: 1;
}

#editorScreen .action-style-popover .action-style-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 8px;
  align-items: stretch;
}

#editorScreen .action-style-popover .clip-context-label {
  justify-self: stretch;
  text-align: left;
  color: rgba(244, 247, 250, 0.72);
  font-size: 12px;
}

#editorScreen .action-style-popover .ctx-pos-picker {
  align-self: center;
}

#editorScreen .action-chip-active {
  border-color: rgba(210, 255, 0, 0.70) !important;
  background:
    linear-gradient(180deg, rgba(210, 255, 0, 0.34), rgba(210, 255, 0, 0.08)) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(210, 255, 0, 0.22),
    0 18px 34px rgba(148, 190, 0, 0.22);
}

#editorScreen .action-chip-active::before {
  background: var(--editor-accent);
  color: #001a14;
}

body[data-app-mode="quickReel"] #editorScreen .action-type-row.action-selected > .clip-context-label,
body[data-app-mode="quickReel"] #editorScreen .action-type-row.action-selected .action-chips {
  display: none;
}

body[data-app-mode="quickReel"] #editorScreen .action-type-row.action-selected .action-style-title strong {
  display: block;
}

body[data-app-mode="quickReel"] #editorScreen .action-type-row.action-selected .action-style-popover {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  margin-top: 0;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    0 0 26px rgba(210, 255, 0, 0.08);
}

body[data-app-mode="quickReel"] #editorScreen .action-type-row.action-selected .action-style-close {
  width: auto;
  min-width: 104px;
  height: 36px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
}

#editorScreen .customize-panel {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.028);
  overflow: hidden;
}

#editorScreen .customize-panel > summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  list-style: none;
}

#editorScreen .customize-panel > summary::-webkit-details-marker {
  display: none;
}

#editorScreen .customize-panel > summary::after {
  content: "⌄";
  color: var(--editor-accent);
  font-size: 18px;
}

#editorScreen .customize-panel[open] > summary::after {
  transform: rotate(180deg);
}

#editorScreen .customize-panel > summary span {
  color: var(--editor-muted);
  font-size: 12px;
  font-weight: 600;
}

#editorScreen .customize-panel > .clip-context-row {
  padding: 0 14px 14px;
}

#editorScreen .match-inputs {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  overflow: hidden; /* prevent horizontal blowout */
}

#editorScreen .form-input-sm {
  min-height: 50px;
  min-width: 0; /* allow input to shrink inside grid */
  width: 100%;
  border-radius: 15px;
  background: rgba(226, 232, 240, 0.94);
  color: #071018;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#editorScreen .ctx-pos-picker {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#editorScreen .ctx-pos-btn {
  min-height: 38px;
  border-radius: 11px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(244, 247, 250, 0.72);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.05;
  white-space: nowrap;
  padding: 0 6px;
}

#editorScreen .ctx-pos-active {
  border-color: rgba(210, 255, 0, 0.62) !important;
  background: rgba(210, 255, 0, 0.12) !important;
  color: var(--editor-accent) !important;
}

#editorScreen .action-size-control {
  min-height: 66px;
  padding: 10px 8px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.035);
}

#editorScreen .action-size-control input {
  width: 82px;
}

@media (max-width: 430px) {
  #editorScreen .editor-body {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }

  #editorScreen .workflow-bar {
    top: 62px;
  }

  #editorScreen .wf-label {
    font-size: 9px;
  }
}

/* ─── Project Guide Banner (grid screen) ────────────────────────────────── */
.project-guide {
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 8px;
  border: 1px solid transparent;
}

.project-guide-hint {
  background: rgba(210,255,0,0.07);
  border-color: rgba(210,255,0,0.2);
  color: #d9ff5c;
}

.project-guide-success {
  background: rgba(34,197,94,0.07);
  border-color: rgba(34,197,94,0.2);
  color: #86efac;
}

/* ── Marked players (extra rings) ──────────────────────────────────────── */
.rings-card {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  padding: 12px 14px;
  margin-top: 10px;
}

.rings-card[hidden] { display: none; }

.rings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rings-count { font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.45); }

.rings-list { list-style: none; margin: 10px 0 0; padding: 0; }

.rings-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 6px;
  font-size: 13px;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.rings-item-label { flex: 1 1 auto; min-width: 0; color: rgba(255,255,255,0.8); }
.rings-item-time { font-size: 12px; color: rgba(255,255,255,0.45); white-space: nowrap; }

.rings-list-item.is-playback-active {
  background: rgba(210,255,0,0.12);
  border-color: rgba(210,255,0,0.58);
  box-shadow: inset 3px 0 0 #d2ff00, 0 0 0 1px rgba(210,255,0,0.08);
}

.rings-list-item.is-playback-active .rings-item-label {
  color: #f4ffd2;
  font-weight: 800;
}

.rings-item-active {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #d2ff00;
  color: #071006;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
}

.rings-item-active.is-visible {
  visibility: visible;
  opacity: 1;
}

.rings-item-remove {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: 15px;
  cursor: pointer;
  flex: 0 0 auto;
}

.rings-item-primary .rings-item-remove { visibility: hidden; }

/* Name of a marked player, edited in its row (setRingNameTag). The global
   "button, input[type=range] { width: 100% }" rule is undone for the inline
   buttons; the editor wraps onto its own line under the row. */
.rings-list-item.is-name-editing { flex-wrap: wrap; }
.rings-item-name {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  min-height: 26px;
  padding: 0 9px;
  border: 1px dashed rgba(255,255,255,0.22);
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font: inherit;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.rings-item-name.has-name {
  border-style: solid;
  border-color: rgba(210,255,0,0.45);
  color: #f4ffd2;
  font-weight: 700;
}
.rings-item-editor {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}
.rings-name-input {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(0,0,0,0.35);
  color: #f4f7fa;
  font: inherit;
  font-size: 14px;
}
.rings-name-size {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.rings-name-size input { flex: 1 1 auto; min-width: 0; accent-color: #d2ff00; }
/* "Name only" (setRingShowRing): the toggle in the editor, a badge on the row. */
.rings-show-ring {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
}
.rings-show-ring input { width: 16px; height: 16px; margin: 0; accent-color: #d2ff00; }
.rings-show-ring:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.rings-item-name-only {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.rings-item-name-only[hidden] { display: none; }
.rings-name-clear,
.rings-name-done {
  width: auto;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.rings-name-clear {
  border: 1px solid rgba(255,255,255,0.16);
  background: transparent;
  color: rgba(255,255,255,0.7);
}
.rings-name-done {
  border: 1px solid #d2ff00;
  background: #d2ff00;
  color: #071006;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .rings-list-item,
  .rings-item-active { transition: none; }
}

.rings-hint {
  margin: 8px 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.55);
}

/* "Upload your own music" — sits above the library list, where the user is
   already choosing a soundtrack. */
.music-upload-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(210, 255, 0, 0.45);
  background: rgba(210, 255, 0, 0.07);
  color: #d9ff5c;
  text-align: start;
  cursor: pointer;
}

.music-upload-btn:hover { background: rgba(210, 255, 0, 0.12); }

.music-upload-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(210, 255, 0, 0.18);
  font-size: 15px;
  font-weight: 900;
  flex: 0 0 auto;
}

.music-upload-btn strong { display: block; font-size: 14px; font-weight: 800; }
.music-upload-btn small { display: block; font-size: 11px; color: rgba(255,255,255,0.45); }

/* Export sheet toggle (player card). */
.export-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: #dff3ff;
  cursor: pointer;
}

.export-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #d2ff00;
  flex: 0 0 auto;
  cursor: pointer;
}

/* ── Zoom window card ──────────────────────────────────────────────────── */
.zoom-card {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  padding: 12px 14px;
  margin-top: 10px;
}

.zoom-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.zoom-state {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.45);
}

.zoom-card.is-set .zoom-state { color: #86efac; }
.zoom-card.is-armed .zoom-state { color: #d2ff00; }

.zoom-hint {
  margin: 8px 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.55);
}

.zoom-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Once a zoom is set: "play the result" and "mark it again" share one row, so
   the play button costs no height (a row of its own was 48px on a phone that
   already scrolls). Remove keeps a row to itself, away from the two safe taps. */
.zoom-card.is-set:not(.is-armed) .zoom-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.zoom-card.is-set:not(.is-armed) .zoom-actions > * { min-width: 0; }
.zoom-card.is-set:not(.is-armed) #zoomClearBtn { grid-column: 1 / -1; }

.zoom-btn {
  border: 1px solid rgba(210,255,0,0.35);
  background: rgba(210,255,0,0.10);
  color: #d9ff5c;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.zoom-btn-ghost {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.72);
}

/* No player marked: the zoom card stays visible and says why, with a way to
   the step that fixes it. Dimming the arm button itself is button:disabled. */
.zoom-card.is-locked .zoom-hint { color: rgba(255, 200, 30, 0.9); }

.zoom-mark-player {
  width: auto;
  margin: -2px 0 10px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d9ff5c;
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zoom-btn[hidden] { display: none; }

/* Fine-tuning after the hold gesture. Holding to the exact frame on a phone
   is not realistic, so the window is nudgeable instead of redo-only. */
.zoom-adjust {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: grid;
  gap: 8px;
}

.zoom-adjust[hidden] { display: none; }

.zoom-adjust-row {
  display: grid;
  grid-template-columns: 54px 1fr 48px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.zoom-adjust-row strong {
  text-align: end;
  color: #d9ff5c;
  font-variant-numeric: tabular-nums;
}

.zoom-adjust-row input[type="range"] { width: 100%; min-width: 0; }

/* While armed, the preview surface is the control — kill the browser's own
   touch gestures on it so a press-and-hold does not scroll or select. */
.player-shell.zoom-arming {
  touch-action: none;
  /* A press-and-hold on a video is also the browser's own gesture: Android
     Chrome opens "Download video / Copy video frame", iOS pops a callout. Both
     cover the picture and eat the hold that IS the zoom. Only while armed. */
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
  box-shadow: 0 0 0 2px rgba(210,255,0,0.55) inset;
}

/* ── Project-level match teams (studio) ────────────────────────────────────
   A <details>, collapsed by default. Filled in once per project, so an
   always-open block at the top of the studio cost the preview real estate on
   a phone for no ongoing benefit. */
.project-match-bar {
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.035);
}

.project-match-bar[hidden] { display: none; }

.project-match-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  list-style: none;
}

.project-match-summary::-webkit-details-marker { display: none; }

.project-match-summary::after {
  content: '›';   /* single right-angle quote */
  margin-inline-start: auto;
  color: rgba(255,255,255,0.4);
  transform: rotate(90deg);
  transition: transform .15s ease;
}

.project-match-bar[open] .project-match-summary::after { transform: rotate(-90deg); }

.project-match-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.project-match-value {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.project-match-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 14px 12px;
}

.project-match-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
}

.project-match-inputs .form-input { min-width: 0; flex: 1 1 0; }

.project-match-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 560px) {
  .project-match-hint { flex-basis: 100%; }
}

/* ─── Improved clip status badges ────────────────────────────────────────── */
.badge-needs-edit {
  background: rgba(251,146,60,0.18);
  color: #fb923c;
}

/* ── Frame stepper (selection mode) ──────────────────────────── */
.frame-step-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(210, 255, 0, 0.06);
  border: 1px solid rgba(210, 255, 0, 0.25);
  border-radius: 8px;
  margin: 6px 0 2px;
}

.frame-step-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: #e0e0e0;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.frame-step-btn:hover { background: rgba(210,255,0,0.18); border-color: #d2ff00; color: #fff; }

.frame-play-btn {
  min-width: 36px;
  font-size: 14px;
  background: rgba(210,255,0,0.12);
  border-color: rgba(210,255,0,0.4);
  color: #d2ff00;
}

.frame-step-time {
  font-size: 12px;
  color: #d2ff00;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
  min-width: 48px;
}

.frame-step-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  margin-left: auto;
  white-space: nowrap;
}

/* ── Frame nav bar (always visible once tracking done) ──────────── */
.frame-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(210,255,0,0.07);
  border: 1px solid rgba(210,255,0,0.28);
  border-radius: 8px;
  margin: 6px 0 2px;
}

.frame-nav-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: #e0e0e0;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
  user-select: none;
}
.frame-nav-btn:hover { background: rgba(210,255,0,0.22); border-color: #d2ff00; color: #fff; }
.frame-nav-btn:active { background: rgba(210,255,0,0.38); }

.frame-nav-big {
  font-size: 18px;
  padding: 6px 16px;
  background: rgba(210,255,0,0.12);
  border-color: rgba(210,255,0,0.35);
}

.frame-nav-time {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #d2ff00;
  min-width: 54px;
  text-align: center;
}

/* ── Context position picker ─────────────────────────────────── */
.ctx-pos-picker {
  display: flex;
  gap: 4px;
}
.ctx-pos-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.55);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ctx-pos-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.ctx-pos-btn.ctx-pos-active {
  background: rgba(210,255,0,0.2);
  color: #d2ff00;
  border-color: rgba(210,255,0,0.5);
  font-weight: 600;
}

/* ── Clip context hint text ──────────────────────────────────── */
.ctx-hint {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Transition picker final overrides (after modal/mobile rules) ── */
.modal-overlay.transition-modal-overlay {
  align-items: flex-end;
  padding: 0;
}

/* The clip source sheet is a bottom sheet, and the app's bottom nav
   (.kicko-bottom-nav, z 1200–1210) sits over the bottom of the screen — it
   covered "Upload New Video" when Quick Reel opened the sheet from the Start
   Screen. The sheet is modal, so it goes above the nav. */
#clipSourceModal {
  z-index: 1250;
}

.modal-card.transition-modal-card {
  width: min(100%, 560px);
  max-height: min(86vh, 720px);
  border-radius: 20px 20px 0 0;
}

.music-library-body,
.export-settings-body,
.clip-source-body {
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.clip-source-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.clip-source-action {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.045);
  color: #eef2ff;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.clip-source-action:hover {
  transform: translateY(-1px);
  border-color: rgba(210, 255, 0, 0.45);
  background: rgba(210, 255, 0, 0.08);
}

.clip-source-action strong {
  font-size: 15px;
  font-weight: 800;
}

.clip-source-action span {
  color: rgba(226, 232, 240, 0.62);
  font-size: 12px;
  line-height: 1.35;
}

.tracked-library-panel {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 14px;
}

.tracked-library-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}

.tracked-library-head strong {
  color: #f8fafc;
  font-size: 14px;
}

.tracked-library-head span {
  color: rgba(186, 210, 230, 0.64);
  font-size: 11px;
}

.tracked-library-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.tracked-library-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.045);
}

.tracked-library-thumb {
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #03070a;
}

.tracked-library-thumb video,
.tracked-library-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tracked-library-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 5px;
}

.tracked-library-title {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracked-library-meta {
  color: rgba(186, 210, 230, 0.68);
  font-size: 11px;
}

.tracked-library-use {
  width: fit-content;
  margin-top: auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 0, 0.45);
  background: rgba(210, 255, 0, 0.12);
  color: #d2ff00;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

/* "Choose from Library" as a scrolling gallery (2026-10-01). .modal-card
   clips its content (overflow: hidden, max-height), and the body had no scroll
   of its own, so clips below the fold were unreachable. The body scrolls under
   the fixed header; clips play in the one player above the gallery
   (ensureTrackedLibraryStage). */
#clipSourceModal .clip-source-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#clipSourceModal .tracked-library-list {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
#clipSourceModal .tracked-library-item {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
}
#clipSourceModal .tracked-library-thumb {
  position: relative;
  width: 100%;
  border-radius: 10px;
}
#clipSourceModal .tracked-library-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45));
  cursor: pointer;
}
#clipSourceModal .tracked-library-play span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(6, 9, 11, 0.72);
  border: 1px solid rgba(210, 255, 0, 0.6);
  color: #d2ff00;
  font-size: 15px;
  padding-inline-start: 3px;
}
#clipSourceModal .tracked-library-play:hover span,
#clipSourceModal .tracked-library-play:focus-visible span { background: rgba(210, 255, 0, 0.18); }
#clipSourceModal .tracked-library-use { width: 100%; text-align: center; }
#clipSourceModal .tracked-library-file {
  color: rgba(186, 210, 230, 0.55);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* One player above the gallery, pinned while the gallery scrolls under it
   (ensureTrackedLibraryStage). Lower on a phone, so the gallery keeps room. */
#clipSourceModal .tracked-library-stage {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 -2px 12px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(210, 255, 0, 0.28);
  background: #06090b;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}
#clipSourceModal .tracked-library-stage[hidden] { display: none; }
#clipSourceModal .tracked-library-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 38vh;
  object-fit: contain;
  background: #000;
  border-radius: 10px;
}
#clipSourceModal .tracked-library-stage-title {
  margin-top: 6px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#clipSourceModal .tracked-library-item.is-playing-card { border-color: rgba(210, 255, 0, 0.55); }
#clipSourceModal .tracked-library-item.is-selected {
  border-color: #d2ff00;
  background: rgba(210, 255, 0, 0.08);
}
/* The tick: top corner of the picture, above the play overlay. */
#clipSourceModal .tracked-library-select {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: rgba(6, 9, 11, 0.6);
  color: transparent;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}
#clipSourceModal .tracked-library-select[aria-pressed="true"] {
  border-color: #d2ff00;
  background: #d2ff00;
  color: #071006;
}
/* Add-several bar, pinned to the bottom of the sheet while ticks exist. */
#clipSourceModal .tracked-library-bulk {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(210, 255, 0, 0.35);
  background: #06090b;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.55);
}
#clipSourceModal .tracked-library-bulk[hidden] { display: none; }
#clipSourceModal .tracked-library-bulk-msg {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(226, 232, 240, 0.8);
  font-size: 12px;
}
#clipSourceModal .tracked-library-bulk-clear,
#clipSourceModal .tracked-library-bulk-add {
  width: auto;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
#clipSourceModal .tracked-library-bulk-clear {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
}
#clipSourceModal .tracked-library-bulk-add {
  border: 1px solid #d2ff00;
  background: #d2ff00;
  color: #071006;
}
#clipSourceModal .tracked-library-bulk-add:disabled { opacity: 0.6; cursor: progress; }
/* Locked while several plays are being added (addSelectedTrackedSegments). */
#clipSourceModal .tracked-library-panel.is-adding #trackedLibraryList { opacity: 0.55; pointer-events: none; }
#clipSourceModal .tracked-library-bulk-clear[hidden],
#clipSourceModal .tracked-library-bulk-add[hidden] { display: none; }
@media (max-width: 640px) {
  #clipSourceModal .tracked-library-player { max-height: 28vh; }
}

.tracked-library-empty {
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.12);
  color: rgba(226, 232, 240, 0.65);
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

.music-library-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.music-library-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 38px 26px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #eef2ff;
  text-align: left;
  cursor: pointer;
}

.music-library-item-duration {
  color: rgba(226, 232, 240, 0.68);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.music-preview-btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(210, 255, 0, 0.34);
  border-radius: 999px;
  background: rgba(210, 255, 0, 0.10);
  color: #d2ff00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.music-preview-btn:hover,
.music-preview-btn.is-playing {
  transform: translateY(-1px);
  border-color: rgba(210, 255, 0, 0.72);
  background: rgba(210, 255, 0, 0.18);
  box-shadow: 0 0 0 4px rgba(210, 255, 0, 0.08);
}

.music-preview-icon {
  display: block;
  color: currentColor;
}

.music-preview-icon-play {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
}

.music-preview-icon-pause {
  width: 12px;
  height: 14px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

.music-library-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(118, 74, 255, 0.38), rgba(83, 39, 170, 0.22));
  font-size: 18px;
}

.music-library-item-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.music-library-item-copy strong,
.music-library-item-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-library-item-copy strong {
  font-size: 15px;
}

.music-library-item-copy span {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.56);
}

.music-library-item-check {
  color: rgba(210, 255, 0, 0.92);
  font-size: 18px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.music-library-item-active {
  border-color: rgba(210, 255, 0, 0.58);
  box-shadow: 0 0 0 1px rgba(210, 255, 0, 0.22), 0 14px 26px rgba(28, 34, 8, 0.24);
}

.music-library-item-active .music-library-item-check {
  opacity: 1;
}

.music-library-empty {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.12);
  color: rgba(226, 232, 240, 0.65);
  text-align: center;
}

.export-settings-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.export-settings-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(226, 232, 240, 0.68);
  text-transform: uppercase;
}

.export-quality-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.export-quality-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #eef2ff;
  cursor: pointer;
}

/* Quick Reel "vertical 9:16" badge above the quality picker — visible
   only in quickReel mode. Same teal accent + tiny phone icon used on
   the Start Screen reel card, so the visual language threads through. */
.export-format-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 18px 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(210, 255, 0, 0.08);
  border: 1px solid rgba(210, 255, 0, 0.32);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  direction: rtl;
  text-align: right;
  width: fit-content;
}
.export-format-badge svg { flex: 0 0 auto; }

.export-quality-card strong {
  font-size: 16px;
}

.export-quality-card span {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.56);
}

.export-quality-active {
  border-color: rgba(210, 255, 0, 0.58);
  box-shadow: 0 0 0 1px rgba(210, 255, 0, 0.22), 0 16px 28px rgba(28, 34, 8, 0.24);
  background: linear-gradient(180deg, rgba(210, 255, 0, 0.18), rgba(210, 255, 0, 0.05));
}

.export-confirm-btn {
  min-height: 56px;
  border-radius: 18px;
}

@media (max-width: 520px) {
  .player-modal-sheet {
    width: 100%;
    max-width: 100vw;
    max-height: min(95vh, 860px);
    border-radius: 24px 24px 0 0;
  }

  .player-modal-header {
    padding: 8px 16px 10px;
  }

  .player-modal-header h2 {
    font-size: clamp(26px, 7vw, 32px);
  }

  .player-modal-body {
    padding: 4px 16px 18px;
    padding-bottom: 108px;
    gap: 14px;
  }

  .player-photo-section {
    gap: 8px;
    padding: 2px 0 0;
  }

  .player-photo-preview.photo-preview-area {
    width: 104px;
    height: 104px;
  }

  .player-photo-upload {
    font-size: 12px;
  }

  .player-form-section {
    gap: 12px;
  }

  .player-form-section .form-row-half,
  .player-color-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .player-form-section .player-physical-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .player-form-section .form-input,
  .player-accordion-body .form-input {
    min-height: 50px;
    font-size: 15px;
    padding: 12px 12px;
  }

  .player-form-section .player-physical-grid label {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .player-form-section .player-physical-grid .form-hint {
    display: block;
    font-size: 10px;
    line-height: 1.1;
  }

  .player-form-section .player-physical-grid .form-input {
    min-height: 48px;
    font-size: 14px;
    padding: 10px 8px;
  }

  .player-color-picker,
  .player-color-readout {
    min-height: 50px;
  }

  .player-accordion-head {
    padding: 14px 16px;
    font-size: 15px;
  }

  .player-accordion-body {
    padding: 14px 16px;
    gap: 12px;
  }

  .player-stats-grid {
    gap: 8px;
  }

  .player-modal-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .transition-option-card {
    grid-template-columns: 1fr;
  }

  .transition-preview {
    max-height: 128px;
  }
}

@media (max-width: 390px) {
  .player-form-section .player-physical-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .player-form-section .player-physical-grid > div:nth-child(3) {
    grid-column: 1 / -1;
  }

  .player-modal-footer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .player-save-btn {
    font-size: 15px;
    min-height: 56px;
  }

  .player-clear-btn {
    min-width: 74px;
    min-height: 56px;
  }
}

.clip-strip > .transition-gap-chip {
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  flex: 0 0 62px;
}

.music-label {
  color: #94a3b8;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}

.header-actions-grid .btn-primary,
.header-actions-grid .btn-ghost {
  justify-content: center;
}

.header-actions-grid #uploadMusicBtn,
.header-actions-grid #renderAllBtn {
  min-height: 48px;
}

.account-menu {
  position: relative;
  justify-self: start;
}

.beta-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 4px 0 0;
  padding: 5px 9px;
  border: 1px solid rgba(210, 255, 0, 0.36);
  border-radius: 999px;
  background: rgba(210, 255, 0, 0.1);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.account-menu-btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)),
    rgba(10, 18, 26, 0.94);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.account-menu-btn span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #e8f6f8;
}

.account-menu-btn[aria-expanded="true"] {
  border-color: rgba(210, 255, 0, 0.72);
  box-shadow: 0 0 0 1px rgba(210, 255, 0, 0.18), 0 14px 28px rgba(0, 0, 0, 0.22);
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  z-index: 40;
  width: min(250px, calc(100vw - 28px));
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(22, 34, 45, 0.98), rgba(8, 14, 20, 0.98));
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42), 0 0 28px rgba(210, 255, 0, 0.08);
  direction: rtl;
  text-align: right;
}

.account-menu-label {
  padding: 6px 8px 8px;
  color: rgba(210, 255, 0, 0.95);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-menu .auth-user-chip {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: #f4fbfc;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  border-color: rgba(210, 255, 0, 0.22);
  background: rgba(210, 255, 0, 0.09);
  outline: none;
}

.account-menu-logout {
  margin-top: 6px;
  color: #ffd1d1;
}

.project-header .header-copy {
  max-width: 620px;
}

#gridScreen .header-music-label,
#gridScreen #projectGuide {
  display: none !important;
}

#gridScreen .global-player-panel .section-heading .section-kicker {
  display: none;
}

#gridScreen .global-player-panel .section-heading h2,
#gridScreen .global-player-panel .section-heading p {
  margin: 0;
}

.preview-add-clip-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(210, 255, 0, 0.35);
  border-radius: 999px;
  background: rgba(210, 255, 0, 0.08);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}


/* (removed: stale pre-refactor mobile density passes —
   superseded by the unified grid block below.) */


/* (removed: stale pre-refactor "Final main-preview compaction" block —
   superseded by the unified grid block below.) */

/* ═══════════════════════════════════════════════════════════════════════════
   Grid (project) screen — mobile app-shell.
   3 bordered panels stacked: onboarding · preview · clips.
   100dvh container, no page scroll; only the clips rail scrolls (horizontal).

   Height budget (≈700dvh phone, ≤430px wide):
     header        44  actions    38
     body pad+gap  30
     onboarding    76
     preview pan  256  (heading 50 + shell 206)
     clips pan    258  (heading 50 + rail 208)
     ───────────────
                  702
   ═══════════════════════════════════════════════════════════════════════════ */

#gridScreen {
  --grid-accent: #d2ff00;
  --grid-accent-2: #a8f000;
  --grid-accent-soft: rgba(210, 255, 0, 0.12);
  --grid-bg-deep: #050d14;
  --grid-bg-panel: rgba(11, 22, 33, 0.72);
  --grid-bg-card: rgba(18, 32, 46, 0.92);
  --grid-text: #f4f9fc;
  --grid-text-muted: rgba(208, 224, 235, 0.66);
  --grid-text-dim: rgba(208, 224, 235, 0.46);
  --grid-divider: rgba(120, 158, 178, 0.18);
  --grid-radius: 14px;
  --grid-radius-sm: 10px;

  overflow-x: hidden;
  color: var(--grid-text);
}

#gridScreen,
#gridScreen * { box-sizing: border-box; }

#gridScreen.locale-he .project-header,
#gridScreen.locale-he .project-body { text-align: right; }
#gridScreen.locale-en .project-header,
#gridScreen.locale-en .project-body { text-align: left; }

#gridScreen.locale-he .player-modal-body { direction: rtl; }
#gridScreen.locale-en .player-modal-body { direction: ltr; }

/* ── Building blocks (default desktop sizing; mobile overrides below) ── */
#gridScreen .language-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
}
#gridScreen .language-toggle-trigger {
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(5, 15, 24, 0.55);
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────
   PANELS — bordered, tinted background, like target image
   ───────────────────────────────────────────────────────────── */
#gridScreen .project-panel {
  background: var(--grid-bg-panel);
  border: 1px solid var(--grid-divider);
  border-radius: var(--grid-radius);
}

/* ── Onboarding panel (collapsible "how to" button) ────────── */

/* ── Preview panel ──────────────────────────────────────────── */
#gridScreen .global-player-panel {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#gridScreen .global-player-panel .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
}
#gridScreen .global-player-panel .section-heading > div { min-width: 0; }
#gridScreen .global-player-panel .section-heading .section-kicker {
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--grid-text-dim);
  text-transform: uppercase;
}
#gridScreen .global-player-panel .section-heading h2 {
  margin: 1px 0 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--grid-text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gridScreen .global-player-panel .section-heading p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11px;
  color: var(--grid-text-muted);
  line-height: 1.3;
}
#gridScreen .global-player-panel .preview-add-clip-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(210, 255, 0, 0.10);
  border: 1px solid rgba(210, 255, 0, 0.32);
  color: var(--grid-accent);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
#gridScreen .global-player-shell {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--grid-radius-sm);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.58)),
    url("/assets/landing-bg.png") center / cover no-repeat,
    var(--grid-bg-deep);
}
#gridScreen #globalPreviewVideo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#gridScreen .global-player-empty {
  padding: 12px;
  gap: 8px;
}
#gridScreen .global-player-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(210, 255, 0, 0.10);
  border: 1px solid rgba(210, 255, 0, 0.28);
  color: var(--grid-accent);
  font-size: 18px;
  box-shadow: 0 0 24px rgba(210, 255, 0, 0.14);
}
#gridScreen .global-player-empty-copy strong { font-size: 14px; }
#gridScreen .global-player-empty-copy span { font-size: 10px; }

/* ── Clips panel ───────────────────────────────────────────── */
#gridScreen .project-clips {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
#gridScreen .project-clips .section-heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#gridScreen .project-clips .section-heading .section-kicker {
  display: none;
}
#gridScreen .project-clips .section-heading h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--grid-text);
  line-height: 1.1;
}
#gridScreen .project-clips .section-heading p {
  margin: 0;
  font-size: 11px;
  color: var(--grid-text-muted);
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────
   CARDS — portrait, 130 × 208, with full body content
   ───────────────────────────────────────────────────────────── */
#gridScreen .clip-strip {
  display: flex;
  gap: 10px;
  padding: 2px 1px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#gridScreen .clip-strip::-webkit-scrollbar { display: none; }

/* ── Desktop / mouse: give the strip a way to be scrolled ──────────────────
   The strip has always been overflow-x:auto, but with the scrollbar hidden a
   touch device could swipe it while a mouse had NO affordance at all — no
   bar to drag, and a wheel scrolls vertically. So on wide viewports the clip
   list simply could not be moved past whatever fitted on screen.

   `pointer: fine` targets mouse/trackpad rather than a width breakpoint, so a
   touch laptop keeps the clean swipe surface. app.js additionally maps
   vertical wheel to horizontal scroll here. */

#gridScreen .clip-card {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  min-width: 132px;
  max-width: 132px;
  height: 208px;
  min-height: 208px;
  max-height: 208px;
  border-radius: var(--grid-radius-sm);
  background: var(--grid-bg-card);
  border: 1px solid var(--grid-divider);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
#gridScreen .clip-card:active { transform: scale(0.98); }

/* The clip the main player is on. ID-scoped on purpose: the bare
   .clip-card-active rule lost to #gridScreen .clip-card's own border, so the
   playing card never looked any different. Guarded by clipNowPlaying.test.js. */
#gridScreen .clip-card.clip-card-active {
  border-color: #d2ff00;
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(210, 255, 0, 0.22);
}
#gridScreen .clip-card.clip-card-active .clip-sequence-label {
  background: #d2ff00;
  color: #021015;
  font-weight: 800;
}

/* Top area (badge + visual) - shared for player + clip cards */
#gridScreen .clip-card .clip-thumb-wrap,
#gridScreen .clip-card .clip-thumb-static {
  position: relative;
  height: 124px;
  flex: 0 0 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 0, rgba(210,255,0,0.10), transparent 36%),
    #08141e;
  overflow: hidden;
}

/* Body — fixed bottom area for title + action */
#gridScreen .clip-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 7px 8px 8px;
  text-align: center;
}
#gridScreen .clip-name {
  margin: 0;
  font-size: 11px;
  font-weight: 900;
  color: var(--grid-text);
  line-height: 1.1;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gridScreen .clip-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  width: 100%;
  font-size: 9px;
  color: var(--grid-text-muted);
  line-height: 1.2;
}
#gridScreen .clip-card-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Player card ───────────────────────────────────────────── */
#gridScreen .player-card-tile {
  border-color: rgba(210, 255, 0, 0.34);
}
#gridScreen .player-card-tile .clip-thumb-static {
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px 4px;
  background:
    linear-gradient(140deg, rgba(210, 255, 0, 0.16), transparent 46%),
    linear-gradient(180deg, rgba(13, 32, 46, 0.96), rgba(4, 12, 20, 0.98));
}
/* "אופציונלי" badge sits at the top of the visual area */
#gridScreen .player-card-glyph {
  position: absolute;
  top: 8px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(210, 255, 0, 0.10);
  border: 1px solid rgba(210, 255, 0, 0.36);
  color: var(--grid-accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
#gridScreen.locale-he .player-card-glyph {
  transform: translateX(50%);
}
/* Both glyphs hidden — body already shows the name/action */
#gridScreen .player-card-glyph,
#gridScreen .player-card-glyph-sub { display: none; }
#gridScreen .player-shirt-visual {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,0.34));
  margin-top: 6px;
}
#gridScreen .player-shirt-visual::before {
  content: "";
  position: absolute;
  inset: 14% 16% 0;
  border-radius: 12px 12px 9px 9px;
  background:
    linear-gradient(90deg, rgba(180,180,180,0.5) 0 9%, transparent 9% 91%, rgba(180,180,180,0.5) 91%),
    linear-gradient(180deg, #ffffff, #d8d8d8);
  border: 1px solid rgba(0,0,0,0.10);
}
#gridScreen .player-shirt-visual::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 8%;
  right: 8%;
  height: 36%;
  background: linear-gradient(110deg, #e0e0e0 0 28%, transparent 29% 71%, #e0e0e0 72%);
  clip-path: polygon(0 28%, 28% 0, 72% 0, 100% 28%, 88% 54%, 72% 44%, 72% 100%, 28% 100%, 28% 44%, 12% 54%);
}
#gridScreen .player-shirt-visual .player-card-number {
  position: relative;
  z-index: 1;
  color: #111;
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
  text-shadow: none;
}
/* Player card body: title + helper + action pill */
#gridScreen .player-card-tile .clip-card-body {
  border-top: 1px solid var(--grid-divider);
  background: linear-gradient(180deg, rgba(8, 18, 28, 0.62), rgba(4, 12, 20, 0.85));
  padding: 6px 7px 7px;
  align-items: center;
  text-align: center;
}
#gridScreen .player-card-tile .clip-name { font-size: 11px; text-align: center; width: 100%; }
#gridScreen .player-card-tile .clip-card-meta { gap: 3px; align-items: center; justify-content: center; width: 100%; }
#gridScreen .player-card-tile .clip-card-meta span { text-align: center; }
#gridScreen .player-card-tile .clip-card-meta span:first-child {
  font-size: 9px;
  color: var(--grid-text-muted);
  line-height: 1.2;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
}
/* "+ הוספה / עריכה" — the second meta span, styled as a pill */
#gridScreen .player-card-tile .clip-card-meta span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 10px;
  min-width: 58px;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(210, 255, 0, 0.10);
  border: 1px solid rgba(210, 255, 0, 0.32);
  color: var(--grid-accent);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
#gridScreen .player-card-tile .player-card-tile-stats,
#gridScreen .player-card-tile .player-card-tile-history { display: none; }

/* ── Clip card (with thumbnail) ────────────────────────────── */
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-thumb-wrap {
  padding: 0;
}
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-thumb,
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* "קליפ N" badge — top, centered */
#gridScreen .clip-sequence-label {
  position: absolute;
  top: 6px;
  inset-inline: 0;
  margin: 0 auto;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(4, 10, 15, 0.72);
  backdrop-filter: blur(4px);
  color: #f4fbff;
  font-size: 9px;
  font-weight: 800;
  width: fit-content;
}
/* Duration pill — bottom-left of thumb */
#gridScreen .clip-duration-pill {
  position: absolute;
  bottom: 6px;
  inset-inline-start: 6px;
  z-index: 3;
  padding: 2px 6px;
  border-radius: 6px;
  color: #fff;
  background: rgba(4, 10, 15, 0.80);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}
/* X remove button — top-right corner of card */
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  inset-inline-end: 6px;
  inset-inline-start: auto;
  z-index: 4;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  background: rgba(8, 14, 19, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-remove:hover,
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-remove:focus-visible {
  background: rgba(160, 32, 32, 0.90);
}
/* Hide the status badge on the compact card. The reorder handle is NOT
   hidden any more: it was the only reliable way to start a drag (0ms, versus
   a 320ms long-press on the card body that a touch scroll cancels and that
   nobody discovers with a mouse), so hiding it left reordering effectively
   unreachable. */
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-badge {
  display: none;
}

/* The handle now sits in the card BODY, not over the thumbnail — on top of
   the thumbnail it covered the clip number, so a card could be dragged but
   not identified. Static position: it is a normal item in the footer row. */
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-reorder-hint {
  position: static;
  width: 26px;
  height: 22px;
  font-size: 12px;
  opacity: 0.75;
  flex: 0 0 auto;
  /* The handle owns the gesture outright — without this the browser starts
     panning the strip and cancels the drag before it begins. */
  touch-action: none;
}

#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-reorder-hint:active {
  opacity: 1;
}

/* The action label owns a full-width row of its own, above the handle. */
/* Removing one of the user's own action chips (favourites edit mode). */
.action-user-remove-row { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin: 4px 0 8px; }
.action-user-remove {
  width: auto;
  padding: 4px 10px;
  border: 1px dashed rgba(255, 120, 120, 0.55);
  border-radius: 999px;
  background: transparent;
  color: #ffb4b4;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.clip-action-row {
  width: 100%;
  margin-top: auto;
}

/* The play's note: the user's own words, under the action. A tap edits it
   in place (startClipNoteEdit). Never on the video. */
.clip-note {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 2px 4px;
  border: 1px dashed transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-1, #cfd8dc);
  font: inherit;
  font-size: 11px;
  line-height: 1.3;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}
.clip-note-empty { color: var(--text-2, #8a969c); border-color: rgba(255, 255, 255, 0.14); }
.clip-note-input {
  border: 1px solid rgba(210, 255, 0, 0.55);
  background: rgba(0, 0, 0, 0.35);
  color: #f4fbff;
  outline: none;
}

/* Handle row: sits under the label, aligned to the end. */
.clip-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  padding-top: 4px;
}

.clip-action-tag {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #dff3ff;
  text-align: center;
}

/* Readiness dot on the thumbnail. The full status badge is hidden on the
   compact studio card for space, which left no way to tell a finished clip
   from one that still needs a player marked — the single most important
   thing to know when scanning a strip of 19 near-identical thumbnails. */
.clip-ready-dot {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  z-index: 5;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  color: #04120a;
  background: rgba(148, 163, 184, 0.9);
  box-shadow: 0 0 0 2px rgba(4, 12, 18, 0.55);
}

.clip-ready-dot[data-state="ready"]    { background: #22c55e; color: #04120a; }
.clip-ready-dot[data-state="detected"] { background: #d2ff00; color: #16210a; }
.clip-ready-dot[data-state="working"]  { background: #38bdf8; color: #04121a; }
.clip-ready-dot[data-state="failed"]   { background: #f87171; color: #1a0505; }

.clip-ready-dot[data-state="working"] { animation: clip-ready-pulse 1.1s ease-in-out infinite; }

/* Hover tooltip on the readiness dot. The native `title` is kept as the
   accessible fallback, but it takes about a second to appear and cannot be
   styled, so this is the one people will actually see. */
.clip-ready-dot::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 20;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(6, 15, 22, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e8f6ff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.clip-ready-dot:hover::after,
.clip-ready-dot:focus-visible::after { opacity: 1; }

/* The strip clips overflow, so a tooltip on the last cards would be cut off
   at the right edge. Flip those to hang from the other side. */
.clip-card:nth-last-child(-n+2) .clip-ready-dot::after {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

@keyframes clip-ready-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.clip-action-tag-empty {
  color: rgba(255, 255, 255, 0.38);
  font-weight: 600;
  border-style: dashed;
}

#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-card-body {
  display: flex;
  flex-direction: column;
}
/* Clip card body: show name only (no meta) */
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-card-body {
  padding: 5px 8px 7px;
  justify-content: center;
}
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-card-meta {
  display: none;
}
/* Edit button: slim gradient overlay at the bottom of the thumbnail */
#gridScreen .clip-card:not(.player-card-tile):not(.add-card) .clip-edit {
  position: absolute;
  top: auto;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: 100%;
  height: 26px;
  border-radius: 0;
  background: linear-gradient(to top, rgba(4,14,22,0.92) 30%, transparent);
  border: 0;
  color: var(--grid-accent);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  z-index: 3;
}
#gridScreen .clip-edit-icon { font-size: 12px; }
#gridScreen .clip-edit-text {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  /* Bigger tap target — the user's thumb lands on the text itself,
     not just the narrow gradient strip around it. */
  padding: 2px 6px;
}

/* ── Add card ──────────────────────────────────────────────── */
#gridScreen .clip-card.add-card {
  border-style: dashed;
  border-color: rgba(210, 255, 0, 0.38);
  background:
    radial-gradient(circle at 50% 38%, rgba(210, 255, 0, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(10, 24, 36, 0.92), rgba(4, 12, 20, 0.96));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 10px;
}
#gridScreen .clip-card.add-card .clip-thumb-wrap,
#gridScreen .clip-card.add-card .clip-thumb-static,
#gridScreen .clip-card.add-card .clip-card-body { display: none; }
#gridScreen .clip-card.add-card .add-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grid-accent-soft);
  border: 1px solid rgba(210, 255, 0, 0.42);
  color: var(--grid-accent);
  font-size: 26px;
  line-height: 1;
}
#gridScreen .clip-card.add-card strong {
  color: var(--grid-text);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
}
#gridScreen .clip-card.add-card span {
  color: var(--grid-text-muted);
  font-size: 10px;
  line-height: 1.25;
  max-width: 16ch;
  text-align: center;
}
#gridScreen .clip-card.add-card em {
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--grid-accent);
  background: rgba(210, 255, 0, 0.10);
  border: 1px solid rgba(210, 255, 0, 0.24);
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

/* ── Transition gap chip ───────────────────────────────────── */
#gridScreen .clip-strip > .transition-gap-chip {
  flex: 0 0 auto;
  width: 38px;
  min-width: 38px;
  align-self: center;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE APP SHELL — ≤ 720px
   100dvh; sections sized by content (no flex-grow → no excess space).
   Only the clip strip scrolls.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  body:has(#gridScreen.screen-grid:not([hidden])) {
    overflow: hidden;
    height: 100dvh;
  }

  #gridScreen.screen-grid {
    position: fixed;
    inset: 0;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:
      linear-gradient(180deg, rgba(2, 10, 18, 0.82), rgba(2, 10, 18, 0.96) 28%, rgba(2, 10, 18, 1)),
      radial-gradient(circle at 50% 8%, rgba(42, 244, 208, 0.10), transparent 38%),
      var(--grid-bg-deep);
  }

  /* ── Header (compact) ──────────────────────────────────── */
  #gridScreen .project-header {
    flex: 0 0 auto;
    position: relative;
    display: block;
    padding: max(8px, env(safe-area-inset-top)) 12px 4px;
    border-bottom: 1px solid var(--grid-divider);
    background: linear-gradient(180deg, rgba(2, 10, 18, 0.66), transparent);
  }
  #gridScreen .header-copy {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "lang logo .";
    gap: 8px;
    align-items: center;
  }
  /* Hebrew: flag toggle on the right (RTL start = visual right) */
  #gridScreen.locale-he .header-copy {
    grid-template-areas: ". logo lang";
  }
  #gridScreen.locale-he .language-toggle { justify-self: end; }
  #gridScreen .project-topline { display: contents; }
  #gridScreen .project-topline .section-kicker,
  #gridScreen .beta-badge,
  #gridScreen .header-subtitle { display: none; }
  #gridScreen .language-toggle {
    grid-area: lang;
    justify-self: start;
  }
  #gridScreen .app-header-logo-wrap {
    grid-area: logo;
    display: grid;
    place-items: center;
    margin: 0;
  }
  #gridScreen .app-header-logo {
    width: min(34vw, 124px);
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  }

  /* ── Actions row (≡ | music | export) ─────────────────── */
  #gridScreen .header-actions-grid {
    margin-top: 4px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  #gridScreen .header-actions-grid #playerCardBtn { display: none; }
  #gridScreen .header-actions-grid .account-menu {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  #gridScreen .header-actions-grid #uploadMusicBtn { grid-column: 2; grid-row: 1; }
  #gridScreen .header-actions-grid #renderAllBtn   { grid-column: 3; grid-row: 1; }
  #gridScreen .account-menu-btn {
    width: 100%;
    height: 32px;
    border-radius: 9px;
    background: rgba(13, 24, 36, 0.66);
    border: 1px solid var(--grid-divider);
  }
  #gridScreen .account-menu-btn span {
    width: 16px;
    height: 2px;
  }
  #gridScreen .header-actions-grid #uploadMusicBtn,
  #gridScreen .header-actions-grid #renderAllBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid var(--grid-divider);
    background: rgba(13, 24, 36, 0.66);
    font-size: 11px;
    font-weight: 800;
  }
  #gridScreen .header-actions-grid #uploadMusicBtn span,
  #gridScreen .header-actions-grid #renderAllBtn span {
    font-size: 13px;
    line-height: 1;
  }
  #gridScreen .header-actions-grid #uploadMusicBtn strong,
  #gridScreen .header-actions-grid #renderAllBtn strong {
    font-size: 11px;
    line-height: 1;
  }
  #gridScreen .header-actions-grid #renderAllBtn {
    color: #021017;
    border-color: rgba(210, 255, 0, 0.50);
    background: linear-gradient(135deg, var(--grid-accent), #8fca00);
  }
  #gridScreen .header-actions-grid #musicName,
  #gridScreen .header-actions-grid .trans-style-group { display: none; }

  /* ── Body container ────────────────────────────────────── */
  #gridScreen .project-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 6px 10px max(6px, env(safe-area-inset-bottom));
  }

  /* All inner panels are size-by-content (no flex-grow) */
  #gridScreen .project-body > .project-panel { flex: 0 0 auto; }

  /* Preview panel absorbs leftover height so the clip strip below is
     always fully visible (cards never get clipped by the viewport). */
  #gridScreen .project-body > .global-player-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #gridScreen .global-player-shell {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* The clip strip is the ONLY thing that scrolls */
  #gridScreen .project-clips { overflow: hidden; }

  /* ── One unified page — strip bordered box panels ──────── */
  #gridScreen .project-body > .project-panel {
    background: transparent;
    border: none;
    border-radius: 0;
  }
  #gridScreen .project-body > .project-panel::after { display: none; }
  /* Thin divider between sections instead of box borders */
  #gridScreen .project-body > .global-player-panel,
  #gridScreen .project-body > .project-clips {
    border-top: 1px solid var(--grid-divider);
    padding-top: 7px;
  }
  #gridScreen .global-player-panel {
    gap: 4px;
    padding-bottom: 5px;
  }
  #gridScreen .global-player-panel .section-heading {
    gap: 3px 8px;
  }
  #gridScreen .global-player-panel .section-heading h2 {
    font-size: 13px;
  }
  #gridScreen .global-player-panel .section-heading p {
    font-size: 9px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #gridScreen .scout-panel {
    padding: 6px 0 2px;
  }

  #gridScreen .scout-panel-active,
  #gridScreen .scout-panel-empty {
    gap: 3px;
  }

  #gridScreen .scout-panel-empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
  }

  #gridScreen .scout-panel-empty-copy h2,
  #gridScreen .scout-active-h2 {
    font-size: 12px;
    line-height: 1.1;
  }

  #gridScreen .scout-panel-empty-copy p,
  #gridScreen .scout-role-meta,
  #gridScreen .scout-phase-subtitle {
    font-size: 9px;
    line-height: 1.15;
  }

  #gridScreen .scout-panel-empty-copy p {
    margin-top: 2px;
  }

  #gridScreen .scout-pick-role-btn {
    min-width: 0;
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 9px;
  }

  #gridScreen .scout-panel-active-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
  }

  #gridScreen .scout-panel-active-actions {
    flex-wrap: nowrap;
    gap: 4px;
  }

  #gridScreen .scout-panel-active-actions .btn-ghost.btn-sm {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(210, 255, 0, 0.34);
    background: rgba(210, 255, 0, 0.10);
    color: var(--grid-accent);
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
  }

  #gridScreen .scout-panel-active-actions .scout-disable-btn {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: var(--grid-text);
  }

  #gridScreen .scout-phase-title {
    margin: 2px 0 1px;
    font-size: 10px;
    line-height: 1.1;
    color: var(--grid-text);
    direction: rtl;
    unicode-bidi: plaintext;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #gridScreen .scout-phase-subtitle,
  #gridScreen .scout-consistency-footnote,
  #gridScreen .scout-consistency-bullets {
    display: none;
  }

  #gridScreen .clip-card,
  #gridScreen .scout-add-card {
    width: 118px;
    min-width: 118px;
    max-width: 118px;
    height: 176px;
    min-height: 176px;
    max-height: 176px;
    border-radius: 10px;
  }

  #gridScreen .scout-add-card {
    display: grid;
    grid-template-rows: 34px auto minmax(22px, 1fr) 44px;
    align-items: center;
    height: clamp(184px, 24dvh, 196px);
    min-height: 184px;
    max-height: 196px;
  }

  #gridScreen .clip-card .clip-thumb-wrap,
  #gridScreen .clip-card .clip-thumb-static {
    height: 102px;
    flex: 0 0 102px;
  }

  #gridScreen .player-card-tile .clip-thumb-static {
    height: 84px;
    flex-basis: 84px;
  }

  #gridScreen .player-card-tile .player-shirt-visual {
    width: 44px;
    height: 44px;
    margin-top: 2px;
  }

  #gridScreen .player-card-tile .player-shirt-visual .player-card-number {
    font-size: 17px;
  }

  #gridScreen .player-card-tile .clip-card-body {
    justify-content: center;
    gap: 3px;
    padding-bottom: 6px;
  }

  #gridScreen .player-card-tile .clip-card-meta span:first-child {
    max-height: 24px;
    overflow: hidden;
  }

  #gridScreen .scout-add-card {
    justify-content: stretch;
    gap: 3px;
    padding: 30px 8px 8px;
  }

  #gridScreen .scout-add-card .scout-add-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 0;
    margin: 0 auto 2px;
  }

  #gridScreen .scout-add-card .scout-add-label {
    font-size: 12px;
    line-height: 1.12;
    align-self: center;
  }

  #gridScreen .scout-add-card .scout-add-helper {
    font-size: 9px;
    line-height: 1.2;
    min-height: 22px;
    max-height: none;
    overflow: visible;
    align-self: start;
  }

  #gridScreen .scout-add-card .scout-iq-info-btn {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-inline: 5px;
    font-size: 10px;
    line-height: 1.15;
  }

  #gridScreen .scout-add-card .scout-add-opening-badge {
    top: 5px;
    inset-inline-start: 5px;
    max-width: calc(100% - 42px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 5px;
    font-size: 8px;
  }

  #gridScreen .project-clips {
    padding-top: 5px;
  }

  #gridScreen .project-clips .section-heading h2 {
    font-size: 13px;
  }

  #gridScreen .project-clips .section-heading p {
    font-size: 9px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ≤ 430px — slightly tighter sizing
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  #gridScreen .clip-card {
    width: 126px;
    min-width: 126px;
    max-width: 126px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ≤ 380px — very small phones
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  #gridScreen .project-header,
  #gridScreen .project-body { padding-inline: 10px; }
  #gridScreen .app-header-logo { width: min(42vw, 150px); }
  #gridScreen .header-actions-grid {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
  }
  #gridScreen .account-menu-btn,
  #gridScreen .header-actions-grid #uploadMusicBtn,
  #gridScreen .header-actions-grid #renderAllBtn {
    height: 30px;
    min-height: 30px;
    border-radius: 8px;
  }
  #gridScreen .header-actions-grid #uploadMusicBtn strong,
  #gridScreen .header-actions-grid #renderAllBtn strong { font-size: 10px; }
  #gridScreen .clip-card {
    width: 116px;
    min-width: 116px;
    max-width: 116px;
    height: 196px;
  }
  #gridScreen .clip-card .clip-thumb-wrap,
  #gridScreen .clip-card .clip-thumb-static {
    height: 116px;
    flex: 0 0 116px;
  }
  #gridScreen .clip-card.add-card em { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ≤ 720px AND ≤ 640dvh (short phones) — compact further
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) and (max-height: 640px) {
  #gridScreen .project-body { gap: 6px; padding-top: 6px; }
  #gridScreen .global-player-panel { padding: 8px 10px 10px; gap: 6px; }
  #gridScreen .global-player-panel .section-heading h2 { font-size: 14px; }
  #gridScreen .project-clips { padding: 8px 10px 10px; gap: 6px; }
  #gridScreen .project-clips .section-heading h2 { font-size: 14px; }
  #gridScreen .clip-card {
    height: 184px;
  }
  #gridScreen .clip-card .clip-thumb-wrap,
  #gridScreen .clip-card .clip-thumb-static {
    height: 108px;
    flex: 0 0 108px;
  }
  #gridScreen .player-shirt-visual {
    width: 50px;
    height: 50px;
    margin-top: 10px;
  }
  #gridScreen .player-shirt-visual .player-card-number { font-size: 19px; }
  #gridScreen .clip-card.add-card .add-icon {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  #gridScreen .clip-card.add-card strong { font-size: 12px; }
  #gridScreen .clip-card.add-card span { font-size: 9px; }
  #gridScreen .clip-card.add-card em { font-size: 8px; }
}

@media (max-width: 720px) and (max-height: 760px) {
  #gridScreen .project-header {
    padding-top: max(5px, env(safe-area-inset-top));
    padding-bottom: 3px;
  }

  #gridScreen .app-header-logo {
    width: min(30vw, 112px);
  }

  #gridScreen .header-actions-grid {
    margin-top: 3px;
  }

  #gridScreen .account-menu-btn,
  #gridScreen .header-actions-grid #uploadMusicBtn,
  #gridScreen .header-actions-grid #renderAllBtn {
    height: 28px;
    min-height: 28px;
  }

  #gridScreen .project-body {
    gap: 5px;
    padding-top: 5px;
  }

  #gridScreen .global-player-panel .section-heading .section-kicker,
  #gridScreen .project-clips .section-heading {
    display: none;
  }

  #gridScreen .project-body > .global-player-panel {
    flex: 1 1 auto;
    min-height: 172px;
  }

  #gridScreen .global-player-shell {
    max-height: 34dvh;
  }

  #gridScreen .scout-panel {
    padding-top: 4px;
  }

  #gridScreen .scout-phase-opening {
    display: block;
  }

  #gridScreen .scout-phase-opening .scout-phase-title {
    margin-top: 1px;
    font-size: 9px;
  }

  #gridScreen .scout-phase-consistency {
    display: none;
  }

  #gridScreen .clip-card,
  #gridScreen .scout-add-card {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    height: 158px;
    min-height: 158px;
    max-height: 158px;
  }

  #gridScreen .scout-add-card {
    grid-template-rows: 32px auto 40px;
    height: 172px;
    min-height: 172px;
    max-height: 172px;
    padding-top: 27px;
  }

  #gridScreen .clip-card .clip-thumb-wrap,
  #gridScreen .clip-card .clip-thumb-static {
    height: 90px;
    flex: 0 0 90px;
  }

  #gridScreen .player-card-tile .clip-thumb-static {
    height: 70px;
    flex-basis: 70px;
  }

  #gridScreen .player-card-tile .player-shirt-visual {
    width: 38px;
    height: 38px;
    margin-top: 1px;
  }

  #gridScreen .player-card-tile .clip-name {
    font-size: 10px;
  }

  #gridScreen .player-card-tile .clip-card-meta span:first-child {
    display: none;
  }

  #gridScreen .player-card-tile .clip-card-meta span:last-child {
    min-height: 24px;
    min-width: 60px;
    font-size: 10px;
  }

  #gridScreen .scout-add-card .scout-add-helper,
  #gridScreen #addClipCard span {
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Landscape Tracking Mode — fullscreen + orientation handling
   Layered on top of Codex's selection-fullscreen-active rules above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Explicit viewport sizing (per spec). 100dvh handles iOS URL-bar correctly. */
#editorScreen.selection-fullscreen-active .preview-panel {
  position: fixed !important;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 0;
  /* Minimal padding — let the video fill the screen. The HUD floats over it. */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  width: 100vw;
  height: 100vh;
  /* fallback for browsers without dvh */
  height: 100dvh;
  overscroll-behavior: contain;
  touch-action: none;
}

/* Hide app chrome (workflow bar, segmented headers, clip strip, trim bar) while
   landscape mode is active so the user really gets a clean canvas. */
body.selection-fullscreen-lock #workflowBar,
body.selection-fullscreen-lock .editor-header,
body.selection-fullscreen-lock .clip-strip,
body.selection-fullscreen-lock .trim-bar {
  display: none !important;
}

/* (Old HUD media-query removed — superseded by .ls-toolbar responsive rules.
   The old rules also forced bottom padding on preview-panel, which would cap
   the video and re-introduce letterbox. We want padding:0 in fullscreen.) */

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile-first spacing overrides (max-width: 500px)
   Philosophy: every pixel is real estate. Reduce all "desktop breathing room"
   padding/gaps/font-sizes so more content fits without scrolling.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {

  /* ── Header: shrink vertical padding ── */
  #editorScreen .editor-header {
    padding-top:    calc(6px + env(safe-area-inset-top));
    padding-bottom: 6px;
    gap: 6px;
  }
  #editorScreen .editor-back-btn {
    width: 36px; min-width: 36px;
    height: 36px; min-height: 36px;
    font-size: 24px;
  }
  #editorScreen .editor-header h2  { font-size: 13px; }
  #editorScreen .editor-kicker     { font-size: 9px; margin-bottom: 1px; }

  /* ── Workflow steps bar: tighter ── */
  #editorScreen .workflow-bar {
    padding: 6px 0 5px;
    top: 52px; /* aligns with shorter header */
  }
  #editorScreen .wf-dot   { width: 13px; height: 13px; }
  #editorScreen .wf-label { font-size: 9px; }
  #editorScreen .wf-step  { gap: 5px; }

  /* ── Editor body: tighter gap & padding ── */
  #editorScreen .editor-body {
    gap: 8px;
    padding-left:  8px;
    padding-right: 8px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* ── Panel cards: smaller border-radius & padding ── */
  #editorScreen .editor-workspace > .editor-panel {
    border-radius: 16px;
  }
  #editorScreen .preview-panel {
    padding: 8px;
    gap: 8px;
  }
  #editorScreen #playerShell {
    border-radius: 14px;
    max-height: 40dvh;
    overflow: hidden;
  }
  #editorScreen #playerShell video {
    height: 100%;
    object-fit: contain;
  }

  /* ── Trim bar: compact spacing ── */
  #editorScreen .trim-bar         { gap: 8px; padding: 10px 8px 6px; }
  #editorScreen .step-card-head h3 { font-size: 16px; margin-top: 2px; }
  #editorScreen .trim-label        { font-size: 9px; }
  #editorScreen .clip-dur-label    { font-size: 10px; min-height: 26px; padding: 0 8px; }

  /* ── Trim rail: slightly shorter handle track ── */
  #editorScreen .trim-rail       { height: 60px; }
  #editorScreen .trim-rail-track { top: 23px; height: 14px; }

  /* ── Trim footer: tighter text ── */
  #editorScreen .trim-copy h4    { font-size: 15px; }
  #editorScreen .trim-helper     { font-size: 11px; }

  /* ── Step section cards (Detect, Select, Effect, Export) ── */
  #editorScreen .tracking-panel,
  #editorScreen .selection-panel,
  #editorScreen .export-panel    { border-radius: 16px; }

  /* ── Detect visual icon: smaller on mobile ── */
  #editorScreen .detect-visual   { transform: scale(0.75); margin: -12px 0; }

  /* ── Confirm Trim / action buttons ── */
  #editorScreen #applyTrimBtn    { min-height: 44px; font-size: 14px; }

  /* ── Edit Trim button in collapsed state: even smaller on mobile ── */
  #editorScreen .trim-bar.trim-collapsed {
    padding: 7px 10px;
    border-radius: 11px;
    gap: 8px;
  }
  #editorScreen .trim-bar.trim-collapsed #editTrimBtn {
    min-height: 26px;
    padding: 0 9px;
    font-size: 10px;
    border-radius: 7px;
  }
  #editorScreen .trim-bar.trim-collapsed .trim-summary strong {
    font-size: 11px;
  }
  #editorScreen .trim-bar.trim-collapsed .trim-summary span {
    min-width: 18px;
    height: 18px;
    width: 18px;
  }
  #editorScreen .trim-bar.trim-collapsed .trim-summary span::after {
    font-size: 10px;
  }
  #editorScreen .trim-footer { padding-top: 4px; }
}
/* =========================================================
   MOBILE STEP FLOW PATCH — SAFE OVERRIDE
   Add this at the very end of styles.css
   ========================================================= */

@media (max-width: 640px) {

  /* Editor spacing */
  #editorScreen .editor-body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  #editorScreen .editor-workspace {
    gap: 0;
  }

  /* Keep video compact */
  #editorScreen .preview-panel {
    padding: 8px;
  }

  #editorScreen .player-shell {
    max-height: 38dvh;
    border-radius: 18px;
  }

  /* Which panel a step shows is decided at the top level for Professional
     (STEP GATING). What follows is Quick Reel's original mobile-only gating,
     kept as-is because Quick Reel is owner-locked, then the spacing and sizing
     that genuinely depend on this width. */
  body[data-app-mode="quickReel"] #editorScreen .tracking-panel,
  body[data-app-mode="quickReel"] #editorScreen .effect-panel-shell,
  body[data-app-mode="quickReel"] #editorScreen .clip-context-panel,
  body[data-app-mode="quickReel"] #editorScreen .segment-render-panel,
  body[data-app-mode="quickReel"] #editorScreen .metadata-panel {
    display: none !important;
  }

  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfTrim"] .trim-bar,
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfTrack"] .tracking-panel,
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSelect"] .tracking-panel,
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfEffect"] .effect-panel-shell,
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSave"] .clip-context-panel {
    display: flex !important;
  }

  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfTrack"] .trim-bar,
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSelect"] .trim-bar,
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfEffect"] .trim-bar,
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSave"] .trim-bar {
    display: none !important;
  }

  /* Step 1: Trim */

  #editorScreen[data-editor-step="wfTrim"] .trim-helper {
    display: none !important;
  }

  #editorScreen[data-editor-step="wfTrim"] .trim-rail {
    height: 48px;
  }

  #editorScreen[data-editor-step="wfTrim"] .trim-chip {
    min-height: 38px;
    padding: 5px 7px;
  }

  /* Step 2: Detect */
  #editorScreen[data-editor-step="wfTrack"] .tracking-panel {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  #editorScreen[data-editor-step="wfTrack"] .tracking-panel .panel-hint {
    display: none !important;
  }

  #editorScreen[data-editor-step="wfTrack"] .track-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #editorScreen[data-editor-step="wfTrack"] .track-status {
    grid-column: 1 / -1;
    padding: 6px 0;
    background: transparent;
    border: 0;
    font-size: 11px;
  }

  #editorScreen[data-editor-step="wfTrack"] .tracking-loader {
    min-height: 22px;
    justify-content: center;
  }

  /* Step 3: Select player */
  #editorScreen[data-editor-step="wfSelect"] .tracking-panel {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  #editorScreen[data-editor-step="wfSelect"] .player-shell {
    max-height: 46dvh;
  }

  #editorScreen[data-editor-step="wfSelect"] .track-status {
    font-size: 11px;
    padding: 6px 0;
    background: transparent;
    border: 0;
  }

  /* Step 4: effect-panel-shell only (Set Action Moment + effect type).
     Professional's Zoom station is the zoom card from this same panel. */
  #editorScreen[data-editor-step="wfEffect"] .effect-panel-shell,
  #editorScreen[data-editor-step="wfZoom"] .effect-panel-shell {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  #editorScreen[data-editor-step="wfEffect"] input[type="range"],
  #editorScreen[data-editor-step="wfZoom"] input[type="range"] {
    height: 26px;
  }

  #editorScreen[data-editor-step="wfEffect"] label,
  #editorScreen[data-editor-step="wfEffect"] .panel-hint,
  #editorScreen[data-editor-step="wfZoom"] label {
    font-size: 11px;
    line-height: 1.3;
  }

  /* Step 5: Save / details. Professional's Tags and Match stations are the
     two halves of this same panel. */
  #editorScreen[data-editor-step="wfTags"] .clip-context-panel,
  #editorScreen[data-editor-step="wfMatch"] .clip-context-panel,
  #editorScreen[data-editor-step="wfSave"] .clip-context-panel {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  /* Mobile save button — edge to edge, reset desktop centering */
  #editorScreen[data-editor-step="wfSave"] #saveBtn {
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100vw - 32px);
    transform: none;
    min-height: 50px;
    font-size: 15px;
    border-radius: 14px;
  }

  /* Compact buttons */
  #editorScreen .btn-primary,
  #editorScreen .btn-ghost,
  #editorScreen .btn-track {
    min-height: 40px;
    padding: 8px 11px;
    font-size: 12px;
    border-radius: 12px;
  }

  /* Compact titles */
  #editorScreen .section-heading h3,
  #editorScreen .step-card-head h3 {
    font-size: 14px;
    line-height: 1.1;
  }

  #editorScreen .panel-hint {
    font-size: 11px;
  }
}

/* Quick Reel must keep a true phone-reel preview even after the generic mobile
   editor patches above. Scope is intentionally narrow so Professional
   Highlight keeps its wider preview and existing controls. */
body[data-app-mode="quickReel"] #editorScreen:not(.selection-fullscreen-active) .preview-panel {
  align-items: center;
}

body[data-app-mode="quickReel"] #editorScreen:not(.selection-fullscreen-active) #playerShell {
  aspect-ratio: 9 / 16;
  width: min(calc(100vw - 48px), calc(68dvh * 9 / 16), 340px);
  max-width: min(calc(100vw - 48px), 340px);
  max-height: none !important;
  margin-inline: auto;
  border-radius: 22px !important;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(210, 255, 0, 0.10) !important;
}

body[data-app-mode="quickReel"] #editorScreen:not(.selection-fullscreen-active) #playerShell #previewVideo {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: var(--quick-reel-pan-x, 50%) 50% !important;
}

@media (max-width: 640px) {
  body[data-app-mode="quickReel"] #editorScreen:not(.selection-fullscreen-active) .preview-panel {
    padding-block: 10px !important;
  }

  body[data-app-mode="quickReel"] #editorScreen:not(.selection-fullscreen-active) #playerShell {
    width: min(calc(100vw - 44px), calc(66dvh * 9 / 16), 326px);
  }
}

/* =========================================================
   EDITOR VISUAL POLISH PATCH — mobile only
   Add at the very end of styles.css
   ========================================================= */

@media (max-width: 640px) {

  /* Less nested-card feeling */
  #editorScreen .editor-workspace {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #editorScreen .editor-panel,
  #editorScreen .preview-panel,
  #editorScreen .tracking-panel,
  #editorScreen .effect-panel-shell,
  #editorScreen .clip-context-panel {
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(15, 27, 36, 0.94), rgba(6, 13, 20, 0.96)) !important;
    border: 1px solid rgba(126, 154, 170, 0.18) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
  }

  /* Video card cleaner */
  #editorScreen .preview-panel {
    padding: 8px !important;
    margin-bottom: 8px !important;
  }

  #editorScreen .player-shell {
    border-radius: 14px !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Player controls card */
  #editorScreen .frame-nav-bar,
  #editorScreen .frame-step-bar {
    margin-top: 8px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    background: rgba(8, 16, 24, 0.82) !important;
    border: 1px solid rgba(126, 154, 170, 0.16) !important;
  }

  #editorScreen .frame-nav-btn,
  #editorScreen .frame-step-btn {
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  /* Step titles */
  #editorScreen .select-heading,
  #editorScreen .step-card-head {
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  #editorScreen .select-heading h3,
  #editorScreen .step-card-head h3 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
  }

  #editorScreen .trim-label {
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
    color: var(--editor-accent) !important;
  }

  /* Step 3: effect selection layout cleaner */
  #editorScreen[data-editor-step="wfSelect"] .effect-panel-shell {
    padding: 14px 12px !important;
    gap: 12px !important;
  }

  #editorScreen[data-editor-step="wfSelect"] .effect-quick-picker {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #editorScreen[data-editor-step="wfSelect"] .effect-choice {
    min-height: 50px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
  }

  #editorScreen[data-editor-step="wfSelect"] .effect-toggle-btn {
    height: 50px !important;
    min-width: 58px !important;
    width: 58px !important;
    border-radius: 15px !important;
  }

  /* Duration becomes compact, not a big box */
  #editorScreen .effect-duration-row,
  #editorScreen .effect-duration-inline {
    min-height: 0 !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
  }

  #editorScreen .effect-duration-row label,
  #editorScreen .effect-duration-inline label {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #editorScreen .effect-duration-row input[type="range"],
  #editorScreen .effect-duration-inline input[type="range"] {
    height: 20px !important;
  }

  #editorScreen #durationValue {
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  /* Selected player box less heavy */
  #editorScreen .player-info,
  #editorScreen .compact-player-info {
    min-height: 42px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
  }

  /* Step 4: Highlight type cleaner */
  #editorScreen[data-editor-step="wfEffect"] .clip-context-panel,
  #editorScreen[data-editor-step="wfTags"] .clip-context-panel,
  #editorScreen[data-editor-step="wfMatch"] .clip-context-panel {
    padding: 14px 12px !important;
    gap: 12px !important;
  }

  #editorScreen[data-editor-step="wfEffect"] .action-chip,
  #editorScreen[data-editor-step="wfEffect"] .ctx-pos-btn,
  #editorScreen[data-editor-step="wfTags"] .action-chip,
  #editorScreen[data-editor-step="wfTags"] .ctx-pos-btn,
  #editorScreen[data-editor-step="wfMatch"] .ctx-pos-btn,
  #editorScreen[data-editor-step="wfSave"] .action-chip,
  #editorScreen[data-editor-step="wfSave"] .ctx-pos-btn {
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
  }

  #editorScreen .action-chip {
    min-height: 82px !important;
    padding: 10px 8px !important;
  }

  #editorScreen .action-chip strong,
  #editorScreen .action-chip span {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  #editorScreen .action-chip-active,
  #editorScreen .ctx-pos-active {
    border-color: rgba(210, 255, 0, 0.70) !important;
    background: rgba(210, 255, 0, 0.12) !important;
    color: var(--editor-accent) !important;
  }

  /* Custom row */
  #editorScreen .custom-action-row,
  #editorScreen .custom-action-trigger {
    min-height: 58px !important;
    border-radius: 16px !important;
  }

  /* Match setup closer to grid quality */
  #editorScreen .clip-context-panel input,
  #editorScreen .clip-context-panel select {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }

  #editorScreen .clip-context-panel label {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  /* Reduce the floating Action Style overlay feeling */
  #editorScreen .action-style-row,
  #editorScreen .action-style-panel {
    position: static !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    background: rgba(8, 16, 24, 0.92) !important;
    border: 1px solid rgba(210, 255, 0, 0.18) !important;
  }

  #editorScreen .action-style-popover .action-style-controls {
    grid-template-columns: minmax(0, 1fr) 92px !important;
    gap: 6px !important;
  }

  #editorScreen .action-style-popover .ctx-pos-picker {
    gap: 5px !important;
  }

  #editorScreen .action-style-popover .ctx-pos-btn {
    min-height: 36px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }

  #editorScreen .action-size-control {
    min-height: 60px !important;
    padding: 8px 6px !important;
  }

  #editorScreen .action-size-control input {
    width: 72px !important;
  }

  #editorScreen .action-style-close,
  #editorScreen #actionStyleClose {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 999px !important;
  }

  body[data-app-mode="quickReel"] #editorScreen .action-type-row.action-selected #actionStyleClose {
    width: auto !important;
    min-width: 96px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
  }

  /* Fix: prevent "Save settings" text from overflowing the player info card */
  #editorScreen .compact-player-info > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #editorScreen .compact-player-info .effect-save-settings {
    flex-shrink: 0;
  }

  /* Fix: ensure fixed Save Settings button doesn't overlap action-style panel */
  #editorScreen[data-editor-step="wfSave"] .editor-body {
    padding-bottom: calc(220px + env(safe-area-inset-bottom)) !important;
  }

}

.render-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
}

/* ──────────────────────────────────────────────────────────────────────
   Scout Mode (Stage 1 of v4 work)
   - .scout-panel              : project-header section sitting above the
                                  clip strip. Two internal states
                                  controlled by [hidden]:
                                    .scout-panel-empty   (no role yet)
                                    .scout-panel-active  (role selected)
   - .scout-add-cards          : grid of recommended upload cards that
                                  replaces the generic #addClipCard once
                                  Scout Mode is active. Each card uses
                                  the same visual language as .add-card
                                  but smaller and with a tinted accent.
   - .scout-role-modal-card    : modal for picking position. Mounted at
                                  the screen level so the overlay covers
                                  the grid.
   - .scout-rating-row,
     .scout-season-toggle,
     .scout-tag                : per-clip metadata controls + tag,
                                  rendered inside .clip-card by the
                                  refreshGrid path.
   ────────────────────────────────────────────────────────────────────── */
/* Compact panel — tighter padding + smaller fonts so it doesn't push
   the main preview down. Mobile-first: vertical real estate is the
   most expensive currency on a phone. */
.scout-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(210, 255, 0, 0.18);
  background: linear-gradient(180deg, rgba(11, 30, 36, 0.88), rgba(7, 18, 24, 0.94));
  border-radius: 14px;
  margin-bottom: 10px;
}

.scout-panel[hidden] { display: none; }

.scout-panel-empty,
.scout-panel-active {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scout-panel-empty-copy h2,
.scout-active-h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-1, #e8f4f8);
}

.scout-panel-empty-copy p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-2, #8aa3b0);
  max-width: 60ch;
  line-height: 1.4;
}

.scout-pick-role-btn {
  align-self: flex-start;
  min-width: 140px;
  padding: 6px 14px;
  font-size: 13px;
}

.scout-panel-active-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.scout-panel-active-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.scout-active-prefix {
  font-weight: 500;
  opacity: 0.85;
}

.scout-panel-active-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.scout-panel-active-actions .btn-ghost.btn-sm {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 0, 0.24);
  background: rgba(11, 26, 36, 0.72);
  color: var(--text-1, #e8f4f8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* Small subtitle under the role label — separates "קשר מרכזי" from
   "עמדה: 8" so the technical position number doesn't crowd the H2. */
.scout-role-meta {
  display: inline-block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent, #d2ff00);
  letter-spacing: 0.2px;
}

/* Phase headers — opening vs consistency. Tightened to one-line each
   on mobile so the panel doesn't dominate the viewport. */
.scout-phase-title {
  margin: 4px 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1, #e8f4f8);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.scout-phase-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-2, #8aa3b0);
  line-height: 1.4;
}

.scout-phase-opener-done {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(210, 255, 0, 0.14);
  border: 1px solid rgba(210, 255, 0, 0.55);
  color: var(--accent, #d2ff00);
  margin-bottom: 2px;
}

/* Consistency bullets — plain text guidance. No card chrome, no
   counters, no buttons. The list is intentionally short (4-5 lines). */
.scout-consistency-bullets {
  margin: 4px 0 2px;
  padding: 0 18px 0 0;
  list-style: disc;
  color: var(--text-1, #e8f4f8);
  font-size: 12px;
  line-height: 1.55;
}

.scout-consistency-bullets li {
  margin: 0;
}

.scout-consistency-footnote {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--text-2, #8aa3b0);
  font-style: italic;
}

/* ── Recommended add-cards grid ──────────────────────────────────────── */
.scout-add-cards {
  display: contents; /* live inside .clip-strip flex/grid like siblings */
}

.scout-add-card {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-1, #e8f4f8);
  min-height: 228px;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(132, 165, 184, 0.34);
  background:
    linear-gradient(180deg, rgba(18, 38, 47, 0.97), rgba(8, 21, 28, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 8px 18px rgba(0, 0, 0, 0.24);
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.scout-add-card:hover {
  border-color: var(--accent, #d2ff00);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(210, 255, 0, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.34);
}

.scout-add-card .scout-add-icon {
  position: relative;
  font-size: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  background: rgba(19, 34, 48, 0.7);
  border: 1px solid currentColor;
  color: inherit;
}

.scout-add-card .scout-add-icon::before,
.scout-add-card .scout-add-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.scout-add-card .scout-add-icon::before {
  width: 15px;
  height: 2px;
}

.scout-add-card .scout-add-icon::after {
  width: 2px;
  height: 15px;
}

.scout-add-card .scout-add-label {
  font-size: 15px;
  line-height: 1.2;
}

.scout-add-card .scout-add-helper {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-2, #8aa3b0);
  line-height: 1.35;
}

.scout-iq-info-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(210, 255, 0, 0.28);
  border-radius: 12px;
  color: var(--accent, #d2ff00);
  background: rgba(210, 255, 0, 0.06);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.scout-add-card .scout-iq-info-btn {
  align-self: center;
  min-height: 44px;
  margin-top: 2px;
  font-size: 11px;
}

/* The detailed tip lives above the clip strip. It never changes card
   height and remains scrollable instead of truncating useful guidance. */
.scout-iq-modal {
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

.scout-iq-modal-card {
  position: fixed;
  width: min(300px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 13px 14px;
  border: 1px solid rgba(210, 255, 0, 0.3);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 28, 34, 0.99), rgba(4, 14, 19, 0.99));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.scout-iq-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.scout-iq-modal-head h2 {
  margin: 0;
  color: var(--text-1, #e8f4f8);
  font-size: 14px;
  line-height: 1.3;
}

.scout-iq-modal-close {
  width: 32px;
  height: 32px;
  margin: -7px -7px -4px 0;
  padding: 0;
  border: 0;
  color: var(--text-2, #a9bac2);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.scout-iq-modal-detail {
  margin: 9px 0 0;
  color: var(--text-2, #c2d0d6);
  font-size: 12px;
  line-height: 1.5;
}

.scout-iq-modal-sequence {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(210, 255, 0, 0.18);
  color: var(--accent, #d2ff00);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}

.scout-iq-trim-guide {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(210, 255, 0, 0.25);
  border-radius: 13px;
  background: rgba(210, 255, 0, 0.045);
}

.scout-iq-trim-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scout-iq-trim-head > div { min-width: 0; }

.scout-iq-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--accent, #d2ff00);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.scout-iq-trim-head strong {
  display: block;
  color: var(--text-1, #e8f4f8);
  font-size: 11px;
  line-height: 1.35;
}

.scout-iq-trim-detail {
  padding-top: 9px;
  border-top: 1px solid rgba(210, 255, 0, 0.15);
  margin-top: 9px;
}

.scout-iq-trim-detail p {
  margin: 0 0 9px;
  color: var(--text-2, #a9bac2);
  font-size: 10px;
  line-height: 1.45;
}

.scout-iq-sequence {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 7px;
  color: var(--text-1, #e8f4f8);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.scout-iq-sequence i {
  height: 1px;
  background: linear-gradient(90deg, rgba(210,255,0,.25), var(--accent, #d2ff00), rgba(210,255,0,.25));
}

@media (max-width: 640px) {
  .scout-iq-trim-guide { margin-top: 6px; padding: 8px 10px; }
  .scout-iq-modal-card { padding: 12px 13px; }
}

/* Progress badge on the recommended upload card — "0/2", "1/2 ✓", "×3".
   Pinned to the top-end corner so it never collides with the central
   "+" affordance. Inherits color from the card so the accent stays
   consistent with the category. */
.scout-add-card .scout-add-progress {
  position: absolute;
  top: 8px;
  inset-inline-end: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(11, 20, 29, 0.7);
  color: inherit;
  line-height: 1.4;
}

.scout-add-card .scout-add-progress-done {
  background: rgba(210, 255, 0, 0.18);
  border-color: var(--accent, #d2ff00);
  color: var(--accent, #d2ff00);
}

/* Visual states: a partial-fill keeps the card energetic, a fulfilled
   one dims to push the eye toward what's still missing without
   removing the option to add more. */
.scout-add-card.scout-add-card-partial {
  border-style: solid;
  border-color: currentColor;
}

.scout-add-card.scout-add-card-done {
  opacity: 0.72;
  border-style: solid;
  border-color: var(--accent, #d2ff00);
}

.scout-add-card.scout-add-card-done:hover {
  opacity: 0.92;
}

/* "פתיחה" badge — marks categories that belong in the first 30 seconds
   of the highlight per the role template's openingPriority list. Sits
   in the OPPOSITE corner from the X/Y progress badge so the two never
   collide. */
.scout-add-card .scout-add-opening-badge {
  position: absolute;
  top: 8px;
  inset-inline-start: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 200, 30, 0.18);
  border: 1px solid rgba(255, 200, 30, 0.6);
  color: #ffc81e;
  line-height: 1.4;
}

/* Opening cards get a faint accent glow so the row at a glance shows
   what belongs in the opener vs. the body. Disabled once the category
   is fulfilled — opacity dim handles the "done" state. */
.scout-add-card.scout-add-card-opening {
  border-color: rgba(255, 200, 30, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 30, 0.10),
    0 8px 18px rgba(0, 0, 0, 0.24);
}

/* Rating modal — minimal action sheet. Reuses .modal-overlay /
   .modal-card from the existing modal system so it behaves like
   every other modal on mobile (full-screen overlay, RTL-safe). */
.scout-rating-modal-card {
  max-width: 420px;
  width: calc(100% - 32px);
}

.scout-rating-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.scout-rating-option {
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(68, 103, 121, 0.45);
  background: rgba(11, 20, 29, 0.55);
  color: var(--text-1, #e8f4f8);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}

.scout-rating-option:hover {
  border-color: var(--accent, #d2ff00);
  background: rgba(48, 62, 8, 0.55);
}

.scout-rating-option:active {
  transform: scale(0.97);
}

.scout-rating-option.scout-rating-option-active {
  border-color: var(--accent, #d2ff00);
  color: var(--accent, #d2ff00);
}

.scout-rating-option-must {
  grid-column: span 2;
  border-color: rgba(255, 200, 30, 0.45);
  color: #ffc81e;
}

.scout-rating-option-must:hover {
  border-color: #ffc81e;
  background: rgba(60, 48, 12, 0.55);
}

.scout-rating-option-must.scout-rating-option-active {
  border-color: #ffc81e;
  color: #ffc81e;
}

.scout-rating-clear {
  margin-top: 12px;
  width: 100%;
}

/* ── Role-picker modal ───────────────────────────────────────────────── */
.scout-role-modal-card {
  max-width: 560px;
  width: calc(100% - 32px);
}

.scout-role-modal-help {
  margin: -6px 0 14px;
  font-size: 13px;
  color: var(--text-2, #8aa3b0);
  line-height: 1.55;
}

.scout-role-modal-note {
  margin: 0 0 14px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(210, 255, 0, 0.28);
  background: rgba(210, 255, 0, 0.08);
  color: var(--text-1, #e8f4f8);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.scout-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.scout-role-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(68, 103, 121, 0.45);
  background: rgba(11, 20, 29, 0.55);
  color: var(--text-1, #e8f4f8);
  cursor: pointer;
  text-align: right;
  font-weight: 600;
  font-size: 15px;
  transition: border-color 0.15s, background 0.15s;
}

.scout-role-btn:hover,
.scout-role-btn.scout-role-active {
  border-color: var(--accent, #d2ff00);
  background: rgba(48, 62, 8, 0.55);
}

.scout-role-btn .scout-role-short {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2, #8aa3b0);
}

/* ── Per-clip Scout meta — thumbnail overlay + thin body tag ────────── */
/* NOTE: the previous in-card grid layout (.scout-meta-controls,
   .scout-rating-trigger, .scout-rating-tag, .scout-season-row) was
   removed when the rating moved to a thumbnail overlay and the season
   toggle moved into the rating modal. Don't bring those classes back
   unless you also re-add them to renderClipScoutBodyTagHtml / the
   clip-card body markup — they have no DOM today. */
/*
 * Rating overlay button — floats over the clip thumbnail at the
 * TOP-LEFT corner, which is the only spot on a compact card that
 * stays free regardless of locale or state:
 *
 *   • .clip-sequence-label is top-center (margin auto, fit-content).
 *   • .clip-remove (X) is top-right.
 *   • .clip-duration-pill is bottom-start.
 *   • .clip-edit is a FULL-WIDTH 26px gradient ribbon along the
 *     entire bottom of the thumb — bottom-center would sit on top
 *     of the primary edit action.
 *
 * Hard-coded `left: 6px` (not `inset-inline-start`) so the pill
 * stays visually top-left in BOTH RTL and LTR, mirroring how
 * .clip-remove hard-codes `right: 6px` for the same reason.
 */
.scout-rating-overlay {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px dashed rgba(232, 244, 248, 0.55);
  background: rgba(11, 20, 29, 0.78);
  color: rgba(232, 244, 248, 0.85);
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
  backdrop-filter: blur(2px);
  white-space: nowrap;
  line-height: 1.3;
  max-width: calc(100% - 36px); /* leave room for the X at top-right */
}

.scout-rating-overlay:hover {
  border-color: var(--accent, #d2ff00);
  color: var(--accent, #d2ff00);
}

.scout-rating-overlay:active {
  transform: scale(0.96);
}

/* Rated state — pill is solid, the color matches the severity. */
.scout-rating-overlay.scout-rating-overlay-set {
  border-style: solid;
  background: rgba(48, 62, 8, 0.85);
  border-color: var(--accent, #d2ff00);
  color: var(--accent, #d2ff00);
}

.scout-rating-overlay.scout-rating-overlay-set[data-rating="must_include"] {
  background: rgba(60, 48, 12, 0.85);
  border-color: #ffc81e;
  color: #ffc81e;
}

.scout-rating-overlay.scout-rating-overlay-set[data-rating="normal"] {
  background: rgba(11, 20, 29, 0.78);
  border-color: rgba(138, 163, 176, 0.7);
  color: rgba(232, 244, 248, 0.85);
}

/* Body category tag — single subtle row under the meta. No buttons,
   no toggles. Just identifies what kind of play the clip is. */
.scout-tag-row {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.scout-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(11, 20, 29, 0.45);
}

/* Season-save row inside the rating modal — moved here from the
   clip card body so the card itself stays clean. */
.scout-modal-season {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(68, 103, 121, 0.35);
  background: rgba(11, 20, 29, 0.45);
  font-size: 13px;
  color: var(--text-1, #e8f4f8);
}

.scout-season-toggle {
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: rgba(68, 103, 121, 0.45);
  border: 1px solid rgba(68, 103, 121, 0.45);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.scout-season-toggle::before {
  content: '';
  position: absolute;
  top: 1px;
  /* knob sits on the start side; flips via aria-pressed */
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(232, 244, 248, 0.95);
  transition: transform 0.15s;
}

.scout-season-toggle[aria-pressed="true"] {
  background: rgba(210, 255, 0, 0.4);
  border-color: var(--accent, #d2ff00);
}

.scout-season-toggle[aria-pressed="true"]::before {
  transform: translateX(-14px);
  background: var(--accent, #d2ff00);
}

/* ── Editor step 4: dynamic chips + actionType source hint ───────────── */
.action-chips.scout-dynamic .action-chip {
  /* Container can grow — the dynamic chips are longer Hebrew strings
     than the legacy 5 English presets. Allow wrapping into multiple
     rows so the panel doesn't horizontal-scroll on mobile. */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

#editorScreen .action-chips.scout-dynamic .action-chip[data-label-size="medium"] {
  font-size: 12px !important;
  line-height: 1.12;
}

#editorScreen .action-chips.scout-dynamic .action-chip[data-label-size="long"] {
  font-size: 11px !important;
  line-height: 1.08;
  padding-inline: 5px;
}

.action-chip.action-chip-source-card {
  border-color: rgba(210, 255, 0, 0.65);
}

.scout-actiontype-hint {
  font-size: 11px;
  color: var(--text-2, #8aa3b0);
  margin: 2px 0 0;
}

/* Start hub: keep both creation choices and the projects shortcut visible
   together on a real phone. Height-based clamps leave the desktop/tablet
   composition untouched and preserve 44px touch targets. */
@media (max-width: 640px) {
  .screen-start {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
  }

  .screen-start .start-header {
    flex: 0 0 auto;
    gap: 6px;
  }

  .screen-start .start-header-row {
    gap: 8px;
  }

  .screen-start .app-header-logo {
    height: clamp(28px, 5dvh, 34px);
  }

  .screen-start .start-body {
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
    padding-top: 0;
  }

  .screen-start .start-section-title {
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(16px, 2.8dvh, 19px);
  }

  .screen-start .start-card {
    flex: 1 1 0;
    min-height: 0;
  }

  .screen-start .start-card-visual {
    flex: 0 1 clamp(82px, 15dvh, 118px);
    height: clamp(82px, 15dvh, 118px);
    padding: 6px 10px;
    background:
      radial-gradient(circle at 50% 35%, rgba(210, 255, 0, 0.12), transparent 58%),
      #04080d;
  }

  .screen-start .start-card-content {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
    gap: 5px;
    padding: 10px 14px 12px;
  }

  .screen-start .start-card-kicker,
  .screen-start .start-card-meta {
    font-size: 9px;
    letter-spacing: 1.7px;
  }

  .screen-start .start-card-title {
    font-size: clamp(17px, 2.8dvh, 20px);
    line-height: 1.1;
  }

  .screen-start .start-card-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.32;
  }

  .screen-start .start-card-cta {
    min-height: 38px;
    margin-top: 2px;
    padding: 8px 14px;
    font-size: 12px;
  }

  .screen-start .start-secondary-link {
    flex: 0 0 auto;
    min-height: 40px;
    margin-top: 0;
    padding: 8px 14px;
    font-size: 12px;
  }
}

@media (max-width: 640px) and (max-height: 680px) {
  .screen-start .start-card-visual {
    flex-basis: 76px;
    height: 76px;
  }

  .screen-start .start-card-content {
    gap: 3px;
    padding-block: 8px 9px;
  }

  .screen-start .start-card-description {
    font-size: 11px;
    line-height: 1.24;
  }

  .screen-start .start-card-cta {
    min-height: 36px;
    padding-block: 7px;
  }
}

/* Final Quick Reel editor override.
   Kept at file end so older mobile polish patches cannot shrink the scroll
   room or drop the final Save CTA back into normal document flow. */
body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSave"] #saveBtn {
  display: block;
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 60;
  width: min(420px, calc(100vw - 48px));
  min-height: 54px;
  transform: translateX(-50%);
  border-radius: 16px;
  border: 1px solid rgba(210, 255, 0, 0.62);
  background:
    linear-gradient(180deg, rgba(210, 255, 0, 0.98), rgba(132, 176, 0, 0.96));
  color: #001a14;
  font-size: 16px;
  font-weight: 900;
  box-shadow:
    0 12px 32px rgba(148, 190, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSave"] #saveBtn::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 26, 20, 0.30);
  transform: translateY(-50%);
}

body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSave"] .editor-body {
  /* The CTA band is 48px tall + 16px off the bottom = ~64px. The old 188px
     reserve left ~120px of dead scroll below the last control, which is half
     the "I have to scroll to reach it" complaint. */
  padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}

/* Restore the mobile-compact CTA in Quick Reel.
   The block above deliberately re-imposes the desktop pill (fixed 420px,
   54px tall, 32px glow, translateX centring) so that "older mobile polish
   patches cannot shrink the final Save CTA". On a 360px phone that is what
   makes the button feel bombastic and paint over the step content, since the
   usable band at this step is only ~210-245px tall.
   left+right with width:auto also removes a latent RTL bug: the mobile rule
   leaves a dangling `right:16px` under `left:50% + width + transform`, which
   would throw the button off-canvas the moment dir="rtl" is set. */
@media (max-width: 640px) {
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSave"] #saveBtn {
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
    min-height: 48px;
    font-size: 15px;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(148, 190, 0, 0.22);
  }
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSave"] #saveBtn::after {
    right: 12px;
    width: 24px;
    height: 24px;
  }
}

/* Once the Quick Reel export has been dispatched, the Save & continue CTA is
   done — the flow is now render → result. Set by renderQuickReel(), cleared on
   editor/grid re-entry. Scoped to quickReel so the shared #saveBtn rules that
   Professional Highlight relies on are untouched. */
body[data-app-mode="quickReel"] #editorScreen.qr-export-started #saveBtn {
  display: none !important;
}

/* Reclaim the dead gap above the sticky preview on short screens. The shared
   top:116px is desktop-tuned; on a phone the header (~50) + workflow bar
   (~38) end at ~90. Uses the 500px breakpoint that already retunes
   .workflow-bar's top. */
@media (max-width: 500px) {
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfEffect"] .preview-panel,
  body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSave"] .preview-panel {
    top: 92px;
  }
}

body[data-app-mode="quickReel"] #editorScreen.qr-context-pending .action-type-row {
  display: none;
}

body[data-app-mode="quickReel"] #editorScreen.qr-context-pending .customize-panel {
  border-color: rgba(210, 255, 0, 0.20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    rgba(7, 16, 23, 0.92);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

body[data-app-mode="quickReel"] #editorScreen.qr-context-pending .customize-panel > summary {
  cursor: default;
  pointer-events: none;
}

body[data-app-mode="quickReel"] #editorScreen.qr-context-pending .customize-panel > summary::after {
  display: none;
}

body[data-app-mode="quickReel"] #editorScreen.qr-context-pending .customize-panel > summary span:first-child {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfEffect"]:not(.selection-fullscreen-active) #playerShell,
body[data-app-mode="quickReel"] #editorScreen[data-editor-step="wfSave"]:not(.selection-fullscreen-active) #playerShell {
  /* 42dvh made the sticky player 327px tall on a 780px phone, leaving only
     ~245px of usable band for a 400-600px tall panel. 34dvh gives ~265px
     back to the content. */
  width: min(calc(100vw - 78px), calc(34dvh * 9 / 16), 264px);
}


/* ── Quick Reel main-screen preview, media-query overrides ──────────────
   Restates the 9:16 shell inside the same breakpoints that re-assert
   `#gridScreen .global-player-shell { aspect-ratio: 16/9 }` further up, so
   the landscape ratio cannot win on phones. Highlight mode is untouched —
   every selector here is scoped to body[data-app-mode="quickReel"]. */
@media (max-width: 720px) {
  body[data-app-mode="quickReel"] #gridScreen .global-player-shell {
    aspect-ratio: 9 / 16;
    width: min(100%, calc(50dvh * 9 / 16));
    height: auto;
    max-width: 100%;
    max-height: none;
    margin-inline: auto;
  }
}
@media (max-width: 720px) and (max-height: 760px) {
  body[data-app-mode="quickReel"] #gridScreen .global-player-shell {
    width: min(100%, calc(44dvh * 9 / 16));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Wave A — Quick Reel Look + replaceable branding (save step).
   Quick-Reel-only: hidden unless body[data-app-mode="quickReel"].
   ═══════════════════════════════════════════════════════════════════════ */
.reel-branding-block { display: none; margin-top: 10px; }
body[data-app-mode="quickReel"] .reel-branding-block { display: block; }
.reel-brand-row { margin-top: 10px; }
/* Base .clip-context-label is a 52px flex-column label; our labels are full
   rows, so reset the width or "Choose a look" / "Branding" wrap to 3 lines. */
.reel-brand-row > .clip-context-label { display: block; width: auto; margin-bottom: 6px; }

.look-picker-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 9px;
}

/* ─── Creation choice hub · 2026 refresh ───────────────────────────────
   Presentation only: the two existing card IDs remain the flow boundary.
   Desktop reads as a head-to-head choice; mobile becomes two compact rows. */
.screen-start {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 60% 32% at 50% 7%, rgba(210, 255, 0, 0.08), transparent 70%),
    radial-gradient(ellipse 34% 42% at 12% 56%, rgba(27, 87, 46, 0.28), transparent 75%),
    radial-gradient(ellipse 34% 42% at 88% 56%, rgba(74, 30, 102, 0.28), transparent 75%),
    linear-gradient(180deg, #03090d 0%, #061017 100%);
  padding-inline: clamp(16px, 4vw, 64px);
}

.screen-start .start-header-row,
.screen-start .start-body {
  width: min(100%, 1320px);
  margin-inline: auto;
}

.screen-start .start-header-row { min-height: 74px; }
.screen-start .app-header-logo { height: clamp(36px, 4.2vw, 58px); }

.screen-start .start-body {
  display: flex;
  gap: clamp(16px, 2.3vh, 28px);
  padding: clamp(8px, 2vh, 24px) 0 calc(92px + env(safe-area-inset-bottom));
}

.screen-start .start-section-title {
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.start-choice-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 3.2vw, 46px);
  width: 100%;
}

.screen-start .start-card {
  min-height: clamp(390px, 50vh, 560px);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(180px, 0.72fr);
  align-items: center;
  isolation: isolate;
  border-radius: 42px 18px 42px 18px;
  border: 1px solid rgba(210, 255, 0, 0.76);
  background:
    linear-gradient(118deg, rgba(11, 47, 24, 0.98), rgba(4, 16, 11, 0.97) 72%),
    #06120c;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), inset 0 0 46px rgba(171, 255, 0, 0.045);
}

.screen-start .start-card-reel {
  border-color: rgba(217, 116, 255, 0.72);
  border-radius: 18px 42px 18px 42px;
  background:
    linear-gradient(242deg, rgba(38, 14, 53, 0.98), rgba(10, 8, 22, 0.98) 72%),
    #100819;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), inset 0 0 46px rgba(213, 95, 255, 0.05);
}

.screen-start .start-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 76% 52%, rgba(190, 255, 0, 0.18), transparent 34%);
  pointer-events: none;
}

.screen-start .start-card-reel::before {
  background: radial-gradient(circle at 78% 52%, rgba(205, 76, 255, 0.18), transparent 34%);
}

.screen-start .start-card-content {
  align-self: stretch;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(28px, 4vw, 58px) 10px clamp(28px, 4vw, 58px) clamp(28px, 4vw, 58px);
}

.screen-start .start-card-title {
  max-width: 7ch;
  font-size: clamp(30px, 3.1vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.screen-start .start-card-description {
  max-width: 25ch;
  color: rgba(237, 245, 247, 0.8);
  font-size: clamp(14px, 1.25vw, 19px);
  line-height: 1.55;
}

.screen-start .start-card-kicker,
.screen-start .start-card-meta {
  color: #d2ff00;
  font-size: clamp(11px, 1vw, 15px);
  letter-spacing: 0.18em;
}

.screen-start .start-card-reel .start-card-meta::before { display: none; }

.screen-start .start-card-cta,
.screen-start .start-card[data-mode="quickReel"] .start-card-cta {
  min-height: 48px;
  justify-content: center;
  margin-top: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #d7ff00, #aee800);
  color: #07100b;
  font-size: clamp(13px, 1vw, 16px);
  box-shadow: 0 12px 28px rgba(181, 239, 0, 0.22);
}

.screen-start .start-card-visual.start-phone-preview {
  align-self: center;
  justify-self: center;
  position: relative;
  width: min(90%, 230px);
  height: min(82%, 440px);
  min-height: 330px;
  overflow: hidden;
  border: 5px solid #080d11;
  border-radius: 32px;
  background: #030609;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,.16);
}

.screen-start .start-phone-preview > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0.95;
}

.screen-start .start-card-highlight .start-phone-preview > img {
  object-position: 58% center;
}

.start-phone-topbar,
.start-phone-timeline,
.start-phone-tools,
.start-social-rail,
.start-reel-scrub,
.start-reel-tools {
  position: absolute;
  z-index: 3;
}

.start-phone-topbar {
  inset: 0 0 auto;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: rgba(2, 8, 12, 0.92);
  color: #fff;
  font-size: 8px;
}
.start-phone-topbar i { color: #d2ff00; font-style: normal; }
.start-phone-timeline { inset: auto 10px 40px; display: flex; gap: 3px; height: 48px; }
.start-phone-timeline span { flex: 1; border: 1px solid rgba(210,255,0,.55); background: rgba(210,255,0,.12); }
.start-phone-tools { inset: auto 12px 10px; display: flex; justify-content: space-between; }
.start-phone-tools i, .start-reel-tools i { width: 12px; height: 12px; border: 1px solid rgba(255,255,255,.68); border-radius: 3px; }
.start-social-rail { right: 9px; bottom: 74px; display: grid; gap: 10px; color: white; font-size: 12px; font-style: normal; text-shadow: 0 1px 4px #000; }
.start-social-rail i { font-style: normal; }
.start-reel-scrub { left: 14px; right: 14px; bottom: 48px; height: 2px; background: rgba(255,255,255,.55); }
.start-reel-scrub span { display: block; width: 46%; height: 100%; background: #fff; }
.start-reel-tools { inset: auto 18px 14px; display: flex; justify-content: space-between; }

.start-choice-vs {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: clamp(58px, 6vw, 78px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(-5deg);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: #071014;
  color: #d2ff00;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 900;
  font-style: italic;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 28px rgba(210,255,0,.09);
}

.screen-start .start-card:hover,
.screen-start .start-card:focus-visible {
  animation: none;
  transform: translateY(-3px);
  border-color: #d2ff00;
  box-shadow: 0 28px 72px rgba(0,0,0,.42), 0 0 28px rgba(210,255,0,.12);
}

.screen-start .start-card-reel:hover,
.screen-start .start-card-reel:focus-visible {
  border-color: #e38aff;
  box-shadow: 0 28px 72px rgba(0,0,0,.42), 0 0 28px rgba(215,92,255,.14);
}

@media (max-width: 820px) {
  .screen-start {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    gap: 4px;
    padding: max(8px, env(safe-area-inset-top)) 12px calc(82px + env(safe-area-inset-bottom));
  }
  .screen-start .start-header-row { min-height: 50px; }
  .screen-start .app-header-logo { height: 32px; }
  .screen-start .start-body { gap: 10px; padding: 2px 0 0; }
  .screen-start .start-section-title { font-size: clamp(22px, 6vw, 30px); }
  .start-choice-stage { grid-template-columns: 1fr; gap: 10px; }
  .screen-start .start-card,
  .screen-start .start-card-reel {
    min-height: 210px;
    grid-template-columns: minmax(0, 1.2fr) minmax(118px, .7fr);
    border-radius: 24px 10px 24px 10px;
  }
  .screen-start .start-card-reel { border-radius: 10px 24px 10px 24px; }
  .screen-start .start-card-content {
    min-height: 0;
    gap: 7px;
    padding: 18px 6px 18px 20px;
  }
  .screen-start .start-card-title { font-size: clamp(24px, 7.2vw, 32px); }
  .screen-start .start-card-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 12px;
    line-height: 1.35;
  }
  .screen-start .start-card-kicker,
  .screen-start .start-card-meta { font-size: 9px; }
  .screen-start .start-card-cta,
  .screen-start .start-card[data-mode="quickReel"] .start-card-cta {
    min-height: 44px;
    margin-top: 2px;
    padding: 9px 12px;
    font-size: 12px;
  }
  .screen-start .start-card-visual.start-phone-preview {
    width: 112px;
    height: 184px;
    min-height: 0;
    border-width: 3px;
    border-radius: 20px;
  }
  .start-choice-vs {
    top: 50%;
    width: 42px;
    font-size: 15px;
  }
  .screen-start .start-secondary-link {
    min-height: 44px;
    margin: 0;
    padding: 8px 14px;
  }
  .start-phone-topbar { height: 22px; font-size: 5px; padding-inline: 5px; }
  .start-phone-timeline { inset: auto 5px 20px; height: 26px; }
  .start-phone-tools { inset: auto 6px 5px; }
  .start-phone-tools i, .start-reel-tools i { width: 7px; height: 7px; }
  .start-social-rail { right: 5px; bottom: 36px; gap: 5px; font-size: 7px; }
  .start-reel-scrub { left: 7px; right: 7px; bottom: 25px; }
  .start-reel-tools { inset: auto 9px 7px; }
}

@media (max-width: 380px), (max-height: 700px) and (max-width: 820px) {
  .screen-start .start-card,
  .screen-start .start-card-reel { min-height: 180px; }
  .screen-start .start-card-visual.start-phone-preview { width: 96px; height: 154px; }
  .screen-start .start-card-content { padding-block: 12px; }
  .screen-start .start-card-description { -webkit-line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .screen-start .start-card,
  .screen-start .start-card-visual img { transition: none; }
}
.look-picker-title,
.look-picker-hint { display: block; }
.look-picker-title { color: #f5f8fb; font-size: 13px; font-weight: 900; line-height: 1.1; }
.look-picker-hint { margin-top: 3px; color: #8fa1b2; font-size: 10px; font-weight: 650; }
.look-picker-swipe { flex: none; color: #b9df10; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.look-cards {
  display: flex; gap: 11px; margin-inline: -2px; padding: 2px 2px 10px;
  overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory;
  scrollbar-width: thin; scrollbar-color: rgba(210,255,0,.38) rgba(255,255,255,.05);
}
.look-cards::-webkit-scrollbar { height: 4px; }
.look-cards::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 999px; }
.look-cards::-webkit-scrollbar-thumb { background: rgba(210,255,0,.38); border-radius: 999px; }
.look-card {
  position: relative; flex: 0 0 clamp(185px, 58.5vw, 242px); display: flex; flex-direction: column;
  padding: 5px 5px 9px; overflow: hidden; scroll-snap-align: start;
  border-radius: 16px; background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  border: 1px solid rgba(255,255,255,0.11); color: #eaf1f8;
  transition: border-color .15s, background .15s, transform .1s;
}
.look-card { cursor: pointer; text-align: left; font-family: inherit; }
.look-card:hover { transform: translateY(-1px); border-color: rgba(210,255,0,.55); }
.look-card[aria-pressed="true"] { border-color: #d2ff00; background: linear-gradient(145deg,rgba(210,255,0,.14),rgba(255,255,255,.025)); box-shadow: 0 0 0 1px rgba(210,255,0,.18),0 12px 30px rgba(0,0,0,.3); }
.look-card:focus-visible { outline: 2px solid var(--accent, #d2ff00); outline-offset: 2px; }
.look-swatch {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.look-card-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 6px 0; }
.look-name { font-size: 12px; font-weight: 900; line-height: 1.05; }
.look-tone { flex: none; color: #8fa1b2; font-size: 9px; font-weight: 750; }
.look-selected-badge {
  position: absolute; top: 12px; right: 12px; padding: 5px 8px; border-radius: 999px;
  background: #d2ff00; color: #071006; box-shadow: 0 4px 14px rgba(0,0,0,.4);
  font-size: 9px; font-weight: 950; line-height: 1; text-transform: uppercase; letter-spacing: .04em;
  opacity: 0; transform: translateY(-3px); transition: opacity .15s, transform .15s;
}
.look-card[aria-pressed="true"] .look-selected-badge { opacity: 1; transform: translateY(0); }
@media (min-width: 720px) {
  .look-card { flex-basis: 225px; }
  .look-picker-swipe { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .look-card,
  .look-selected-badge { transition: none; }
}

.brand-panel {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border-radius: var(--radius-soft, 14px);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10);
}
.brand-current { display: flex; align-items: center; gap: 10px; }
.brand-logo-preview {
  height: 34px; width: auto; max-width: 96px; object-fit: contain;
  background: rgba(255,255,255,0.06); border-radius: 6px; padding: 3px 6px;
}
.brand-logo-name { font-size: 13px; font-weight: 600; color: #cdd7e2; }
.brand-help {
  margin: 0; color: #8fa1b2; font-size: 10px; font-weight: 600; line-height: 1.45;
}
.brand-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-btn {
  padding: 8px 14px; border-radius: var(--radius-pill, 999px); cursor: pointer;
  font-size: 13px; font-weight: 700; color: #061018;
  background: var(--accent, #d2ff00); border: 1px solid transparent;
}
.brand-btn:disabled { opacity: .55; cursor: default; }
/* "Use KICKO" — small secondary text action, not a full button. */
.brand-use-kicko {
  background: none; border: 0; padding: 6px 4px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #9fb0c2; text-decoration: underline;
  text-underline-offset: 2px;
}
.brand-use-kicko:hover { color: #cdd7e2; }
.brand-colors { display: flex; gap: 16px; align-items: center; }
.brand-color { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #cdd7e2; }
.brand-color input[type="color"] {
  width: 34px; height: 26px; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px; background: none; padding: 0; cursor: pointer;
}
.brand-msg { font-size: 12px; color: #9fb0c2; margin: 0; }
.brand-msg-error { color: var(--danger, #f87171); }

.remotion-look-preview { position:absolute; inset:0; z-index:30; overflow:hidden; border-radius:inherit; background:transparent; pointer-events:none; }
.close-look-preview { position:absolute; z-index:32; top:10px; right:10px; padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(3,8,12,.78); color:#fff; font:800 11px/1 var(--font-ui, sans-serif); cursor:pointer; backdrop-filter:blur(8px); }

@media (min-width: 1024px) and (pointer: fine) {
  #gridScreen .clip-strip {
    scrollbar-width: thin;
    scrollbar-color: rgba(210, 255, 0, 0.35) rgba(255, 255, 255, 0.06);
    padding-bottom: 10px;
  }

  #gridScreen .clip-strip::-webkit-scrollbar {
    display: block;
    height: 10px;
  }

  #gridScreen .clip-strip::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
  }

  #gridScreen .clip-strip::-webkit-scrollbar-thumb {
    background: rgba(210, 255, 0, 0.35);
    border-radius: 999px;
  }

  #gridScreen .clip-strip::-webkit-scrollbar-thumb:hover {
    background: rgba(210, 255, 0, 0.55);
  }

  /* Bigger, more comfortable cards when there is room for them. The mobile
     132x208 exists to fit a phone; a desktop has no such constraint. */
  #gridScreen .clip-card {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    height: 296px;
    min-height: 296px;
    max-height: 296px;
  }

  #gridScreen .clip-strip { gap: 14px; }

  #gridScreen .clip-card .clip-card-meta,
  #gridScreen .clip-card .clip-edit-text { font-size: 13px; }
  #gridScreen .clip-card .clip-sequence-label,
  #gridScreen .clip-card .clip-duration-pill,
  #gridScreen .clip-card .clip-badge { font-size: 11px; }

  /* The drag handle is the discoverable way to reorder with a mouse — a
     long-press is a touch idiom nobody tries on a desktop. Make it a real
     target rather than a hint. */
  #gridScreen .clip-card .clip-reorder-hint {
    opacity: 0.85;
    cursor: grab;
  }

  #gridScreen .clip-card .clip-reorder-hint:active { cursor: grabbing; }
}

/* ═══ COMPACT STATIONS (Professional Highlight) ═══════════════════════════
   Measured at 375×667 before this block: header + bar + preview took 381px
   (57% of the screen) before a station's first line; zoom, rings, player
   summary and match details were each a bordered card inside a bordered card
   (five boxed layers in the player settings); every heading carried a
   "STEP N" kicker the bar already shows; and the buttons in one area came in
   26, 30, 35, 37, 38, 44 and 64px, with Back taller than Continue.
   Kept at the end of the stylesheet so it wins ties with the older mobile
   patches; !important only where those patches set it. Quick Reel untouched. */

/* ── One button scale ── */
body:not([data-app-mode="quickReel"]) #editorScreen .step-continue-btn {
  width: 100%;
  /* .step-continue-primary carries min-width: 200px, which pushed Continue
     past the card once it shared a row with Back. */
  min-width: 0;
  max-width: none;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 800;
}

body:not([data-app-mode="quickReel"]) #editorScreen #changePlayerBtn,
body:not([data-app-mode="quickReel"]) #editorScreen #addRingBtn,
body:not([data-app-mode="quickReel"]) #editorScreen #zoomPlayBtn,
body:not([data-app-mode="quickReel"]) #editorScreen #zoomArmBtn,
body:not([data-app-mode="quickReel"]) #editorScreen #zoomClearBtn,
body:not([data-app-mode="quickReel"]) #editorScreen #editTrimBtn,
body:not([data-app-mode="quickReel"]) #editorScreen .effect-save-settings,
body:not([data-app-mode="quickReel"]) #editorScreen .advanced-effect-summary,
body:not([data-app-mode="quickReel"]) #editorScreen .ctx-pos-btn {
  min-height: 40px !important;
  font-size: clamp(12px, 3.4vw, 14px) !important;
}

/* ── Back beside Continue, in one row at the foot of a station ──
   They have different parents in the markup (Continue sits above the
   advanced options in the player settings), so the panel wraps and the two
   are ordered last, each taking half the row. Everything else keeps a full
   row. A station without a visible Continue leaves Back alone on its row. */
body:not([data-app-mode="quickReel"]) #editorScreen .effect-panel-shell,
body:not([data-app-mode="quickReel"]) #editorScreen .clip-context-panel,
body:not([data-app-mode="quickReel"]) #editorScreen .tracking-panel {
  flex-flow: row wrap;
  align-content: flex-start;
}

body:not([data-app-mode="quickReel"]) #editorScreen .editor-workspace > .editor-panel:not(.preview-panel) > * {
  flex: 0 0 100%;
  min-width: 0;
}

body:not([data-app-mode="quickReel"]) #editorScreen .editor-workspace > .editor-panel > .step-nav-footer {
  order: 90;
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  border-top: 0;
}

body:not([data-app-mode="quickReel"]) #editorScreen .editor-workspace > .editor-panel > .effect-primary-action {
  order: 91;
  flex: 1 1 0;
  margin: 0;
}

/* ── No card inside a card ── */
body:not([data-app-mode="quickReel"]) #editorScreen .editor-panel #zoomCard,
body:not([data-app-mode="quickReel"]) #editorScreen .editor-panel #ringsCard,
body:not([data-app-mode="quickReel"]) #editorScreen .editor-panel .effect-summary-card,
body:not([data-app-mode="quickReel"]) #editorScreen .editor-panel .customize-panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── One compact heading per station ── */
body:not([data-app-mode="quickReel"]) #editorScreen .step-card-head .trim-label {
  display: none;
}

body:not([data-app-mode="quickReel"]) #editorScreen .step-card-head h3 {
  margin: 0;
  font-size: clamp(15px, 4.2vw, 17px);
  line-height: 1.2;
}

body:not([data-app-mode="quickReel"]) #editorScreen .step-card-head {
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The rings list says who is marked; its header added an empty-looking "1". */
body:not([data-app-mode="quickReel"]) #editorScreen .rings-head {
  display: none;
}

/* Match details: each label above its control, one line, not squeezed into a
   narrow column where "Team names position" broke into three lines. */
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfMatch"] .customize-panel .clip-context-row {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfMatch"] .customize-panel .clip-context-label {
  white-space: nowrap;
}

/* ── The video: frame buttons only where you pick a player ── */
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTrim"] #frameNavBar,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfZoom"] #frameNavBar,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfTags"] #frameNavBar,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfMatch"] #frameNavBar,
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfSave"] #frameNavBar {
  display: none;
}

/* Save: the room reserved under the page for the fixed Save CTA was 170px
   (220px on phones, !important) for a 50–54px button 12–14px off the bottom,
   so the summary ended in a long empty scroll. Reserve what it takes. */
body:not([data-app-mode="quickReel"]) #editorScreen[data-editor-step="wfSave"] .editor-body {
  padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
}

/* ═══ STUDIO PREVIEW ON A PHONE (Professional) ═══════════════════════════
   The preview is the most important thing on the studio screen, and it must
   never be cut off or shrunk. On a phone the studio was one fixed-height page:
   the preview panel got only the height left over by the match bar, Scout
   Mode and the clip strip (overflow: hidden), while the shell kept min-height
   240px — on a 384×700 viewport (a Galaxy S23 Ultra with browser bars) the
   bottom of the video, controls included, was cut off.
   Now the video is always full width at its true 16:9, with the side margins
   trimmed so it is as wide as the screen allows; the panel sizes to it, and
   when the page is taller than the screen, the page scrolls — the video never
   gives up height to make room. Quick Reel's 9:16 shell has its own rules. */
@media (max-width: 720px) {
  body:not([data-app-mode="quickReel"]) #gridScreen .project-body {
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-body > .global-player-panel {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding-inline: 0 !important;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-body > * {
    flex-shrink: 0;
  }

  /* Edge to edge: the video takes the body's side padding too (10px each
     side at this width), the heading keeps it. */
  body:not([data-app-mode="quickReel"]) #gridScreen .global-player-panel .section-heading {
    padding-inline: 10px;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .global-player-shell {
    flex: 0 0 auto;
    width: calc(100% + 20px);
    margin-inline: -10px;
    border-radius: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen #globalPreviewVideo {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* ── Multi-clip first pass ────────────────────────────────────────────────
   The counter on the trim step, the in-app confirm, the retry on a card and
   the studio's next-clip bar. Sized to the editor's own conventions (764f21a):
   44px for Continue/Back, 40px for every other control, no card inside a
   card. First built too big, and measured at 375x667: the counter cost 93px
   and made the trim station scroll, the studio bar cost 116px and pushed the
   clip strip almost off the screen, and the retry pill sat on top of Edit.
   Every button here also escapes the global `button { width: 100% }`. */

/* The project sequence is a timeline, and a video's time runs left to right
   in every language. In Hebrew the page is right-to-left, which flowed the
   strip from the right and put the player card — the first thing the video
   plays — on the right edge. Only the ORDER is pinned; the words inside each
   card stay right-to-left. The drag auto-scroll was also written for a
   left-to-right scroller (scrollLeft), which browsers invert in RTL. */
#clipStrip { direction: ltr; }
/* Same reason, and the same class of bug: a trim rail is a timeline. It stacks
   two range inputs over one track, and a range input follows the page
   direction — in Hebrew its maximum sits on the LEFT. The handles therefore
   swapped: grabbing the right-hand handle dragged the START value, while the
   bracket kept being painted with left/width. Only the rail is pinned; every
   label around it stays in the page's own direction. */
#trimRail { direction: ltr; }
html[dir="rtl"] #clipStrip > * { direction: rtl; }

/* A pill in the trim heading row, the duration pill's height — not a card. */
.batch-trim-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(205, 251, 69, 0.1);
  border: 1px solid rgba(205, 251, 69, 0.28);
  color: #cdfb45;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.batch-trim-counter[hidden] { display: none; }
.batch-counter-row { display: inline-flex; align-items: center; gap: 4px; }
.batch-counter-left { font-weight: 600; opacity: 0.8; }
.batch-counter-left::before { content: '· '; }
.batch-counter-left[hidden] { display: none; }
.batch-counter-dots { display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; }
.batch-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(205, 251, 69, 0.45);
}
.batch-dot.is-on { background: #cdfb45; border-color: #cdfb45; }
.batch-counter-bg { font-weight: 600; opacity: 0.7; }
.batch-counter-bg::before { content: '· '; }
.batch-counter-bg[hidden] { display: none; }
@media (max-width: 640px) {
  /* On a phone the count alone: "play 3 of 6", or "last · 6 of 6". */
  .batch-counter-left,
  .batch-counter-dots,
  .batch-counter-bg { display: none; }
}

.app-confirm-overlay { z-index: 1200; }
.app-confirm-card { max-width: 360px; width: calc(100% - 32px); display: grid; gap: 8px; padding: 18px; }
.app-confirm-title { margin: 0; font-size: 16px; }
.app-confirm-body { margin: 0; font-size: 13px; line-height: 1.5; opacity: 0.85; }
.app-confirm-actions { display: grid; gap: 8px; margin-top: 4px; }
.app-confirm-actions button { width: 100%; min-height: 44px; }

/* Retry lives in the card footer, beside the drag handle — over the
   thumbnail it covered Edit and the duration pill, and the meta row is hidden
   on the studio's compact card. The footer row already exists: no height. */
.clip-retry {
  width: auto;
  height: 20px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid rgba(255, 143, 143, 0.45);
  background: rgba(255, 143, 143, 0.08);
  color: #ffb3b3;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
}

/* On the sequence heading's own line: the title, then what is ready and an
   outlined button at the end. The help line gives way to the status while
   there is something to mark. The button is the app's own small outlined
   control (the scout "change role" one: 28px, 7px corners, lime outline) —
   a filled 40px pill here read as a foreign, clumsy element. One line cannot
   change height, so the button never moves while detections land. */
#gridScreen .project-clips-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#gridScreen .project-clips-head > .section-heading { flex: 0 1 auto; min-width: 0; }
#gridScreen .project-clips.has-next .section-heading p { display: none; }
.studio-next-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
  min-height: 28px;
  margin: 0;
  padding: 0;
}
.studio-next-bar[hidden] { display: none; }
.studio-next-text {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 700;
  color: rgba(208, 224, 235, 0.72);
}
.studio-next-bar.is-warning .studio-next-text { color: #ffb3b3; }
/* Slow / stalled / offline upload (renderUploadHealthBanner). It must never
   take a tap: trimming carries on underneath while the upload struggles. */
.upload-health-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  width: min(560px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 196, 0, 0.45);
  background: rgba(40, 30, 4, 0.94);
  color: #ffe08a;
  font-size: 13px;
  line-height: 1.4;
  text-align: start;
  box-shadow: var(--shadow-xl);
  pointer-events: none;
}
.upload-health-banner[hidden] { display: none; }
.upload-health-banner[data-health="offline"] {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(45, 10, 10, 0.94);
  color: #ffb3b3;
}

.studio-next-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid rgba(210, 255, 0, 0.34);
  background: rgba(210, 255, 0, 0.1);
  color: #d2ff00;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.studio-next-btn[hidden] { display: none; }


/* "Turn your phone upright" after leaving the landscape workspace. A hint,
   never a gate: no pointer events, clears on rotation or after 5s. Guarded by
   src/utils/portraitReturn.test.js. */
.rotate-hint {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 0, 0.5);
  background: rgba(4, 10, 15, 0.82);
  color: #f7fbff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.rotate-hint::before { content: "\21BB  "; color: #d2ff00; }
.rotate-hint[hidden] { display: none !important; }

/* While the preview is zoom-scaled, the browser's own controls are scaled
   with it (they live inside the <video>) — a giant play button the render
   knows nothing about. Hidden for that moment; our own transport stays.
   Guarded by src/utils/zoomPreviewHonesty.test.js. */
.zoom-scaled video::-webkit-media-controls,
.zoom-scaled video::-webkit-media-controls-enclosure,
.zoom-scaled video::-webkit-media-controls-panel {
  display: none !important;
}

/* ── Project scoreboard (Professional) ─────────────────────────────────
   Studio settings, the Match step panel, and the board in both previews
   (mirrors remotion/src/Scoreboard.jsx: top-left, top-right for Hebrew). */
.scoreboard-settings { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.scoreboard-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.scoreboard-toggle input { width: auto; }
.scoreboard-start { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.scoreboard-start .match-score-input { width: 56px; }
.scoreboard-half-select { width: auto; min-width: 96px; }
.scoreboard-warning { margin: 0; font-size: 12px; color: #ffcf6e; }
.scoreboard-warning[hidden] { display: none; }

.scoreboard-panel {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(210, 255, 0, 0.28);
  border-radius: 10px;
  background: rgba(210, 255, 0, 0.04);
}
.scoreboard-panel[hidden] { display: none !important; }
.sb-head { font-weight: 800; font-size: 14px; }
.sb-now { margin: 6px 0 2px; font-size: 15px; font-weight: 800; color: #d2ff00; }
.sb-hint { margin: 0 0 10px; font-size: 12px; color: var(--text-2, #8a969c); }
.sb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-btn {
  width: auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(210, 255, 0, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #e8ffb0;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.sb-btn:disabled { opacity: 0.4; cursor: default; }
.sb-btn-half { border-color: rgba(255, 255, 255, 0.25); color: #e8eef0; }
.sb-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sb-mark {
  width: auto;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  color: #e8eef0;
  font-size: 12px;
  cursor: pointer;
}
/* The per-play match panel is not drawn while the board is on. */
body:not([data-app-mode="quickReel"]) #editorScreen.scoreboard-on #scoreboardPanel + .customize-panel { display: none; }

.scoreboard-preview {
  position: absolute;
  top: 3.3%;
  left: 2.3%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  pointer-events: none;
  font-size: 12px; /* set from the video box by paintScoreboardPreview */
}
.scoreboard-preview[hidden] { display: none; }
.scoreboard-preview.is-rtl { left: auto; right: 2.3%; align-items: flex-end; }
.scoreboard-preview .sbp-row {
  display: flex;
  align-items: stretch;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.scoreboard-preview.is-rtl .sbp-row { direction: rtl; }
.scoreboard-preview .sbp-team {
  padding: 0.35em 0.7em;
  background: rgba(12, 20, 27, 0.92);
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}
.scoreboard-preview .sbp-score {
  padding: 0.35em 0.7em;
  background: #0b1114;
  color: #d2ff00;
  font-weight: 900;
  direction: ltr;
}
.scoreboard-preview .sbp-half {
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background: rgba(11, 17, 20, 0.88);
  color: #e8eef0;
  font-size: 0.75em;
  font-weight: 800;
}


/* ═══ WEB LAYOUT — Professional, 1024px and wider ═══════════════════════════
   On a computer the studio and the editor rendered the phone layout at a
   bigger size: a 385px header with a three-line marketing line, the preview
   starting at 530px of a 900px screen with the clips below the fold, and an
   editor that was one 520px column between two 460px empty gutters.
   Presentation only. Every rule is inside this media query and scoped to
   Professional, so a phone or tablet narrower than 1024px never reads any of
   it (verified by layout snapshots at 360–768px before and after), and Quick
   Reel is untouched. */
@media (min-width: 1024px) {

  /* ── Studio: compact header ── */
  body:not([data-app-mode="quickReel"]) #gridScreen .project-header {
    align-items: center;
    padding: 8px 32px;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .header-copy {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-topline .section-kicker,
  body:not([data-app-mode="quickReel"]) #gridScreen .header-subtitle {
    display: none;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .app-header-logo {
    height: 44px;
    width: auto;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .header-actions-grid {
    flex: 0 0 auto;
    width: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .header-actions-grid > * {
    width: auto;
  }

  /* The menu button moves to the far right on a computer, so its panel opens
     leftward from it — anchored left, it opened past the edge of the screen. */
  body:not([data-app-mode="quickReel"]) #gridScreen .account-menu-panel {
    left: auto;
    right: 0;
  }

  /* ── Studio: one screen, no scrolling ──
     The same arrangement the studio already had on a computer — the player
     with match details and Scout Mode beside it, the project sequence across
     the bottom — fitted into exactly one viewport: the sequence cards are a
     little shorter and the player takes the height that is left, at a true
     16:9 and never wider than its column. */
  body:not([data-app-mode="quickReel"]) #gridScreen.screen-grid:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-header {
    flex: 0 0 auto;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 28vw, 480px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "preview match"
      "preview scout"
      "clips clips";
    align-items: start;
    gap: 14px 24px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4px 32px 12px;
    overflow: hidden;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-body > .project-guide {
    display: none;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-body > .project-match-bar {
    grid-area: match;
    margin: 0;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-body > .scout-panel {
    grid-area: scout;
    margin: 0;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-body > .project-clips {
    grid-area: clips;
    margin: 0;
    min-width: 0;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-body > .global-player-panel {
    grid-area: preview;
    align-self: stretch;
    margin: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* The sequence row gives up height so the player can grow: shorter cards
     (the 296px desktop card becomes 170) and a
     tighter panel. */
  body:not([data-app-mode="quickReel"]) #gridScreen .project-clips {
    padding: 8px 12px 8px;
    gap: 6px;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .clip-card {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    height: 170px;
    min-height: 170px;
    max-height: 170px;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .clip-card .clip-thumb-wrap,
  body:not([data-app-mode="quickReel"]) #gridScreen .clip-card .clip-thumb-static {
    height: 96px;
    flex: 0 0 96px;
  }

  body:not([data-app-mode="quickReel"]) #gridScreen .project-clips .section-heading p {
    display: none;
  }

  /* 100dvh minus the header, the sequence row, the gaps and the panel's own
     heading and padding — measured, see the web layout tests. */
  body:not([data-app-mode="quickReel"]) #gridScreen .global-player-shell {
    flex: 0 0 auto;
    width: min(100%, calc((100dvh - 406px) * 16 / 9));
    max-height: none;
    min-height: 0;
    aspect-ratio: 16 / 9;
    align-self: center;
  }

  /* ── Editor: the video on the left, the station on the right ── */
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active) .editor-body {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0 auto;
    padding: 0 32px 16px;
  }

  /* The bar belongs to the station, so it sits over the right column
     (its width is that column's share of the grid below). */
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active) .workflow-bar {
    width: clamp(380px, 30vw, 520px);
    max-width: none;
    margin: 0 0 4px auto;
    background: transparent;
  }

  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active) .editor-workspace {
    display: grid;
    /* The video takes everything the station column does not. */
    grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 520px);
    grid-auto-flow: row dense;
    align-items: start;
    /* No row gap: the video spans the rows beside it, and every row gap
       counted once per spanned row — 112px of empty page under a short
       station. The notice above a station keeps its space with a margin. */
    gap: 0 28px;
  }

  /* The phone rule that stretches the Select step to a full screen
     (min-height 620px) would push the page past the viewport here. */
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step] .editor-workspace {
    min-height: 0;
  }

  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active) .editor-workspace > * {
    grid-column: 2;
    min-width: 0;
  }

  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active) .editor-workspace > #editorStepBlocker {
    margin-bottom: 16px;
  }

  /* One screen, no page scroll: the station scrolls inside its own column
     when it is taller than the room beside the video (header 66px, bar, the
     body padding). Save keeps extra room for its fixed CTA. */
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active) .editor-workspace > *:not(.preview-panel) {
    max-height: calc(100dvh - 190px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfSave"] .editor-workspace > *:not(.preview-panel) {
    max-height: calc(100dvh - 270px);
  }

  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active) .editor-workspace > .preview-panel {
    grid-column: 1;
    grid-row: 1 / span 3;
    position: sticky;
    top: 136px;
    z-index: 16;
  }

  /* Bar and preview sit side by side, so the preview no longer needs the
     phone's ground ring to hide content scrolling above it. */
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step] .editor-workspace > .preview-panel {
    top: 136px;
    box-shadow: none;
  }

  /* The video is as large as the column allows, but never taller than the
     screen: its width follows the viewport height at 16:9 (room is kept for
     the header, the bar and the frame buttons under it). */
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active) .editor-workspace > .preview-panel #playerShell {
    width: min(100%, calc((100dvh - 290px) * 16 / 9));
    max-height: none;
    margin-inline: auto;
  }

  /* Zoom, Tags, Match and Save have no frame buttons under the video, so the
     video takes that room too. */
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfZoom"] .editor-workspace > .preview-panel #playerShell,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfTags"] .editor-workspace > .preview-panel #playerShell,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfMatch"] .editor-workspace > .preview-panel #playerShell,
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfSave"] .editor-workspace > .preview-panel #playerShell {
    width: min(100%, calc((100dvh - 210px) * 16 / 9));
  }

  /* The tag's display options open below the chips, not over them. */
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active) .action-style-popover {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin-top: 10px;
  }

  /* Save's fixed CTA sits under the station column instead of mid-screen. */
  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfSave"] #saveBtn {
    left: auto;
    right: 32px;
    transform: none;
    width: clamp(380px, 30vw, 520px);
  }

  body:not([data-app-mode="quickReel"]) #editorScreen:not(.selection-fullscreen-active)[data-editor-step="wfSave"] .editor-body {
    /* The station column already keeps room for the fixed CTA (its max-height
       is 80px shorter on Save), so the page itself needs no extra tail. */
    padding-bottom: 16px !important;
  }
}