:root{
  --bg:#070710;--surface:#0d0d1c;--card:#101020;--border:rgba(255,255,255,.08);
  --accent:#f0a500;--accent2:#f07800;--ok:#30d984;--danger:#ff4757;
  --text:#edeaf5;--muted:#8c88a0;--muted2:#4a4660;
  /* radius scale — reduced for tool-first feel */
  --r:8px;--r2:12px;--r3:16px;--r-btn:8px;--r-badge:4px;
  /* shadow — reduced */
  --shadow:0 4px 24px rgba(0,0,0,.42);
  /* surface hierarchy */
  --surface-2:rgba(14,14,28,.92);--surface-3:rgba(10,10,20,.72);
  /* border scale */
  --border-subtle:rgba(255,255,255,.05);--border-standard:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.15);
  /* sticky CTA height */
  --cta-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:
  radial-gradient(ellipse 80vw 60vh at 20% 10%,rgba(240,165,0,.06) 0%,transparent 70%),
  radial-gradient(ellipse 60vw 40vh at 80% 80%,rgba(255,107,53,.05) 0%,transparent 70%);
  pointer-events:none;z-index:0}
/* extra bottom padding so content not hidden under sticky CTA */
.wrap{position:relative;z-index:1;max-width:540px;margin:0 auto;padding:20px 16px calc(var(--cta-h) + 24px)}

/* ── Header ──────────────────────────────────────────────────────────────── */
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo span{-webkit-text-fill-color:var(--muted);font-weight:400}
.version{font-family:'DM Mono',monospace;font-size:.65rem;color:var(--muted)}

/* ── Cards & labels ──────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:18px 20px;margin-bottom:12px}
.label{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:block}

/* ── Sections ────────────────────────────────────────────────────────────── */
section{display:none}
section.active{display:block}
/* FIX-C: overlay upload progress on top of existing content */
#sec-loading.overlay-mode{
  display:block;position:fixed;inset:0;z-index:200;
  background:rgba(5,5,16,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
}
#sec-loading.overlay-mode .card{width:min(320px,88vw)}

/* ── Resume banner ───────────────────────────────────────────────────────── */
#resume-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:300;background:rgba(18,16,32,.96);border-bottom:1px solid rgba(240,165,0,.3);padding:10px 16px;font-size:.8rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rb-row{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* ── Upload zone ─────────────────────────────────────────────────────────── */
#upload-zone{position:relative;border:2px dashed var(--border);border-radius:var(--r2);padding:40px 20px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:var(--card);margin-bottom:12px}
#upload-zone:hover,#upload-zone.drag{border-color:var(--accent);background:rgba(240,165,0,.04)}
#upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-icon{font-size:2.5rem;margin-bottom:12px;display:block;transition:transform .3s}
#upload-zone:hover .upload-icon{transform:translateY(-4px)}
.upload-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;margin-bottom:4px}
.upload-sub{font-size:.8rem;color:var(--muted)}
.upload-limit{font-size:.7rem;color:var(--muted2);margin-top:6px;font-family:'DM Mono',monospace}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.progress-wrap{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:8px}
.progress-bar{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s ease;width:0%}
.progress-msg{font-size:.75rem;color:var(--muted);font-family:'DM Mono',monospace}

/* Upload loading redesign */
#sec-loading.active{
  width:100%;
  min-height:clamp(390px,calc(100vh - 140px),660px);
  display:grid;
  align-content:center;
  justify-items:center;
  gap:14px;
  padding:clamp(18px,5vw,40px) max(16px,env(safe-area-inset-left)) clamp(24px,7vw,56px);
}
#sec-loading.overlay-mode{
  display:grid;
  align-content:center;
  justify-items:center;
  gap:14px;
  padding:clamp(18px,5vw,40px) max(16px,env(safe-area-inset-left)) clamp(24px,7vw,56px);
}
#sec-loading .upload-loading-card{
  position:relative;
  width:min(560px,calc(100vw - 32px));
  overflow:hidden;
  border-radius:22px;
  padding:clamp(18px,4.8vw,28px);
  background:
    radial-gradient(90% 54% at 50% 0%,rgba(245,158,11,.18),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.018)),
    rgba(10,10,17,.86);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    0 24px 70px rgba(0,0,0,.48),
    0 0 0 1px rgba(245,158,11,.07),
    inset 0 1px 0 rgba(255,255,255,.08);
}
#sec-loading.overlay-mode .upload-loading-card{
  width:min(560px,calc(100vw - 32px));
}
#sec-loading .vm-brand-note-motif--loading{
  width:min(500px,calc(100vw - 32px));
  height:48px;
  margin:0 auto;
  padding:0;
  opacity:.72;
}
#sec-loading .vm-brand-note-motif--loading::before{
  inset:3px 18% auto;
  height:38px;
  opacity:.52;
}
#sec-loading .vm-brand-note-motif--loading .vm-brand-note-wave{
  width:min(320px,78%);
  height:28px;
  gap:3px;
}
#sec-loading .vm-brand-note-motif--loading .vm-brand-note-wave i{
  width:3px;
  height:calc(4px + var(--h) * .62px);
  opacity:.58;
}
#sec-loading .vm-brand-note-motif--loading .vm-brand-note-dot{
  width:4px;
  height:4px;
  opacity:.78;
}
#sec-loading .upload-loading-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(255,206,128,.11),transparent);
  width:42%;
  transform:translateX(-110%);
  animation:uploadLoadingScan 5.8s ease-in-out infinite;
}
#sec-loading .upload-loading-card::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,218,156,.58),transparent);
  box-shadow:0 0 22px rgba(245,158,11,.25);
  opacity:.78;
}
#sec-loading .upload-loading-shell,
#sec-loading .upload-loading-head,
#sec-loading .upload-loading-copy,
#sec-loading .upload-loading-progress,
#sec-loading .upload-loading-stages{
  position:relative;
  z-index:1;
}
#sec-loading .upload-loading-shell{
  min-height:clamp(92px,22vw,132px);
  display:grid;
  place-items:center;
  margin-bottom:clamp(18px,4vw,24px);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 32%,rgba(245,158,11,.16),transparent 10rem),
    linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.014)),
    rgba(5,5,9,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#sec-loading .upload-loading-wave{
  width:min(360px,82%);
  height:46px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
#sec-loading .upload-loading-wave i{
  width:4px;
  height:calc(8px + var(--h) * 1px);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,238,202,.86),rgba(240,165,0,.12));
  box-shadow:0 0 14px rgba(245,158,11,.12);
  animation:uploadLoadingBeat 1.9s ease-in-out infinite;
  animation-delay:calc(var(--d) * -95ms);
}
#sec-loading .upload-loading-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
#sec-loading .upload-loading-eyebrow,
#sec-loading .upload-loading-chip{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  border-radius:999px;
  font-family:'DM Mono',monospace;
  font-size:.62rem;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
#sec-loading .upload-loading-eyebrow{
  gap:8px;
  color:rgba(255,232,184,.82);
}
#sec-loading .upload-loading-chip{
  padding:0 10px;
  color:rgba(255,247,232,.62);
  border:1px solid rgba(245,158,11,.16);
  background:rgba(245,158,11,.07);
}
#sec-loading .upload-loading-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(245,158,11,.13),0 0 18px rgba(245,158,11,.35);
}
#sec-loading .upload-loading-copy{
  display:grid;
  gap:8px;
  margin-bottom:20px;
}
#sec-loading .upload-loading-copy h2{
  margin:0;
  font-family:'Syne',sans-serif;
  font-size:clamp(1.42rem,7vw,2.05rem);
  line-height:1.04;
  font-weight:800;
  color:#fff7ea;
  letter-spacing:0;
}
#sec-loading .upload-loading-copy p{
  max-width:38rem;
  margin:0;
  color:rgba(237,234,245,.68);
  font-size:clamp(.88rem,3.6vw,.98rem);
  line-height:1.5;
}
#sec-loading .upload-loading-progress{
  display:grid;
  gap:10px;
}
#sec-loading .progress-wrap{
  height:8px;
  margin:0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.46);
}
#sec-loading .progress-bar,
#sec-loading #load-bar{
  min-width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#f0a500,#ffbf4d,#f07800);
  box-shadow:0 0 18px rgba(245,158,11,.24);
}
#sec-loading #load-msg{
  min-height:1.35em;
  font-size:.8rem;
  line-height:1.4;
  color:rgba(255,247,232,.72);
  letter-spacing:.02em;
}
#sec-loading .upload-loading-stages{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:20px;
}
#sec-loading .upload-loading-stages span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:rgba(237,234,245,.58);
  font-family:'DM Mono',monospace;
  font-size:.64rem;
  line-height:1.15;
  text-align:center;
}
@media (max-width:420px){
  #sec-loading.active,
  #sec-loading.overlay-mode{
    min-height:clamp(360px,calc(100vh - 124px),620px);
    padding:14px 16px 28px;
  }
  #sec-loading .upload-loading-card{
    border-radius:18px;
    padding:16px;
  }
  #sec-loading .vm-brand-note-motif--loading{
    width:min(320px,calc(100vw - 32px));
    height:42px;
    opacity:.76;
  }
  #sec-loading .vm-brand-note-motif--loading::before{
    inset:2px 12% auto;
    height:34px;
  }
  #sec-loading .vm-brand-note-motif--loading .vm-brand-note-wave{
    width:86%;
    height:26px;
  }
  #sec-loading .vm-brand-note-motif--loading .vm-brand-note-wave i{
    width:3px;
    opacity:.62;
  }
  #sec-loading .upload-loading-shell{
    min-height:88px;
    border-radius:15px;
    margin-bottom:16px;
  }
  #sec-loading .upload-loading-wave{
    width:88%;
    height:34px;
    gap:4px;
  }
  #sec-loading .upload-loading-wave i{
    width:3px;
  }
  #sec-loading .upload-loading-head{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  #sec-loading .upload-loading-stages{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:16px;
  }
  #sec-loading .upload-loading-stages span{
    min-height:32px;
    font-size:.6rem;
  }
}
@media (min-width:900px){
  #sec-loading.active{
    min-height:clamp(430px,calc(100vh - 150px),680px);
  }
}
@media (prefers-reduced-motion:reduce){
  #sec-loading .upload-loading-card::before,
  #sec-loading .upload-loading-wave i{
    animation:none!important;
  }
}
@keyframes uploadLoadingScan{
  0%{transform:translateX(-110%);opacity:.12}
  48%,58%{opacity:.66}
  100%{transform:translateX(260%);opacity:.12}
}
@keyframes uploadLoadingBeat{
  0%,100%{transform:scaleY(.7);opacity:.48}
  50%{transform:scaleY(1.08);opacity:.96}
}

/* ══════════════════════════════════════════════════════════════════════════
   VIDEO STAGE
   ══════════════════════════════════════════════════════════════════════════ */
#video-stage{position:relative;width:100%;aspect-ratio:16/9;max-height:62vh;border-radius:var(--r3);overflow:hidden;background:#050510;margin-bottom:10px;box-shadow:0 0 0 1px var(--border),0 16px 48px rgba(0,0,0,.6)}
.vs-state{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center}
.vs-state.vs-active{display:flex}
#vs-empty{background:var(--card);border-radius:var(--r3);gap:10px;animation:fadeIn .4s ease}
.vs-empty-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,rgba(240,165,0,.12),rgba(255,107,53,.08));border:1px solid rgba(240,165,0,.18);display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.vs-empty-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;color:var(--text)}
.vs-empty-sub{font-size:.72rem;color:var(--muted);text-align:center;padding:0 24px;line-height:1.5}
#vs-rendering{background:rgba(5,5,16,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--r3);gap:14px;z-index:5;animation:fadeIn .25s ease}
#render-pct{font-family:'Syne',sans-serif;font-weight:800;font-size:2.4rem;line-height:1;background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.vs-render-bar-wrap{width:min(200px,55%);height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
#render-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;transition:width .4s ease;width:0%}
#render-msg{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--muted);letter-spacing:.06em}
.vs-rendering-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.2s ease-in-out infinite;position:absolute;top:16px;left:50%;transform:translateX(-50%)}
#vs-ready{display:none;background:#000}
#vs-ready.vs-active{display:flex;align-items:center;justify-content:center}
#result-video{width:100%;height:100%;object-fit:contain;display:block;border-radius:var(--r3)}
#vs-ready .result-provenance-pill{position:absolute;left:50%;right:auto;top:auto;bottom:clamp(56px, 14%, 96px);transform:translateX(-50%);max-width:min(82%, 560px);padding:4px 10px;border-radius:999px;font-size:clamp(10px, 1.5vw, 12px);line-height:1.25;color:rgba(255,255,255,.68);background:rgba(6,7,10,.34);border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;z-index:3}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){#vs-ready .result-provenance-pill{background:rgba(6,7,10,.55)}}
#vs-error{background:rgba(255,71,87,.05);border-radius:var(--r3);gap:10px}
.vs-error-icon{font-size:2rem}
.vs-error-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;color:var(--danger)}
.vs-error-sub{font-size:.72rem;color:var(--muted)}

/* ── V3-2 Overlay icons ──────────────────────────────────────────────────── */
#video-actions{position:absolute;top:12px;right:12px;display:none;flex-direction:column;gap:8px;z-index:10;animation:fadeIn .25s ease}
#video-actions.va-visible{display:flex}
.va-btn{width:44px;height:44px;border-radius:var(--r2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(10,10,20,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);color:#fff;transition:background .15s,transform .1s,box-shadow .15s}
.va-btn:hover{background:rgba(240,165,0,.72);color:#000;transform:scale(1.06);box-shadow:0 4px 18px rgba(240,165,0,.3)}
.va-btn:active{transform:scale(.94)}
.va-btn svg{flex-shrink:0}

/* sec-done: hidden container for JS href anchors */
#sec-done{display:none}

/* ── Music Panel ─────────────────────────────────────────────────────────── */
.track-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.track-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;box-shadow:0 4px 12px rgba(240,165,0,.25)}
.track-meta{flex:1;min-width:0}
.track-name{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.track-source{font-family:'DM Mono',monospace;font-size:.65rem;color:var(--muted)}
.player-wrap{background:var(--surface);border-radius:var(--r);padding:14px 16px;margin-bottom:0;display:flex;flex-direction:column;gap:12px}
.wave-row{display:flex;align-items:center;gap:12px}
.play-btn{width:42px;height:42px;flex-shrink:0;border:none;border-radius:50%;background:var(--accent);color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;font-size:1rem;box-shadow:0 4px 14px rgba(240,165,0,.35)}
.play-btn:hover{transform:scale(1.07);box-shadow:0 6px 20px rgba(240,165,0,.45)}
.play-btn:active{transform:scale(.95)}
.play-btn:disabled{opacity:.4;cursor:default}
.player-track{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.player-time{font-family:'DM Mono',monospace;font-size:.66rem;color:var(--muted);display:flex;justify-content:space-between}
/* ── W-1: Waveform container ──────────────────────────────────────────────── */
#waveform-container{
  position:relative;height:72px;
  border-radius:8px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
/* WaveSurfer canvas slot */
#waveform{width:100%;height:72px}
/* WaveSurfer internal styling overrides */
#waveform ::part(wrapper){border-radius:6px}
#waveform ::part(cursor){display:none}

/* Fallback seek bar (shown only when WaveSurfer unavailable) */
#seek-fallback{
  display:none; /* hidden by default; shown if waveInit fails */
  position:absolute;inset:0;align-items:center;
}
.seek-bg{position:absolute;inset:0;background:var(--border);border-radius:3px}
.seek-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;pointer-events:none;width:0%;transition:width .1s}
#seek-range{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;width:100%;height:100%}
.player-loading{font-size:.7rem;color:var(--accent);font-family:'DM Mono',monospace;display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:10px 14px;background:var(--surface);border-radius:var(--r)}

/* ── Mix Panel — unified sliders/toggles ─────────────────────────────────── */
.slider-row{margin-bottom:16px}
.slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.slider-label{font-size:.7rem;color:var(--muted);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.07em}
.slider-val{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--accent);font-weight:600;min-width:38px;text-align:right;letter-spacing:.02em}

/* Preset buttons — uniform segment strip */
.slider-presets{display:flex;gap:0;margin-bottom:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04)}
.preset-btn{flex:1;padding:10px 4px;font-size:.68rem;background:transparent;border:none;border-right:1px solid rgba(255,255,255,.08);color:var(--muted);cursor:pointer;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;transition:all .18s;font-weight:500}
.preset-btn:last-child{border-right:none}
.preset-btn:hover{background:rgba(240,165,0,.06);color:var(--accent)}
.preset-btn.active{background:rgba(240,165,0,.2);color:var(--accent);font-weight:700;text-shadow:0 0 10px rgba(240,165,0,.35);letter-spacing:.07em}

/* Range slider — thumb-only interaction handled in JS */
input[type=range]{
  -webkit-appearance:none;width:100%;height:4px;
  background:var(--border);border-radius:2px;
  outline:none;cursor:pointer;
  touch-action:none; /* prevent scroll while dragging thumb */
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);cursor:grab;
  box-shadow:0 0 0 3px rgba(240,165,0,.18),0 1px 4px rgba(0,0,0,.4);
  transition:box-shadow .15s,transform .1s
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);cursor:grabbing}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 6px rgba(240,165,0,.22)}
/* Firefox */
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--accent);cursor:grab;box-shadow:0 0 0 3px rgba(240,165,0,.18)}
/* Track fill — visual accent on filled portion */
input[type=range].has-fill{background:linear-gradient(to right,var(--accent) var(--fill,0%),var(--border) var(--fill,0%))}

/* Toggles — unified size */
.toggle-row{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:4px 0}
.toggle-label{font-size:.82rem;color:var(--text);line-height:1.4;padding-right:12px}
.toggle{position:relative;width:42px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-track{position:absolute;inset:0;background:var(--border);border-radius:12px;cursor:pointer;transition:background .2s}
.toggle input:checked+.toggle-track{background:var(--accent)}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .22s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.toggle input:checked+.toggle-track::after{transform:translateX(18px)}

/* Badge pills — unified */
.badge{display:inline-flex;align-items:center;font-size:.58rem;font-family:'DM Mono',monospace;border-radius:var(--r-badge);padding:2px 7px;margin-left:6px;vertical-align:middle;letter-spacing:.05em;font-weight:500}
.badge-amber{color:var(--accent);background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.28)}
.badge-blue{color:#63b3ed;background:rgba(99,179,237,.1);border:1px solid rgba(99,179,237,.28)}

/* Special toggle rows */
.smart-duck-row{background:rgba(240,165,0,.05);border:1px solid rgba(240,165,0,.18);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;box-shadow:0 0 16px rgba(240,165,0,.06)}
.beat-sync-row{background:rgba(99,179,237,.05);border:1px solid rgba(99,179,237,.18);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;box-shadow:0 0 16px rgba(99,179,237,.06)}

/* Style select */
.style-select{width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-btn);color:var(--text);font-family:'Inter',sans-serif;font-size:.85rem;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;min-height:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a566e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:border-color .15s}
.style-select:focus{border-color:var(--accent)}
.slider-row.disabled-duck{opacity:.45;pointer-events:none}

/* ── Buttons — unified system ────────────────────────────────────────────── */
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 20px;border-radius:var(--r-btn);
  min-height:46px;
  font-size:.84rem;font-weight:500;cursor:pointer;border:none;
  transition:all .15s;font-family:'Inter',sans-serif;white-space:nowrap;
  letter-spacing:.01em;
}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn-ghost{background:var(--surface);border:1px solid rgba(255,255,255,.15);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.btn-ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:rgba(240,165,0,.06);box-shadow:0 0 10px rgba(240,165,0,.12)}
.btn-ghost:active:not(:disabled){transform:scale(.97)}
.btn-ok{background:var(--ok);color:#000;font-weight:700}
.btn-fav{background:var(--surface);border:1px solid rgba(255,255,255,.15);color:var(--muted);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.btn-fav.active{border-color:#e0155a;color:#e0155a;background:rgba(224,21,90,.07)}
.btn-fav:hover:not(:disabled){border-color:#e0155a;color:#e0155a}

/* ── Sticky CTA bar ──────────────────────────────────────────────────────── */
#sticky-cta{
  position:fixed;bottom:0;left:0;right:0;
  height:var(--cta-h);
  z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;
  background:rgba(8,8,16,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
}
#btn-render{
  width:100%;max-width:508px;
  height:50px;
  border-radius:var(--r-btn);
  border:none;cursor:pointer;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  color:#000;font-family:'Syne',sans-serif;font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .2s,transform .18s,box-shadow .2s;
  letter-spacing:.01em;
  box-shadow:0 4px 20px rgba(240,165,0,.3);
}
#btn-render:hover:not(:disabled){opacity:.95;transform:translateY(-2px);box-shadow:0 8px 28px rgba(240,165,0,.4)}
#btn-render:active:not(:disabled){transform:scale(.98)}
#btn-render:disabled{
  background:var(--surface);
  color:var(--muted);
  border:1px solid var(--border);
  cursor:not-allowed;
  opacity:1;
}

/* ── Favorites ───────────────────────────────────────────────────────────── */
.fav-item,.hist-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}
.fav-item:last-child,.hist-item:last-child{border-bottom:none}
.fav-title{flex:1;min-width:0;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-meta{display:flex;flex-direction:column;flex:1;min-width:0}
.hist-title{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-date{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--muted);margin-top:2px}
.mini-btn{padding:5px 10px;font-size:.65rem;border-radius:var(--r-btn);border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-family:'DM Mono',monospace;transition:all .15s;white-space:nowrap;flex-shrink:0;min-height:32px}
.mini-btn:hover{border-color:rgba(240,165,0,.6);color:var(--accent);background:rgba(240,165,0,.04)}
.mini-btn.del:hover{border-color:var(--danger);color:var(--danger)}
.mini-btn:disabled{opacity:.4;cursor:not-allowed}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.clear-btn{font-size:.62rem;color:var(--muted2);background:none;border:none;cursor:pointer;font-family:'DM Mono',monospace;padding:2px 0;transition:color .15s}
.clear-btn:hover{color:var(--danger)}

/* ── V3-3: History collapse ──────────────────────────────────────────────── */
#hist-block{cursor:default}
.hist-toggle{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;padding:2px 0;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.hist-toggle:hover .label{color:var(--text)}
.hist-chevron{
  width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:transform .25s ease;flex-shrink:0;margin-left:8px;
}
#hist-block.hist-open .hist-chevron{transform:rotate(180deg)}
#hist-body{
  overflow:hidden;max-height:0;
  transition:max-height .3s ease, opacity .25s ease;
  opacity:0;
}
#hist-block.hist-open #hist-body{max-height:800px;opacity:1}
.hist-actions-row{display:flex;justify-content:flex-end;padding-top:8px;border-top:1px solid var(--border);margin-top:4px}

/* ── Toast ───────────────────────────────────────────────────────────────── */
#toast{position:fixed;bottom:calc(var(--cta-h) + env(safe-area-inset-bottom, 0px) + 12px);left:50%;transform:translateX(-50%) translateY(32px);background:rgba(20,20,42,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:10px 18px;font-size:.8rem;color:var(--text);z-index:999;transition:transform .28s cubic-bezier(.34,1.3,.64,1),opacity .22s ease;white-space:nowrap;max-width:min(340px, calc(100vw - 32px));overflow:hidden;text-overflow:ellipsis;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.5);opacity:0}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
#toast.error{border-color:var(--danger);color:var(--danger)}
#toast.ok{border-color:var(--ok);color:var(--ok)}

/* ── Utils / animations ──────────────────────────────────────────────────── */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted2);margin-right:6px;vertical-align:middle}
.dot.pulse{background:var(--accent);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.rb-row .btn{min-height:36px;padding:5px 10px;font-size:.72rem}

/* W-2A: true thumb-only sliders — track не клікабельний */
input[type="range"].thumb-only { pointer-events: none; }
input[type="range"].thumb-only::-webkit-slider-thumb { pointer-events: auto; }
input[type="range"].thumb-only::-moz-range-thumb { pointer-events: auto; }

/* W-2C.1: Entry Point — Row 2 below wave row */
.tm-row{
  display:flex;align-items:center;gap:9px;
  min-height:46px;padding:6px 2px;
}
.tm-row.tm-active #tm-display{color:var(--accent);font-weight:500}
#btn-set-mark{
  padding:0 14px;height:38px;
  font-size:.7rem;font-family:'DM Mono',monospace;letter-spacing:.04em;
  border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;
  white-space:nowrap;transition:all .15s;flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.2);opacity:.85;
}
#btn-entry:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
#btn-entry:disabled{opacity:.38;cursor:not-allowed}
#tm-display{
  flex:1;font-family:'DM Mono',monospace;font-size:.7rem;
  color:var(--muted);text-align:center;opacity:.9;
}
#btn-clear-mark{
  width:34px;height:34px;
  border-radius:9px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);color:var(--muted2);cursor:pointer;
  display:none;flex-shrink:0;
  font-size:.72rem;transition:all .15s;
  align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
#btn-entry-reset:hover{border-color:var(--danger);color:var(--danger)}
/* W-2C.1: 3-element window overlay on waveform */
.entry-overlay{position:absolute;top:0;bottom:0;pointer-events:none;display:none;z-index:4}
#tm-overlay{background:rgba(240,165,0,.13);border-radius:2px}
#tm-marker-a{width:2px;background:var(--accent);box-shadow:0 0 6px rgba(240,165,0,.6)}
#tm-marker-b{width:2px;background:rgba(240,165,0,.5)}

