/* For Studio page only: reduce main-content bottom padding so 
   the layout can fill the viewport with render bar at the bottom. */
.main-content:has(.studio-layout){
  padding-bottom:12px !important;  /* = the sidebar bottom margin - unified rhythm */
}

/* ═══════════════════════════════════════════════════════════════
   STUDIO — VISUALS ONLY  (v46 polish — 2026-07-05)
   Ownership contract:
     • THIS file: component visuals (colors, borders, typography,
       inner spacing). NO layout model, NO breakpoints for layout.
     • module-layout.css: viewport lock, grids, breakpoints,
       player fitting, dropzone geometry.
     • module-settings.css: the Settings box component.
   STUDIO — integrates with theme.css (no overrides, minimal CSS)
   Uses .card, .stat-label, tokens from theme.
   ═══════════════════════════════════════════════════════════════ */

/* Center player — aspect-ratio 16:9, defines row height */
/* ── Stage wraps the player + control bar ── */
.studio-stage{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  width:100%;
  max-height:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--card);
}

/* ── Player: always 16:9, sharp corners (inherits from stage) ── */
.studio-player{
  background:var(--surface);   /* theme-aware empty state */
  aspect-ratio:16/9;
  width:100%;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  display:block;
}
/* Player letterbox area uses theme surface (matches Smart Crop spinner). */
.studio-player:has(.studio-player-media:not([hidden])){
  background:var(--surface);
}
/* Fallback for older browsers: force exact 16:9 via padding trick */
@supports not (aspect-ratio:16/9){
  .studio-player{
    height:0;
    padding-bottom:56.25%;
  }
}

/* ── Player control bar (stuck to player bottom) ── */
.studio-player-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:var(--card);
  border-top:1px solid var(--border);
  flex-shrink:0;
  min-height:48px;
  --pb-ctrl-h:32px;
  --pb-radius:8px;
}

/* Left group: play button + time */
.studio-pb-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  justify-self:start;
}
.studio-pb-btn{
  width:var(--pb-ctrl-h);
  height:var(--pb-ctrl-h);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text);
  cursor:pointer;
  padding:0;
  transition:background .15s, border-color .15s, color .15s;
}
.studio-pb-btn:hover{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.studio-pb-btn svg{
  display:block;
}
#mod-play-btn svg{
  margin-left:1px;  /* optical center for the play triangle */
}

.studio-pb-time{
  font:600 12px/1 ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;
  color:var(--heading);
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  height:var(--pb-ctrl-h);
  box-sizing:border-box;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--pb-radius);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.studio-pb-time-sep{
  width:1px;
  height:14px;
  background:var(--border);
  border-radius:1px;
}
#mod-time-total{
  color:var(--subtle);
}

/* Center: transport (rewind / play-pause / fast-forward) */
.studio-pb-transport{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:8px;
}
.studio-pb-btn-sm{
  width:var(--pb-ctrl-h);
  height:var(--pb-ctrl-h);
}
.studio-pb-rate{
  height:var(--pb-ctrl-h);
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-inline-start:4px;
  min-width:28px;
  padding:0 10px;
  border-radius:var(--pb-radius);
  background:var(--primary);
  color:#fff;
  font:700 10px/1 ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  letter-spacing:.5px;
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 4px var(--primary-soft);
}
.studio-pb-rate[hidden]{ display:none; }

/* Right: format chips */
.studio-pb-right{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  justify-self:end;
}
.studio-fmt{
  height:var(--pb-ctrl-h);
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--pb-radius);
  color:var(--muted);
  font:600 11px/1 'Poppins', inherit;
  cursor:pointer;
  letter-spacing:.3px;
  transition:all .15s;
}
.studio-fmt:hover{
  color:var(--text);
  border-color:var(--border-hover);
}
.studio-fmt.is-active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* Side columns — stack of .card, sized to content */
.studio-side{
  display:flex;
  flex-direction:column;
  gap:var(--space-grid);
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;        /* CRITICAL: never let side overflow the grid row */
}

/* Left side: Section (natural height), Dynamic Fields (fills remainder) */
.studio-side-left > .card:first-child{
  flex:0 0 auto;
}
.studio-side-left > .card:last-child,
.studio-side-right > .card{
  flex:1 1 0;              /* flex-basis:0 so no min-content push */
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;         /* keep children contained */
}

