/* 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:var(--content-pad) !important;  /* 32px instead of default 64px */
}

/* ═══════════════════════════════════════════════════════════════
   STUDIO — integrates with theme.css (no overrides, minimal CSS)
   Uses .card, .stat-label, tokens from theme.
   ═══════════════════════════════════════════════════════════════ */

/* Studio layout wrapper — full viewport height, no page scroll.
   Child of .main-content, inherits max-width:1280px + margin:auto from theme. */
.studio-layout{
  display:flex;
  flex-direction:column;
  gap:var(--space-grid);
  /* 100vh minus: topbar + main-content's top padding (32) + bottom padding (64) */
  height:calc(100vh - var(--topbar-h) - 64px);
  min-height:500px;
  overflow:hidden;
}

/* Row 1: Left / Player / Right */
.studio-row1{
  display:grid;
  grid-template-columns:minmax(220px, 260px) 1fr minmax(220px, 260px);
  gap:var(--space-grid);
  align-items:stretch;
  flex-shrink:0;
  min-height:0;
}

/* 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:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:var(--card);
  border-top:1px solid var(--border);
  flex-shrink:0;
  min-height:48px;
}

/* Left group: play button + time */
.studio-pb-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.studio-pb-btn{
  width:32px;
  height:32px;
  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{
  margin-left:1px;  /* visual center for play icon */
}

.studio-pb-time{
  font:600 12px/1 'Poppins', inherit;
  color:var(--text);
  letter-spacing:.3px;
  display:flex;
  align-items:center;
  gap:4px;
  font-variant-numeric:tabular-nums;
}
.studio-pb-time-sep{
  color:var(--subtle);
}

/* Middle: progress bar (click-scrubbable area) */
.studio-pb-progress{
  flex:1;
  height:4px;
  background:var(--border);
  border-radius:2px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  min-width:0;
}
.studio-pb-progress-fill{
  height:100%;
  width:0;
  background:var(--primary);
  border-radius:2px;
  transition:width .1s linear;
}

/* Right: format chips */
.studio-pb-right{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.studio-fmt{
  padding:5px 10px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  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;
  flex-wrap:wrap;
  flex:1;
  min-width:0;
  min-height:38px;
}
.studio-rb-name{ min-width:200px }

/* ── Responsive ── */
@media (max-width: 1024px){
  .studio-layout{ height:auto; min-height:0; overflow:visible }
  .studio-row1{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"player player" "left right";
  }
  .studio-player{grid-area:player}
  .studio-side-left{grid-area:left}
  .studio-side-right{grid-area:right}
}

@media (max-width: 640px){
  .studio-row1{ grid-template-columns:1fr; grid-template-areas:"player" "left" "right" }
  .studio-rb{ flex-wrap:wrap }
  .studio-rb-name{ min-width:100% }
}

/* ── Settings rows (extends theme's .notif-row pattern with icon) ── */
.studio-notif-list{
  gap:10px;                    /* slightly tighter than default 14px — studio is compact */
}
.studio-setting-text{
  display:flex;
  align-items:center;
  gap:10px;
  font:500 13px/1.3 'Poppins', inherit;
  color:var(--text);
}
.studio-setting-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  color:var(--muted);
  background:var(--card);
  flex-shrink:0;
  transition:color .15s, background .15s;
}
.notif-row:has(input:checked) .studio-setting-icon{
  color:var(--primary);
  background:color-mix(in srgb, var(--primary) 12%, transparent);
}

/* 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{
  width:100%;
  height:100%;
  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:10px;
  padding:24px;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(4px);
}
.studio-upload-progress-name{
  font:600 13px/1.3 'Poppins', inherit;
  color:#fff;
  text-align:center;
  max-width:80%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.studio-upload-progress-bar{
  width:min(320px, 70%);
  height:6px;
  background:rgba(255,255,255,0.15);
  border-radius:3px;
  overflow:hidden;
}
.studio-upload-progress-fill{
  height:100%;
  width:0;
  background:var(--primary);
  border-radius:3px;
  transition:width .2s ease-out;
}
.studio-upload-progress-pct{
  font:700 12px/1 'Poppins', inherit;
  color:#fff;
  letter-spacing:.3px;
  font-variant-numeric:tabular-nums;
}

/* ── 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;
}
.studio-picked-name{
  font:500 11px/1.3 'Poppins', inherit;
  color:var(--muted);
  padding:4px 8px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   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);
}

.notif-row.is-unavailable{
  opacity:.45;
  cursor:not-allowed;
}
.notif-row.is-unavailable .switch{
  pointer-events:none;
}

/* 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{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  padding:24px !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:10px;
  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:14px;
  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{
  border-style:dashed;
  cursor:default;
  padding:14px 16px;
}

.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{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  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 }

/* 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;
}
.studio-sc-meta{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

/* Skeleton — appears while AI is working */
.studio-sc-skeleton{
  height:54px;
  border-radius:var(--radius);
  background:linear-gradient(
    90deg,
    var(--card-elevated, var(--surface)) 0%,
    var(--surface) 50%,
    var(--card-elevated, var(--surface)) 100%
  );
  background-size:200% 100%;
  animation:scShimmer 1.2s ease-in-out infinite;
}
@keyframes scShimmer{
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* 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;
}

/* Plans — one row per format showing strategy */
.studio-sc-plans{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.studio-sc-plan{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:12.5px;
}
.studio-sc-plan-fmt{
  font-weight:500;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.studio-sc-plan-strategy{
  font-size:11.5px;
  padding:3px 9px;
  border-radius:999px;
  font-weight:500;
  letter-spacing:.01em;
  text-transform:capitalize;
}
.studio-sc-plan-strategy.is-smart{
  color:var(--success);
  background:var(--success-bg);
}
.studio-sc-plan-strategy.is-fallback{
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
}


/* ══════════════════════════════════════════════════════════════
   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;
}
.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;
  max-height:65vh;
  overflow-y:auto;
}