/* W-2C.3: loading state — never hide player-wrap, dim waveform instead */
#waveform-container.wf-loading{opacity:.45;transition:opacity .2s}
#waveform-container.wf-loading::after{
  content:'';position:absolute;inset:0;
  pointer-events:none;z-index:20;border-radius:6px;
}
/* player-loading is a bar above player-wrap — ensure it never overlaps */
.player-loading{pointer-events:none}

/* ── W-2D: Waveform container scrollable for zoom ──────────────────────── */
#waveform-container{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth}
/* when zoomed, inner WaveSurfer scroll container handles touch */
#waveform-container.zoomed{touch-action:pan-x}

/* ── W-2D: Zoom controls ────────────────────────────────────────────────── */
.zoom-row{display:none;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px}
.zoom-row.visible{display:flex}
.zoom-btn{width:22px;height:22px;border:1px solid var(--border);border-radius:5px;
  background:var(--card);color:var(--muted);cursor:pointer;font-size:.82rem;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;line-height:1}
.zoom-btn:hover{border-color:var(--accent);color:var(--accent)}
.zoom-btn:disabled{opacity:.35;cursor:default}
#zoom-label{font-family:'DM Mono',monospace;font-size:.58rem;color:var(--muted);
  min-width:24px;text-align:center}

/* ── W-2D: Minimap ──────────────────────────────────────────────────────── */
#map-wrap{margin-top:5px;display:none}
#map-container{position:relative;height:36px;border-radius:6px;
  overflow:hidden;background:rgba(10,10,22,.85);cursor:crosshair}
#map-wave{width:100%;height:36px;pointer-events:none;opacity:0}/* hidden — energy canvas replaces it visually */
#map-wave ::part(cursor){display:none}
#map-wave ::part(wrapper){border-radius:6px}
/* Energy heatmap canvas — drawn from peaks after minimap ready */
#map-canvas{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;border-radius:6px}
/* Mini window overlay elements */
.mini-ov{position:absolute;top:0;bottom:0;pointer-events:none;z-index:4}
#map-highlight{background:rgba(240,165,0,.22);border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(240,165,0,.35)}
/* entry start marker — wider/brighter for visual dominance over highlight marker */
#map-mark-a{width:3px;background:var(--accent);
  box-shadow:0 0 8px rgba(240,165,0,.9)}
#map-mark-b{width:2px;background:rgba(240,165,0,.5)}
/* Packet 2: passive track-insights display row (highlight_sec / dynamic_range) */
#track-insights{display:none;flex-direction:row;align-items:center;gap:6px;
  flex-wrap:wrap;margin-top:3px;font-size:0.61rem;
  font-family:'DM Mono',monospace;color:var(--muted)}
#track-insights .ins-badge{padding:1px 5px;border-radius:3px;font-size:0.59rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  color:var(--muted);white-space:nowrap}
/* Packet 2: passive minimap highlight-sec accent marker — z-index:2 keeps it below entry-window overlay (z-index:4).
   Dashed + no glow = clearly secondary/passive, not a playback control. */
#map-hl-marker{position:absolute;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(to bottom,rgba(80,200,255,.5) 0px,rgba(80,200,255,.5) 4px,transparent 4px,transparent 7px);
  pointer-events:none;z-index:2;display:none}
/* entry-pending: entrySec updated by snap/hint but loaded preview clip not yet rebuilt */
#entry-pending-badge{display:none;font-size:.57rem;color:var(--accent);
  font-family:'DM Mono',monospace;margin-top:2px;letter-spacing:.04em;
  animation:entry-pending-blink 1s ease-in-out infinite}
@keyframes entry-pending-blink{0%,100%{opacity:.9}50%{opacity:.25}}
#map-wrap.entry-pending #entry-pending-badge{display:block}
#map-wrap.entry-pending #map-mark-a{animation:entry-pending-pulse 1s ease-in-out infinite}
@keyframes entry-pending-pulse{
  0%,100%{box-shadow:0 0 8px rgba(240,165,0,.9)}
  50%{box-shadow:0 0 18px rgba(240,165,0,1);opacity:.6}}
/* Drag/tap handle layer — OVER the overlay */
#map-interact{position:absolute;inset:0;z-index:5;
  touch-action:pan-y;cursor:crosshair}

/* W-2D.1: minimap extra overlays */
#map-view{position:absolute;top:0;bottom:0;pointer-events:none;z-index:3;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  border-radius:2px;box-sizing:border-box}
#map-cursor{position:absolute;top:0;bottom:0;width:2px;pointer-events:none;
  z-index:6;background:var(--ok);box-shadow:0 0 4px rgba(48,217,132,.7)}
/* minimap loading skeleton */
#map-container.mini-loading{background:linear-gradient(90deg,
  rgba(30,30,58,.4) 25%,rgba(40,40,70,.6) 50%,rgba(30,30,58,.4) 75%);
  background-size:200% 100%;animation:mini-shimmer 1.2s infinite linear}
@keyframes mini-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── W-2D5: Smart Beat Snap ──────────────────────────────────────────── */
#btn-align{
  display:inline-flex;align-items:center;gap:4px;padding:6px 12px;font-size:.67rem;
  background:rgba(90,86,110,.18);border:1px solid rgba(140,136,160,.3);
  border-radius:var(--r-btn);color:var(--muted);
  cursor:not-allowed;font-family:'DM Mono',monospace;letter-spacing:.04em;
  transition:all .2s;white-space:nowrap;flex-shrink:0;opacity:.75;
}
#btn-align.snap-active{
  background:rgba(240,165,0,.15);border-color:rgba(240,165,0,.5);color:var(--accent);
  background:rgba(240,165,0,.15);border-color:rgba(240,165,0,.55);
  color:var(--accent);cursor:pointer;opacity:1;
  box-shadow:0 0 8px rgba(240,165,0,.2);
}
#btn-align.snap-active:hover{background:rgba(240,165,0,.28);border-color:var(--accent);box-shadow:0 0 12px rgba(240,165,0,.3)}
/* Snap flash: waveform briefly highlights peak area */
@keyframes snap-flash{
  0%{opacity:1} 30%{opacity:.3;filter:brightness(1.6)} 100%{opacity:1}
}
#waveform-container.snap-flash{animation:snap-flash .35s ease-out}

/* ── W-2D6: window playback mode ────────────────────────────────────────── */
/* Loop badge shown when window mode is active */
#window-badge{
  display:none;position:absolute;top:4px;right:6px;z-index:10;
  font-size:.55rem;font-family:'DM Mono',monospace;color:var(--accent);
  background:rgba(240,165,0,.14);border:1px solid rgba(240,165,0,.3);
  border-radius:4px;padding:2px 5px;pointer-events:none;letter-spacing:.04em;
}
#waveform-container.window-mode #window-badge{display:block}
/* End-of-window dim flash */
@keyframes window-end-flash{
  0%{opacity:1}40%{opacity:.25}100%{opacity:1}
}
#waveform-container.window-end{animation:window-end-flash .3s ease-out}

/* ══════════════════════════════════════════════════════════════════════════
   PACKET 1 — SHARED VISUAL SYSTEM  2026-04-22
   CSS-first pass: typography hierarchy · spacing rhythm · surface tiers ·
   CTA hierarchy · metadata restraint · accent/glow restraint · motion calm.
   Reference: elevenlabs_DESIGN.md (grammar inspiration only — not copied).
   ══════════════════════════════════════════════════════════════════════════ */

/* P1-1: System tokens ──────────────────────────────────────────────────── */
:root {
  --gap-surface: 20px;           /* breathing room below primary stage */
  --gap-panel: 16px;             /* spacing between support panels */
  --surface-track-border: rgba(255,255,255,.09);
  --surface-support-bg: rgba(14,14,26,.7);
  --shadow-xs: 0 1px 6px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 14px rgba(0,0,0,.38);
}

/* P1-2: Ambient background — reduce scatter ─────────────────────────────── */
body::before {
  background:
    radial-gradient(ellipse 80vw 60vh at 20% 10%, rgba(240,165,0,.04) 0%, transparent 70%),
    radial-gradient(ellipse 60vw 40vh at 80% 80%, rgba(255,107,53,.03) 0%, transparent 70%);
}

/* P1-3: Wrap top rhythm ─────────────────────────────────────────────────── */
.wrap { padding-top: 24px; }

/* P1-4: Typography hierarchy ────────────────────────────────────────────── */

/* Logo: crisper tracking */
.logo { letter-spacing: -.025em; font-size: 1.2rem; }

/* Utility overline label: quieter presence */
.label { font-size: .62rem; letter-spacing: .07em; opacity: .82; margin-bottom: 10px; }

/* Upload heading: stronger title hierarchy */
.upload-title { font-size: 1.08rem; letter-spacing: -.01em; }

/* Track name: slightly more prominent */
.track-name { font-size: .97rem; letter-spacing: -.005em; }

/* Track source: muted utility line */
.track-source { font-size: .61rem; opacity: .72; }

/* Slider label: calmer tracking */
.slider-label { letter-spacing: .06em; }

/* P1-5: Surface/card hierarchy ──────────────────────────────────────────── */

/* Card base: harmonised spacing rhythm */
.card { margin-bottom: var(--gap-panel); }

/* Primary stage: more breathing room, refined edge */
#video-stage {
  margin-bottom: var(--gap-surface);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 16px 48px rgba(0,0,0,.6);
}

/* Secondary surface — music/track card: refined border, gentle lift */
#track-card {
  border-color: var(--surface-track-border);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), var(--shadow-sm);
}

/* Support surfaces — mix/fav/hist: subordinate, quieter */
.panel-mix,
#fav-block,
#hist-block {
  background: var(--surface-support-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

/* Player sub-surface: subtle internal definition */
.player-wrap { border: 1px solid rgba(255,255,255,.04); }

/* P1-6: Glow restraint — one accent glow per major surface ─────────────── */

/* Smart duck row: intent border sufficient, glow removed */
.smart-duck-row { box-shadow: none; }

/* Beat sync row: intent border sufficient, glow removed */
.beat-sync-row { box-shadow: none; }

/* Preset active: no text-shadow glow */
.preset-btn.active { text-shadow: none; }

/* Play button: secondary action — reduced glow */
.play-btn { box-shadow: 0 2px 8px rgba(240,165,0,.18); }
.play-btn:hover { box-shadow: 0 4px 12px rgba(240,165,0,.26); }

/* Ghost buttons: no glow on hover (border + color is sufficient) */
.btn-ghost:hover:not(:disabled) { box-shadow: none; }

/* Primary CTA remains the single glow anchor — tamed hover lift */
#btn-render:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(240,165,0,.32); }

/* P1-7: CTA hierarchy ───────────────────────────────────────────────────── */

/* Primary render CTA: clean letter-spacing */
#btn-render { letter-spacing: .02em; }

/* Secondary buttons: quieter stroke weight */
.btn-ghost { border-color: rgba(255,255,255,.1); }

/* Utility mini-buttons: muted by default, full presence on hover */
.mini-btn { opacity: .78; }
.mini-btn:hover { opacity: 1; }

/* P1-8: Metadata label restraint ───────────────────────────────────────── */

/* Badge pills: smaller, quieter, less assertive */
.badge { font-size: .54rem; padding: 2px 5px; opacity: .78; }
.badge-amber { border-color: rgba(240,165,0,.18); background: rgba(240,165,0,.07); }
.badge-blue  { border-color: rgba(99,179,237,.18); background: rgba(99,179,237,.07); }

/* P1-9: Upload surface — restrained welcome entry ───────────────────────── */
#upload-zone { border-color: rgba(255,255,255,.1); }
#upload-zone:hover,
#upload-zone.drag { border-color: rgba(240,165,0,.45); background: rgba(240,165,0,.03); }

/* P1-10: Spacing rhythm ─────────────────────────────────────────────────── */
.track-header   { margin-bottom: 14px; }
.slider-row     { margin-bottom: 14px; }
.section-header { margin-bottom: 10px; }

/* end Packet 1 — Shared Visual System */

/* ══════════════════════════════════════════════════════════════════════════
   FRONT-DOOR PACKET 2 — auth + welcome shell
   Scope: entry surface only (#fd-hero, #fd-auth-area, #fd-gate, #fd-resumable-hint
   and the header layout that hosts them). Does not restyle the workspace
   (#sec-main / #video-stage / player / settings) which is covered by Packet 1.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Header layout for front-door ── */
header.fd-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
  margin-bottom:22px;padding:14px 0 14px;
  border-bottom:1px solid var(--border);
}
.fd-header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fd-lang-select{
  padding:4px 16px 4px 6px;font-size:.66rem;font-family:'DM Mono',monospace;
  border-radius:8px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);cursor:pointer;outline:none;min-height:30px;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%235a566e' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
  transition:border-color .15s,color .15s;
}
.fd-lang-select:hover{border-color:rgba(240,165,0,.4);color:var(--text)}

/* ── Header auth area ── */
.fd-auth-area{display:flex;align-items:center;gap:6px;min-height:30px}
.fd-auth-area .fd-auth-slot{display:none;align-items:center;gap:6px}
.fd-auth-area[data-auth-state="loading"]   .fd-auth-loading  {display:inline-flex}
.fd-auth-area[data-auth-state="signedout"] .fd-auth-signedout{display:inline-flex}
.fd-auth-area[data-auth-state="signedin"]  .fd-auth-signedin {display:inline-flex}
.fd-auth-area[data-auth-state="devbridge"] .fd-auth-dev      {display:inline-flex}

.fd-auth-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--muted2);
  box-shadow:0 0 0 3px rgba(140,136,160,.08);
  animation:fdAuthPulse 1.4s ease-in-out infinite;
}
@keyframes fdAuthPulse{
  0%,100%{opacity:.4;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}
.fd-auth-label{
  font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;
}

.fd-auth-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:30px;padding:0 12px;border-radius:8px;
  font-family:'Inter',sans-serif;font-size:.74rem;font-weight:500;
  letter-spacing:.01em;cursor:pointer;border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s,transform .12s,box-shadow .15s;
  white-space:nowrap;
}
.fd-auth-btn:active{transform:scale(.97)}
.fd-auth-btn--ghost{
  background:transparent;border-color:rgba(255,255,255,.12);color:var(--text);
}
.fd-auth-btn--ghost:hover{
  border-color:rgba(240,165,0,.45);color:var(--accent);
  background:rgba(240,165,0,.05);
}
.fd-auth-btn--solid{
  background:var(--text);color:#050510;border-color:var(--text);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 14px rgba(0,0,0,.45);
}
.fd-auth-btn--solid:hover{
  background:#fff;color:#050510;border-color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 18px rgba(255,255,255,.08);
}

.fd-auth-user{
  font-family:'DM Mono',monospace;font-size:.65rem;color:var(--muted);
  letter-spacing:.04em;max-width:148px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding:0 4px;
}
.fd-auth-devchip{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:6px;border:1px solid rgba(99,179,237,.32);
  background:rgba(99,179,237,.08);color:#9dc9ef;
  font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;
}
.fd-auth-devchip::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:#63b3ed;box-shadow:0 0 8px rgba(99,179,237,.5);
}

/* ── Hero container ── */
.fd-hero{display:flex;flex-direction:column;gap:18px;margin-bottom:8px}
.fd-hero-head{display:flex;flex-direction:column;gap:8px;padding:4px 2px 2px}
.fd-kicker{
  font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.fd-hero-title{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:clamp(1.55rem,5.4vw,2.05rem);
  line-height:1.08;letter-spacing:-.02em;color:var(--text);
  max-width:28ch;
}
.fd-hero-sub{
  font-family:'Inter',sans-serif;font-weight:400;font-size:.88rem;
  line-height:1.5;color:var(--muted);max-width:46ch;
}

/* ── Product window (upload card) ── */
.fd-hero-card{
  position:relative;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(240,165,0,.04),transparent 55%),
    linear-gradient(180deg,rgba(20,20,42,.98),rgba(16,16,30,.98));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r3);
  padding:18px 18px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 48px rgba(0,0,0,.48);
  overflow:hidden;
}
.fd-hero-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0,transparent 60%,rgba(240,165,0,.035) 100%);
  z-index:0;
}
.fd-hero-card-head{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:14px;
}
.fd-stage-label{
  display:inline-flex;align-items:center;
  font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.fd-stage-label .dot{margin-right:8px}
.fd-state-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.fd-state-chip-dot{
  width:5px;height:5px;border-radius:50%;background:var(--muted2);
  box-shadow:0 0 0 2px rgba(140,136,160,.08);
}
.fd-state-chip[data-state="ready"]{
  color:var(--ok);border-color:rgba(48,217,132,.3);
  background:rgba(48,217,132,.06);
}
.fd-state-chip[data-state="ready"] .fd-state-chip-dot{
  background:var(--ok);box-shadow:0 0 8px rgba(48,217,132,.35);
}
.fd-state-chip[data-state="locked"]{
  color:var(--accent);border-color:rgba(240,165,0,.32);
  background:rgba(240,165,0,.06);
}
.fd-state-chip[data-state="locked"] .fd-state-chip-dot{
  background:var(--accent);box-shadow:0 0 8px rgba(240,165,0,.45);
}
.fd-state-chip[data-state="loading"] .fd-state-chip-dot{
  animation:fdAuthPulse 1.2s ease-in-out infinite;
}

/* Upload zone + gate overlay stacking */
.fd-upload-frame{position:relative;z-index:1}
#fd-hero-card #upload-zone{
  background:rgba(5,5,16,.55);border:1px dashed rgba(255,255,255,.1);
  border-radius:var(--r2);padding:44px 20px;margin-bottom:0;
  transition:border-color .18s,background .18s,transform .15s;
}
#fd-hero-card #upload-zone:hover,
#fd-hero-card #upload-zone.drag{
  border-color:rgba(240,165,0,.55);
  background:rgba(240,165,0,.04);
}
#fd-hero-card .upload-title{
  font-family:'Syne',sans-serif;font-weight:700;font-size:1.15rem;
  letter-spacing:-.005em;margin-bottom:6px;
}
#fd-hero-card .upload-sub{color:var(--muted);font-size:.82rem}
#fd-hero-card .upload-limit{
  font-family:'DM Mono',monospace;font-size:.66rem;
  color:var(--muted2);margin-top:10px;letter-spacing:.04em;
}

/* ── Auth gate overlay ── */
.fd-gate{
  display:none;position:absolute;inset:0;z-index:5;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(240,165,0,.08),transparent 60%),
    rgba(6,6,18,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:var(--r2);
  align-items:center;justify-content:center;
  padding:22px;
  border:1px solid rgba(240,165,0,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  animation:fadeIn .28s ease;
}
.fd-gate-inner{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;max-width:36ch;
}
.fd-gate-title{
  font-family:'Syne',sans-serif;font-weight:700;font-size:1.02rem;
  color:var(--text);letter-spacing:-.005em;
}
.fd-gate-sub{
  font-size:.78rem;color:var(--muted);line-height:1.55;margin:2px 0 8px;
}
.fd-gate-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fd-gate-actions .fd-auth-btn{height:34px;padding:0 14px;font-size:.8rem}

/* Drive gate visibility from body-level auth state */
body[data-auth-state="loading"]   #fd-gate,
body[data-auth-state="signedout"] #fd-gate{display:flex}
body[data-auth-state="loading"]   #fd-hero-card #upload-zone,
body[data-auth-state="signedout"] #fd-hero-card #upload-zone{
  pointer-events:none;filter:grayscale(.4) brightness(.78);
}
/* Loading variant — hide sign-in actions, show subtle note */
body[data-auth-state="loading"] .fd-gate-actions{display:none}
body[data-auth-state="loading"] .fd-gate-title{font-size:.86rem;font-weight:500;color:var(--muted)}
body[data-auth-state="loading"] .fd-gate-sub{display:none}
body[data-auth-state="loading"] .fd-gate-title::before{
  content:'';display:inline-block;width:10px;height:10px;margin-right:8px;
  border-radius:50%;border:1.5px solid rgba(240,165,0,.25);
  border-top-color:var(--accent);vertical-align:-1px;
  animation:spin .8s linear infinite;
}

/* ── Resumable hint inside the hero card ── */
.fd-resumable-hint{
  display:none;align-items:center;gap:8px;
  margin-top:12px;padding:10px 12px;
  border-radius:10px;
  background:rgba(99,179,237,.06);
  border:1px solid rgba(99,179,237,.22);
  font-size:.72rem;color:#bcd8f1;
}
.fd-resumable-dot{
  width:6px;height:6px;border-radius:50%;
  background:#63b3ed;box-shadow:0 0 8px rgba(99,179,237,.4);
  animation:fdAuthPulse 1.5s ease-in-out infinite;
}
body.fd-resumable[data-auth-state="signedin"]  .fd-resumable-hint,
body.fd-resumable[data-auth-state="devbridge"] .fd-resumable-hint{display:flex}

/* ── Enhanced resume banner typography (front-door surface only) ── */
#resume-banner{
  background:linear-gradient(180deg,rgba(18,16,32,.98),rgba(12,12,24,.96));
  border-bottom:1px solid rgba(240,165,0,.28);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}

/* ── Small-screen tuning ── */
@media (max-width:420px){
  header.fd-header{gap:8px}
  .fd-header-right{gap:6px}
  .fd-auth-btn{height:28px;padding:0 10px;font-size:.7rem}
  .fd-auth-user{max-width:108px;font-size:.6rem}
  .version{display:none}
  .fd-hero-title{font-size:1.5rem}
  .fd-hero-sub{font-size:.82rem}
  #fd-hero-card #upload-zone{padding:36px 16px}
}

/* end Front-door Packet 2 — auth + welcome shell */

/* ══════════════════════════════════════════════════════════════════════════
   FRONT-DOOR PACKET 3 — engineering layout correction  2026-04-23
   Scope: first-screen layout only (#sec-upload.active). Widens front-door
   wrapper, demotes utility furniture (version, state chip), introduces real
   action row for resumable state, suppresses workspace sticky CTA on front
   door, and applies compact/medium/expanded responsive rules. No workspace
   styles and no DOM-id changes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── F3-1 · Front-door wrap widen (scoped) ─────────────────────────────── */
/* The global .wrap is max-width:540px which makes the front-door read as a
   mobile card even on desktop. Scope a wider max-width only when the
   front-door section is the active one, so the workspace constraints stay
   untouched. */