/* Card body: fills the card, scrolls internally */
.studio-side .card .studio-card-body{
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Slim card padding (studio cards are narrower than dashboard cards) */
.studio-card{
  padding:16px !important;
}

/* Card label (matches theme's .stat-label styling) */
.studio-card-title{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.8px;
  margin:0 0 12px;
}

/* Dynamic fields body scrolls internally if too tall */
.studio-card-body{
  overflow-y:auto;
  overflow-x:hidden;
}

/* Render bar */
.studio-rb{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 16px !important;
  flex-shrink:0;
}
.studio-rb-formats{
  display:flex;
  align-items:center;
  gap:8px;
  /* NEVER wrap: bar height is layout-invariant (chips injection at
     init must not change geometry - the 43.5px first-paint jump).
     When tight, chips scroll horizontally inside the 38px lane. */
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  flex:1;
  min-width:0;
  min-height:38px;
}
.studio-rb-formats::-webkit-scrollbar{ display:none }
.studio-rb-name{ min-width:200px }

/* Compact empty-state inside Studio cards (theme default is for full pages) */

/* ══════════════════════════════════════════════════════════════
   PLAYER EMPTY STATE (upload zone)
   ══════════════════════════════════════════════════════════════ */
.studio-player-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.studio-upload-dropzone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:2px dashed var(--border);
  border-radius:var(--radius);
  cursor:default;
  background:transparent;
  transition:border-color .15s, background .15s;
  padding:16px;
}
.studio-upload-dropzone.is-drag{
  border-color:var(--primary);
  background:var(--primary-soft);
}
.studio-upload-icon{
  color:var(--subtle);
  margin-bottom:2px;
  transition:color .15s;
}
.studio-upload-dropzone.is-drag .studio-upload-icon{
  color:var(--primary);
}
.studio-upload-title{
  font:700 15px/1.3 'Poppins', inherit;
  color:var(--heading);
  text-align:center;
}
.studio-upload-sub{
  font:500 12px/1.4 'Poppins', inherit;
  color:var(--muted);
  text-align:center;
  max-width:300px;
  margin-bottom:8px;
}
.studio-upload-actions{
  display:flex;
  gap:8px;
  margin-top:4px;
}
.studio-upload-actions .btn{
  padding:8px 14px;
  font-size:12.5px;
}

/* ── Loaded media (video or image) ── TRUE-SCALE MODE
   Video is sized relative to the target canvas (1920×1080 for 16:9),
   NEVER upscaled beyond its natural size. If native resolution matches
   canvas, it fills perfectly. Smaller videos show smaller (centered).
   Scale factor is applied via --scale CSS var, set by JS. */
.studio-player-media{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  overflow:hidden;
}
.studio-player-media video,
.studio-player-media img{
  display:block;
  /* JS sets --media-w and --media-h to the computed display dimensions */
  width:var(--media-w, auto);
  height:var(--media-h, auto);
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* ── Upload progress (shown while uploading) ── */
.studio-upload-progress{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:24px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(7px);
}
html.dark .studio-upload-progress{ background:rgba(13,26,46,.94); }
.studio-upload-progress-name{
  font:600 16px/1.35 'Poppins',inherit;
  color:#0a0f1e;
  text-align:center; max-width:76%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html.dark .studio-upload-progress-name{ color:#e8eef9; }
.studio-upload-progress-bar{
  position:relative;
  width:min(620px,86%); height:8px;
  background:var(--border);
  border-radius:999px; overflow:hidden;
}
.studio-upload-progress-fill{
  height:100%; width:0;
  border-radius:999px;
  background:linear-gradient(90deg,
    var(--primary) 0%, #63b0ff 35%, var(--primary) 70%, #63b0ff 100%);
  background-size:220% 100%;
  transition:width .45s cubic-bezier(.22,.61,.36,1);
}
.studio-upload-progress.is-live .studio-upload-progress-fill{
  animation:wr-up-flow 1.5s linear infinite, wr-up-pulse 2.1s ease-in-out infinite;
}
@keyframes wr-up-flow{ from{ background-position:0% 0; } to{ background-position:-220% 0; } }
@keyframes wr-up-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,128,255,.30); }
  50%{ box-shadow:0 0 12px 1px rgba(0,128,255,.45); }
}
@media (prefers-reduced-motion: reduce){
  .studio-upload-progress.is-live .studio-upload-progress-fill{ animation:none; }
}
.studio-upload-progress-pct{
  font:500 12.5px/1 'Poppins',inherit;
  color:#7c8aa5; letter-spacing:.2px;
  font-variant-numeric:tabular-nums;
}
html.dark .studio-upload-progress-pct{ color:#93a1b8; }

/* ── FIX: ensure [hidden] attribute wins over display:flex ── */
.studio-player [hidden],
.studio-player-media[hidden],
.studio-upload-progress[hidden],
.studio-player-empty[hidden]{
  display:none !important;
}

/* ══════════════════════════════════════════════════════════════
   FORMAT CROP OUTLINE (shown when selected format != 16:9)
   Shows a frame inside the 16:9 player indicating what area
   will be kept in the final render for the selected format.
   ══════════════════════════════════════════════════════════════ */
.studio-format-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:5;
}
.studio-format-frame{
  aspect-ratio:var(--fmt-ratio, 9/16);
  height:100%;
  max-width:100%;
  max-height:100%;
  border:2px solid var(--primary);
  /* Dim everything outside the frame with a massive outset shadow */
  box-shadow:0 0 0 9999px rgba(0,0,0,0.55);
  transition:aspect-ratio .2s ease;
}

/* [hidden] must win */
.studio-format-overlay[hidden]{
  display:none !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION OVERLAY LAYER
   Holds all slot overlays (logo, intro, outro, lower_third, custom).
   Each overlay is rendered at NATIVE format resolution (e.g. 1920×1080)
   then scaled down to fit the player via transform: scale().
   This preserves template pixel-accuracy regardless of display size.
   ══════════════════════════════════════════════════════════════ */
.studio-overlay-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  overflow:hidden;
}
.studio-overlay-layer[hidden]{display:none !important}

/* Each slot overlay: positioned top-left, sized at native canvas, scaled. */
.studio-ov{
  position:absolute;
  top:0;
  left:0;
  transform-origin:top left;
  overflow:hidden;
  display:none;               /* hidden by default, .is-visible shows it */
}
.studio-ov.is-visible{display:block}
.studio-ov img,
.studio-ov video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.studio-ov iframe{
  border:none;
  background:transparent;
  display:block;
  /* width/height set via JS to match native canvas */
}

/* z-index per slot type (higher = on top) */
.studio-ov[data-slot-type="custom"]      {z-index:1}
.studio-ov[data-slot-type="lower_third"] {z-index:2}
.studio-ov[data-slot-type="intro"]       {z-index:3}
.studio-ov[data-slot-type="outro"]       {z-index:3}
.studio-ov[data-slot-type="logo"]        {z-index:4}

/* ══════════════════════════════════════════════════════════════
   DYNAMIC FIELDS panel (placeholders + timing for each slot)
   Reuses theme's .input + .label + .form-group.
   ══════════════════════════════════════════════════════════════ */

/* ── Placeholder input types ── */
.studio-color-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.studio-color-swatch{
  width:40px;
  height:36px;
  padding:2px;
  border:1.5px solid var(--border);
  border-radius:8px;
  background:var(--card);
  cursor:pointer;
  flex-shrink:0;
}
.studio-color-hex{
  flex:1;
  min-width:0;
  font-family:monospace;
}
.studio-media-picker{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.studio-pick-btn{
  width:100%;
  padding:8px 10px;
  font-size:12px;
  justify-content:center;
}
/* ══════════════════════════════════════════════════════════════
   DYNAMIC FIELDS — flat list (no box wrappers)
   ══════════════════════════════════════════════════════════════ */
.studio-field{
  margin-bottom:14px;
}
.studio-field:last-child{margin-bottom:0}

.studio-field-label{
  display:block;
  font:600 11.5px/1.3 'Poppins', inherit;
  color:var(--text);
  margin-bottom:6px;
  letter-spacing:.1px;
}
.studio-field-req{
  color:var(--danger);
  font-weight:700;
}

.studio-field .input{
  width:100%;
  padding:9px 11px;
  font-size:13px;
}

.studio-field .studio-pick-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:9px 12px;
  font:600 12px/1 'Poppins', inherit;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.studio-field .studio-pick-btn:hover{
  background:var(--surface);
  border-color:var(--border-hover);
}
.studio-field .studio-pick-btn svg{
  color:var(--muted);
  flex-shrink:0;
}

/* ══════════════════════════════════════════════════════════════
   RENDER BAR — format chips + select-all toggle
   Heights match the Render button (~38px). Selected uses --success.
   ══════════════════════════════════════════════════════════════ */
.studio-rb-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 12px;
  font:600 12.5px/1 'Poppins', inherit;
  color:var(--muted);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:color .15s, background .15s, border-color .15s, transform .15s;
  white-space:nowrap;
  flex-shrink:0;
}
.studio-rb-chip:hover{
  border-color:var(--border-hover);
  color:var(--text);
  transform:translateY(-1px);
}
.studio-rb-chip-icon{
  color:var(--subtle);
  transition:color .15s;
  flex-shrink:0;
}
.studio-rb-chip-label{
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
.studio-rb-chip-check{
  display:none;
  width:16px;
  height:16px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--success);
  color:#fff;
  flex-shrink:0;
  margin-left:2px;
}

/* Selected state — green border + green check */
.studio-rb-chip.is-on{
  color:var(--text);
  background:color-mix(in srgb, var(--success) 10%, transparent);
  border-color:color-mix(in srgb, var(--success) 50%, transparent);
}
.studio-rb-chip.is-on .studio-rb-chip-icon{
  color:var(--success);
}
.studio-rb-chip.is-on .studio-rb-chip-check{
  display:inline-flex;
}

/* ── Select-all toggle (real switch style) ── */
.studio-rb-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 12px 0 8px;
  font:700 11px/1 'Poppins', inherit;
  color:var(--muted);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:color .15s, background .15s, border-color .15s;
  text-transform:uppercase;
  letter-spacing:.5px;
  flex-shrink:0;
  margin-right:4px;
}
.studio-rb-toggle:hover{
  border-color:var(--border-hover);
  color:var(--text);
}
.studio-rb-toggle-track{
  position:relative;
  width:30px;
  height:18px;
  border-radius:999px;
  background:var(--border);
  transition:background .15s;
  flex-shrink:0;
}
.studio-rb-toggle-knob{
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  transition:transform .18s ease, background .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* ON state */
.studio-rb-toggle.is-on{
  color:var(--success);
  border-color:color-mix(in srgb, var(--success) 50%, transparent);
  background:color-mix(in srgb, var(--success) 10%, transparent);
}
.studio-rb-toggle.is-on .studio-rb-toggle-track{
  background:var(--success);
}
.studio-rb-toggle.is-on .studio-rb-toggle-knob{
  transform:translateX(12px);
}

/* MIXED state (some selected, not all) — knob in middle, amber accent */
.studio-rb-toggle.is-mixed{
  color:var(--warning);
  border-color:color-mix(in srgb, var(--warning) 50%, transparent);
  background:color-mix(in srgb, var(--warning) 10%, transparent);
}
.studio-rb-toggle.is-mixed .studio-rb-toggle-track{
  background:var(--warning);
}
.studio-rb-toggle.is-mixed .studio-rb-toggle-knob{
  transform:translateX(6px);
}

.studio-rb-empty{
  font:500 12px/1.4 'Poppins', inherit;
  color:var(--subtle);
  padding:6px 0;
}

/* Compact tweaks on small screens */
@media (max-width: 640px){
  .studio-rb-chip,
  .studio-rb-toggle{
    height:34px;
    padding:0 10px;
    font-size:11.5px;
  }
  .studio-rb-chip-label{ font-size:11.5px }
}

/* ══════════════════════════════════════════════════════════════
   SECTION DROPDOWN — custom select matching theme (no browser UI)
   ══════════════════════════════════════════════════════════════ */
.studio-section-wrap{
  position:relative;
}

/* Trigger button — styled like .input but interactive */
.studio-section-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  height:42px;
  padding:0 12px;
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:10px;
  color:var(--text);
  font:600 13px/1 'Poppins', inherit;
  cursor:pointer;
  text-align:left;
  transition:border-color .15s, background .15s;
}
html[dir="rtl"] .studio-section-btn{ text-align:right }
.studio-section-btn:hover{
  border-color:var(--border-hover);
}
.studio-section-btn[aria-expanded="true"]{
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 5%, var(--card));
}