body:has(#sec-upload.active) .wrap{
  max-width:none;
  padding:20px 16px 88px;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .wrap{padding:28px 24px 96px}
}
@media (min-width:1024px){
  body:has(#sec-upload.active) .wrap{padding:32px 40px 112px}
}

/* ── F3-2 · Header dims — minimal utility only ─────────────────────────── */
body:has(#sec-upload.active) header.fd-header{
  min-height:52px;margin-bottom:14px;padding:10px 0;gap:8px;
}
body:has(#sec-upload.active) .fd-header-right{gap:8px}
body:has(#sec-upload.active) .fd-lang-select{opacity:.78}
body:has(#sec-upload.active) .fd-lang-select:hover{opacity:1}
@media (min-width:640px){
  body:has(#sec-upload.active) header.fd-header{
    min-height:56px;margin-bottom:18px;padding:12px 0;
  }
}
@media (min-width:1024px){
  body:has(#sec-upload.active) header.fd-header{
    min-height:60px;margin-bottom:24px;padding:14px 0;flex-wrap:nowrap;
  }
}

/* F3-2a · Hide version badge on front-door (first-screen hierarchy rule). */
body:has(#sec-upload.active) .version{display:none}

/* ── F3-3 · Headline zone — one strong title + one short support line ── */
body:has(#sec-upload.active) .fd-hero{gap:18px;margin-bottom:18px}
body:has(#sec-upload.active) .fd-hero-head{gap:10px;padding:0;max-width:760px;margin:0 auto}
body:has(#sec-upload.active) .fd-hero-title{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:28px;line-height:1.02;letter-spacing:-.02em;
  max-width:12ch;
}
body:has(#sec-upload.active) .fd-hero-sub{
  font-size:14px;line-height:1.45;color:var(--muted);max-width:42ch;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-hero{gap:22px;margin-bottom:22px}
  body:has(#sec-upload.active) .fd-hero-title{font-size:36px;max-width:13ch}
  body:has(#sec-upload.active) .fd-hero-sub{font-size:15px;max-width:46ch}
}
@media (min-width:1024px){
  body:has(#sec-upload.active) .fd-hero{gap:28px;margin-bottom:28px}
  body:has(#sec-upload.active) .fd-hero-title{font-size:46px;max-width:14ch}
  body:has(#sec-upload.active) .fd-hero-sub{font-size:16px;max-width:52ch}
}

/* ── F3-4 · Product window — dominant entry object ─────────────────────── */
body:has(#sec-upload.active) .fd-hero-card{
  width:100%;max-width:none;margin:0 auto;
  border-radius:20px;padding:16px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(240,165,0,.035),transparent 55%),
    linear-gradient(180deg,rgba(20,20,42,.98),rgba(14,14,28,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 20px 60px rgba(0,0,0,.55);
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-hero-card{
    max-width:720px;border-radius:24px;padding:20px;
  }
}
@media (min-width:1024px){
  body:has(#sec-upload.active) .fd-hero-card{
    max-width:760px;border-radius:28px;padding:24px;
  }
}

/* F3-4a · Demote state chip to quiet internal status line — remove pill
   prominence, align top-right inside the product window. */
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip,
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip--quiet{
  position:absolute;top:10px;right:12px;z-index:2;
  height:auto;padding:0;border:none;background:none;
  font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);opacity:.62;
  box-shadow:none;
}
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="ready"]{color:var(--muted);opacity:.55}
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="locked"]{color:var(--accent);opacity:.7}
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="loading"]{opacity:.55}
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip-dot{
  width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:none;
  margin-right:4px;
}
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="loading"] .fd-state-chip-dot{
  animation:fdAuthPulse 1.2s ease-in-out infinite;
}

/* ── F3-5 · Upload zone — primary CTA inside product window ────────────── */
body:has(#sec-upload.active) #fd-hero-card #upload-zone{
  padding:28px 16px;border-radius:16px;
  background:rgba(5,5,16,.5);border:1px dashed rgba(255,255,255,.12);
}
body:has(#sec-upload.active) #fd-hero-card .upload-title{
  font-size:18px;letter-spacing:-.005em;margin-bottom:6px;
}
body:has(#sec-upload.active) #fd-hero-card .upload-sub{font-size:14px;color:var(--muted)}
body:has(#sec-upload.active) #fd-hero-card .upload-limit{
  font-family:'DM Mono',monospace;font-size:11px;
  color:var(--muted2);margin-top:10px;letter-spacing:.04em;
}
body:has(#sec-upload.active) #fd-hero-card .upload-icon{font-size:1.9rem;margin-bottom:10px}
@media (min-width:640px){
  body:has(#sec-upload.active) #fd-hero-card #upload-zone{padding:36px 20px}
  body:has(#sec-upload.active) #fd-hero-card .upload-title{font-size:20px}
  body:has(#sec-upload.active) #fd-hero-card .upload-sub{font-size:15px}
  body:has(#sec-upload.active) #fd-hero-card .upload-limit{font-size:12px}
}
@media (min-width:1024px){
  body:has(#sec-upload.active) #fd-hero-card #upload-zone{padding:44px 24px}
  body:has(#sec-upload.active) #fd-hero-card .upload-title{font-size:22px}
  body:has(#sec-upload.active) #fd-hero-card .upload-sub{font-size:16px}
  body:has(#sec-upload.active) #fd-hero-card .upload-icon{font-size:2.1rem;margin-bottom:12px}
}

/* ── F3-6 · Resumable action row — explicit continue / new project ─────── */
body:has(#sec-upload.active) #fd-hero-card .fd-resumable-row{
  display:none;flex-direction:column;gap:10px;
  margin-top:14px;padding:12px 14px;
  border-radius:12px;
  background:rgba(99,179,237,.06);
  border:1px solid rgba(99,179,237,.22);
}
body.fd-resumable[data-auth-state="signedin"]  #fd-hero-card .fd-resumable-row,
body.fd-resumable[data-auth-state="devbridge"] #fd-hero-card .fd-resumable-row{display:flex}

body:has(#sec-upload.active) .fd-resumable-row-label{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:#bcd8f1;font-family:'DM Mono',monospace;
  letter-spacing:.06em;text-transform:uppercase;
}
body:has(#sec-upload.active) .fd-resumable-row .fd-resumable-dot{
  width:6px;height:6px;border-radius:50%;
  background:#63b3ed;box-shadow:0 0 6px rgba(99,179,237,.4);
  animation:fdAuthPulse 1.5s ease-in-out infinite;
}
body:has(#sec-upload.active) .fd-resumable-row-actions{
  display:flex;flex-direction:column;gap:8px;width:100%;
}
body:has(#sec-upload.active) .fd-action-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:12px;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  letter-spacing:.01em;cursor:pointer;border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s,transform .12s,box-shadow .15s;
  white-space:nowrap;width:100%;
}
body:has(#sec-upload.active) .fd-action-btn:active{transform:scale(.97)}
body:has(#sec-upload.active) .fd-action-btn--solid{
  background:var(--accent);color:#1a0f00;border-color:var(--accent);
  box-shadow:0 2px 10px rgba(240,165,0,.22);
}
body:has(#sec-upload.active) .fd-action-btn--solid:hover{
  background:#ffbc33;border-color:#ffbc33;
  box-shadow:0 4px 14px rgba(240,165,0,.32);
}
body:has(#sec-upload.active) .fd-action-btn--ghost{
  background:transparent;border-color:rgba(255,255,255,.14);color:var(--text);
}
body:has(#sec-upload.active) .fd-action-btn--ghost:hover{
  border-color:rgba(240,165,0,.45);color:var(--accent);
  background:rgba(240,165,0,.04);
}
@media (min-width:640px){
  body:has(#sec-upload.active) #fd-hero-card .fd-resumable-row{
    flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
  }
  body:has(#sec-upload.active) .fd-resumable-row-actions{
    flex-direction:row;width:auto;flex-shrink:0;gap:10px;
  }
  body:has(#sec-upload.active) .fd-action-btn{width:auto;min-height:44px;padding:0 18px}
}
@media (min-width:1024px){
  body:has(#sec-upload.active) .fd-action-btn{min-height:48px;padding:0 20px}
}

/* ── F3-7 · Support copy — one muted line below product window ─────────── */
body:has(#sec-upload.active) .fd-support-copy{
  margin:14px auto 0;max-width:34ch;text-align:center;
  font-size:14px;line-height:1.5;color:var(--muted);opacity:.82;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-support-copy{
    margin-top:18px;max-width:46ch;font-size:15px;
  }
}
@media (min-width:1024px){
  body:has(#sec-upload.active) .fd-support-copy{
    margin-top:22px;max-width:52ch;font-size:16px;
  }
}

/* ── F3-8 · Sticky CTA — suppress visibility on front-door only ────────── */
/* Runtime ownership of #sticky-cta and #btn-render is preserved; this hides
   the workspace render bar only while #sec-upload.active, and restores it
   automatically whenever the active section changes. */
body:has(#sec-upload.active) #sticky-cta{display:none}
/* Remove the reserved sticky-cta bottom padding on front-door so the product
   window centers without a phantom gutter. */
body:has(#sec-upload.active) .wrap{padding-bottom:24px}
@media (min-width:640px){body:has(#sec-upload.active) .wrap{padding-bottom:32px}}
@media (min-width:1024px){body:has(#sec-upload.active) .wrap{padding-bottom:40px}}

/* ── F3-9 · Prior-packet small-screen overrides — remove narrow font caps */
/* The pre-existing @media (max-width:420px) block forced fd-hero-title to
   1.5rem; replaced here by the compact 28px rule above. This ensures the
   F3 responsive ladder is authoritative across all viewport widths. */
@media (max-width:420px){
  body:has(#sec-upload.active) .fd-hero-title{font-size:28px}
  body:has(#sec-upload.active) .fd-hero-sub{font-size:14px}
  body:has(#sec-upload.active) #fd-hero-card #upload-zone{padding:28px 16px}
  body:has(#sec-upload.active) .fd-action-btn{min-height:44px}
}

/* end Front-door Packet 3 — engineering layout correction */

/* ══════════════════════════════════════════════════════════════════════════
   PACKET 4 — SHARED VISUAL TOKEN RECONCILIATION  2026-04-24
   Scope: shared CSS surface/token cleanup across front-door and workspace.
   CSS-only. No templates, no JS, no DOM IDs changed.
   Goal: near-black calm creative tool — less glow, smaller radius, subtler
   borders, weaker shadows, amber accent narrowed to primary affordances.
   ══════════════════════════════════════════════════════════════════════════ */

/* P4-1: Ambient atmosphere — further glow reduction ─────────────────────── */
body::before {
  background:
    radial-gradient(ellipse 70vw 50vh at 15% 8%,  rgba(240,165,0,.022) 0%, transparent 65%),
    radial-gradient(ellipse 50vw 35vh at 85% 85%, rgba(240,165,0,.014) 0%, transparent 62%);
}

/* P4-2: Video stage — refined edge, weaker shadow ──────────────────────── */
#video-stage {
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 12px 32px rgba(0,0,0,.5);
}

/* P4-3: Track card — quieter elevation ─────────────────────────────────── */
#track-card {
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.28);
}

/* P4-4: Track icon — amber glow restrained ─────────────────────────────── */
.track-icon { box-shadow: 0 2px 8px rgba(240,165,0,.12); }

/* P4-5: Product window — reduced amber overlay ─────────────────────────── */
.fd-hero-card::before {
  background: linear-gradient(180deg, transparent 0, transparent 68%, rgba(240,165,0,.016) 100%);
}
.fd-hero-card {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(240,165,0,.022), transparent 55%),
    linear-gradient(180deg, rgba(16,16,34,.98), rgba(12,12,24,.98));
  border-color: rgba(255,255,255,.07);
}
body:has(#sec-upload.active) .fd-hero-card {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(240,165,0,.022), transparent 55%),
    linear-gradient(180deg, rgba(16,16,34,.98), rgba(12,12,24,.98));
}

/* P4-6: Support panels — quieter borders and backgrounds ───────────────── */
.panel-mix,
#fav-block,
#hist-block {
  background: var(--surface-3);
  border-color: rgba(255,255,255,.06);
}
.player-wrap { border-color: rgba(255,255,255,.04); }

/* P4-7: Sticky CTA — subdued top edge ──────────────────────────────────── */
#sticky-cta { border-top-color: rgba(255,255,255,.06); }

/* P4-8: Render CTA — single glow anchor, reduced ───────────────────────── */
#btn-render { box-shadow: 0 2px 12px rgba(240,165,0,.2); }
#btn-render:hover:not(:disabled) { box-shadow: 0 4px 18px rgba(240,165,0,.26); transform: translateY(-1px); }

/* P4-9: Ghost buttons — quieter stroke on dark surfaces ────────────────── */
.btn-ghost { border-color: rgba(255,255,255,.09); }

/* P4-10: Special toggle rows — border-led, very light fill ─────────────── */
.smart-duck-row { background: rgba(240,165,0,.03); }
.beat-sync-row  { background: rgba(99,179,237,.03); }

/* P4-11: Auth gate overlay — subtler amber tint ────────────────────────── */
.fd-gate {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(240,165,0,.05), transparent 60%),
    rgba(6,6,18,.9);
  border-color: rgba(240,165,0,.1);
}

/* P4-12: Resume banner — subdued warmth ────────────────────────────────── */
#resume-banner {
  border-bottom-color: rgba(240,165,0,.18);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}

/* end Packet 4 — Shared Visual Token Reconciliation */

/* ══════════════════════════════════════════════════════════════════════════
   PACKET 5 — FRONT-DOOR ABOVE-FOLD POLISH  2026-04-24
   Scope: above-the-fold CSS-only polish on the front-door welcome screen.
   Reduces legacy Packet 3 shadow mass, tightens hardcoded radii, deepens
   upload zone fill, quiets utility chrome, and tightens atmospheric amber.
   No templates, no JS, no DOM IDs changed. Workspace untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* P5-1: Front-door atmosphere — calmer welcome-screen ambience ──────────── */
body:has(#sec-upload.active)::before {
  background:
    radial-gradient(ellipse 58vw 42vh at 15% 8%,  rgba(240,165,0,.014) 0%, transparent 58%),
    radial-gradient(ellipse 42vw 28vh at 85% 85%, rgba(240,165,0,.008) 0%, transparent 56%);
}

/* P5-2: Product window — lighter shadow, tighter radii, quieter amber ───── */
body:has(#sec-upload.active) .fd-hero-card {
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 32px rgba(0,0,0,.40);
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(240,165,0,.018), transparent 52%),
    linear-gradient(180deg, rgba(16,16,34,.98), rgba(12,12,24,.98));
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-hero-card { border-radius:20px; }
}
@media (min-width:1024px){
  body:has(#sec-upload.active) .fd-hero-card { border-radius:22px; }
}

/* P5-3: Amber fringe — shorter vertical reach, lower opacity ────────────── */
body:has(#sec-upload.active) .fd-hero-card::before {
  background: linear-gradient(180deg, transparent 0, transparent 76%, rgba(240,165,0,.009) 100%);
}

/* P5-4: Upload zone — deeper fill, refined border, tighter radius ─────── */
body:has(#sec-upload.active) #fd-hero-card #upload-zone {
  background: rgba(4,4,14,.62);
  border-color: rgba(255,255,255,.10);
  border-radius: 12px;
}

/* P5-5: Support copy — slightly tighter opacity ─────────────────────────── */
body:has(#sec-upload.active) .fd-support-copy { opacity:.70; }

/* P5-6: Header utility chrome — quieter at rest, still readable on hover ── */
body:has(#sec-upload.active) .fd-lang-select       { opacity:.62; }
body:has(#sec-upload.active) .fd-lang-select:hover { opacity:.94; }

/* P5-7: State chip — align opacity with tightened card border system ─────── */
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip,
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip--quiet  { opacity:.50; }
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="ready"]   { color:var(--muted);opacity:.44; }
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="locked"]  { color:var(--accent);opacity:.60; }
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="loading"] { opacity:.44; }

/* end Packet 5 — Front-door above-fold polish */

/* ══════════════════════════════════════════════════════════════════════════
   PACKET 6A — FRONT-DOOR CORE SEO/PRODUCT CONTENT  2026-04-24
   Scope: below-fold informational sections inside #sec-upload only.
   New classes: .fd-content, .fd-proof-row, .fd-info-section, .fd-card-grid,
   .fd-contrast-block. No first-screen, no workspace, no JS changes.
   ══════════════════════════════════════════════════════════════════════════ */

/* P6A-1: Content wrapper — below-fold container ─────────────────────────── */
body:has(#sec-upload.active) .fd-content {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-top: 48px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-content { padding-top:56px; gap:48px; }
}
@media (min-width:1024px){
  body:has(#sec-upload.active) .fd-content { padding-top:64px; gap:56px; }
}

/* P6A-2: Micro proof row ─────────────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-proof-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 14px;
}
body:has(#sec-upload.active) .fd-proof-item {
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.68;
  white-space:nowrap;
}
body:has(#sec-upload.active) .fd-proof-sep {
  display:inline-block;
  width:3px;height:3px;
  border-radius:50%;
  background:var(--muted);
  opacity:.28;
  vertical-align:middle;
  flex-shrink:0;
}

/* P6A-3: Section container ───────────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-info-section {
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-info-section { gap:20px; }
}

/* P6A-4: Section heading ─────────────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-section-title {
  font-family:'Syne',sans-serif;
  font-size:20px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--text);
  margin:0;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-section-title { font-size:22px; }
}
@media (min-width:1024px){
  body:has(#sec-upload.active) .fd-section-title { font-size:24px; }
}

/* P6A-5: How-it-works steps ─────────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-how-steps {
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
body:has(#sec-upload.active) .fd-how-step {
  display:flex;
  align-items:flex-start;
  gap:12px;
}
body:has(#sec-upload.active) .fd-how-step-num {
  flex-shrink:0;
  width:22px;height:22px;
  border-radius:50%;
  background:rgba(240,165,0,.08);
  border:1px solid rgba(240,165,0,.18);
  color:var(--accent);
  font-family:'DM Mono',monospace;
  font-size:11px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
}
body:has(#sec-upload.active) .fd-how-step-title {
  font-size:14px;
  font-weight:500;
  color:var(--text);
  line-height:1.55;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-how-step-title { font-size:15px; }
}

/* P6A-6: What-it-does body ──────────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-what-body {
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin:0;
  max-width:58ch;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-what-body { font-size:15px; }
}

/* P6A-7: Card grid ──────────────────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-card-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-card-grid {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
}

/* P6A-8: Card ───────────────────────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-card {
  padding:14px 16px;
  border-radius:10px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  gap:5px;
}
body:has(#sec-upload.active) .fd-card-title {
  font-size:13px;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
}
body:has(#sec-upload.active) .fd-card-body {
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  margin:0;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-card { padding:16px 18px; }
  body:has(#sec-upload.active) .fd-card-title { font-size:14px; }
}

/* P6A-9: Contrast block body ────────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-contrast-body {
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin:0;
  padding:14px 16px;
  border-radius:10px;
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.06);
  max-width:60ch;
}
@media (min-width:640px){
  body:has(#sec-upload.active) .fd-contrast-body {
    font-size:15px;
    padding:16px 20px;
  }
}

/* end Packet 6A — Front-door core SEO/product content */

/* ══════════════════════════════════════════════════════════════════════════
   PACKET 6B — FRONT-DOOR EXPLANATION, FAQ, FINAL CTA  2026-04-24
   Scope: explanation/account blocks, FAQ list, final CTA anchor inside
   #sec-upload only. No first-screen, no workspace, no JS changes.
   ══════════════════════════════════════════════════════════════════════════ */

/* P6B-1: Explain list (preview/account bullet points) ───────────────────── */
body:has(#sec-upload.active) .fd-explain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body:has(#sec-upload.active) .fd-explain-item {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  padding-left: 16px;
  position: relative;
}
body:has(#sec-upload.active) .fd-explain-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-explain-item { font-size: 15px; }
}

/* P6B-2: FAQ list ────────────────────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}
body:has(#sec-upload.active) .fd-faq-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
body:has(#sec-upload.active) .fd-faq-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, .06);
}
body:has(#sec-upload.active) .fd-faq-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin: 0 0 5px;
}
body:has(#sec-upload.active) .fd-faq-a {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-faq-item { padding: 16px 0; }
  body:has(#sec-upload.active) .fd-faq-q { font-size: 15px; }
  body:has(#sec-upload.active) .fd-faq-a { font-size: 14px; }
}
@media (min-width: 1024px) {
  body:has(#sec-upload.active) .fd-faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
  }
  body:has(#sec-upload.active) .fd-faq-item {
    border-top: 1px solid rgba(255, 255, 255, .06);
  }
  body:has(#sec-upload.active) .fd-faq-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, .06);
  }
}

/* P6B-3: Final CTA ──────────────────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-final-cta {
  align-items: center;
  text-align: center;
  padding: 32px 0 16px;
}
body:has(#sec-upload.active) .fd-final-cta-link {
  display: inline-block;
  padding: 11px 28px;
  border-radius: 8px;
  background: var(--accent);
  color: #000;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: opacity .15s;
}
body:has(#sec-upload.active) .fd-final-cta-link:hover {
  opacity: .88;
}
body:has(#sec-upload.active) .fd-final-cta-support {
  margin: 10px 0 0;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .55;
}

/* end Packet 6B — Front-door explanation, FAQ, final CTA */

/* ══════════════════════════════════════════════════════════════════════════
   PACKET 7 — FRONT-DOOR BELOW-FOLD COMPOSITION  2026-04-24
   Scope: composition reframe of below-fold sections inside #sec-upload.
   New classes: .fd-featured-section, .fd-how-featured, .fd-audience-capabilities,
   .fd-workflow-panel, .fd-trust-note, .fd-cap-row, .fd-cap-chip.
   Overrides: .fd-proof-row item sizing, .fd-final-cta stronger close.
   No first-screen, no workspace, no JS changes.
   ══════════════════════════════════════════════════════════════════════════ */

/* P7-1: Proof row — more intentional, still quiet ───────────────────────── */
body:has(#sec-upload.active) .fd-proof-row {
  padding: 10px 0;
}
body:has(#sec-upload.active) .fd-proof-item {
  font-size: 12px;
  opacity: .78;
}

/* P7-2: Featured section base ───────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-featured-section {
  padding: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-featured-section {
    padding: 28px 32px;
    gap: 24px;
  }
}

/* P7-3: How-featured intro block ────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-how-featured-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body:has(#sec-upload.active) .fd-how-featured-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 48ch;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-how-featured-body { font-size: 15px; }
}
@media (min-width: 1024px) {
  body:has(#sec-upload.active) .fd-how-featured {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 0 40px;
    align-items: start;
  }
}

/* P7-4: Audience + capabilities combined section ────────────────────────── */
body:has(#sec-upload.active) .fd-audience-capabilities {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-audience-capabilities { gap: 20px; }
}
body:has(#sec-upload.active) .fd-aud-cap-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body:has(#sec-upload.active) .fd-aud-cap-intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-aud-cap-intro { font-size: 15px; }
}
body:has(#sec-upload.active) .fd-cap-row {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body:has(#sec-upload.active) .fd-cap-chip {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .8;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.02);
  white-space: nowrap;
}

/* P7-5: Workflow panel — amber-accented featured section ────────────────── */
body:has(#sec-upload.active) .fd-workflow-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  border-radius: 10px;
  background: rgba(240,165,0,.022);
  border: 1px solid rgba(255,255,255,.07);
  border-left-width: 3px;
  border-left-color: rgba(240,165,0,.32);
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-workflow-panel { padding: 24px 28px; }
}
body:has(#sec-upload.active) .fd-workflow-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-workflow-body { font-size: 15px; }
}

/* P7-6: Trust note — compact, quiet ─────────────────────────────────────── */
body:has(#sec-upload.active) .fd-trust-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  opacity: .72;
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(255,255,255,.05);
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-trust-note { font-size: 14px; }
}

/* P7-7: Final CTA — stronger closing section ────────────────────────────── */
body:has(#sec-upload.active) .fd-final-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 16px;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-final-cta { padding: 48px 40px; }
}
body:has(#sec-upload.active) .fd-final-cta-heading {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 20px;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-final-cta-heading {
    font-size: 26px;
    margin-bottom: 24px;
  }
}
@media (min-width: 1024px) {
  body:has(#sec-upload.active) .fd-final-cta-heading { font-size: 28px; }
}

/* end Packet 7 — Front-door below-fold composition */

/* ══════════════════════════════════════════════════════════════════════════
   PACKET 8 — FRONT-DOOR CINEMATIC VISUAL EMPHASIS  2026-04-24
   Scope: additive visual polish on front-door welcome screen only.
   Deeper ambient, stronger hero edge, proof strip band, featured section
   hierarchy, audience/chip refinements, workflow panel promotion with
   static media object, final CTA strengthening.
   No templates changed except one decorative aria-hidden object added
   inside .fd-workflow-panel. No JS. No DOM IDs changed. Workspace untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* P8-1: Front-door ambient depth — slightly deeper than P5 ─────────────── */
body:has(#sec-upload.active)::before {
  background:
    radial-gradient(ellipse 64vw 50vh at 14% 6%,  rgba(240,165,0,.026) 0%, transparent 58%),
    radial-gradient(ellipse 46vw 32vh at 86% 82%, rgba(240,165,0,.014) 0%, transparent 56%);
}

/* P8-2: Product window — stronger edge hierarchy, more depth ────────────── */
body:has(#sec-upload.active) .fd-hero-card {
  border-color: rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(240,165,0,.05),
    0 16px 48px rgba(0,0,0,.52);
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(240,165,0,.028), transparent 52%),
    linear-gradient(180deg, rgba(16,16,34,.99), rgba(12,12,24,.99));
}
@media (min-width:640px) {
  body:has(#sec-upload.active) .fd-hero-card { border-radius: 22px; }
}
@media (min-width:1024px) {
  body:has(#sec-upload.active) .fd-hero-card { border-radius: 26px; }
}

/* P8-3: Hero card top-edge amber rail ───────────────────────────────────── */
body:has(#sec-upload.active) .fd-hero-card::after {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,165,0,.28), transparent);
  border-radius: 1px;
  pointer-events: none;
}

/* P8-4: Upload zone — tighter fill, slightly brighter dashed border ─────── */
body:has(#sec-upload.active) #fd-hero-card #upload-zone {
  background: rgba(4,4,14,.68);
  border-color: rgba(255,255,255,.13);
}

/* P8-5: Proof strip — intentional horizontal band treatment ─────────────── */
body:has(#sec-upload.active) .fd-proof-row {
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(255,255,255,.022);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body:has(#sec-upload.active) .fd-proof-item {
  opacity: .88;
  font-size: 12px;
  color: var(--text);
}
body:has(#sec-upload.active) .fd-proof-sep {
  opacity: .18;
}

/* P8-6: Featured how section — stronger surface tier ───────────────────── */
body:has(#sec-upload.active) .fd-featured-section {
  background: rgba(255,255,255,.048);
  border-color: rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 16px rgba(0,0,0,.18);
}
body:has(#sec-upload.active) .fd-how-featured .fd-section-title {
  font-size: 22px;
}
@media (min-width:640px) {
  body:has(#sec-upload.active) .fd-how-featured .fd-section-title { font-size: 24px; }
}
@media (min-width:1024px) {
  body:has(#sec-upload.active) .fd-how-featured .fd-section-title { font-size: 26px; }
}
body:has(#sec-upload.active) .fd-how-step-num {
  background: rgba(240,165,0,.12);
  border-color: rgba(240,165,0,.26);
  width: 24px; height: 24px;
}

/* P8-7: Audience cards — slightly brighter edges, stronger title contrast ── */
body:has(#sec-upload.active) .fd-card {
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.034);
}
body:has(#sec-upload.active) .fd-card-title {
  color: rgba(255,255,255,.92);
}

/* P8-8: Capability chips — slightly more product-like ───────────────────── */
body:has(#sec-upload.active) .fd-cap-chip {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.032);
  color: rgba(255,255,255,.78);
  opacity: 1;
}

/* P8-9: Workflow panel — promote to product-demonstration anchor ─────────── */
body:has(#sec-upload.active) .fd-workflow-panel {
  background: rgba(240,165,0,.030);
  border-color: rgba(255,255,255,.09);
  border-left-color: rgba(240,165,0,.50);
  border-left-width: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 14px rgba(0,0,0,.16);
  gap: 18px;
}
@media (min-width:1024px) {
  body:has(#sec-upload.active) .fd-workflow-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px 32px;
    align-items: center;
  }
}

/* P8-9a: Workflow copy wrapper ──────────────────────────────────────────── */
body:has(#sec-upload.active) .fd-workflow-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* P8-10: Static decorative media/alignment object ───────────────────────── */
body:has(#sec-upload.active) .fd-media-preview {
  flex-shrink: 0;
  width: 100%;
}
@media (min-width:1024px) {
  body:has(#sec-upload.active) .fd-media-preview {
    width: 140px;
  }
}

body:has(#sec-upload.active) .fd-media-preview-frame {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 52px;
  border-radius: 8px;
  background: rgba(240,165,0,.06);
  border: 1px solid rgba(240,165,0,.18);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 6px 10px;
  box-sizing: border-box;
}
@media (min-width:1024px) {
  body:has(#sec-upload.active) .fd-media-preview-frame {
    max-width: 140px;
    height: 68px;
  }
}

body:has(#sec-upload.active) .fd-media-bar {
  display: block;
  border-radius: 2px 2px 0 0;
  background: rgba(240,165,0,.36);
  flex-shrink: 0;
  width: 6px;
}
body:has(#sec-upload.active) .fd-media-bar-a { height: 60%; }
body:has(#sec-upload.active) .fd-media-bar-b { height: 85%; background: rgba(240,165,0,.55); }
body:has(#sec-upload.active) .fd-media-bar-c { height: 45%; }

body:has(#sec-upload.active) .fd-media-marker {
  position: absolute;
  top: 4px; bottom: 4px;
  left: 44%;
  width: 1px;
  background: rgba(240,165,0,.70);
  border-radius: 1px;
}
body:has(#sec-upload.active) .fd-media-marker::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(240,165,0,.90);
}

/* P8-11: Final CTA — stronger panel silhouette, clearer close ───────────── */
body:has(#sec-upload.active) .fd-final-cta {
  background: rgba(255,255,255,.044);
  border-color: rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 20px rgba(0,0,0,.22);
}
body:has(#sec-upload.active) .fd-final-cta-heading {
  color: rgba(255,255,255,.95);
}

/* end Packet 8 — Front-door cinematic visual emphasis */

/* ── OARC-05: Original audio ranges panel ──────────────────────────────── */
.panel-audio-ranges .sar-helper{font-size:.75rem;color:var(--muted);margin-bottom:12px;line-height:1.4}
.sar-input-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.sar-field{display:flex;flex-direction:column;gap:3px;flex:1;min-width:64px}
.sar-label{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sar-num{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-btn);color:var(--text);padding:8px 10px;font-size:.82rem;width:100%;outline:none;font-family:'DM Mono',monospace;-moz-appearance:textfield}
.sar-num::-webkit-outer-spin-button,.sar-num::-webkit-inner-spin-button{-webkit-appearance:none}
.sar-num:focus{border-color:var(--accent)}
.sar-gain-select{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-btn);color:var(--text);padding:8px 10px;font-size:.82rem;width:100%;outline:none;cursor:pointer;font-family:'DM Mono',monospace}
.sar-gain-select:focus{border-color:var(--accent)}
.sar-btn-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.sar-btn{flex:1;min-width:80px;padding:9px 10px;font-size:.76rem;font-family:'DM Mono',monospace;letter-spacing:.04em;border-radius:var(--r-btn);border:1px solid var(--border-standard);background:var(--surface);color:var(--text);cursor:pointer;transition:all .15s;white-space:nowrap}
.sar-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.sar-btn:disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
.sar-btn-save{border-color:rgba(240,165,0,.45);color:var(--accent)}
.sar-btn-save:not(:disabled):hover{background:rgba(240,165,0,.08)}
.sar-btn-clear{border-color:rgba(255,71,87,.35);color:var(--danger)}
.sar-btn-clear:not(:disabled):hover{background:rgba(255,71,87,.06)}
.sar-error{font-size:.75rem;color:var(--danger);margin-bottom:6px;padding:6px 10px;background:rgba(255,71,87,.07);border-radius:var(--r);border:1px solid rgba(255,71,87,.18);line-height:1.4}
.sar-status{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--muted);min-height:16px;margin-bottom:6px}
.sar-status.sar-ok{color:var(--ok)}
.sar-status.sar-dirty{color:var(--accent)}
.sar-status.sar-err{color:var(--danger)}
.sar-list{display:flex;flex-direction:column;gap:5px}
.sar-list.sar-loading{opacity:.5;pointer-events:none}
.sar-item{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r);padding:7px 10px}
.sar-item-text{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--text);flex:1}
.sar-item-gain{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--muted);flex-shrink:0}
.sar-item-remove{width:26px;height:26px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--muted2);cursor:pointer;font-size:.72rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;padding:0;line-height:1}
.sar-item-remove:hover{border-color:var(--danger);color:var(--danger)}
.sar-empty{font-size:.73rem;color:var(--muted2);font-style:italic;padding:3px 2px}
.panel-audio-ranges.sar-busy .sar-input-row input,.panel-audio-ranges.sar-busy .sar-input-row select{opacity:.45;pointer-events:none}
/* end OARC-05 */

/* ── Subtitle Style Card — SUBSTYLE-UI-SHELL ─────────────────────────────── */
.substyle-card-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.substyle-card-summary{font-family:'DM Mono',monospace;font-size:.75rem;color:var(--muted)}
.substyle-edit-btn{padding:8px 14px;min-height:36px;font-size:.78rem}

/* ── Subtitle Style Dialog ───────────────────────────────────────────────── */
#substyle-dialog{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center}
#substyle-dialog[hidden]{display:none}
.substyle-dialog-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.substyle-dialog-box{position:relative;z-index:1;background:var(--card);border:1px solid var(--border-standard);border-radius:var(--r2);width:min(380px,90vw);box-shadow:var(--shadow);max-height:calc(100vh - 48px);display:flex;flex-direction:column;overflow:hidden}
@supports (height:1dvh){.substyle-dialog-box{max-height:min(90dvh,calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px))}}
.substyle-dialog-top{padding:20px 20px 0;flex-shrink:0}
.substyle-dialog-body{padding:0 20px 20px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:1 1 auto}
.substyle-dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.substyle-advanced-toggle{width:100%;text-align:left;padding:8px 0;font-size:.78rem;font-weight:700;color:var(--muted);background:none;border:none;border-top:1px solid var(--border-standard);cursor:pointer;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.substyle-advanced-toggle::after{content:'›';margin-left:auto;font-size:1rem;transition:transform .2s;display:inline-block}
.substyle-advanced-toggle[aria-expanded="true"]::after{transform:rotate(90deg)}
.substyle-advanced-body[hidden]{display:none}
.substyle-dialog-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem}
.substyle-dialog-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem;padding:4px 8px;border-radius:var(--r);transition:color .15s;line-height:1}
.substyle-dialog-close:hover{color:var(--text)}
.substyle-dialog-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.substyle-preview-wrap{background:var(--surface);border-radius:var(--r);padding:24px 16px;text-align:center;margin-bottom:14px;min-height:64px;display:flex;align-items:center;justify-content:center}
.substyle-preview-text{font-size:.95rem;color:var(--text);font-weight:600}
.substyle-disclaimer{font-size:.68rem;color:var(--muted);font-family:'DM Mono',monospace;line-height:1.5;text-align:center}
.substyle-controls-section{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.substyle-control-label{font-size:.78rem;color:var(--muted);flex-shrink:0;min-width:52px}
.substyle-position-select{font-size:.8rem;padding:5px 8px;border-radius:var(--r);border:1px solid var(--border-standard);background:var(--surface);color:var(--text);cursor:pointer;flex:1}
.substyle-position-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.substyle-range{flex:1;min-width:0;cursor:pointer;accent-color:var(--accent)}
.substyle-range-val{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--muted);white-space:nowrap}
.substyle-seg-btns{display:flex;gap:4px;flex:1}
.substyle-seg-btn{flex:1;padding:5px 8px;font-size:.78rem;border:1px solid var(--border-standard);border-radius:var(--r);background:var(--surface);color:var(--text);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.substyle-seg-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.substyle-seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.substyle-color-input{width:40px;height:32px;border:1px solid var(--border-standard);border-radius:var(--r);padding:2px;background:var(--surface);cursor:pointer}
.substyle-preview-wrap[data-position="lower"]{align-items:flex-end}
.substyle-preview-wrap[data-position="raised"]{align-items:flex-start}
.substyle-preview-wrap[data-position="center_low"]{align-items:center}
.substyle-disclaimer{margin-bottom:12px;margin-top:0}
.substyle-section-label{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin:2px 0 10px}
.substyle-card-preview{background:var(--surface);border-radius:var(--r);padding:10px 14px;text-align:center;margin-bottom:10px;min-height:40px;display:flex;align-items:center;justify-content:center}
.substyle-card-preview-text{font-size:.9rem;line-height:1.4}
.substyle-color-row{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.substyle-color-swatch{width:20px;height:20px;border-radius:4px;border:1px solid var(--border-standard);flex-shrink:0;background:#fff}
.substyle-color-label{font-size:.78rem;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.substyle-color-input{width:44px;height:44px}
.substyle-seg-btn{min-height:44px}
.substyle-dialog-close{min-width:44px;min-height:44px}
.substyle-position-select{min-height:44px}
/* SUBSTYLE-PRESETS-FX */
.substyle-presets-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.substyle-preset-btn{flex:1 1 auto;min-width:60px;padding:6px 8px;font-size:.75rem;border:1px solid var(--border-standard);border-radius:var(--r);background:var(--surface);color:var(--text);cursor:pointer;transition:background .15s,color .15s,border-color .15s;min-height:40px}
.substyle-preset-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.substyle-preset-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.substyle-effects-row{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.substyle-toggle{width:20px;height:20px;flex-shrink:0;cursor:pointer;accent-color:var(--accent)}
.substyle-color-input--inline{width:36px;height:36px;flex-shrink:0;padding:2px;border:1px solid var(--border-standard);border-radius:var(--r);background:var(--surface);cursor:pointer}
.substyle-stroke-color--disabled{opacity:.35;pointer-events:none}
@media (max-height:700px){
  .substyle-preview-wrap{padding:14px 16px;min-height:48px}
  .substyle-dialog-header{margin-bottom:10px}
  .substyle-controls-section{margin-bottom:10px}
  .substyle-section-label{margin:2px 0 6px}
}
/* end SUBSTYLE-UI-SHELL */

/* ══════════════════════════════════════════════════════════════════════════
   PATCH 01 — SHELL TOKENS SAFETY  2026-05-18
   Scope: CSS-only shell safety reconciliation. No templates, no JS, no
   DOM IDs changed. Appended after all prior packet sections.
   ══════════════════════════════════════════════════════════════════════════ */

/* P01-1: Sticky CTA — suppress during loading state ─────────────────────── */
/* Narrowest guardrail: workspace render CTA must not appear while
   #sec-loading is active (first-upload path: #sec-loading.active without
   overlay-mode; re-upload path: #sec-loading.overlay-mode.active, where the
   overlay is z-index:200 and CTA is z-index:100). Both paths are safe to
   suppress. Existing F3-8 suppression for #sec-upload.active is unchanged. */
body:has(#sec-loading.active) #sticky-cta{display:none}

/* P01-2: Resume banner — wrapping safety at narrow viewports ───────────── */
/* At 320/375px the .rb-row action pair can overflow. Allow banner to wrap
   and reduce horizontal padding. Scoped to #resume-banner to avoid affecting
   other .rb-row usage in workspace controls. */
@media (max-width:420px){
  #resume-banner{padding:8px 12px}
  #resume-banner .rb-row{flex-wrap:wrap;gap:6px}
}

/* P01-3: Loading card — safe padding at 320px in overlay mode ──────────── */
/* Overlay card width is min(320px,88vw)≈281px at 320px; reduce horizontal
   padding so progress text does not overflow the card. */
@media (max-width:420px){
  #sec-loading.overlay-mode .card{padding:14px}
}

/* end Patch 01 — Shell Tokens Safety */

/* ══════════════════════════════════════════════════════════════════════════
   PATCH 02 — FRONT-DOOR AMBER/GLASS STUDIO VISUAL  2026-05-18
   Scope: _upload_loading.html front-door visual overhaul only.
   Implements player-card, access-panel, flow-rail, console-block, endcap-wave
   from the selected polished amber reference.
   No workspace, no JS, no backend, no locale changes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── P02-1: Deeper amber atmosphere on front-door ── */
body:has(#sec-upload.active)::before {
  background:
    radial-gradient(circle at 50% 4%, rgba(240,165,0,.12), transparent 30rem),
    radial-gradient(ellipse 70vw 50vh at 15% 8%, rgba(240,165,0,.05), transparent 65%);
}

/* ── P02-2: Hero head — centered layout + eyebrow ── */
body:has(#sec-upload.active) .fd-hero { align-items: center; }
body:has(#sec-upload.active) .fd-hero-head { align-items: center; text-align: center; }

.fd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffbf4d;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fd-eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
@media (min-width: 640px) {
  .fd-eyebrow::after {
    content: "";
    width: 34px; height: 1px;
    background: linear-gradient(90deg, currentColor, transparent);
  }
}

/* ── P02-3: Player-card — amber glass studio surface ── */
body:has(#sec-upload.active) .fd-hero-card {
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022)),
    rgba(16,16,24,.92);
  box-shadow:
    0 34px 90px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.07);
  padding: 0;
  overflow: hidden;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .fd-hero-card { border-radius: 22px; }
}
@media (min-width: 1024px) {
  body:has(#sec-upload.active) .fd-hero-card { border-radius: 22px; }
}

/* ── P02-4: Player top row ── */
.fd-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 0;
}

/* Reset state chip to inline status — overrides Packet 3/5 absolute positioning */
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip,
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip--quiet {
  position: static;
  height: auto; padding: 0;
  border: none; background: none; box-shadow: none;
  font-family: 'DM Mono', monospace; font-size: 12px;
  letter-spacing: .04em; text-transform: none;
  color: #8f8997; opacity: 1;
  display: inline-flex; align-items: center; gap: 8px;
}
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f0a500;
  box-shadow: 0 0 20px rgba(240,165,0,.62);
  margin-right: 0;
}
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="ready"]   { color: #8f8997; opacity: 1; }
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="locked"]  { color: #ffbf4d; opacity: 1; }
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="loading"] { color: #8f8997; opacity: 1; }
body:has(#sec-upload.active) .fd-hero-card .fd-state-chip[data-state="loading"] .fd-state-chip-dot {
  animation: fdAuthPulse 1.2s ease-in-out infinite;
}
.fd-meta-chip {
  white-space: nowrap;
  color: #6d6875;
  font-size: 12px;
  font-family: 'DM Mono', monospace;
}

/* ── P02-5: Upload zone — glass screen drop area ── */
body:has(#sec-upload.active) #fd-hero-card #upload-zone {
  position: relative;
  display: grid;
  gap: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  margin-bottom: 0;
  cursor: pointer;
}
body:has(#sec-upload.active) #fd-hero-card #upload-zone:hover,
body:has(#sec-upload.active) #fd-hero-card #upload-zone.drag {
  border-color: transparent;
  background: transparent;
}
/* file input covers entire zone — on top of all decorative layers */
body:has(#sec-upload.active) #fd-hero-card #upload-zone input[type="file"] {
  position: absolute;
  inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
  z-index: 10;
}
/* hide old emoji icon */
body:has(#sec-upload.active) #fd-hero-card .upload-icon { display: none; }

/* ── P02-6: Screen surface — dark player glass ── */
.fd-screen {
  min-height: 210px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016)),
    radial-gradient(circle at 72% 18%, rgba(240,165,0,.16), transparent 20rem),
    #090a0d;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.fd-screen::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(240,165,0,.11), transparent);
  width: 32%;
  transform: translateX(-95%);
  animation: fd-scan 5.6s ease-in-out infinite;
}
@media (min-width: 640px)  { .fd-screen { min-height: 328px; } }
@media (min-width: 1024px) { .fd-screen { min-height: 350px; } }
@media (max-width: 520px)  { .fd-screen { min-height: 186px; } }

/* ── P02-7: Upload slot (inner inset glass frame) ── */
.fd-upload-slot {
  position: absolute;
  inset: 52px 16px 86px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 35%, rgba(240,165,0,.11), transparent 11rem),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  overflow: hidden;
  display: grid;
  place-items: center;
}
.fd-upload-slot::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -34%; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,191,77,.16), transparent);
  filter: blur(.2px);
  animation: fd-slot-scan 4.6s ease-in-out infinite;
}
.fd-upload-slot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 72px 100%;
  opacity: .18;
}
@media (max-width: 520px)  { .fd-upload-slot { inset: 44px 12px 70px; } }
@media (min-width: 640px)  { .fd-upload-slot { inset: 62px 18px 94px; } }

/* ── P02-8: Slot waveform bars ── */
.fd-slot-wave {
  position: absolute;
  z-index: 2;
  left: 18px; right: 18px; bottom: 14px;
  height: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  opacity: .82;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}
.fd-slot-wave i {
  width: 4px;
  height: calc(8px + var(--h) * 1px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,191,77,.92), rgba(240,165,0,.12));
  animation: fd-beat 1.9s ease-in-out infinite;
  animation-delay: calc(var(--d) * -90ms);
}
@media (max-width: 520px) {
  .fd-slot-wave { bottom: 10px; height: 24px; gap: 3px; }
  .fd-slot-wave i { width: 3px; }
}

/* ── P02-9: Timeline ── */
.fd-timeline {
  position: absolute;
  left: 16px; right: 16px; bottom: 18px;
  display: grid;
  gap: 9px;
  pointer-events: none;
}
.fd-timeline-row {
  display: grid;
  grid-template-columns: 38px 1fr 46px;
  gap: 10px;
  align-items: center;
}
.fd-play-vis {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #f8f1e4;
  color: #09090c;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  flex-shrink: 0;
}
.fd-time-vis {
  color: #8f8997;
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: 'DM Mono', monospace;
}
.fd-beatline {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.fd-beatline i {
  display: block;
  width: 4px;
  height: calc(8px + var(--h) * 1px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,191,77,.96), rgba(240,165,0,.18));
  opacity: .82;
  animation: fd-beat 1.9s ease-in-out infinite;
  animation-delay: calc(var(--d) * -80ms);
}
.fd-progress-track {
  height: 3px; border-radius: 99px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.fd-progress-fill {
  display: block; width: 62%; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0a500, #8ee6c8);
  animation: fd-progress 5.6s ease-in-out infinite;
}
@media (max-width: 520px) {
  .fd-timeline-row { grid-template-columns: 34px 1fr 40px; gap: 8px; }
  .fd-play-vis { width: 34px; height: 34px; }
}

/* ── P02-10: Player bottom — upload copy + amber CTA ── */
.fd-player-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  pointer-events: none;
}
body:has(#sec-upload.active) #fd-hero-card .upload-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(18px, 4vw, 26px);
  line-height: 1.04;
  font-weight: 720;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
body:has(#sec-upload.active) #fd-hero-card .upload-sub {
  color: #8f8997;
  font-size: 13px;
  line-height: 1.43;
  margin-top: 0;
}
body:has(#sec-upload.active) #fd-hero-card .upload-limit {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #6d6875;
  margin-top: 4px;
  letter-spacing: .04em;
}
.fd-primary-cta {
  height: 48px; min-height: 48px; min-width: 158px;
  border-radius: 999px; padding: 0 22px;
  background:
    linear-gradient(180deg, rgba(255,236,196,.18), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #f59e0b 0%, #d97706 48%, #b45309 100%);
  color: #160b02;
  font-size: 14px; font-weight: 820; line-height: 1;
  box-shadow: 0 16px 34px rgba(180,83,9,.28), inset 0 1px 0 rgba(255,232,184,.24);
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; flex-shrink: 0;
  pointer-events: none;
}
@media (max-width: 520px) {
  .fd-player-bottom { flex-direction: column; align-items: flex-start; }
  .fd-primary-cta { width: 100%; justify-content: center; }
}

/* ── P02-11: Auth gate fits new card structure ── */
body:has(#sec-upload.active) .fd-gate {
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(240,165,0,.14);
}

/* ── P02-12: Access panel — presentational path choices ── */
body:has(#sec-upload.active) .access-panel {
  width: 100%;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 18px;
  background: rgba(255,255,255,.022);
  padding: 7px;
  display: grid;
  gap: 6px;
}
@media (min-width: 640px) {
  body:has(#sec-upload.active) .access-panel {
    grid-template-columns: minmax(190px, 1.25fr) minmax(150px, 1fr) minmax(150px, 1fr);
    align-items: stretch;
  }
}
body:has(#sec-upload.active) .path {
  border: 1px solid transparent;
  background: transparent;
  color: #cfc7ba;
  border-radius: 13px;
  padding: 11px;
  text-align: left;
  transition: border-color .18s ease, background .18s ease;
}
body:has(#sec-upload.active) .path[data-active="true"] {
  border-color: rgba(240,165,0,.54);
  background: rgba(240,165,0,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
body:has(#sec-upload.active) .path strong {
  display: block; font-size: 15px; color: #f6f2ea;
}
body:has(#sec-upload.active) .path em {
  display: block; margin-top: 4px; font-style: normal;
  color: #8f8997; font-size: 12px; line-height: 1.35;
}
body:has(#sec-upload.active) .path-free strong { font-size: 17px; }
body:has(#sec-upload.active) .path-free em { color: #ffbf4d; }
@media (min-width: 640px) {
  body:has(#sec-upload.active) .path       { min-height: 82px; }
  body:has(#sec-upload.active) .path-free  { min-height: 90px; }
}
@media (max-width: 520px) {
  body:has(#sec-upload.active) .access-panel { padding: 6px; gap: 4px; }
  body:has(#sec-upload.active) .path         { padding: 10px; }
  body:has(#sec-upload.active) .path strong  { font-size: 14px; }
  body:has(#sec-upload.active) .path-free strong { font-size: 15px; }
}

/* ── P02-13: Practical line ── */
body:has(#sec-upload.active) .fd-practical-line {
  display: block;
  width: min(980px, 100%);
  margin: 16px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.075);
  color: #8f8997;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 520px) { body:has(#sec-upload.active) .fd-practical-line { text-align: left; } }

/* ── P02-14: Flow rail — CSS-marquee amber ticker ── */
body:has(#sec-upload.active) .fd-flow-rail {
  width: min(980px, 100%);
  height: 58px;
  margin: 14px auto 0;
  border: 1px solid rgba(255,218,156,.18);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,250,238,.066), rgba(255,255,255,.016) 42%, rgba(0,0,0,.16)),
    radial-gradient(ellipse at 50% 54%, rgba(255,209,128,.085), rgba(255,209,128,.032) 31%, transparent 66%),
    rgba(8,8,13,.82);
  box-shadow:
    0 16px 42px rgba(0,0,0,.30),
    0 0 28px rgba(240,165,0,.045),
    inset 0 1px 0 rgba(255,250,238,.11),
    inset 0 -13px 26px rgba(0,0,0,.20);
  overflow: hidden;
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
body:has(#sec-upload.active) .fd-flow-rail::before {
  content: "";
  position: absolute; z-index: 0;
  inset: 1px 20px auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,244,218,.25), rgba(255,209,128,.10), transparent);
  pointer-events: none;
}
body:has(#sec-upload.active) .fd-flow-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
  will-change: transform;
  position: relative; z-index: 1;
  animation: fd-marquee 44s linear infinite;
}
body:has(#sec-upload.active) .fd-flow-sequence {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
body:has(#sec-upload.active) .fd-flow-item {
  font-size: 18px; font-weight: 740;
  line-height: 1; letter-spacing: -.015em;
  background: linear-gradient(180deg, #fffaf0 0%, #f8ecd7 48%, #d8ad68 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
body:has(#sec-upload.active) .fd-flow-sep {
  width: 22px; height: 12px;
  margin: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,218,156,.24);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,226,166,.84) 0 2px, transparent 2.5px),
    linear-gradient(90deg, rgba(255,191,77,.035), rgba(255,216,151,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 12px rgba(240,165,0,.045);
  flex: 0 0 auto;
}
@media (max-width: 520px) {
  body:has(#sec-upload.active) .fd-flow-rail { height: 52px; border-radius: 18px; margin-top: 12px; }
  body:has(#sec-upload.active) .fd-flow-item { font-size: 17px; }
  body:has(#sec-upload.active) .fd-flow-sep  { width: 20px; height: 11px; margin: 0 11px; }
}

/* ── P02-15: Console / before-render block ── */
body:has(#sec-upload.active) .fd-console-block {
  width: min(980px, 100%);
  margin: 50px auto 0;
  border: 1px solid rgba(255,255,255,.066);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.012) 42%, rgba(0,0,0,.10)),
    radial-gradient(ellipse at 26% 0%, rgba(255,224,164,.052), transparent 42%),
    rgba(9,9,14,.78);
  box-shadow:
    0 18px 48px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -18px 36px rgba(0,0,0,.18);
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(214px, .66fr) minmax(0, 1.48fr);
  gap: 14px;
  align-items: center;
}
@media (max-width: 640px) {
  body:has(#sec-upload.active) .fd-console-block {
    margin-top: 34px; border-radius: 18px; padding: 11px;
    grid-template-columns: 1fr; gap: 11px;
  }
}
.fd-console-copy { display: grid; gap: 8px; align-content: center; padding-left: 2px; }
.fd-console-eyebrow {
  margin: 0; color: rgba(255,225,176,.66);
  font-size: 10px; font-weight: 740;
  letter-spacing: .09em; text-transform: uppercase;
}
body:has(#sec-upload.active) .fd-console-copy h2 {
  margin: 0; max-width: 360px;
  color: #eee6d8;
  font-size: clamp(20px, 2.05vw, 25px);
  line-height: 1.09; letter-spacing: -.012em;
  font-family: 'Syne', sans-serif;
}
body:has(#sec-upload.active) .fd-console-copy p {
  margin: 0; max-width: 390px;
  color: #8f8997; font-size: 12.5px; line-height: 1.45;
}
.fd-console-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
@media (max-width: 520px) { .fd-console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* console chip — scoped so it doesn't collide with workspace .card */
body:has(#sec-upload.active) .console-chip {
  min-height: 80px;
  border: 1px solid rgba(255,255,255,.052);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.007)),
    rgba(0,0,0,.22);
  padding: 9px;
  display: grid; align-content: space-between; gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
body:has(#sec-upload.active) .console-chip strong {
  display: block; color: #d8d0c3; font-size: 13px; line-height: 1.1;
}
body:has(#sec-upload.active) .console-chip p {
  margin: 4px 0 0; color: #8f8997; font-size: 10.5px; line-height: 1.35;
}
@media (max-width: 520px) {
  body:has(#sec-upload.active) .console-chip { min-height: 76px; padding: 8px; }
  body:has(#sec-upload.active) .console-chip strong { font-size: 12px; }
}

/* control visuals inside console chips */
.fd-control-visual { height: 15px; display: flex; align-items: center; gap: 6px; opacity: .70; }
.fd-meter { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.085); overflow: hidden; }
.fd-meter span { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(255,231,187,.48), rgba(216,173,104,.28)); }
.fd-knob { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255,224,170,.20); background: radial-gradient(circle at 38% 32%, rgba(255,248,231,.38), rgba(255,191,77,.055) 46%, rgba(0,0,0,.22) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.fd-toggle-vis { width: 27px; height: 13px; border-radius: 999px; border: 1px solid rgba(255,224,170,.16); background: rgba(255,191,77,.030); position: relative; }
.fd-toggle-vis::after { content: ""; position: absolute; right: 3px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,232,184,.62); box-shadow: 0 0 8px rgba(240,165,0,.08); }
.fd-mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 15px; }
.fd-mini-bars i { display: block; width: 3px; height: calc(5px + var(--h) * 1px); border-radius: 999px; background: rgba(255,224,170,.34); }
.fd-caption-lines { display: grid; gap: 3px; width: 46px; }
.fd-caption-lines i { display: block; height: 3px; border-radius: 999px; background: rgba(255,255,255,.115); }
.fd-caption-lines i:nth-child(2) { width: 74%; background: rgba(255,224,170,.27); }
.fd-frame-mark { width: 25px; height: 15px; border-radius: 5px; border: 1px solid rgba(255,224,170,.16); background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,191,77,.026)); }
.fd-render-mark { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.085); overflow: hidden; }
.fd-render-mark span { display: block; width: 66%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(142,230,200,.33), rgba(255,224,170,.34)); }

/* ── P02-16: Endcap wave ── */
body:has(#sec-upload.active) .fd-page-endcap,
.vm-brand-note-motif {
  width: min(980px, 100%);
  height: 142px;
  margin: 36px auto 0;
  padding-bottom: 28px;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.vm-brand-note-motif{pointer-events:none}
body:has(#sec-upload.active) .fd-page-endcap::before,
.vm-brand-note-motif::before {
  content: "";
  position: absolute; inset: 16px 10% auto; height: 92px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,191,77,.11), transparent 62%);
  opacity: .72;
}
.fd-endcap-wave,
.vm-brand-note-wave {
  position: relative;
  width: min(560px, 86%); height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.fd-endcap-wave::before,
.vm-brand-note-wave::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,218,156,.30), transparent);
}
.fd-endcap-wave i,
.vm-brand-note-wave i {
  width: 3px;
  height: calc(5px + var(--h) * 1px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,238,202,.54), rgba(216,173,104,.08));
  opacity: .58;
  animation: fd-endcap-pulse 4.8s ease-in-out infinite;
  animation-delay: calc(var(--d) * -120ms);
}
.fd-endcap-dot,
.vm-brand-note-dot {
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,232,184,.68);
  box-shadow: 0 0 18px rgba(240,165,0,.16);
}
.vm-brand-note-motif--workspace,
.vm-brand-note-motif--result {
  width: min(640px, 100%);
  height: 76px;
  margin: 16px auto 0;
  padding-bottom: 0;
  opacity: .95;
}
.vm-brand-note-motif--workspace {
  margin-bottom: clamp(80px, 12vh, 120px);
}
.vm-brand-note-motif--workspace::before,
.vm-brand-note-motif--result::before {
  inset: 6px 12% auto;
  height: 58px;
  opacity: .72;
}
.vm-brand-note-motif--workspace .vm-brand-note-wave,
.vm-brand-note-motif--result .vm-brand-note-wave {
  width: min(460px, 88%);
  height: 36px;
  gap: 4px;
}
.vm-brand-note-motif--workspace .vm-brand-note-wave i,
.vm-brand-note-motif--result .vm-brand-note-wave i {
  width: 3px;
  height: calc(5px + var(--h) * .82px);
  opacity: .76;
}
.vm-brand-note-motif--workspace .vm-brand-note-dot,
.vm-brand-note-motif--result .vm-brand-note-dot {
  width: 4px;
  height: 4px;
  opacity: .92;
}
@media (max-width: 520px) {
  body:has(#sec-upload.active) .fd-page-endcap { height: 112px; margin-top: 26px; padding-bottom: 18px; }
  .fd-endcap-wave,
  .vm-brand-note-wave { width: 92%; height: 34px; gap: 4px; }
  .vm-brand-note-motif--workspace,
  .vm-brand-note-motif--result { height: 64px; margin-top: 12px; }
  .vm-brand-note-motif--workspace { margin-bottom: clamp(86px, 14vh, 128px); }
  .vm-brand-note-motif--workspace .vm-brand-note-wave,
  .vm-brand-note-motif--result .vm-brand-note-wave { width: 88%; height: 32px; }
  .vm-brand-note-motif--workspace .vm-brand-note-wave i,
  .vm-brand-note-motif--result .vm-brand-note-wave i { width: 4px; opacity: .78; }
}

/* ── P02-17: Keyframe animations ── */
@keyframes fd-scan {
  0%   { transform: translateX(-95%); opacity: .18; }
  45%, 55% { opacity: .72; }
  100% { transform: translateX(320%); }
}
@keyframes fd-slot-scan {
  0%, 100% { transform: translateX(0);    opacity: .16; }
  50%       { transform: translateX(470%); opacity: .86; }
}
@keyframes fd-beat {
  0%, 100% { transform: scaleY(.72); opacity: .50; }
  50%       { transform: scaleY(1.1); opacity: .96; }
}
@keyframes fd-progress {
  0%, 100% { width: 30%; }
  52%       { width: 74%; }
}
@keyframes fd-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes fd-endcap-pulse {
  0%, 100% { transform: scaleY(.68); opacity: .42; }
  50%       { transform: scaleY(1.06); opacity: .72; }
}

/* ── P02-18: Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .fd-screen::before,
  .fd-upload-slot::before,
  .fd-slot-wave i,
  .fd-beatline i,
  .fd-progress-fill,
  .fd-endcap-wave i,
  .vm-brand-note-wave i { animation: none !important; }
  body:has(#sec-upload.active) .fd-flow-track { animation: none !important; }
}

/* ── P02-19: Loading section — amber/glass studio card ── */
#sec-loading .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.012) 42%, rgba(0,0,0,.10)),
    rgba(9,9,14,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   PATCH 02B — FRONT-DOOR 1-TO-1 PARITY  2026-05-18
   Scope: _upload_loading.html, index.css, init.js only.
   Closes visual and behavioral parity gaps against polished-19-cta-amber.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── P02B-1: H1 reference sizing — overrides Packet 3/5 constraints ── */
body:has(#sec-upload.active) .fd-hero-title {
  font-size: clamp(36px, 9vw, 82px);
  line-height: .96;
  font-weight: 720;
  max-width: 930px;
}
@media (min-width: 1060px) {
  body:has(#sec-upload.active) .fd-hero-title {
    font-size: clamp(62px, 6.6vw, 90px);
  }
}

/* ── P02B-2: Hero sub ── */
body:has(#sec-upload.active) .fd-hero-sub {
  max-width: 620px;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.52;
}

/* ── P02B-3: Hero padding ── */
body:has(#sec-upload.active) .fd-hero {
  padding-top: 24px;
}
@media (min-width: 760px) {
  body:has(#sec-upload.active) .fd-hero {
    padding-top: 56px;
    gap: 28px;
  }
}

/* ── P02B-4: Player-card reference width + min-height ── */
body:has(#sec-upload.active) .fd-hero-card {
  width: min(980px, 100%);
  max-width: none !important;
  justify-self: center;
}
@media (min-width: 760px) {
  body:has(#sec-upload.active) .fd-hero-card { min-height: 500px; }
}
@media (min-width: 1060px) {
  body:has(#sec-upload.active) .fd-hero-card { min-height: 526px; }
}

/* ── P02B-5: Screen full border + radius + reference breakpoints ── */
.fd-screen {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
}
@media (min-width: 760px) {
  .fd-screen { min-height: 328px; }
}
@media (min-width: 1060px) {
  .fd-screen { min-height: 350px; }
}
@media (max-width: 520px) {
  .fd-screen { border-radius: 15px; }
}

/* ── P02B-6: Drop-zone padding/gap restore (ref: 12px/14px, desktop 16px/16px) ── */
body:has(#sec-upload.active) #fd-hero-card #upload-zone {
  gap: 14px;
  padding: 12px;
}
@media (min-width: 760px) {
  body:has(#sec-upload.active) #fd-hero-card #upload-zone {
    padding: 16px;
    gap: 16px;
  }
}

/* ── P02B-7: Upload slot inset correction (ref mobile: 50px 12px 70px) ── */
@media (max-width: 520px) {
  .fd-upload-slot { inset: 50px 12px 70px; }
}

/* ── P02B-8: Player-top padding at desktop ── */
@media (min-width: 760px) {
  .fd-player-top { padding: 15px 16px 0; }
}

/* ── P02B-9: Stage tag ── */
.fd-stage-tag {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex; align-items: center;
  min-height: 28px; padding: 0 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.12);
  color: #cfc7ba;
  font-size: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 4; pointer-events: none;
  white-space: nowrap;
}

/* ── P02B-10: Render pill ── */
.fd-render-pill {
  position: absolute;
  right: 14px; top: 14px;
  height: 30px; min-height: 30px;
  min-width: 132px; padding: 0 14px;
  border-radius: 999px;
  color: #130d02;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 54%, #b45309 100%);
  font-size: 12px; font-weight: 760;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; white-space: nowrap;
  box-shadow: 0 10px 22px rgba(180,83,9,.26), inset 0 1px 0 rgba(255,232,184,.24);
  z-index: 4; pointer-events: none;
}
@media (max-width: 520px) { .fd-render-pill { display: none; } }

/* ── P02B-11: Slot status cycler ── */
.fd-slot-status {
  position: absolute;
  z-index: 3; top: 13px; left: 13px;
  min-height: 28px; min-width: 126px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(0,0,0,.32);
  color: #cfc7ba;
  font-size: 11px;
  display: grid; place-items: center;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
.fd-slot-status span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: fd-status-cycle 9s linear infinite;
}
.fd-slot-status span:nth-child(2) { animation-delay: 3s; }
.fd-slot-status span:nth-child(3) { animation-delay: 6s; }
@media (max-width: 520px) {
  .fd-slot-status { top: 9px; left: 9px; min-width: 112px; font-size: 10px; }
}

/* ── P02B-12: Drop text ── */
.fd-drop-text {
  position: relative; z-index: 2;
  color: rgba(246,242,234,.56);
  font-size: 13px; font-weight: 760;
  letter-spacing: .16em; text-transform: uppercase;
  pointer-events: none;
}
@media (max-width: 520px) { .fd-drop-text { font-size: 11px; } }

/* ── P02B-13: Path label ── */
.fd-path-label {
  color: #cfc7ba;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  font-family: 'DM Mono', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── P02B-14: Player-bottom upload title ref sizing ── */
body:has(#sec-upload.active) #fd-hero-card .upload-title {
  font-size: clamp(20px, 5.4vw, 32px);
  font-weight: 720;
  line-height: 1.04;
}
body:has(#sec-upload.active) #fd-hero-card .upload-sub {
  max-width: 420px;
}

/* ── P02B-15: Access path buttons — reset + hover + active + focus ── */
body:has(#sec-upload.active) .path {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
body:has(#sec-upload.active) .path:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.15);
}
body:has(#sec-upload.active) .path:focus-visible {
  outline: 2px solid rgba(240,165,0,.70);
  outline-offset: 2px;
}
/* Reset grid at 640–759px (ref grid starts at 760px) */
@media (max-width: 759px) {
  body:has(#sec-upload.active) .access-panel {
    grid-template-columns: 1fr;
  }
}
/* Reference desktop grid at 760px+ */
@media (min-width: 760px) {
  body:has(#sec-upload.active) .access-panel {
    grid-template-columns: minmax(190px, 1.25fr) minmax(150px, 1fr) minmax(150px, 1fr);
    align-items: stretch;
  }
  body:has(#sec-upload.active) .path { min-height: 82px; }
  body:has(#sec-upload.active) .path-free { min-height: 90px; }
}

/* ── P02B-16: Flow rail — full reference material + interaction ── */
body:has(#sec-upload.active) .fd-flow-rail {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  background:
    linear-gradient(180deg, rgba(255,250,238,.066), rgba(255,255,255,.016) 42%, rgba(0,0,0,.16)),
    radial-gradient(ellipse at 50% 54%, rgba(255,209,128,.085), rgba(255,209,128,.032) 31%, transparent 66%),
    radial-gradient(circle at 12% 0%, rgba(255,232,184,.06), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(142,230,200,.04), transparent 32%),
    rgba(8,8,13,.82);
  box-shadow:
    0 16px 42px rgba(0,0,0,.30),
    0 0 28px rgba(240,165,0,.045),
    inset 0 1px 0 rgba(255,250,238,.11),
    inset 0 0 22px rgba(240,165,0,.032),
    inset 0 -13px 26px rgba(0,0,0,.20);
}
body:has(#sec-upload.active) .fd-flow-rail.is-dragging { cursor: grabbing; }
body:has(#sec-upload.active) .fd-flow-rail::after {
  content: "";
  position: absolute; z-index: 0; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -11px 22px rgba(0,0,0,.16);
  pointer-events: none;
}
/* Disable CSS marquee when JS rail is initialized */
body:has(#sec-upload.active) .fd-flow-rail.fd-flow-js .fd-flow-track { animation: none; }

/* ── P02B-17: Flow sequence padding-right ── */
body:has(#sec-upload.active) .fd-flow-sequence { padding-right: 30px; }
@media (max-width: 520px) {
  body:has(#sec-upload.active) .fd-flow-sequence { padding-right: 25px; }
}

/* ── P02B-18: Console block at reference breakpoints ── */
@media (min-width: 760px) {
  body:has(#sec-upload.active) .fd-console-block { margin-top: 56px; }
}
@media (max-width: 520px) {
  body:has(#sec-upload.active) .fd-console-block {
    margin-top: 34px; border-radius: 18px; padding: 11px;
    grid-template-columns: 1fr; gap: 11px;
  }
}

/* ── P02B-19: Keyframe: slot status cycle ── */
@keyframes fd-status-cycle {
  0%, 8%    { opacity: 0; transform: translateY(6px); }
  12%, 29%  { opacity: 1; transform: translateY(0); }
  34%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* ── P02B-20: Reduced motion additions ── */
@media (prefers-reduced-motion: reduce) {
  .fd-slot-status span { animation: none !important; }
}

/* end Patch 02B — Front-Door 1-to-1 Parity */

/* end Patch 02 — Front-door Amber/Glass Studio Visual */

/* ══════════════════════════════════════════════════════════════════════════
   PATCH 02C — FRONT-DOOR EXACT DELTA PARITY  2026-05-18
   Scope: _upload_loading.html, index.css only.
   Closes measurable composition gaps against polished-19-cta-amber reference.
   No JS, no backend, no locale, no header template changes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── P02C-1: Shell/wrap geometry — reference .shell parity ──
   Fallback note: :has() required. Non-:has() browsers retain base narrow
   .wrap layout — intentional; no safe DOM-class fallback without JS edit. */
body:has(#sec-upload.active) .wrap {
  width: min(1220px, calc(100% - 28px));
  max-width: none;
  margin: 0 auto;
  padding: 14px 0 34px;
}
@media (min-width: 1060px) {
  body:has(#sec-upload.active) .wrap {
    width: min(1180px, calc(100% - 40px));
    padding-top: 20px;
  }
}
@media (max-width: 520px) {
  body:has(#sec-upload.active) .wrap {
    width: min(calc(100% - 22px), 1220px);
    padding: 20px 0 28px;
  }
}

/* ── P02C-2: Header CSS mapping — reference topbar dimensions, no template change ── */
body:has(#sec-upload.active) header.fd-header {
  min-height: 50px;
  margin-bottom: 0;
  padding: 0;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
@media (max-width: 520px) {
  body:has(#sec-upload.active) header.fd-header { min-height: 46px; }
}
/* Lang select → pill geometry */
body:has(#sec-upload.active) .fd-lang-select {
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  padding: 0 12px;
  opacity: 1;
}
/* Auth buttons → pill geometry */
body:has(#sec-upload.active) .fd-auth-btn {
  min-height: 34px;
  height: auto;
  border-radius: 999px;
  padding: 0 12px;
}
body:has(#sec-upload.active) .fd-auth-btn--ghost {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.09);
}

/* ── P02C-3: Studio wrapper — groups player-card + access-panel ── */
body:has(#sec-upload.active) .fd-studio {
  display: grid;
  gap: 10px;
  width: min(980px, 100%);
  justify-self: center;
}

/* ── P02C-4: Hero container — reference grid layout ── */
body:has(#sec-upload.active) .fd-hero {
  display: grid;
  gap: 20px;
  padding: 24px 0 0;
  margin-bottom: 0;
}
@media (min-width: 760px) {
  body:has(#sec-upload.active) .fd-hero {
    justify-items: center;
    gap: 28px;
    padding: 56px 0 0;
  }
}
@media (max-width: 520px) {
  body:has(#sec-upload.active) .fd-hero {
    padding-top: 20px;
    gap: 16px;
  }
}

/* ── P02C-5: Hero copy head — reference grid + gap ── */
body:has(#sec-upload.active) .fd-hero-head {
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: none;
  margin: 0;
}
@media (min-width: 760px) {
  body:has(#sec-upload.active) .fd-hero-head {
    justify-items: center;
    text-align: center;
  }
}
@media (max-width: 520px) {
  body:has(#sec-upload.active) .fd-hero-head { gap: 10px; }
}

/* ── P02C-6: Eyebrow — width + mobile font-size ── */
.fd-eyebrow { width: fit-content; }
@media (max-width: 520px) { .fd-eyebrow { font-size: 10px; } }

/* ── P02C-7: H1 font family — reference inherits Inter, not Syne ── */
body:has(#sec-upload.active) .fd-hero-title {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── P02C-8: Player-top default padding ── */
.fd-player-top { padding: 12px 12px 0; }
@media (min-width: 760px) { .fd-player-top { padding: 15px 16px 0; } }

/* ── P02C-9: Player-bottom — remove extra nested padding ── */
body:has(#sec-upload.active) .fd-player-bottom { padding: 0; }

/* ── P02C-10: Upload sub copy ── */
body:has(#sec-upload.active) #fd-hero-card .upload-sub {
  font-size: 14px;
  line-height: 1.43;
  margin: 5px 0 0;
  max-width: 420px;
}

/* ── P02C-11: Practical line desktop margin ── */
@media (min-width: 760px) {
  body:has(#sec-upload.active) .fd-practical-line { margin-top: 20px; }
}

/* ── P02C-12: Flow item text-shadow + alternate gradient ── */
body:has(#sec-upload.active) .fd-flow-item {
  text-shadow: 0 1px 15px rgba(255,207,126,.07), 0 1px 1px rgba(0,0,0,.26);
}
body:has(#sec-upload.active) .fd-flow-item:nth-child(4n+1) {
  background: linear-gradient(180deg, #fffdf7 0%, #f7ead1 46%, #dfb66f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── P02C-13: Console heading min font-size ── */
body:has(#sec-upload.active) .fd-console-copy h2 {
  font-size: clamp(23px, 2.05vw, 25px);
}

/* ── P02C-14: Restore two-column console at 521–640px (Patch 02 collapsed too early) ── */
@media (min-width: 521px) and (max-width: 640px) {
  body:has(#sec-upload.active) .fd-console-block {
    grid-template-columns: minmax(214px, .66fr) minmax(0, 1.48fr);
    gap: 14px;
    margin-top: 50px;
    border-radius: 24px;
    padding: 14px;
  }
}

/* ── P02C-15: Mobile corrections ── */
@media (max-width: 520px) {
  body:has(#sec-upload.active) .fd-console-copy h2 { font-size: 22px; }
  body:has(#sec-upload.active) .fd-console-copy p  { font-size: 12px; }
  body:has(#sec-upload.active) .path em { margin-top: 2px; }
}

/* ── P02C-16: CTA border reset (P2) ── */
.fd-primary-cta { border: 0; box-sizing: border-box; }

/* ── P02C-17: Player-card background alpha .92 → .9 (P2, scoped to front-door) ── */
body:has(#sec-upload.active) .fd-hero-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022)),
    rgba(16,16,24,.9);
}

/* end Patch 02C — Front-Door Exact Delta Parity */

/* ══════════════════════════════════════════════════════════════════════════
   FRONTDOOR REBUILD FROM CODEX DESIGN REFERENCE — 2026-05-19
   Source of truth: polished-19-cta-amber-height-pass.html.
   This block supersedes the earlier Packet 02/02B/02C front-door layers while
   preserving the production hook IDs and workspace styles.
   ══════════════════════════════════════════════════════════════════════════ */

body:has(#sec-upload.active) {
  background:
    radial-gradient(circle at 50% 4%, rgba(240,165,0,.12), transparent 30rem),
    linear-gradient(180deg, #07070a 0%, #050508 56%, #030305 100%);
  color: #f6f2ea;
}
body:has(#sec-upload.active)::before { display: none; }
body:has(#sec-upload.active) .wrap {
  width: min(1220px, calc(100% - 28px));
  max-width: none;
  margin: 0 auto;
  padding: 14px 0 34px;
}

body:has(#sec-upload.active) header.fd-header {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 14px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
body:has(#sec-upload.active) .logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(120deg, #ffbf4d 0%, var(--accent) 42%, var(--accent2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.45rem, 2.25vw, 2rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.025em;
  white-space: nowrap;
}
body:has(#sec-upload.active) .logo span {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  display: inline-block;
  margin-left: .03em;
  font-size: .98em;
  font-weight: 450;
  line-height: .95;
  letter-spacing: 0;
  vertical-align: baseline;
  transform: translateY(.01em);
}
body:has(#sec-upload.active) .logo::before {
  content: none;
}
body:has(#sec-upload.active) .fd-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
body:has(#sec-upload.active) .fd-lang-select,
body:has(#sec-upload.active) .fd-auth-btn {
  min-height: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  background-color: rgba(255,255,255,.035);
  color: #cfc7ba;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
body:has(#sec-upload.active) .fd-lang-select {
  width: auto;
  padding: 0 28px 0 12px;
  background-position: right 10px center;
}
body:has(#sec-upload.active) .fd-auth-area { min-height: 34px; gap: 8px; }
body:has(#sec-upload.active) .fd-auth-label,
body:has(#sec-upload.active) .fd-auth-user {
  color: #cfc7ba;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
body:has(#sec-upload.active) .fd-auth-btn--solid {
  background: #f6f2ea;
  border-color: #f6f2ea;
  color: #050508;
  box-shadow: 0 12px 26px rgba(255,255,255,.06);
}
body:has(#sec-upload.active) .fd-auth-btn--ghost {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.09);
  color: #cfc7ba;
}
body:has(#sec-upload.active) .version { display: none; }

body:has(#sec-upload.active) .fd-hero {
  display: grid;
  gap: 20px;
  padding: 24px 0 0;
  margin: 0;
}
body:has(#sec-upload.active) .fd-hero-head {
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: none;
  margin: 0;
  padding: 0;
}
body:has(#sec-upload.active) .fd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: #ffbf4d;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body:has(#sec-upload.active) .fd-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
body:has(#sec-upload.active) .fd-hero-title {
  margin: 0;
  max-width: 930px;
  color: #f6f2ea;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(36px, 9vw, 82px);
  line-height: .96;
  font-weight: 720;
  letter-spacing: 0;
}
body:has(#sec-upload.active) .fd-hero-sub {
  margin: 0;
  max-width: 620px;
  color: #cfc7ba;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.52;
}

body:has(#sec-upload.active) .fd-studio {
  display: grid;
  gap: 10px;
  width: min(980px, 100%);
  justify-self: start;
}
body:has(#sec-upload.active) .fd-hero-card {
  position: relative;
  width: 100%;
  min-height: auto;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 22px;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022)),
    rgba(16,16,24,.9);
  box-shadow: 0 34px 90px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
}
body:has(#sec-upload.active) .fd-hero-card::before { display: none; }
body:has(#sec-upload.active) .fd-player-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 0;
  color: #8f8997;
  font-size: 12px;
}
body:has(#sec-upload.active) .fd-state-chip,
body:has(#sec-upload.active) .fd-state-chip--quiet {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8f8997;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
body:has(#sec-upload.active) .fd-state-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f0a500;
  box-shadow: 0 0 20px rgba(240,165,0,.62);
}
body:has(#sec-upload.active) .fd-path-label {
  min-width: 0;
  color: #8f8997;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
}
body:has(#sec-upload.active) .fd-meta-chip {
  flex: 0 0 auto;
  color: #6d6875;
  white-space: nowrap;
}

body:has(#sec-upload.active) .fd-upload-frame { position: relative; z-index: 1; }
body:has(#sec-upload.active) #fd-hero-card #upload-zone {
  display: grid;
  gap: 14px;
  padding: 12px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease;
}
body:has(#sec-upload.active) #fd-hero-card #upload-zone:hover,
body:has(#sec-upload.active) #fd-hero-card #upload-zone.drag {
  background: rgba(255,255,255,.018);
}
body:has(#sec-upload.active) #upload-zone input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 6;
}
body:has(#sec-upload.active) .fd-screen {
  min-height: 210px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016)),
    radial-gradient(circle at 72% 18%, rgba(240,165,0,.16), transparent 20rem),
    #090a0d;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
body:has(#sec-upload.active) .fd-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(240,165,0,.11), transparent);
  transform: translateX(-95%);
  animation: fd-scan 5.6s ease-in-out infinite;
}
body:has(#sec-upload.active) .fd-upload-slot {
  position: absolute;
  inset: 52px 16px 86px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 35%, rgba(240,165,0,.11), transparent 11rem),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  overflow: hidden;
}
body:has(#sec-upload.active) .fd-upload-slot::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -34%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,191,77,.16), transparent);
  filter: blur(.2px);
  animation: fd-slot-scan 4.6s ease-in-out infinite;
}
body:has(#sec-upload.active) .fd-upload-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 72px 100%;
  opacity: .18;
}
body:has(#sec-upload.active) .fd-stage-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.12);
  color: #cfc7ba;
  font-size: 12px;
  backdrop-filter: blur(10px);
}
body:has(#sec-upload.active) .fd-render-pill {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-height: 30px;
  min-width: 132px;
  padding: 0 14px;
  border-radius: 999px;
  color: #130d02;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 54%, #b45309 100%);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(180,83,9,.26), inset 0 1px 0 rgba(255,232,184,.24);
}
body:has(#sec-upload.active) .fd-slot-status {
  position: absolute;
  z-index: 3;
  top: 13px;
  left: 13px;
  min-height: 28px;
  min-width: 126px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(0,0,0,.32);
  color: #cfc7ba;
  font-size: 11px;
  backdrop-filter: blur(10px);
}
body:has(#sec-upload.active) .fd-slot-status span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: fd-status-cycle 9s linear infinite;
}
body:has(#sec-upload.active) .fd-slot-status span:nth-child(2) { animation-delay: 3s; }
body:has(#sec-upload.active) .fd-slot-status span:nth-child(3) { animation-delay: 6s; }
body:has(#sec-upload.active) .fd-drop-text {
  position: relative;
  z-index: 2;
  color: rgba(246,242,234,.56);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body:has(#sec-upload.active) .fd-slot-wave {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 34px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  opacity: .82;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
body:has(#sec-upload.active) .fd-slot-wave i,
body:has(#sec-upload.active) .fd-beatline i {
  display: block;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,191,77,.92), rgba(240,165,0,.12));
  animation: fd-beat 1.9s ease-in-out infinite;
  animation-delay: calc(var(--d) * -90ms);
}
body:has(#sec-upload.active) .fd-slot-wave i { height: calc(8px + var(--h) * 1px); }
body:has(#sec-upload.active) .fd-timeline {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  display: grid;
  gap: 9px;
}
body:has(#sec-upload.active) .fd-timeline-row {
  display: grid;
  grid-template-columns: 38px 1fr 46px;
  gap: 10px;
  align-items: center;
}
body:has(#sec-upload.active) .fd-play-vis {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f8f1e4;
  color: #09090c;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
body:has(#sec-upload.active) .fd-time-vis {
  color: #8f8997;
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body:has(#sec-upload.active) .fd-beatline {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
body:has(#sec-upload.active) .fd-beatline i {
  height: calc(8px + var(--h) * 1px);
  opacity: .82;
  animation-delay: calc(var(--d) * -80ms);
}
body:has(#sec-upload.active) .fd-progress-track {
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
body:has(#sec-upload.active) .fd-progress-fill {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0a500, #8ee6c8);
  animation: fd-progress 5.6s ease-in-out infinite;
}

body:has(#sec-upload.active) .fd-player-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
}
body:has(#sec-upload.active) .fd-player-copy { min-width: min(420px, 100%); }
body:has(#sec-upload.active) #fd-hero-card .upload-title {
  margin: 0;
  color: #f6f2ea;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(20px, 5.4vw, 32px);
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: 0;
}
body:has(#sec-upload.active) #fd-hero-card .upload-sub {
  margin: 5px 0 0;
  max-width: 420px;
  color: #8f8997;
  font-size: 14px;
  line-height: 1.43;
}
body:has(#sec-upload.active) #fd-hero-card .upload-limit {
  margin-top: 6px;
  color: #6d6875;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0;
}
body:has(#sec-upload.active) .fd-primary-cta {
  height: 48px;
  min-height: 48px;
  min-width: 158px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  background:
    linear-gradient(180deg, rgba(255,236,196,.18), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #f59e0b 0%, #d97706 48%, #b45309 100%);
  color: #160b02;
  font-size: 14px;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 16px 34px rgba(180,83,9,.28), inset 0 1px 0 rgba(255,232,184,.24);
}

body:has(#sec-upload.active) .fd-gate {
  inset: 12px;
  border-radius: 18px;
}
body[data-auth-state="loading"]:has(#sec-upload.active) #fd-gate,
body[data-auth-state="signedout"]:has(#sec-upload.active) #fd-gate { display: flex; }
body[data-auth-state="loading"]:has(#sec-upload.active) #fd-hero-card #upload-zone,
body[data-auth-state="signedout"]:has(#sec-upload.active) #fd-hero-card #upload-zone {
  pointer-events: none;
  filter: grayscale(.4) brightness(.78);
}

body:has(#sec-upload.active) .access-panel {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 18px;
  background: rgba(255,255,255,.022);
  padding: 7px;
  display: grid;
  gap: 6px;
}
body:has(#sec-upload.active) .path {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #cfc7ba;
  border-radius: 13px;
  padding: 11px;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
  cursor: pointer;
}
body:has(#sec-upload.active) .path:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.15);
}
body:has(#sec-upload.active) .path:focus-visible {
  outline: 2px solid rgba(240,165,0,.70);
  outline-offset: 2px;
}
body:has(#sec-upload.active) .path[data-active="true"] {
  border-color: rgba(240,165,0,.54);
  background: rgba(240,165,0,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
body:has(#sec-upload.active) .path strong {
  display: block;
  color: #f6f2ea;
  font-size: 15px;
  line-height: 1.2;
}
body:has(#sec-upload.active) .path em {
  display: block;
  margin-top: 4px;
  color: #8f8997;
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
}
body:has(#sec-upload.active) .path-free strong { font-size: 17px; }
body:has(#sec-upload.active) .path-free em { color: #ffbf4d; }
body:has(#sec-upload.active) #fd-hero-card .fd-resumable-row {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 9px 11px 3px;
  color: #8f8997;
  font-size: 13px;
  background: transparent;
  border: 0;
}
body.fd-resumable[data-auth-state="signedin"]:has(#sec-upload.active) #fd-hero-card .fd-resumable-row,
body.fd-resumable[data-auth-state="devbridge"]:has(#sec-upload.active) #fd-hero-card .fd-resumable-row {
  display: flex;
}
body:has(#sec-upload.active) .fd-resumable-row-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8f8997;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
body:has(#sec-upload.active) .fd-resumable-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8ee6c8;
  box-shadow: 0 0 18px rgba(142,230,200,.45);
}
body:has(#sec-upload.active) .fd-resumable-row-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
body:has(#sec-upload.active) .fd-action-btn {
  min-height: 34px;
  width: auto;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 13px;
}

body:has(#sec-upload.active) .fd-support-copy { display: none; }
body:has(#sec-upload.active) .fd-practical-line {
  width: min(980px, 100%);
  margin: 16px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.075);
  color: #8f8997;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
body:has(#sec-upload.active) .fd-flow-rail {
  width: min(980px, 100%);
  height: 58px;
  margin: 14px auto 0;
  border: 1px solid rgba(255,218,156,.18);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,250,238,.066), rgba(255,255,255,.016) 42%, rgba(0,0,0,.16)),
    radial-gradient(ellipse at 50% 54%, rgba(255,209,128,.085), rgba(255,209,128,.032) 31%, transparent 66%),
    radial-gradient(circle at 12% 0%, rgba(255,232,184,.06), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(142,230,200,.04), transparent 32%),
    rgba(8,8,13,.82);
  box-shadow:
    0 16px 42px rgba(0,0,0,.30),
    0 0 28px rgba(240,165,0,.045),
    inset 0 1px 0 rgba(255,250,238,.11),
    inset 0 0 22px rgba(240,165,0,.032),
    inset 0 -13px 26px rgba(0,0,0,.20);
  overflow: hidden;
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
body:has(#sec-upload.active) .fd-flow-rail.is-dragging { cursor: grabbing; }
body:has(#sec-upload.active) .fd-flow-rail::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px 20px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,244,218,.25), rgba(255,209,128,.10), transparent);
  pointer-events: none;
}
body:has(#sec-upload.active) .fd-flow-rail::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 -11px 22px rgba(0,0,0,.16);
  pointer-events: none;
}
body:has(#sec-upload.active) .fd-flow-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
  will-change: transform;
  position: relative;
  z-index: 1;
  transform: translate3d(0,0,0);
  animation: fd-marquee 44s linear infinite;
}
body:has(#sec-upload.active) .fd-flow-rail.fd-flow-js .fd-flow-track { animation: none; }
body:has(#sec-upload.active) .fd-flow-sequence {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-right: 30px;
}
body:has(#sec-upload.active) .fd-flow-item {
  font-size: 18px;
  font-weight: 740;
  line-height: 1;
  letter-spacing: 0;
  background: linear-gradient(180deg, #fffaf0 0%, #f8ecd7 48%, #d8ad68 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 15px rgba(255,207,126,.07), 0 1px 1px rgba(0,0,0,.26);
}
body:has(#sec-upload.active) .fd-flow-item:nth-child(4n+1) {
  background: linear-gradient(180deg, #fffdf7 0%, #f7ead1 46%, #dfb66f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body:has(#sec-upload.active) .fd-flow-sep {
  width: 22px;
  height: 12px;
  margin: 0 13px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255,218,156,.24);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,226,166,.84) 0 2px, transparent 2.5px),
    linear-gradient(90deg, rgba(255,191,77,.035), rgba(255,216,151,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 12px rgba(240,165,0,.045);
}

body:has(#sec-upload.active) .fd-console-block {
  width: min(980px, 100%);
  margin: 50px auto 0;
  border: 1px solid rgba(255,255,255,.066);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.012) 42%, rgba(0,0,0,.10)),
    radial-gradient(ellipse at 26% 0%, rgba(255,224,164,.052), transparent 42%),
    rgba(9,9,14,.78);
  box-shadow: 0 18px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.075), inset 0 -18px 36px rgba(0,0,0,.18);
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(214px, .66fr) minmax(0, 1.48fr);
  gap: 14px;
  align-items: center;
}
body:has(#sec-upload.active) .fd-console-copy {
  display: grid;
  gap: 8px;
  align-content: center;
  padding-left: 2px;
}
body:has(#sec-upload.active) .fd-console-eyebrow {
  margin: 0;
  color: rgba(255,225,176,.66);
  font-size: 10px;
  font-weight: 740;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body:has(#sec-upload.active) .fd-console-copy h2 {
  margin: 0;
  max-width: 360px;
  color: #eee6d8;
  font-size: clamp(23px, 2.05vw, 25px);
  line-height: 1.09;
  letter-spacing: 0;
}
body:has(#sec-upload.active) .fd-console-copy p {
  margin: 0;
  max-width: 390px;
  color: #8f8997;
  font-size: 12.5px;
  line-height: 1.45;
}
body:has(#sec-upload.active) .fd-console-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
body:has(#sec-upload.active) .console-chip {
  min-height: 80px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.052);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.007)), rgba(0,0,0,.22);
  padding: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
body:has(#sec-upload.active) .console-chip strong {
  display: block;
  color: #d8d0c3;
  font-size: 13px;
  line-height: 1.1;
}
body:has(#sec-upload.active) .console-chip p {
  margin: 4px 0 0;
  color: #8f8997;
  font-size: 10.5px;
  line-height: 1.35;
}

body:has(#sec-upload.active) .fd-page-endcap {
  width: min(980px, 100%);
  height: 142px;
  margin: 36px auto 0;
  padding-bottom: 28px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
body:has(#sec-upload.active) .fd-page-endcap::before {
  content: "";
  position: absolute;
  inset: 16px 10% auto;
  height: 92px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,191,77,.11), transparent 62%);
  opacity: .72;
}

body:has(#sec-upload.active) #sticky-cta,
body:has(#sec-loading.active) #sticky-cta,
body:has(#sec-loading.overlay-mode) #sticky-cta,
body[data-stage="uploading"] #sticky-cta,
body[data-stage="loading"] #sticky-cta {
  display: none !important;
}

@media (min-width: 760px) {
  body:has(#sec-upload.active) .wrap { padding-top: 20px; }
  body:has(#sec-upload.active) .fd-hero {
    justify-items: center;
    gap: 28px;
    padding: 56px 0 0;
  }
  body:has(#sec-upload.active) .fd-hero-head {
    justify-items: center;
    text-align: center;
  }
  body:has(#sec-upload.active) .fd-eyebrow::after {
    content: "";
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, currentColor, transparent);
  }
  body:has(#sec-upload.active) .fd-studio { justify-self: center; }
  body:has(#sec-upload.active) .fd-hero-card { min-height: 500px; }
  body:has(#sec-upload.active) .fd-player-top { padding: 15px 16px 0; }
  body:has(#sec-upload.active) #fd-hero-card #upload-zone { padding: 16px; gap: 16px; }
  body:has(#sec-upload.active) .fd-screen { min-height: 328px; }
  body:has(#sec-upload.active) .fd-upload-slot { inset: 62px 18px 94px; }
  body:has(#sec-upload.active) .access-panel {
    grid-template-columns: minmax(190px, 1.25fr) minmax(150px, 1fr) minmax(150px, 1fr);
    align-items: stretch;
  }
  body:has(#sec-upload.active) .path { min-height: 82px; }
  body:has(#sec-upload.active) .path-free { min-height: 90px; }
  body:has(#sec-upload.active) #fd-hero-card .fd-resumable-row { grid-column: 1 / -1; padding-top: 4px; }
  body:has(#sec-upload.active) .fd-practical-line { margin-top: 20px; }
  body:has(#sec-upload.active) .fd-console-block { margin-top: 56px; }
}

@media (min-width: 1060px) {
  body:has(#sec-upload.active) .wrap {
    width: min(1180px, calc(100% - 40px));
  }
  body:has(#sec-upload.active) .fd-hero-title {
    font-size: clamp(62px, 6.6vw, 90px);
  }
  body:has(#sec-upload.active) .fd-screen { min-height: 350px; }
  body:has(#sec-upload.active) .fd-hero-card { min-height: 526px; }
}

@media (max-width: 520px) {
  body:has(#sec-upload.active) .wrap {
    width: min(calc(100% - 22px), 1220px);
    padding: 20px 0 28px;
  }
  body:has(#sec-upload.active) header.fd-header { min-height: 46px; }
  body:has(#sec-upload.active) .logo { font-size: 1.35rem; }
  body:has(#sec-upload.active) .fd-auth-signedout .fd-auth-btn--ghost,
  body:has(#sec-upload.active) .fd-auth-user { display: none; }
  body:has(#sec-upload.active) .fd-hero { padding-top: 20px; gap: 16px; }
  body:has(#sec-upload.active) .fd-hero-head { gap: 10px; }
  body:has(#sec-upload.active) .fd-eyebrow { font-size: 10px; }
  body:has(#sec-upload.active) .fd-screen {
    min-height: 186px;
    border-radius: 15px;
  }
  body:has(#sec-upload.active) .fd-upload-slot { inset: 50px 12px 70px; }
  body:has(#sec-upload.active) .fd-render-pill { display: none; }
  body:has(#sec-upload.active) .fd-slot-status {
    top: 9px;
    left: 9px;
    min-width: 112px;
    font-size: 10px;
  }
  body:has(#sec-upload.active) .fd-drop-text { font-size: 11px; }
  body:has(#sec-upload.active) .fd-slot-wave {
    bottom: 10px;
    height: 24px;
    gap: 3px;
  }
  body:has(#sec-upload.active) .fd-slot-wave i { width: 3px; }
  body:has(#sec-upload.active) .fd-timeline-row {
    grid-template-columns: 34px 1fr 40px;
    gap: 8px;
  }
  body:has(#sec-upload.active) .fd-play-vis {
    width: 34px;
    height: 34px;
  }
  body:has(#sec-upload.active) .fd-player-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  body:has(#sec-upload.active) .fd-primary-cta {
    width: 100%;
  }
  body:has(#sec-upload.active) .access-panel {
    grid-template-columns: 1fr;
    padding: 6px;
    gap: 4px;
  }
  body:has(#sec-upload.active) .path {
    min-height: auto;
    padding: 10px;
  }
  body:has(#sec-upload.active) .path strong { font-size: 14px; }
  body:has(#sec-upload.active) .path-free strong { font-size: 15px; }
  body:has(#sec-upload.active) .path em { margin-top: 2px; }
  body:has(#sec-upload.active) #fd-hero-card .fd-resumable-row {
    align-items: flex-start;
    flex-direction: column;
    padding: 8px 10px 4px;
  }
  body:has(#sec-upload.active) .fd-resumable-row-actions {
    width: 100%;
    flex-direction: column;
  }
  body:has(#sec-upload.active) .fd-action-btn { width: 100%; }
  body:has(#sec-upload.active) .fd-practical-line { text-align: left; }
  body:has(#sec-upload.active) .fd-flow-rail {
    height: 52px;
    border-radius: 18px;
    margin-top: 12px;
  }
  body:has(#sec-upload.active) .fd-flow-sequence { padding-right: 25px; }
  body:has(#sec-upload.active) .fd-flow-item { font-size: 17px; }
  body:has(#sec-upload.active) .fd-flow-sep {
    width: 20px;
    height: 11px;
    margin: 0 11px;
  }
  body:has(#sec-upload.active) .fd-console-block {
    margin-top: 34px;
    border-radius: 18px;
    padding: 11px;
    grid-template-columns: 1fr;
    gap: 11px;
  }
  body:has(#sec-upload.active) .fd-console-copy h2 { font-size: 22px; }
  body:has(#sec-upload.active) .fd-console-copy p { font-size: 12px; }
  body:has(#sec-upload.active) .fd-console-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  body:has(#sec-upload.active) .console-chip {
    min-height: 76px;
    padding: 8px;
  }
  body:has(#sec-upload.active) .console-chip strong { font-size: 12px; }
  body:has(#sec-upload.active) .fd-page-endcap {
    height: 112px;
    margin-top: 26px;
    padding-bottom: 18px;
  }
  body:has(#sec-upload.active) .fd-endcap-wave {
    width: 92%;
    height: 34px;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#sec-upload.active) .fd-screen::before,
  body:has(#sec-upload.active) .fd-upload-slot::before,
  body:has(#sec-upload.active) .fd-slot-status span,
  body:has(#sec-upload.active) .fd-slot-wave i,
  body:has(#sec-upload.active) .fd-beatline i,
  body:has(#sec-upload.active) .fd-progress-fill,
  body:has(#sec-upload.active) .fd-endcap-wave i,
  .vm-brand-note-wave i,
  body:has(#sec-upload.active) .fd-flow-track {
    animation: none !important;
  }
}

/* ==========================================================================
   WORKSPACE W1 - PRODUCTION-NATIVE SHELL / LAYOUT ONLY  2026-05-19
   Scope: active workspace shell geometry, surface hierarchy, card grouping,
   and sticky render CTA. Runtime IDs and behavior are preserved.
   ========================================================================== */

body:has(#sec-main.active){
  background:
    radial-gradient(circle at 50% -10%, rgba(245,158,11,.13), transparent 34rem),
    linear-gradient(180deg, #07070a 0%, #050508 58%, #030304 100%);
}
body:has(#sec-main.active)::before{
  background:
    radial-gradient(ellipse 80vw 48vh at 50% 0%, rgba(240,165,0,.055), transparent 70%),
    radial-gradient(ellipse 56vw 44vh at 85% 88%, rgba(180,83,9,.045), transparent 72%);
}
body:has(#sec-main.active) .wrap{
  max-width:540px;
  padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom, 0px) + 26px);
}
body:has(#sec-main.active) #sec-main{
  width:min(1180px, calc(100vw - 28px));
  margin-left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:start;
}
body:has(#sec-main.active) #sec-main > *{min-width:0}

body:has(#sec-main.active) #video-stage,
body:has(#sec-main.active) #track-card,
body:has(#sec-main.active) .panel-mix,
body:has(#sec-main.active) #panel-substyle,
body:has(#sec-main.active) #panel-audio-ranges,
body:has(#sec-main.active) #fav-block,
body:has(#sec-main.active) #hist-block{
  border:1px solid rgba(255,255,255,.105);
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.014)),
    rgba(13,13,20,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 20px 62px rgba(0,0,0,.38);
}

body:has(#sec-main.active) #video-stage{
  min-height:300px;
  margin-bottom:0;
  border-radius:20px;
  background:
    radial-gradient(circle at 56% 8%, rgba(245,158,11,.16), transparent 22rem),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012)),
    #08090d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 28px 80px rgba(0,0,0,.44),
    0 0 0 1px rgba(245,158,11,.07);
}
body:has(#sec-main.active) #video-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 82px 100%;
  opacity:.12;
  z-index:1;
}
body:has(#sec-main.active) #video-stage .vs-state,
body:has(#sec-main.active) #video-actions,
body:has(#sec-main.active) #act-new{
  z-index:2;
}
body:has(#sec-main.active) #vs-empty{
  background:transparent;
}
body:has(#sec-main.active) .vs-empty-icon{
  width:62px;
  height:62px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(180,83,9,.10));
  border-color:rgba(245,158,11,.25);
  box-shadow:0 18px 38px rgba(180,83,9,.14);
}
body:has(#sec-main.active) .vs-empty-title{
  font-size:1rem;
  color:#f6f2ea;
}
body:has(#sec-main.active) .vs-empty-sub{
  color:#8f8997;
}

body:has(#sec-main.active) .card{
  margin-bottom:0;
  border-radius:18px;
  padding:16px;
}
body:has(#sec-main.active) .label{
  color:#cfc7ba;
  opacity:.72;
  letter-spacing:.11em;
}
body:has(#sec-main.active) .track-header{
  gap:12px;
}
body:has(#sec-main.active) .track-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.35), transparent 22%), linear-gradient(135deg,#1b1610,#5a2f0b 48%,#120d08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}
body:has(#sec-main.active) .track-name{
  font-size:1.05rem;
  color:#f6f2ea;
}
body:has(#sec-main.active) .track-source,
body:has(#sec-main.active) .player-time,
body:has(#sec-main.active) #tm-display,
body:has(#sec-main.active) .substyle-card-summary,
body:has(#sec-main.active) .sar-helper{
  color:#8f8997;
}
body:has(#sec-main.active) .player-wrap,
body:has(#sec-main.active) .player-loading,
body:has(#sec-main.active) .smart-duck-row,
body:has(#sec-main.active) .beat-sync-row,
body:has(#sec-main.active) .substyle-card-preview,
body:has(#sec-main.active) #map-container,
body:has(#sec-main.active) .sar-item{
  background:rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.075);
}
body:has(#sec-main.active) #waveform-container{
  background:rgba(0,0,0,.18);
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.065);
}
body:has(#sec-main.active) #map-container{
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}
body:has(#sec-main.active) .play-btn{
  background:linear-gradient(135deg,#f59e0b,#d97706,#b45309);
  color:#160b02;
  box-shadow:0 12px 28px rgba(180,83,9,.20), inset 0 1px 0 rgba(255,232,184,.22);
}
body:has(#sec-main.active) .style-select,
body:has(#sec-main.active) #portraitModeSelect,
body:has(#sec-main.active) .sar-num,
body:has(#sec-main.active) .sar-gain-select,
body:has(#sec-main.active) .substyle-position-select{
  background-color:rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.105);
  color:#f6f2ea;
}
body:has(#sec-main.active) .btn-ghost,
body:has(#sec-main.active) .btn-fav,
body:has(#sec-main.active) .sar-btn,
body:has(#sec-main.active) .substyle-preset-btn,
body:has(#sec-main.active) .substyle-seg-btn,
body:has(#sec-main.active) #btn-set-mark,
body:has(#sec-main.active) #btn-align,
body:has(#sec-main.active) .zoom-btn{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.105);
  color:#cfc7ba;
}
body:has(#sec-main.active) .btn-ghost:hover:not(:disabled),
body:has(#sec-main.active) .sar-btn:hover:not(:disabled),
body:has(#sec-main.active) #btn-set-mark:hover:not(:disabled){
  background:rgba(245,158,11,.07);
  border-color:rgba(245,158,11,.42);
  color:#ffbf4d;
}
body:has(#sec-main.active) .preset-btn.active,
body:has(#sec-main.active) .substyle-preset-btn.active,
body:has(#sec-main.active) .substyle-seg-btn.active{
  background:rgba(245,158,11,.13);
  border-color:rgba(245,158,11,.34);
  color:#f3ddbd;
}

body:has(#sec-main.active) #sticky-cta{
  height:calc(var(--cta-h) + env(safe-area-inset-bottom, 0px));
  padding:8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
  background:rgba(8,8,12,.88);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -20px 60px rgba(0,0,0,.42);
}
body:has(#sec-main.active) #btn-render{
  width:min(100%, 520px);
  max-width:none;
  height:48px;
  border-radius:999px;
  background:linear-gradient(135deg,#f59e0b,#d97706 52%,#b45309);
  color:#160b02;
  box-shadow:0 16px 34px rgba(180,83,9,.28), inset 0 1px 0 rgba(255,232,184,.24);
}
body:has(#sec-main.active) #btn-render:disabled{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);
  color:#8f8997;
  box-shadow:none;
}

@media (min-width:760px){
  body:has(#sec-main.active) .wrap{
    padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom, 0px) + 34px);
  }
  body:has(#sec-main.active) #sec-main{
    width:min(980px, calc(100vw - 36px));
    gap:14px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  body:has(#sec-main.active) #video-stage,
  body:has(#sec-main.active) #track-card{
    grid-column:1 / -1;
  }
  body:has(#sec-main.active) #video-stage{
    min-height:380px;
  }
  body:has(#sec-main.active) .panel-mix,
  body:has(#sec-main.active) #panel-substyle,
  body:has(#sec-main.active) #panel-audio-ranges,
  body:has(#sec-main.active) #fav-block,
  body:has(#sec-main.active) #hist-block{
    align-self:start;
  }
  body:has(#sec-main.active) #sticky-cta{
    padding-left:18px;
    padding-right:18px;
  }
  body:has(#sec-main.active) #btn-render{
    width:min(100%, 760px);
  }
}

@media (min-width:1120px){
  body:has(#sec-main.active) #sec-main{
    width:min(1180px, calc(100vw - 44px));
    grid-template-columns:minmax(0, 1.5fr) minmax(350px, .82fr);
    grid-auto-flow:row;
  }
  body:has(#sec-main.active) #video-stage{
    grid-column:1;
    grid-row:1;
    min-height:520px;
  }
  body:has(#sec-main.active) #track-card{
    grid-column:1;
    grid-row:2 / span 3;
  }
  body:has(#sec-main.active) .panel-mix{
    grid-column:2;
    grid-row:1;
  }
  body:has(#sec-main.active) #panel-substyle{
    grid-column:2;
    grid-row:2;
  }
  body:has(#sec-main.active) #panel-audio-ranges{
    grid-column:2;
    grid-row:3;
  }
  body:has(#sec-main.active) #fav-block,
  body:has(#sec-main.active) #hist-block{
    grid-column:2;
  }
  body:has(#sec-main.active) .card{
    padding:18px;
  }
  body:has(#sec-main.active) #btn-render{
    width:min(100%, 860px);
  }
}

@media (max-width:520px){
  body:has(#sec-main.active) #sec-main{
    width:min(100% - 22px, 520px);
    gap:12px;
  }
  body:has(#sec-main.active) #video-stage{
    min-height:280px;
    border-radius:18px;
  }
  body:has(#sec-main.active) .card{
    border-radius:16px;
    padding:14px;
  }
  body:has(#sec-main.active) .wave-row{
    align-items:stretch;
    gap:10px;
  }
  body:has(#sec-main.active) .tm-row,
  body:has(#sec-main.active) .sar-btn-row,
  body:has(#sec-main.active) .substyle-card-row{
    flex-wrap:wrap;
  }
  body:has(#sec-main.active) #tm-display{
    flex-basis:100%;
    order:3;
    text-align:left;
  }
  body:has(#sec-main.active) .substyle-edit-btn{
    width:100%;
  }
}

/* end Workspace W1 - production-native shell / layout only */

/* ==========================================================================
   WORKSPACE W1B - BRIGHTNESS / SURFACE BALANCE  2026-05-19
   Scope: tone polish only. No layout, geometry, or runtime hook changes.
   ========================================================================== */

body:has(#sec-main.active){
  background:
    radial-gradient(circle at 50% -8%, rgba(245,158,11,.16), transparent 35rem),
    radial-gradient(circle at 88% 18%, rgba(180,83,9,.07), transparent 28rem),
    linear-gradient(180deg, #09090d 0%, #060609 58%, #040405 100%);
}
body:has(#sec-main.active)::before{
  background:
    radial-gradient(ellipse 82vw 50vh at 50% 0%, rgba(240,165,0,.075), transparent 70%),
    radial-gradient(ellipse 58vw 44vh at 84% 88%, rgba(180,83,9,.06), transparent 72%);
  opacity:1;
}

body:has(#sec-main.active) #video-stage,
body:has(#sec-main.active) #track-card,
body:has(#sec-main.active) .panel-mix,
body:has(#sec-main.active) #panel-substyle,
body:has(#sec-main.active) #panel-audio-ranges,
body:has(#sec-main.active) #fav-block,
body:has(#sec-main.active) #hist-block{
  border-color:rgba(255,255,255,.135);
  background:
    linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.024)),
    rgba(18,18,26,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(245,158,11,.025),
    0 20px 62px rgba(0,0,0,.34);
}

body:has(#sec-main.active) #video-stage{
  background:
    radial-gradient(circle at 55% 7%, rgba(245,158,11,.22), transparent 23rem),
    radial-gradient(circle at 18% 95%, rgba(180,83,9,.09), transparent 20rem),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.018)),
    #0b0b10;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 0 0 1px rgba(245,158,11,.075),
    0 28px 80px rgba(0,0,0,.40),
    0 0 0 1px rgba(245,158,11,.10);
}
body:has(#sec-main.active) #video-stage::before{
  opacity:.16;
}
body:has(#sec-main.active) #vs-rendering{
  background:rgba(10,10,16,.84);
}
body:has(#sec-main.active) #vs-error{
  background:rgba(255,71,87,.075);
}

body:has(#sec-main.active) #track-card{
  background:
    radial-gradient(circle at 14% 0%, rgba(245,158,11,.08), transparent 22rem),
    linear-gradient(180deg, rgba(255,255,255,.074), rgba(255,255,255,.024)),
    rgba(18,18,26,.88);
}
body:has(#sec-main.active) .player-wrap,
body:has(#sec-main.active) .player-loading,
body:has(#sec-main.active) .smart-duck-row,
body:has(#sec-main.active) .beat-sync-row,
body:has(#sec-main.active) .substyle-card-preview,
body:has(#sec-main.active) #map-container,
body:has(#sec-main.active) .sar-item{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.105);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body:has(#sec-main.active) #waveform-container{
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(8,8,12,.78);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.095),
    inset 0 1px 0 rgba(255,255,255,.045);
}
body:has(#sec-main.active) #map-container{
  background:rgba(12,12,18,.86);
}

body:has(#sec-main.active) .label{
  color:#d8d0c3;
  opacity:.82;
}
body:has(#sec-main.active) .track-source,
body:has(#sec-main.active) .player-time,
body:has(#sec-main.active) #tm-display,
body:has(#sec-main.active) .substyle-card-summary,
body:has(#sec-main.active) .sar-helper,
body:has(#sec-main.active) .slider-label,
body:has(#sec-main.active) .toggle-label,
body:has(#sec-main.active) .substyle-control-label,
body:has(#sec-main.active) .sar-label{
  color:#a39baa;
}
body:has(#sec-main.active) .vs-empty-sub,
body:has(#sec-main.active) #render-msg,
body:has(#sec-main.active) .hist-date{
  color:#9d96a5;
}
body:has(#sec-main.active) .track-name,
body:has(#sec-main.active) .vs-empty-title,
body:has(#sec-main.active) .substyle-preview-text,
body:has(#sec-main.active) .sar-item-text{
  color:#f8f3ea;
}

body:has(#sec-main.active) .style-select,
body:has(#sec-main.active) #portraitModeSelect,
body:has(#sec-main.active) .sar-num,
body:has(#sec-main.active) .sar-gain-select,
body:has(#sec-main.active) .substyle-position-select{
  background-color:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
}
body:has(#sec-main.active) .btn-ghost,
body:has(#sec-main.active) .btn-fav,
body:has(#sec-main.active) .sar-btn,
body:has(#sec-main.active) .substyle-preset-btn,
body:has(#sec-main.active) .substyle-seg-btn,
body:has(#sec-main.active) #btn-set-mark,
body:has(#sec-main.active) #btn-align,
body:has(#sec-main.active) .zoom-btn{
  background:rgba(255,255,255,.052);
  border-color:rgba(255,255,255,.13);
}
body:has(#sec-main.active) .badge-amber{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.26);
}
body:has(#sec-main.active) .badge-blue{
  background:rgba(99,179,237,.10);
  border-color:rgba(99,179,237,.25);
}

/* end Workspace W1B - brightness / surface balance */

/* ==========================================================================
   WORKSPACE W1C - SYMMETRY GRID BALANCE  2026-05-19
   Scope: grid alignment and music-style select polish only. No behavior,
   DOM, control visibility, waveform geometry, or sticky CTA position changes.
   ========================================================================== */

body:has(#sec-main.active) #sec-main{
  width:min(100% - 22px, 520px);
  gap:12px;
}

body:has(#sec-main.active) #video-stage,
body:has(#sec-main.active) #track-card,
body:has(#sec-main.active) .panel-mix,
body:has(#sec-main.active) #panel-substyle,
body:has(#sec-main.active) #panel-audio-ranges,
body:has(#sec-main.active) #fav-block,
body:has(#sec-main.active) #hist-block{
  width:100%;
}

body:has(#sec-main.active) #track-card .label[data-i18n="library.title"]{
  margin-top:2px;
  text-align:center;
}

body:has(#sec-main.active) #select-style{
  text-align:center;
  text-align-last:center;
  padding-left:38px;
  padding-right:38px;
  background-position:right 16px center;
}

body:has(#sec-main.active) #select-style option{
  text-align:left;
}

@media (min-width:760px){
  body:has(#sec-main.active) #sec-main{
    width:min(980px, calc(100vw - 36px));
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
  }

  body:has(#sec-main.active) #video-stage,
  body:has(#sec-main.active) #track-card{
    grid-column:1 / -1;
  }

  body:has(#sec-main.active) .panel-mix{
    grid-column:1;
  }

  body:has(#sec-main.active) #panel-substyle{
    grid-column:2;
  }

  body:has(#sec-main.active) #panel-audio-ranges{
    grid-column:1 / -1;
  }

  body:has(#sec-main.active) #fav-block,
  body:has(#sec-main.active) #hist-block{
    grid-column:1 / -1;
  }
}

@media (min-width:1120px){
  body:has(#sec-main.active) #sec-main{
    width:min(1200px, calc(100vw - 48px));
    grid-template-columns:minmax(0, 1.42fr) minmax(360px, .88fr);
    gap:16px;
    grid-auto-flow:row;
  }

  body:has(#sec-main.active) #video-stage{
    grid-column:1;
    grid-row:1;
  }

  body:has(#sec-main.active) #track-card{
    grid-column:1;
    grid-row:2;
  }

  body:has(#sec-main.active) .panel-mix{
    grid-column:2;
    grid-row:1;
  }

  body:has(#sec-main.active) #panel-substyle{
    grid-column:2;
    grid-row:2;
  }

  body:has(#sec-main.active) #panel-audio-ranges{
    grid-column:2;
    grid-row:3;
  }

  body:has(#sec-main.active) #fav-block{
    grid-column:2;
    grid-row:4;
  }

  body:has(#sec-main.active) #hist-block{
    grid-column:2;
    grid-row:5;
  }
}

@media (max-width:759px){
  body:has(#sec-main.active) #sec-main{
    grid-template-columns:1fr;
  }

  body:has(#sec-main.active) #video-stage,
  body:has(#sec-main.active) #track-card,
  body:has(#sec-main.active) .panel-mix,
  body:has(#sec-main.active) #panel-substyle,
  body:has(#sec-main.active) #panel-audio-ranges,
  body:has(#sec-main.active) #fav-block,
  body:has(#sec-main.active) #hist-block{
    grid-column:1;
  }
}

/* end Workspace W1C - symmetry grid balance */

/* ==========================================================================
   WORKSPACE W1C2 - RIGHT COLUMN RANGES PLACEMENT  2026-05-19
   Scope: settings-area grid placement only.
   ========================================================================== */

@media (min-width:760px){
  body:has(#sec-main.active) .panel-mix{
    grid-column:1;
    grid-row:3;
  }

  body:has(#sec-main.active) #panel-substyle{
    grid-column:2;
    grid-row:3;
  }

  body:has(#sec-main.active) #panel-audio-ranges{
    grid-column:2;
    grid-row:4;
  }

  body:has(#sec-main.active) #fav-block,
  body:has(#sec-main.active) #hist-block{
    grid-column:1 / -1;
  }
}

@media (min-width:1120px){
  body:has(#sec-main.active) .panel-mix{
    grid-column:2;
    grid-row:1;
  }

  body:has(#sec-main.active) #panel-substyle{
    grid-column:2;
    grid-row:2;
  }

  body:has(#sec-main.active) #panel-audio-ranges{
    grid-column:2;
    grid-row:3;
  }

  body:has(#sec-main.active) #fav-block{
    grid-column:2;
    grid-row:4;
  }

  body:has(#sec-main.active) #hist-block{
    grid-column:2;
    grid-row:5;
  }
}

/* end Workspace W1C2 - right column ranges placement */

/* ==========================================================================
   WORKSPACE W1C3 - TRUE SETTINGS STACK  2026-05-19
   Scope: two-column settings-row placement only. Mix spans the right-stack
   rows so Original Audio Ranges can sit under Subtitle without leaving a gap.
   ========================================================================== */

@media (min-width:760px){
  body:has(#sec-main.active) #video-stage{
    grid-column:1 / -1;
    grid-row:1;
  }

  body:has(#sec-main.active) #track-card{
    grid-column:1 / -1;
    grid-row:2;
  }

  body:has(#sec-main.active) .panel-mix{
    grid-column:1;
    grid-row:3 / span 2;
    align-self:stretch;
  }

  body:has(#sec-main.active) #panel-substyle{
    grid-column:2;
    grid-row:3;
    align-self:start;
  }

  body:has(#sec-main.active) #panel-audio-ranges{
    grid-column:2;
    grid-row:4;
    align-self:start;
  }

  body:has(#sec-main.active) #fav-block{
    grid-column:1 / -1;
    grid-row:5;
  }

  body:has(#sec-main.active) #hist-block{
    grid-column:1 / -1;
    grid-row:6;
  }

  body:has(#sec-main.active) .vm-brand-note-motif--workspace{
    grid-column:1 / -1;
    grid-row:7;
    justify-self:center;
    align-self:start;
  }
}

@media (max-width:759px){
  body:has(#sec-main.active) .panel-mix,
  body:has(#sec-main.active) #panel-substyle,
  body:has(#sec-main.active) #panel-audio-ranges,
  body:has(#sec-main.active) #fav-block,
  body:has(#sec-main.active) #hist-block{
    grid-row:auto;
    align-self:auto;
  }
}

/* end Workspace W1C3 - true settings stack */

/* ==========================================================================
   WORKSPACE RESULT VIDEO FRAME ONLY  2026-05-19
   Scope: ready-state result video shell only. No action, stage, or runtime
   visibility changes.
   ========================================================================== */

body:has(#sec-main.active) #vs-ready{
  box-sizing:border-box;
  padding:clamp(10px, 1.35vw, 18px);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(245,158,11,.13), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    #050507;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 0 0 1px rgba(245,158,11,.075);
}

body:has(#sec-main.active) #vs-ready > #result-video{
  max-width:100%;
  max-height:100%;
  border-radius:14px;
  background:#020203;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 18px 46px rgba(0,0,0,.40),
    0 0 34px rgba(245,158,11,.075);
}

/* end Workspace result video frame only */

/* Workspace ready video surface polish */
body:has(#sec-main.active) #vs-ready{
  padding:clamp(14px, 1.8vw, 22px);
  border-radius:20px;
  background:
    radial-gradient(ellipse 68% 26% at 50% 0%, rgba(245,158,11,.20), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    #050506;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 0 1px rgba(245,158,11,.13),
    inset 0 -18px 48px rgba(0,0,0,.20);
}

body:has(#sec-main.active) #vs-ready::before{
  content:"";
  position:absolute;
  top:10px;
  left:16%;
  right:16%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,206,128,.48), transparent);
  box-shadow:0 0 18px rgba(245,158,11,.22);
  opacity:.72;
}

body:has(#sec-main.active) #vs-ready > #result-video{
  border-radius:15px;
  outline:1px solid rgba(255,255,255,.13);
  outline-offset:0;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.72),
    0 18px 54px rgba(0,0,0,.52),
    0 0 42px rgba(245,158,11,.11);
}

body:has(#sec-main.active) #video-actions{
  top:14px;
  right:14px;
  gap:9px;
  padding:5px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(7,7,10,.44);
  box-shadow:0 14px 32px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

body:has(#sec-main.active) #video-actions.va-visible{
  display:flex;
}

body:has(#sec-main.active) #video-actions .va-btn,
body:has(#sec-main.active) #act-new{
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
    rgba(10,10,15,.76);
  color:#f8f3ea;
  box-shadow:
    0 10px 24px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body:has(#sec-main.active) #video-actions .va-btn:hover,
body:has(#sec-main.active) #act-new:hover{
  background:
    linear-gradient(135deg, rgba(245,158,11,.92), rgba(217,119,6,.82)),
    rgba(10,10,15,.84);
  border-color:rgba(255,206,128,.44);
  color:#160b02;
}
/* end Workspace ready video surface polish */

/* Workspace ready video actions unwrap polish */
body:has(#sec-main.active) #video-actions{
  top:clamp(8px, 1.2vw, 16px);
  right:clamp(8px, 1.2vw, 16px);
  gap:clamp(6px, 1vw, 10px);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body:has(#sec-main.active) #video-actions.va-visible{
  display:flex;
}

body:has(#sec-main.active) #video-actions .va-btn,
body:has(#sec-main.active) #act-new{
  width:clamp(42px, 6.2vw, 64px);
  height:clamp(42px, 6.2vw, 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(20px, 2.6vw, 28px);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(8,8,13,.58);
  color:#fffaf1;
  box-shadow:
    0 8px 20px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

body:has(#sec-main.active) #video-actions .va-btn:hover,
body:has(#sec-main.active) #act-new:hover{
  background:rgba(245,158,11,.74);
  border-color:rgba(255,214,147,.30);
  color:#130a02;
  box-shadow:
    0 10px 24px rgba(180,83,9,.22),
    inset 0 1px 0 rgba(255,232,184,.18);
}
/* end Workspace ready video actions unwrap polish */

/* Workspace ready video actions effective size fix */
#sec-main.active #video-actions .va-btn,
body:has(#sec-main.active) #video-actions .va-btn,
#sec-main.active #act-new,
body:has(#sec-main.active) #act-new{
  width:clamp(48px, 8vw, 64px);
  height:clamp(48px, 8vw, 64px);
  min-width:48px;
  min-height:48px;
}

#sec-main.active #video-actions .va-btn svg,
body:has(#sec-main.active) #video-actions .va-btn svg,
#sec-main.active #act-new svg,
body:has(#sec-main.active) #act-new svg{
  width:clamp(24px, 4vw, 32px);
  height:clamp(24px, 4vw, 32px);
}
/* end Workspace ready video actions effective size fix */

/* Workspace ready video actions ghost placement */
#sec-main.active #video-actions,
body:has(#sec-main.active) #video-actions{
  top:auto;
  right:clamp(14px, 2.6vw, 24px);
  bottom:clamp(76px, 18%, 128px);
  transform:none;
  gap:clamp(8px, 1.2vw, 12px);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#sec-main.active #video-actions.va-visible,
body:has(#sec-main.active) #video-actions.va-visible{
  display:flex;
}

#sec-main.active #act-new,
body:has(#sec-main.active) #act-new{
  top:clamp(14px, 2.6vw, 24px) !important;
  left:clamp(14px, 2.6vw, 24px) !important;
  transform:none !important;
}

#sec-main.active #video-actions .va-btn,
body:has(#sec-main.active) #video-actions .va-btn,
#sec-main.active #act-new,
body:has(#sec-main.active) #act-new{
  width:clamp(48px, 8vw, 64px);
  height:clamp(48px, 8vw, 64px);
  min-width:48px;
  min-height:48px;
  background:rgba(6, 7, 10, .32);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

#sec-main.active #video-actions .va-btn svg,
body:has(#sec-main.active) #video-actions .va-btn svg,
#sec-main.active #act-new svg,
body:has(#sec-main.active) #act-new svg{
  width:clamp(24px, 4vw, 32px);
  height:clamp(24px, 4vw, 32px);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.60));
}

#sec-main.active #video-actions .va-btn:hover,
body:has(#sec-main.active) #video-actions .va-btn:hover,
#sec-main.active #act-new:hover,
body:has(#sec-main.active) #act-new:hover,
#sec-main.active #video-actions .va-btn:focus-visible,
body:has(#sec-main.active) #video-actions .va-btn:focus-visible,
#sec-main.active #act-new:focus-visible,
body:has(#sec-main.active) #act-new:focus-visible{
  background:rgba(245,158,11,.22);
  border-color:rgba(255,214,147,.24);
  color:#fffaf1;
  box-shadow:
    0 8px 20px rgba(180,83,9,.16),
    inset 0 1px 0 rgba(255,232,184,.12);
}

#sec-main.active #video-actions .va-btn:active,
body:has(#sec-main.active) #video-actions .va-btn:active{
  transform:scale(.97);
}

#sec-main.active #act-new:active,
body:has(#sec-main.active) #act-new:active{
  transform:translateY(-50%) scale(.97);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #sec-main.active #video-actions .va-btn,
  body:has(#sec-main.active) #video-actions .va-btn,
  #sec-main.active #act-new,
  body:has(#sec-main.active) #act-new{
    background:rgba(6, 7, 10, .55);
  }
}
/* end Workspace ready video actions ghost placement */

/* Main app top header alignment: loading + workspace */
body:has(#sec-loading.active) .wrap{
  width:min(1220px, calc(100% - 28px));
  max-width:none;
  padding-left:0;
  padding-right:0;
}

body:has(#sec-main.active) .wrap{
  width:min(100% - 22px, 520px);
  max-width:none;
  padding-left:0;
  padding-right:0;
}

body:has(#sec-loading.active) header.fd-header,
body:has(#sec-main.active) header.fd-header{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:14px;
  margin:0;
  padding:0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

body:has(#sec-loading.active) .logo,
body:has(#sec-main.active) .logo{
  display:inline-flex;
  align-items:center;
  gap:0;
  background:linear-gradient(120deg, #ffbf4d 0%, var(--accent) 42%, var(--accent2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-family:'Syne', sans-serif;
  font-size:clamp(1.45rem, 2.25vw, 2rem);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.025em;
  white-space:nowrap;
}

body:has(#sec-loading.active) .logo span,
body:has(#sec-main.active) .logo span{
  color:var(--muted);
  -webkit-text-fill-color:var(--muted);
  display:inline-block;
  margin-left:.03em;
  font-size:.98em;
  font-weight:450;
  line-height:.95;
  letter-spacing:0;
  vertical-align:baseline;
  transform:translateY(.01em);
}

body:has(#sec-loading.active) .fd-header-right,
body:has(#sec-main.active) .fd-header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
  min-width:0;
  margin-left:auto;
}

body:has(#sec-loading.active) .fd-lang-select,
body:has(#sec-main.active) .fd-lang-select,
body:has(#sec-loading.active) .fd-auth-btn,
body:has(#sec-main.active) .fd-auth-btn{
  min-height:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background-color:rgba(255,255,255,.035);
  color:#cfc7ba;
  font-family:Inter, ui-sans-serif, system-ui, sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  opacity:1;
}

body:has(#sec-loading.active) .fd-lang-select,
body:has(#sec-main.active) .fd-lang-select{
  width:auto;
  padding:0 28px 0 12px;
  background-position:right 10px center;
}

body:has(#sec-loading.active) .fd-auth-btn,
body:has(#sec-main.active) .fd-auth-btn{
  padding:0 12px;
}

body:has(#sec-loading.active) .fd-auth-area,
body:has(#sec-main.active) .fd-auth-area{
  min-height:34px;
  gap:8px;
}

body:has(#sec-loading.active) .fd-auth-label,
body:has(#sec-loading.active) .fd-auth-user,
body:has(#sec-main.active) .fd-auth-label,
body:has(#sec-main.active) .fd-auth-user{
  color:#cfc7ba;
  font-family:Inter, ui-sans-serif, system-ui, sans-serif;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}

body:has(#sec-loading.active) .fd-auth-btn--solid,
body:has(#sec-main.active) .fd-auth-btn--solid{
  background:#f6f2ea;
  border-color:#f6f2ea;
  color:#050508;
  box-shadow:0 12px 26px rgba(255,255,255,.06);
}

body:has(#sec-loading.active) .fd-auth-btn--ghost,
body:has(#sec-main.active) .fd-auth-btn--ghost{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.09);
  color:#cfc7ba;
}

body:has(#sec-loading.active) .version,
body:has(#sec-main.active) .version{
  display:block;
  flex-shrink:0;
}

@media (min-width:760px){
  body:has(#sec-main.active) .wrap{
    width:min(980px, calc(100vw - 36px));
  }
}

@media (min-width:1060px){
  body:has(#sec-loading.active) .wrap{
    width:min(1180px, calc(100% - 40px));
  }
}

@media (min-width:1120px){
  body:has(#sec-main.active) .wrap{
    width:min(1200px, calc(100vw - 48px));
  }
}

@media (max-width:520px){
  body:has(#sec-loading.active) .wrap{
    width:min(calc(100% - 22px), 1220px);
  }
  body:has(#sec-loading.active) header.fd-header,
  body:has(#sec-main.active) header.fd-header{
    min-height:46px;
  }
  body:has(#sec-loading.active) .logo,
  body:has(#sec-main.active) .logo{
    font-size:1.35rem;
  }
  body:has(#sec-loading.active) .fd-auth-signedout .fd-auth-btn--ghost,
  body:has(#sec-loading.active) .fd-auth-user,
  body:has(#sec-main.active) .fd-auth-signedout .fd-auth-btn--ghost,
  body:has(#sec-main.active) .fd-auth-user{
    display:none;
  }
}

@media (max-width:420px){
  body:has(#sec-loading.active) .version,
  body:has(#sec-main.active) .version{
    display:none;
  }
}
/* end Main app top header alignment */

/* Branded result viewer */
.rv-page{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 0,rgba(245,158,11,.11),transparent 34%),var(--bg)}
.rv-page [hidden]{display:none!important}
.rv-header{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(10,10,20,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}
.rv-logo-link{text-decoration:none}
.rv-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(12px,3.4vw,28px) 14px 28px;box-sizing:border-box}
.rv-viewer-card{width:100%;max-width:760px;display:flex;flex-direction:column;gap:12px;margin-inline:auto;padding:clamp(10px,2.5vw,16px);box-sizing:border-box;border-radius:24px;background:linear-gradient(180deg,rgba(24,24,34,.64),rgba(12,12,20,.54));border:1px solid rgba(255,255,255,.1);box-shadow:0 22px 70px rgba(0,0,0,.46),0 0 0 1px rgba(245,158,11,.06),inset 0 1px 0 rgba(255,255,255,.06)}
.rv-video-frame{background:#000;border:1px solid rgba(245,158,11,.22);border-radius:20px;overflow:hidden;width:100%;box-shadow:0 18px 46px rgba(0,0,0,.5),0 0 28px rgba(245,158,11,.08)}
.rv-video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:contain;background:#000;max-height:min(68vh,720px)}
.rv-provenance{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--muted);padding:6px 12px;background:rgba(240,165,0,.055);border:1px solid rgba(240,165,0,.12);border-radius:var(--r-badge);align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;opacity:.82}
.rv-license-badge{font-family:'DM Mono',monospace;font-size:.68rem;color:#ffe6b7;padding:7px 10px;background:rgba(48,217,132,.085);border:1px solid rgba(48,217,132,.22);border-radius:999px;align-self:center;white-space:nowrap}
.rv-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:2px}
.rv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;padding:0 16px;border-radius:14px;text-decoration:none;cursor:pointer;transition:opacity .15s,transform .1s,border-color .15s,color .15s,background .15s;border:none;white-space:nowrap}
.rv-btn:active{transform:scale(.97)}
.rv-btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#000}
.rv-btn-primary:hover{opacity:.9}
.rv-btn-ghost{background:rgba(255,255,255,.035);border:1px solid var(--border-standard);color:var(--muted)}
.rv-btn-ghost:hover{border-color:var(--border-strong);color:var(--text)}
.rv-result-info{display:flex;flex-direction:column;gap:10px;margin-top:2px;padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.rv-result-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.rv-result-title{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--text);line-height:1.2;margin:0}
.rv-result-text{font-size:.82rem;color:var(--muted);line-height:1.45;margin:0}
.rv-result-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rv-result-chip{font-family:'DM Mono',monospace;font-size:.66rem;line-height:1;padding:6px 8px;border-radius:999px;color:rgba(255,247,232,.72);background:rgba(245,158,11,.075);border:1px solid rgba(245,158,11,.14);white-space:nowrap}
.rv-license-panel{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:rgba(5,7,12,.55);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.rv-license-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rv-license-title{font-family:'Syne',sans-serif;font-size:.92rem;font-weight:700;color:var(--text);margin:0}
.rv-license-close{min-height:32px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);color:var(--muted);font-family:'Inter',sans-serif;font-size:.78rem;cursor:pointer}
.rv-license-status{font-size:.84rem;color:var(--muted);line-height:1.45}
.rv-license-details{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:7px 12px;margin:0;font-size:.82rem}
.rv-license-details dt{color:rgba(255,247,232,.58)}
.rv-license-details dd{margin:0;color:#f6f2ea;min-width:0;overflow-wrap:anywhere}
.rv-license-details a{color:#ffcf82;text-decoration:none}
.rv-license-details a:hover{text-decoration:underline}
.rv-license-note{font-size:.76rem;line-height:1.45;color:rgba(255,247,232,.56);margin:0}
.rv-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:min(34vh,280px);text-align:center;width:100%;max-width:420px;margin-inline:auto}
.rv-state-icon{font-size:2rem}
.rv-state-msg{font-size:.92rem;color:var(--muted);line-height:1.5}
.rv-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:rv-spin .8s linear infinite}
.rv-actions-error{margin-top:4px}
@keyframes rv-spin{to{transform:rotate(360deg)}}
@media(min-width:600px){
  .rv-main{padding:28px 24px 44px}
  .rv-result-info{flex-direction:row;align-items:center;justify-content:space-between}
  .rv-result-chips{justify-content:flex-end}
}
@media(orientation:landscape) and (max-width:900px){
  .rv-main{padding:12px 16px 24px}
  .rv-header{padding:10px 16px}
  .rv-viewer-card{gap:10px;padding:10px;border-radius:20px}
  .rv-video-frame{border-radius:16px}
  .rv-video{max-height:calc(100vh - 132px)}
  .rv-result-info{padding:10px 12px;border-radius:14px}
  .rv-license-details{grid-template-columns:1fr;gap:4px}
}
@media(min-width:900px){
  .rv-viewer-card{max-width:860px;gap:14px}
}
@supports(padding:env(safe-area-inset-left)){
  .rv-page{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}
/* end Branded result viewer */

/* Cabinet P0 account shell */
.fd-cabinet-trigger[hidden],
.cabinet-shell[hidden]{display:none!important}
body.cabinet-open{overflow:hidden}
body.cabinet-open #sticky-cta{display:none}
.cabinet-shell{
  display:block;position:fixed;inset:0;z-index:1200;
  min-height:100vh;overflow:auto;
  background:
    radial-gradient(circle at 52% 0,rgba(245,158,11,.06),transparent 30%),
    radial-gradient(circle at 92% 88%,rgba(142,230,200,.025),transparent 32%),
    var(--bg);
  color:var(--text);
  animation:cabinetIn .18s ease-out;
}
.cabinet-frame{
  min-height:100vh;display:flex;flex-direction:column;
  padding:0 max(14px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
}
.cabinet-topbar{
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:58px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.085);
  background:linear-gradient(180deg,rgba(7,7,16,.96),rgba(7,7,16,.82));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.cabinet-logo{text-decoration:none}
.cabinet-close{
  min-height:40px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);color:var(--text);
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .12s;
}
.cabinet-close:hover{border-color:rgba(240,165,0,.45);color:var(--accent);background:rgba(240,165,0,.055)}
.cabinet-close:active{transform:scale(.98)}
.cabinet-main{
  flex:1;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:flex-start;
  padding:clamp(14px,3.5vw,34px) 0 28px;
}
.cabinet-panel{
  display:block;position:relative;overflow:hidden;width:min(860px,100%);
  border-radius:16px;border:1px solid rgba(255,255,255,.105);
  background:
    linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.018)),
    rgba(16,16,24,.92);
  box-shadow:0 16px 42px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);
  padding:clamp(14px,3vw,22px);
}
.cabinet-panel::before{
  content:none;
}
.cabinet-panel-glow{
  display:none;
}
.cabinet-panel-glow span{
  display:block;width:3px;border-radius:99px;background:linear-gradient(180deg,var(--accent),rgba(240,120,0,.2));
  height:calc(7px + var(--i, 0) * 3px);box-shadow:0 0 12px rgba(240,165,0,.22);
}
.cabinet-panel-glow span:nth-child(1){--i:1}.cabinet-panel-glow span:nth-child(2){--i:3}.cabinet-panel-glow span:nth-child(3){--i:2}.cabinet-panel-glow span:nth-child(4){--i:5}.cabinet-panel-glow span:nth-child(5){--i:3}.cabinet-panel-glow span:nth-child(6){--i:4}
.cabinet-panel-head,.cabinet-state-body,.cabinet-renders-body,.cabinet-lookup-form,.cabinet-lookup-body{position:relative;z-index:1}
.cabinet-panel-head{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.cabinet-eyebrow{
  color:rgba(255,247,232,.48);font-family:'DM Mono',monospace;font-size:.62rem;
  letter-spacing:.06em;text-transform:uppercase;margin:0;max-width:100%;overflow-wrap:break-word;
}
.cabinet-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;min-width:0}
.cabinet-title-row h2{
  font-family:'Syne',sans-serif;font-size:clamp(1.35rem,4vw,2rem);
  font-weight:720;line-height:1.05;margin:0;color:#f6f2ea;letter-spacing:0;
  min-width:0;max-width:100%;overflow-wrap:break-word;
}
.cabinet-renders-panel .cabinet-title-row h2,
.cabinet-lookup-panel .cabinet-title-row h2{font-size:clamp(1.15rem,3vw,1.55rem);line-height:1.1}
.cabinet-status-chip{
  display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 9px;
  border-radius:999px;border:1px solid rgba(255,255,255,.12);
  color:#cfc7ba;background:rgba(0,0,0,.22);
  font-family:'DM Mono',monospace;font-size:.63rem;letter-spacing:.04em;
}
.cabinet-status-dot{width:7px;height:7px;border-radius:50%;background:var(--muted2);box-shadow:0 0 0 3px rgba(140,136,160,.08)}
.cabinet-status-chip[data-tone="ready"] .cabinet-status-dot{background:var(--ok);box-shadow:0 0 16px rgba(48,217,132,.45)}
.cabinet-status-chip[data-tone="dev"] .cabinet-status-dot{background:#9dc9ef;box-shadow:0 0 16px rgba(99,179,237,.38)}
.cabinet-status-chip[data-tone="loading"] .cabinet-status-dot{background:var(--accent);box-shadow:0 0 18px rgba(240,165,0,.52)}
.cabinet-status-chip[data-tone="error"] .cabinet-status-dot{background:var(--danger);box-shadow:0 0 14px rgba(255,71,87,.38)}
.cabinet-state-body{display:flex;flex-direction:column;gap:12px;min-height:0}
.cabinet-overview-body{
  max-width:580px;color:var(--muted);font-size:.9rem;line-height:1.48;margin:0;
}
.cabinet-meta-list{display:grid;gap:1px;border:1px solid rgba(255,255,255,.075);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.12)}
.cabinet-meta-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:38px;padding:7px 10px;border-radius:0;
  border:0;
  background:rgba(255,255,255,.022);
}
.cabinet-meta-label{color:rgba(255,247,232,.54);font-size:.74rem}
.cabinet-meta-value{min-width:0;color:#f6f2ea;font-size:.86rem;font-weight:610;text-align:right;overflow-wrap:anywhere;word-break:break-word}
.cabinet-meta-row--mono .cabinet-meta-value{font-family:'DM Mono',monospace;font-size:.78rem;color:rgba(255,247,232,.68)}
.cabinet-message{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  min-height:150px;padding:16px;border-radius:18px;
  border:1px solid rgba(255,255,255,.085);background:rgba(255,255,255,.026);
}
.cabinet-message-mark{
  width:42px;height:42px;border-radius:14px;border:1px solid rgba(240,165,0,.18);
  background:linear-gradient(135deg,rgba(240,165,0,.14),rgba(255,107,53,.07));
  box-shadow:0 14px 30px rgba(180,83,9,.12);
}
.cabinet-message--error .cabinet-message-mark{border-color:rgba(255,71,87,.22);background:rgba(255,71,87,.08)}
.cabinet-message-copy h3{
  margin:0 0 5px;font-family:'Syne',sans-serif;font-size:1.18rem;line-height:1.1;color:#f6f2ea;
}
.cabinet-message-copy p{margin:0;color:var(--muted);line-height:1.5;font-size:.9rem}
.cabinet-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:2px}
.cabinet-action{
  min-height:42px;padding:0 16px;border-radius:999px;
  font-family:'Inter',sans-serif;font-size:.86rem;font-weight:650;
  border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .12s,box-shadow .15s;
}
.cabinet-action:active{transform:scale(.98)}
.cabinet-action--primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#090a0d;box-shadow:0 12px 26px rgba(180,83,9,.24)}
.cabinet-action--ghost{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.12);color:var(--text)}
.cabinet-action--ghost:hover,.cabinet-close:hover{border-color:rgba(240,165,0,.48)}
.cabinet-renders-body{display:flex;flex-direction:column;gap:8px;min-height:0}
.cabinet-render-list{display:flex;flex-direction:column;gap:6px}
.cabinet-render-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:11px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.018);
}
.cabinet-render-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.cabinet-render-title{margin:0;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:650;line-height:1.18;color:#f6f2ea;overflow-wrap:anywhere}
.cabinet-render-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.72rem;line-height:1.3}
.cabinet-render-chips{display:flex;gap:4px;flex-wrap:wrap}
.cabinet-render-chip{font-family:'DM Mono',monospace;font-size:.58rem;line-height:1;padding:4px 6px;border-radius:999px;color:rgba(255,247,232,.62);background:rgba(255,255,255,.032);border:1px solid rgba(255,255,255,.07);white-space:nowrap}
.cabinet-render-chip--ready{color:#caffdf;background:rgba(48,217,132,.08);border-color:rgba(48,217,132,.2)}
.cabinet-render-chip--failed{color:#ffd0d0;background:rgba(255,71,87,.08);border-color:rgba(255,71,87,.22)}
.cabinet-render-chip--processing,.cabinet-render-chip--queued{color:#ffe1ad;background:rgba(240,165,0,.08);border-color:rgba(240,165,0,.18)}
.cabinet-render-proof-preview{font-family:'DM Mono',monospace;font-size:.58rem;line-height:1;max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 6px;border-radius:999px;color:rgba(255,207,130,.78);background:rgba(240,165,0,.035);border:1px solid rgba(240,165,0,.12)}
.cabinet-render-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.cabinet-render-actions .cabinet-action{min-height:32px;padding:0 10px;font-size:.76rem;font-weight:620}
.cabinet-render-actions .cabinet-action--primary{background:rgba(240,165,0,.065);border-color:rgba(240,165,0,.24);color:#ffd18a;box-shadow:none}
.cabinet-render-actions .cabinet-action--primary:hover{background:rgba(240,165,0,.1);border-color:rgba(240,165,0,.36)}
.cabinet-render-unavailable{font-size:.72rem;color:var(--muted);white-space:nowrap}
.cabinet-proof-panel{
  grid-column:1/-1;display:flex;flex-direction:column;gap:10px;
  padding:13px;border-radius:14px;background:rgba(5,7,12,.48);
  border:1px solid rgba(255,255,255,.095);box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.cabinet-proof-panel--available{border-color:rgba(48,217,132,.22);background:rgba(48,217,132,.045)}
.cabinet-proof-panel--fetch_error,.cabinet-proof-panel--unavailable{border-color:rgba(255,188,87,.2)}
.cabinet-proof-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cabinet-proof-title{margin:0;font-family:'Syne',sans-serif;font-size:.92rem;line-height:1.2;color:#f6f2ea}
.cabinet-proof-close{min-height:32px;padding:0 10px}
.cabinet-proof-status{margin:0;color:var(--muted);font-size:.84rem;line-height:1.45}
.cabinet-proof-code-block{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.16)}
.cabinet-proof-code-state,.cabinet-proof-code-note{margin:0;color:var(--muted);font-size:.82rem;line-height:1.4}
.cabinet-proof-code-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center}
.cabinet-proof-code-label{font-size:.72rem;color:rgba(255,247,232,.58)}
.cabinet-proof-code-value{display:block;min-width:0;font-family:'DM Mono',monospace;font-size:.82rem;color:#ffcf82;overflow-wrap:anywhere;word-break:break-word}
.cabinet-proof-code-actions{margin-top:0}
.cabinet-proof-copy-code{min-height:42px}
.cabinet-proof-copy-code:disabled{cursor:not-allowed;opacity:.52;transform:none}
.cabinet-proof-details{display:grid;grid-template-columns:minmax(104px,auto) 1fr;gap:7px 12px;margin:0;font-size:.82rem}
.cabinet-proof-details dt{color:rgba(255,247,232,.58)}
.cabinet-proof-details dd{margin:0;color:#f6f2ea;min-width:0;overflow-wrap:anywhere}
.cabinet-proof-details a{color:#ffcf82;text-decoration:none}
.cabinet-proof-details a:hover{text-decoration:underline}
.cabinet-proof-note{font-size:.76rem;line-height:1.45;color:rgba(255,247,232,.56);margin:0}
.cabinet-proof-actions{margin-top:0}
.cabinet-lookup-form{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end;margin-bottom:14px;
}
.cabinet-lookup-label{
  grid-column:1/-1;color:rgba(255,247,232,.62);font-size:.82rem;line-height:1.35;
}
.cabinet-lookup-input{
  width:100%;min-height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.24);color:#f6f2ea;padding:0 14px;
  font-family:'DM Mono',monospace;font-size:.86rem;outline:none;
}
.cabinet-lookup-input:focus{border-color:rgba(240,165,0,.62);box-shadow:0 0 0 3px rgba(240,165,0,.13)}
.cabinet-lookup-body{display:flex;flex-direction:column;gap:12px;min-height:60px}
.cabinet-lookup-message{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.cabinet-license-document{
  display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);background:rgba(5,7,12,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.cabinet-license-document-title{margin:0;font-family:'Syne',sans-serif;font-size:1.24rem;line-height:1.1;color:#f6f2ea}
.cabinet-license-statement,.cabinet-license-footer,.cabinet-license-alert{
  margin:0;font-size:.88rem;line-height:1.5;color:rgba(255,247,232,.7);
}
.cabinet-license-alert{
  padding:10px 12px;border-radius:12px;border:1px solid rgba(255,188,87,.22);
  background:rgba(255,188,87,.07);color:#ffe1ad;
}
.cabinet-license-details{display:grid;grid-template-columns:minmax(130px,auto) 1fr;gap:8px 14px;margin:0;font-size:.84rem}
.cabinet-license-details dt{color:rgba(255,247,232,.58)}
.cabinet-license-details dd{margin:0;color:#f6f2ea;min-width:0;overflow-wrap:anywhere}
.cabinet-license-details a{color:#ffcf82;text-decoration:none}
.cabinet-license-details a:hover{text-decoration:underline}
.cabinet-license-footer{color:rgba(255,247,232,.54);font-size:.78rem}
.cabinet-print-brand{display:none}
.cabinet-lookup-actions{margin-top:0}
.fd-cabinet-trigger:focus-visible,
.cabinet-close:focus-visible,
.cabinet-action:focus-visible{
  outline:2px solid rgba(240,165,0,.72);outline-offset:3px;
}
@keyframes cabinetIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cabinetScan{0%,55%{transform:translateX(-110%)}100%{transform:translateX(390%)}}
@media(max-width:520px){
  .cabinet-frame{padding-left:11px;padding-right:11px}
  .cabinet-topbar{min-height:54px}
  .cabinet-close{min-height:44px;padding:0 13px}
  .cabinet-main{padding-top:16px}
  .cabinet-panel{border-radius:14px;padding:14px 12px}
  .cabinet-title-row{align-items:flex-start}
  .cabinet-renders-panel .cabinet-title-row h2,
  .cabinet-lookup-panel .cabinet-title-row h2{font-size:clamp(1.08rem,5vw,1.35rem)}
  .cabinet-status-chip{width:100%;justify-content:flex-start}
  .cabinet-message{grid-template-columns:1fr}
  .cabinet-message-mark{width:36px;height:36px;border-radius:12px}
  .cabinet-meta-row{align-items:flex-start;flex-direction:column;gap:4px}
  .cabinet-meta-value{text-align:left}
  .cabinet-actions,.cabinet-action{width:100%}
  .cabinet-render-row{grid-template-columns:1fr;gap:8px}
  .cabinet-render-actions{justify-content:flex-start}
  .cabinet-render-actions .cabinet-action{width:auto;max-width:100%}
  .cabinet-proof-panel{padding:12px}
  .cabinet-proof-panel-head{align-items:flex-start;flex-direction:column}
  .cabinet-proof-code-row{grid-template-columns:1fr;gap:4px}
  .cabinet-proof-details{grid-template-columns:1fr;gap:4px}
  .cabinet-lookup-form{grid-template-columns:1fr}
  .cabinet-license-details{grid-template-columns:1fr;gap:4px}
}
@media print{
  @page{size:A4 portrait;margin:12mm}
  html,
  body{background:#fff!important;color:#111!important;overflow:visible!important;height:auto!important;min-height:0!important}
  body.cabinet-open{background:#fff!important;color:#111!important;overflow:visible!important}
  body.cabinet-open::before{display:none!important}
  body.cabinet-open > *:not(#cabinet-shell){display:none!important}
  body.cabinet-open #cabinet-shell{
    position:static!important;inset:auto!important;display:block!important;overflow:visible!important;
    min-height:0!important;height:auto!important;background:#fff!important;color:#111!important;animation:none!important;
  }
  body.cabinet-open .cabinet-frame{display:block!important;min-height:0!important;height:auto!important;padding:0!important}
  body.cabinet-open .cabinet-main{display:block!important;padding:0!important;min-height:0!important}
  body.cabinet-open .cabinet-topbar,
  body.cabinet-open .cabinet-panel:not(.cabinet-lookup-panel),
  body.cabinet-open .cabinet-lookup-form,
  body.cabinet-open .cabinet-lookup-message,
  body.cabinet-open .cabinet-lookup-actions,
  body.cabinet-open .cabinet-lookup-panel > .cabinet-panel-head{display:none!important}
  body.cabinet-open .cabinet-lookup-panel{
    display:block!important;width:100%!important;border:0!important;border-radius:0!important;padding:0!important;
    box-shadow:none!important;background:#fff!important;color:#111!important;overflow:visible!important;
  }
  body.cabinet-open .cabinet-lookup-panel::before{display:none!important}
  body.cabinet-open .cabinet-license-document{
    display:block!important;width:100%!important;max-width:none!important;border:1px solid #d7d3ca!important;
    border-top:4px solid #b56b00!important;border-radius:0!important;padding:8mm!important;
    box-shadow:none!important;background:#fff!important;color:#111!important;
    font-size:10.75pt!important;line-height:1.4!important;
    break-before:auto!important;break-after:auto!important;page-break-before:auto!important;page-break-after:auto!important;
  }
  body.cabinet-open .cabinet-print-brand{
    display:block!important;margin:0 0 7mm;padding:0 0 5mm;border-bottom:1px solid #d7d3ca;
    break-inside:avoid;page-break-inside:avoid;page-break-after:avoid;
  }
  body.cabinet-open .cabinet-print-brand-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:8mm;margin-bottom:4mm;
  }
  body.cabinet-open .cabinet-print-wordmark{
    color:#111!important;font-family:'Syne',sans-serif;font-size:20pt;font-weight:800;letter-spacing:0;
  }
  body.cabinet-open .cabinet-print-product{
    color:#8a5200!important;font-family:'DM Mono',monospace;font-size:9.5pt;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;
  }
  body.cabinet-open .cabinet-print-meta{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3mm;border:1px solid #e4dfd5;
    background:#faf8f3;padding:3mm;break-inside:avoid;page-break-inside:avoid;
  }
  body.cabinet-open .cabinet-print-meta-item{display:flex;flex-direction:column;gap:1mm;min-width:0}
  body.cabinet-open .cabinet-print-meta-label{
    color:#68615a!important;font-family:'DM Mono',monospace;font-size:7.5pt;text-transform:uppercase;letter-spacing:.06em;
  }
  body.cabinet-open .cabinet-print-meta-value{
    color:#111!important;font-family:'DM Mono',monospace;font-size:9pt;overflow-wrap:anywhere;word-break:break-word;
  }
  body.cabinet-open .cabinet-license-document-title,
  body.cabinet-open .cabinet-license-statement,
  body.cabinet-open .cabinet-license-footer,
  body.cabinet-open .cabinet-license-details dt,
  body.cabinet-open .cabinet-license-details dd,
  body.cabinet-open .cabinet-license-details a{color:#111!important}
  body.cabinet-open .cabinet-license-document-title{
    margin:0 0 4mm!important;font-size:17pt!important;line-height:1.15!important;break-after:avoid;page-break-after:avoid;
  }
  body.cabinet-open .cabinet-license-statement{
    margin:0 0 5mm!important;font-size:10.75pt!important;line-height:1.45!important;
    break-inside:avoid;page-break-inside:avoid;
  }
  body.cabinet-open .cabinet-license-details{
    display:grid!important;grid-template-columns:42mm minmax(0,1fr)!important;gap:2.6mm 5mm!important;
    margin:0!important;font-size:10pt!important;line-height:1.35!important;
  }
  body.cabinet-open .cabinet-license-details dt{
    color:#68615a!important;font-family:'DM Mono',monospace;font-size:8pt;text-transform:uppercase;letter-spacing:.04em;
    break-inside:avoid;page-break-inside:avoid;
  }
  body.cabinet-open .cabinet-license-details dd{
    min-width:0!important;overflow-wrap:anywhere!important;word-break:break-word!important;
    break-inside:avoid;page-break-inside:avoid;
  }
  body.cabinet-open .cabinet-license-alert{
    border:1px solid #b8b0a5!important;background:#fff!important;color:#111!important;
    break-inside:avoid;page-break-inside:avoid;
  }
  body.cabinet-open .cabinet-license-footer{
    margin-top:6mm!important;padding-top:4mm!important;border-top:1px solid #d7d3ca!important;
    color:#4e4942!important;font-size:9.25pt!important;line-height:1.4!important;
    break-inside:avoid;page-break-inside:avoid;
  }
}
@media(prefers-reduced-motion:reduce){
  .cabinet-shell,
  .cabinet-panel::before,
  .cabinet-close,
  .cabinet-action{
    animation:none!important;transition:none!important;transform:none!important;
  }
}