/* Status dot — green when a section is active, gray when none */
.studio-section-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--border);
  flex-shrink:0;
  transition:background .15s, box-shadow .15s;
}
.studio-section-dot[data-state="active"]{
  background:var(--success);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}

.studio-section-name{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.studio-section-name.is-empty{
  color:var(--muted);
  font-weight:500;
}

.studio-section-caret{
  color:var(--muted);
  flex-shrink:0;
  transition:transform .18s ease, color .15s;
}
.studio-section-btn[aria-expanded="true"] .studio-section-caret{
  transform:rotate(180deg);
  color:var(--primary);
}

/* Popover menu */
.studio-section-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:5px;
  box-shadow:var(--shadow-lg);
  z-index:80;
  max-height:280px;
  overflow-y:auto;
  animation:studioSectionIn .14s ease-out;
}
.studio-section-menu[hidden]{display:none}
@keyframes studioSectionIn{
  from{opacity:0;transform:translateY(-4px)}
  to  {opacity:1;transform:translateY(0)}
}

.studio-section-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:8px;
  font:600 13px/1.2 'Poppins', inherit;
  color:var(--text);
  cursor:pointer;
  transition:background .12s;
}
.studio-section-item:hover{
  background:var(--surface);
}
.studio-section-item-name{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Active item — green dot + check icon */
.studio-section-item.is-active{
  background:color-mix(in srgb, var(--success) 8%, transparent);
}
.studio-section-item.is-active .studio-section-item-name{
  color:var(--success);
}

.studio-section-item-check{
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--success);
  color:#fff;
  flex-shrink:0;
}

/* Empty state inside menu */
.studio-section-empty{
  padding:14px 12px;
  text-align:center;
  font:500 12px/1.4 'Poppins', inherit;
  color:var(--subtle);
}

/* Render progress modal styles MOVED to /static/css/render-modal.css
   (separate file so the modal can iterate independently). */
/* ══════════════════════════════════════════════════════════════
   SEQUENCE — label+value cards with soft tinted bg per --seq-accent.
   Tools (rename/delete) live INSIDE each box, bottom-right.
   ══════════════════════════════════════════════════════════════ */
.studio-seq{
  display:flex; flex-direction:column;
  padding:16px !important;
  overflow:visible;
}

/* Inner body -- fills the seq card; holds the track or empty state */
.studio-seq-body{
  flex:1 1 0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.studio-seq-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px;
}
.studio-seq-head .studio-card-title{ margin:0 }
.studio-seq-actions{ display:flex; align-items:center; gap:8px }

.studio-seq-track{
  display:flex; align-items:stretch; gap:4px;
  min-width:0; margin-bottom:10px;
}

/* Base box — flat, uses card bg; tinted variant layers accent softly on top */
.studio-seq-box{
  flex:1 1 0; min-width:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  padding:18px 18px 16px;
  transition:border-color .15s ease, background .15s ease;
  cursor:pointer;
  position:relative;
  display:flex; flex-direction:column; gap:0;
  overflow:hidden;
  min-height:96px;
}
.studio-seq-box:hover{ border-color:var(--border-hover) }

/* Tinted variant — each type gets a soft color washed in */
.studio-seq-box.seq-tint{
  background:color-mix(in srgb, var(--seq-accent) 6%, var(--card));
  border-color:color-mix(in srgb, var(--seq-accent) 22%, var(--border));
}
.studio-seq-box.seq-tint:hover{
  background:color-mix(in srgb, var(--seq-accent) 10%, var(--card));
  border-color:color-mix(in srgb, var(--seq-accent) 40%, var(--border));
}

.studio-seq-box.is-empty{
  background:var(--surface); /* match the empty player surface, theme-aware */
  border-color:color-mix(in srgb, var(--seq-accent) 22%, var(--border)); /* solid border, same treatment as the filled sequence boxes */
  cursor:pointer;
  padding:14px 16px;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.studio-seq-empty-icon{ color:var(--muted); margin-bottom:6px; }

.studio-seq-box-label{
  font-size:10.5px; font-weight:700;
  color:var(--seq-accent, var(--muted));
  text-transform:uppercase; letter-spacing:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.3;
  margin-bottom:6px;
  padding-right:50px; /* space for tools at top-right */
}
html[dir="rtl"] .studio-seq-box-label{
  padding-right:0; padding-left:44px;
}
.studio-seq-box-value{
  font-size:14px; font-weight:600;
  color:var(--heading);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:-.01em;
}
.studio-seq-box-meta{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.3;
  margin-top:4px;
  letter-spacing:.2px;
}

/* Tools INSIDE box, bottom-right, tiny */

/* Expanded state — full-row width */
.studio-seq-box.is-expanded{
  flex:1 1 100%;
  cursor:default;
  padding:18px 18px 16px;
  gap:0;
}

.studio-seq-rename{
  height:20px;
  padding:0 6px;
  margin-left:-6px;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  line-height:1.3;
  background:transparent;
  border:1px dashed transparent;
  border-radius:5px;
  color:var(--seq-accent, var(--primary));
  width:100%;
  max-width:calc(100% - 58px);
  margin-bottom:6px;
  font-family:inherit;
}
.studio-seq-rename:hover{
  border-color:var(--border);
}
.studio-seq-rename:focus{
  outline:none;
  border-color:var(--primary);
  border-style:solid;
  background:var(--card);
  box-shadow:0 0 0 3px var(--primary-soft);
}
html[dir="rtl"] .studio-seq-rename{
  margin-left:0;
  margin-right:-6px;
}
.studio-seq-dur-wrap{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--muted);
  margin-top:4px;
}
.studio-seq-durinput{
  width:60px; height:28px; padding:0 8px;
  text-align:center;
  font-size:13px; font-weight:600;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.studio-seq-durinput::-webkit-outer-spin-button,
.studio-seq-durinput::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.studio-seq-durinput:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}

/* Music bar — plain card */
.studio-seq-music{
  position:relative;   /* merged from former duplicate one-liner */
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  padding:14px 16px;
  display:flex; align-items:center; gap:10px;
  color:var(--muted);
  font-size:13px; font-weight:500;
}
.studio-seq-music svg{ flex-shrink:0 }
.studio-seq-music:not(.is-loaded){ cursor:pointer; }
.studio-seq-music--empty{ justify-content:center; }
.studio-seq-music-add{ display:inline-flex; align-items:center; color:var(--muted); }

/* Filename line — subtle, truncated with ellipsis */
.studio-seq-box-filename{
  font-size:11.5px;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  line-height:1.3;
}

/* Tool buttons (rename/delete) — top-right of each box, visible on hover */
.studio-seq-box-tools{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:4px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:2;
}
html[dir="rtl"] .studio-seq-box-tools{
  right:auto;
  left:10px;
}
.studio-seq-box:hover .studio-seq-box-tools,
.studio-seq-box.is-expanded .studio-seq-box-tools{
  opacity:1;
  pointer-events:auto;
}
.studio-seq-tool{
  width:22px;
  height:22px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--muted);
  cursor:pointer;
  transition:color .12s, background .12s, border-color .12s;
}
.studio-seq-tool:hover{
  color:var(--text);
  border-color:var(--border-hover);
}
.studio-seq-tool.studio-seq-tool-danger:hover{
  color:var(--danger);
  border-color:var(--danger);
  background:var(--danger-bg);
}


/* ═══ Smart Crop AI panel ════════════════════════════════════
   Sits below the Settings card. Visible only when the Smart Crop
   toggle is ON. Three states: busy (skeleton), error, ready.
   Uses theme tokens exclusively — adapts to light/dark.
*/
.studio-sc{
  margin-top:12px;
  padding:14px 16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  gap:12px;
  animation:scFadeIn .25s ease-out;
}
.studio-sc[hidden]{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
@keyframes scFadeIn{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Header row — dot + title + meta */
.studio-sc-head{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}
.studio-sc-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--muted);
  flex-shrink:0;
}
.studio-sc-dot.is-busy{
  background:var(--primary);
  animation:scPulse 1.4s ease-in-out infinite;
}
.studio-sc-dot.is-ready{ background:var(--success); }
.studio-sc-dot.is-error{ background:var(--danger);  }
@keyframes scPulse{
  0%,100% { opacity:1;   transform:scale(1);   }
  50%     { opacity:.4; transform:scale(.85); }
}
.studio-sc-title{
  font-weight:500;
  color:var(--text);
  letter-spacing:.01em;
}
/* Error message */
.studio-sc-error{
  font-size:12.5px;
  color:var(--danger);
  background:var(--danger-bg);
  padding:8px 10px;
  border-radius:8px;
  line-height:1.45;
}


/* ══════════════════════════════════════════════════════════════
   SMART CROP PROGRESS OVERLAY
   Sits on top of the player while analyzing / generating.
   Uses theme tokens so it matches light/dark. Branded spinner
   from wr-spinner.js + animated progress bar.
   ══════════════════════════════════════════════════════════════ */
.studio-sc-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  z-index:50;
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:auto;
}
.studio-sc-overlay.is-visible{opacity:1}
.studio-sc-overlay[hidden]{display:none !important}

.studio-sc-overlay-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:min(360px, 78%);
  text-align:center;
}
.studio-sc-overlay-spinner{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
}
.studio-sc-overlay-title{
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.studio-sc-overlay-stage{
  font-size:16px;
  font-weight:600;
  color:var(--heading);
  line-height:1.3;
}
.studio-sc-overlay-bar{
  width:100%;
  height:4px;
  background:var(--border);
  border-radius:3px;
  overflow:hidden;
  position:relative;
}
.studio-sc-overlay-bar-fill{
  height:100%;
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  border-radius:3px;
  width:0%;
  transition:width .4s cubic-bezier(.4, .0, .2, 1);
  position:relative;
}
.studio-sc-overlay-bar-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation:sc-shimmer 1.5s linear infinite;
}
@keyframes sc-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.studio-sc-overlay-meta{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.4;
  min-height:17px;
}


/* ═══════════════════════════════════════════════════════════════
   STUDIO — Library Modal (media picker — wider, custom header,
   scrollable body). Replaces inline styles in module_base.html.
   ═══════════════════════════════════════════════════════════════ */
.studio-lib-modal{
  max-width:760px;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-height:88vh;
  text-align:left;
}
.studio-lib-modal .modal-header{
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
  flex-direction:row;
  text-align:left;
}
.studio-lib-modal .modal-titlewrap{
  flex:1;
  min-width:0;
}
.studio-lib-modal .modal-title{
  margin:0 0 2px;
  font-size:16px;
}
.studio-lib-modal .modal-sub{
  margin:0;
  font-size:12.5px;
  color:var(--muted);
}
.studio-lib-modal .modal-close{
  width:32px;
  flex:0 0 32px;
  height:32px;
}
.studio-lib-modal .modal-body{
  padding:20px;
  min-height:52vh;
  flex:1 1 auto;
  overflow-y:auto;
}

/* Library picker -- multi-select footer, selected state, loading */
.studio-lib-footer{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  border-top:1px solid var(--border);
  flex:0 0 auto;
}
.studio-lib-count{ font-size:13px; color:var(--muted); }
.studio-lib-actions{
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.studio-lib-clear{
  border:0;
  background:none;
  cursor:pointer;
  color:var(--muted);
  font-size:13px;
  padding:6px 10px;
  border-radius:8px;
  transition:color .15s, background .15s;
}
.studio-lib-clear:hover{ color:var(--text); background:var(--surface); }
.studio-lib-modal .file-card{ position:relative; cursor:pointer; }
.studio-lib-check{
  position:absolute;
  inset-block-start:8px;
  inset-inline-end:8px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  border:1.5px solid var(--border);
  color:transparent;
  opacity:0;
  transform:scale(.85);
  transition:opacity .15s ease, transform .15s ease, background .15s, border-color .15s, color .15s;
  pointer-events:none;
  z-index:2;
}
.studio-lib-modal .file-card:hover .studio-lib-check{ opacity:1; }
.studio-lib-modal .file-card.is-selected{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; }
.studio-lib-modal .file-card.is-selected .studio-lib-check{
  opacity:1;
  transform:scale(1);
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.studio-lib-check svg{ width:14px; height:14px; }
.studio-lib-modal .file-card.is-added{ cursor:default; }
.studio-lib-modal .file-card.is-added .studio-lib-check{ display:none; }
.studio-lib-added{
  position:absolute;
  inset-block-start:8px;
  inset-inline-end:8px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2px;
  padding:3px 8px;
  border-radius:7px;
  background:var(--card);
  border:1px solid var(--primary);
  color:var(--primary);
  z-index:3;
  pointer-events:none;
}
.studio-lib-added svg{ width:13px; height:13px; }
.studio-lib-added-x{
  pointer-events:auto;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-inline-start:2px;
  padding:0;
  width:16px;
  height:16px;
  border:0;
  border-radius:4px;
  background:none;
  color:var(--primary);
  opacity:.7;
  transition:opacity .15s, background .15s;
}
.studio-lib-added-x:hover{ opacity:1; background:var(--primary-soft); }
.studio-lib-added-x svg{ width:12px; height:12px; }
.studio-lib-loading{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40vh;
}
.studio-lib-spinner{
  width:32px;
  height:32px;
  border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--primary);
  animation:studioLibSpin .7s linear infinite;
}
@keyframes studioLibSpin{ to{ transform:rotate(360deg); } }

/* Music bar: loaded state + waveform + controls */
.studio-seq-music.is-loaded{
  color:var(--text);
  padding:10px 12px;
}
.studio-seq-music-lead{ display:flex; align-items:center; gap:8px; }
.studio-seq-music-actions{
  display:flex; align-items:center; gap:8px;
  margin-inline-start:auto;
}
.studio-seq-music-play,
.studio-seq-music-remove{
  flex-shrink:0;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.studio-seq-music-play:hover{ border-color:var(--primary); color:var(--primary); }
.studio-seq-music-remove:hover{ border-color:var(--danger); color:var(--danger); }
.studio-seq-music-wave{
  flex:1 1 auto; min-width:0;
  height:36px; display:block;
  cursor:pointer;
}
.studio-seq-music-name{
  flex-shrink:0; max-width:180px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; color:var(--muted);
}

/* Music preview / edit modal */
.studio-music-overlay{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  opacity:0; transition:opacity .2s ease;
  padding:20px;
}
.studio-music-overlay.is-open{ opacity:1; }
.studio-music-modal{
  width:100%; max-width:520px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg, 16px);
  padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  transform:translateY(8px); transition:transform .2s ease;
}
.studio-music-overlay.is-open .studio-music-modal{ transform:translateY(0); }
.studio-music-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.studio-music-modal-title{ font-size:15px; font-weight:600; color:var(--heading); }
.studio-music-modal-close{
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.studio-music-modal-close:hover{ color:var(--danger); border-color:var(--danger); }
.studio-music-modal-name{
  font-size:13px; color:var(--muted);
  margin-bottom:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.studio-music-modal-wave{
  width:100%; height:96px; display:block;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
}
.studio-music-modal-row{
  display:flex; align-items:center; gap:12px;
  margin-top:14px;
}
.studio-music-modal-hint{ font-size:12px; color:var(--subtle); }
/* end music styles */
.studio-seq-music-icon{ flex-shrink:0; display:inline-flex; align-items:center; color:var(--muted); }
.studio-seq-timeline{ position:relative; display:grid; grid-template-columns:56px 1fr 56px; gap:10px; align-items:stretch; }
.studio-seq-main{ flex:1 1 0; min-width:0; position:relative; }
.studio-seq-playhead{ position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px; background:var(--primary); pointer-events:none; z-index:6; box-shadow:0 0 6px rgba(0,128,255,.45); }
.studio-seq-playhead::before{ content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%); border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid var(--primary); }

/* Sequence add (+) box — opens Library/Upload menu */
.studio-seq-add{ flex:0 0 auto; width:56px; min-height:96px; align-self:flex-start; position:relative; display:flex; }
.studio-seq-add-btn{ flex:1; width:100%; display:flex; align-items:center; justify-content:center; background:var(--card); border:1.5px dashed var(--border); border-radius:4px; color:var(--muted); cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.studio-seq-add-btn:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }
.studio-seq-add-menu{ display:none; position:absolute; bottom:calc(100% + 8px); inset-inline-end:0; min-width:160px; background:var(--card-elevated, var(--card)); border:1px solid var(--border); border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.30); padding:6px; z-index:20; }
[data-seq-add].is-open .studio-seq-add-menu{ display:block; }
.studio-seq-add-item{ display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; background:transparent; border:0; border-radius:8px; color:var(--text); font-size:13px; text-align:start; cursor:pointer; transition:background .12s ease, color .12s ease; }
.studio-seq-add-item:hover{ background:var(--primary-soft); color:var(--primary); }
.studio-seq-add-item svg{ flex-shrink:0; color:var(--muted); }
.studio-seq-add-item:hover svg{ color:var(--primary); }
/* Left-column indicator boxes: cover / voice / music (icon + on/dim) */
.studio-seq-sideicon{ display:flex; align-items:center; justify-content:center; min-height:96px; border:1.5px solid var(--border); border-radius:4px; background:var(--card); color:var(--subtle); transition:color .15s, border-color .15s, background .15s, opacity .15s; }
.studio-seq-sideicon--audio{ min-height:0; align-self:stretch; }
.studio-seq-sideicon:not(.is-on){ opacity:.4; }
.studio-seq-sideicon--cover.is-on{ --c:var(--primary); }
.studio-seq-sideicon--cover{ cursor:pointer; }
.studio-seq-sideicon--voice.is-on{ --c:var(--success); }
.studio-seq-sideicon--music.is-on{ --c:var(--warning); }
.studio-seq-sideicon.is-on{ color:var(--c); border-color:color-mix(in srgb, var(--c) 40%, var(--border)); background:color-mix(in srgb, var(--c) 9%, var(--card)); }

/* Music bar add (+) — compact, opens the shared Library/Upload menu */
.studio-music-add{ position:relative; margin-inline-start:auto; display:inline-flex; }
.studio-music-add-btn{ width:40px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1.5px dashed var(--border); border-radius:10px; background:var(--card); color:var(--muted); cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.studio-music-add-btn:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }

/* Grid sequence: zero the track's own bottom margin (grid gap handles it) + audio add box matches its row height */
.studio-seq-timeline > .studio-seq-track{ margin-bottom:0; }
.studio-seq-add--audio{ align-self:stretch; min-height:0; }
.studio-seq-music-tools{ position:absolute; top:50%; transform:translateY(-50%); inset-inline-end:12px; display:flex; gap:4px; opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:2; }
.studio-seq-music.is-loaded:hover .studio-seq-music-tools{ opacity:1; pointer-events:auto; }

/* Music = soft orange, Voice Over = soft green (theme tints, visible at load) */
#mod-music.studio-seq-music{ background:color-mix(in srgb, var(--warning) 9%, var(--card)); border-color:color-mix(in srgb, var(--warning) 30%, var(--border)); }
#mod-voice.studio-seq-music{ background:color-mix(in srgb, var(--success) 9%, var(--card)); border-color:color-mix(in srgb, var(--success) 30%, var(--border)); }


/* Per-clip overlay button (inside expanded clip box) */
.studio-seq-overlay{ display:inline-flex; align-items:center; gap:6px; max-width:100%; margin-top:8px; padding:6px 10px; border:1.5px dashed var(--border); border-radius:8px; background:var(--card); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.studio-seq-overlay:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }
.studio-seq-overlay svg{ flex:0 0 auto; }
.studio-seq-overlay span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-seq-overlay.has-overlay{ border-style:solid; border-color:color-mix(in srgb, var(--primary) 40%, var(--border)); color:var(--primary); background:var(--primary-soft); }

/* Per-clip template picker cards (modal grid) */
#mod-cliptpl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.cliptpl-card{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 12px; border:1.5px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; text-align:center; }
.cliptpl-card:hover{ border-color:var(--primary); background:var(--primary-soft); }
.cliptpl-card.is-selected{ border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 3px var(--primary-soft); }
.cliptpl-card-thumb{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:color-mix(in srgb, var(--primary) 10%, var(--card)); color:var(--primary); }
.cliptpl-card-name{ font-size:13px; font-weight:600; color:var(--heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.cliptpl-card-kind{ font-size:11px; color:var(--subtle); text-transform:uppercase; letter-spacing:.3px; }


/* Per-clip overlay fields header (in Dynamic Fields panel) */


/* Clip duration mode toggle (Manual / Auto) */
.studio-seq-durmode{ display:inline-flex; gap:0; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:6px; }
.studio-seq-durmode-btn{ padding:4px 10px; font-size:11px; font-weight:600; border:0; background:var(--card); color:var(--muted); cursor:pointer; transition:background .15s ease, color .15s ease; }
.studio-seq-durmode-btn + .studio-seq-durmode-btn{ border-inline-start:1.5px solid var(--border); }
.studio-seq-durmode-btn.is-on{ background:var(--primary-soft); color:var(--primary); }
.studio-seq-dur-input-row{ display:flex; align-items:center; gap:6px; }
.studio-seq-durinput:disabled{ opacity:.55; cursor:not-allowed; }


/* hidden law: attribute always wins (library picker fix 2026-07-19) */
.empty-state[hidden]{ display:none !important; }


/* ── Sequence clip thumbnails (Roadmap #13, 2026-07-28) ─────────────
   Display-only: background-image ONLY, so .seq-tint's background
   shorthand color stays underneath. Card-mix scrim keeps the label,
   filename and duration readable in both themes. No thumb → no class
   → box renders exactly as before (engineered fallback). */
.studio-seq-box.has-thumb{
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--card) 62%, transparent),
      color-mix(in srgb, var(--card) 82%, transparent)
    ),
    var(--seq-thumb);
  /* Filmstrip (the Premiere principle): the thumb keeps its natural
     aspect (auto 100%) and TILES horizontally across wide boxes —
     zero zoom, zero crop at any flex width. The scrim layer still
     stretches over the whole box (100% 100%). Per-layer values are
     comma-matched to the background-image stack above. */
  background-size:100% 100%, auto 100%;
  background-position:left center;
  background-repeat:no-repeat, repeat-x;
}
/* hover image-change removed 2026-07-28: the box's `background .15s`
   transition covers background-image, so swapping the gradient stack
   animated as a zoom/blur. Scrim is constant; hover feedback stays via
   the existing border-color rule. */