/* Polished, mobile-first presentation layer. Existing form classes remain API-stable. */
:root {
  font-family: Inter, "Segoe UI", "Microsoft JhengHei", system-ui, sans-serif;
  color: #eef3ff;
  background: #090f1c;
  color-scheme: dark;
  --studio-line: rgba(154, 178, 235, .16);
  --studio-text: #c1cbdf;
  --studio-accent: #a38eff;
}
html {scroll-behavior:smooth}
body {
  min-height:100vh;
  background:
    radial-gradient(ellipse 44% 28% at 0% 6%,rgba(55,77,147,.23),transparent 95%),
    radial-gradient(ellipse 45% 29% at 93% 1%,rgba(132,74,174,.23),transparent 95%),
    #090f1c;
  overflow-x:hidden;
}
body:before {
  content:"";z-index:-1;position:fixed;inset:0;pointer-events:none;opacity:.17;
  background-image:linear-gradient(#7897bd24 1px,transparent 1px),linear-gradient(90deg,#7897bd24 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,#0000 0,#000 15%,#0000 80%);
}
.shell {max-width:1340px;padding:0 30px;margin:auto;touch-action:pan-x pan-y}
header {
  padding:23px 0 27px;
  border-bottom:1px solid rgba(167,184,228,.09);
  margin-bottom:27px;
}
.brand .logo,.auth-card .logo {
  border-radius:18px;
  background:linear-gradient(138deg,#cb9aff 0%,#756af5 58%,#4bb8dd 100%);
  box-shadow:0 8px 28px rgba(124,97,233,.35),inset 0 1px 1px #fff8;
}
.brand h1{font-weight:800;letter-spacing:-.8px;font-size:24px}
.brand small{letter-spacing:2px;font-weight:700;color:#91a6d4}
.status {
  border:1px solid var(--studio-line);
  background:rgba(16,29,52,.65);
  font-weight:650;font-size:12px;
}
.status.ready{border-color:#26816b88;background:#0e3b3444;color:#7eead1}
.studio-intro {
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:46px;align-items:center;
  position:relative;overflow:hidden;
  padding:49px 52px 44px;
  margin-bottom:29px;
  border:1px solid #9d9df82c;border-radius:29px;
  background:linear-gradient(125deg,rgba(27,36,70,.98) 0%,rgba(21,28,50,.9) 47%,rgba(45,27,71,.8) 100%);
  box-shadow:0 28px 60px #0005,inset 0 1px #fff1;
}
.studio-intro:before {
  content:"";position:absolute;width:420px;height:420px;right:-120px;top:-240px;
  background:radial-gradient(circle,#8d70ec58,transparent 68%);pointer-events:none;
}
.studio-eyebrow {
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:99px;
  border:1px solid #7ed6db48;background:#79c5dc0c;
  color:#b8dce8;font-size:10px;font-weight:800;letter-spacing:2px;
}
.studio-live {
  width:7px;height:7px;border-radius:50%;background:#62dcca;display:inline-block;
  box-shadow:0 0 12px #62dcca90;
}
.studio-intro h2 {font-size:clamp(30px,3.5vw,51px);line-height:1.21;letter-spacing:-2px;margin:25px 0 21px}
.studio-intro p{color:#bdc7e1;line-height:1.9;font-size:15px;max-width:475px}
.studio-steps {display:flex;gap:9px;flex-wrap:wrap;margin-top:29px}
.studio-steps span {
  font-size:10px;font-weight:800;letter-spacing:1px;padding:9px 11px;
  color:#c4cbff;background:#7e8fdf17;border:1px solid #a2aef52d;border-radius:8px;
}
.studio-art {
  position:relative;transform:rotate(3deg);border-radius:21px;
  border:1px solid #9a9ee55a;background:#0e1427;padding:11px;
  box-shadow:0 26px 49px #0008,0 0 0 7px #c7b0ff0a;
  max-width:430px;justify-self:end;width:100%;
}
.studio-art-top{padding:4px 8px 12px;display:flex;justify-content:space-between;color:#8294cb;letter-spacing:2px;font-size:9px}
.studio-art-top span:first-child{color:#bc8fe8}
.studio-art-stage {
  position:relative;isolation:isolate;height:217px;border-radius:12px;
  background:radial-gradient(circle at 52% 68%,#45608f,#1d2450 35%,#181235 65%,#0a1731);
  overflow:hidden;display:grid;place-items:center;
}
.studio-art-stage:before {
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#85bbff09 1px,transparent 1px),linear-gradient(#85bbff08 1px,transparent 1px);
  background-size:25px 25px;
}
.studio-art-orb {
  position:absolute;width:158px;height:158px;border-radius:50%;
  background:radial-gradient(circle at 31% 30%,#c6b5fa,#8d74c7 37%,#303064 80%);
  box-shadow:0 0 66px 28px #a696e63b,0 24px 40px #050a2b;
  transform:translate(7px,-5px);
}
.studio-art-ring {
  position:absolute;width:240px;height:90px;border:10px solid #9aaff93d;
  transform:rotate(-27deg) translateY(4px);border-radius:50%;
  box-shadow:0 0 20px #778be737;
}
.studio-art-play {
  position:relative;display:grid;place-items:center;width:50px;height:50px;
  padding-left:2px;border-radius:50%;background:#fff3;color:white;
  border:1px solid #fffd;backdrop-filter:blur(8px);font-size:19px;
}
.studio-art-info {
  position:absolute;bottom:10px;left:11px;right:11px;
  display:flex;justify-content:space-between;
  font-size:9px;letter-spacing:1px;font-weight:800;color:#c7d5f8;
}
.studio-art-info span:last-child{color:#f69ba7}
.studio-art-strip{display:flex;gap:5px;margin-top:9px}
.studio-art-strip i {
  height:18px;flex:1;border-radius:4px;
  background:linear-gradient(145deg,#37487f,#9476c8 60%,#bfb6f7);
}
.studio-art-strip i:nth-child(2){background:linear-gradient(145deg,#425781,#6b77ba,#a688d4)}
.studio-art-strip i:nth-child(3){background:linear-gradient(145deg,#345978,#5897a8,#94c7d1)}
.studio-art-strip i:nth-child(4){background:linear-gradient(145deg,#6c3e7a,#bf7199,#e09fb3)}
.studio-art-strip i:nth-child(5){background:linear-gradient(145deg,#323f77,#6c6ec3,#a8a4f3)}
nav#tabs {
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  overflow-x:auto;overscroll-behavior-x:contain;
  margin:0 0 30px;padding:7px;border:1px solid #8591bf22;border-radius:17px;
  background:#151b2cde;scrollbar-width:none;
}
nav#tabs::-webkit-scrollbar{display:none}
nav#tabs button {
  min-width:0;flex:1;white-space:nowrap;padding:14px 18px;
  color:#acbad6;background:transparent;border-radius:12px;font-weight:750;
  transition:background .2s,color .2s;
}
nav#tabs button:hover{background:#737ec820;color:#f7f8ff}
nav#tabs button.active {
  color:#fff;background:linear-gradient(110deg,#755bd9,#626dc6 54%,#456e99);
  box-shadow:0 5px 16px #19164e96;
}
.heading{margin-bottom:21px}
.heading small{color:#a6b4ec}
.heading h2{font-size:clamp(25px,2.6vw,37px);line-height:1.25;margin:11px 0 9px}
.heading p,.muted{color:#a9b4cc;font-size:13px;line-height:1.8}
.card {
  position:relative;overflow:hidden;
  border:1px solid var(--studio-line);
  background:linear-gradient(145deg,rgba(28,35,58,.95),rgba(18,25,43,.96));
  border-radius:21px;padding:26px;
  box-shadow:0 10px 38px #00000020,inset 0 1px #ffffff08;
}
.card h3{font-size:19px}
label{color:#dce6ff;letter-spacing:.05px}
textarea,select,input[type=file],.auth-card input{
  border:1px solid #7990c049;background:#111b30e0;
  color:#f2f5ff;border-radius:12px;
}
textarea::placeholder{color:#7788a7}
textarea:focus,select:focus,input[type=file]:focus{
  border-color:#a39aff;box-shadow:0 0 0 3px #8e8aff1a;
}
input[type=checkbox]{accent-color:#a697fd}
.primary {
  color:#fff;background:linear-gradient(113deg,#9b65ec 0%,#656ff1 68%,#4d93d5 100%);
  box-shadow:0 7px 25px #6b54e432;border:1px solid #d3c3ff32;
}
.secondary{border:1px solid #9aa8d52b;background:#30364fcc;color:#e0eaff}
.primary,.secondary{font-size:13px;line-height:1.3;letter-spacing:.05px}
.primary:focus-visible,.secondary:focus-visible,nav button:focus-visible{
  outline:2px solid #8fcff9;outline-offset:2px;
}
.chip {background:#2f3e63a6;border:1px solid #8ba2e13a;color:#d6e4ff}
.shot {
  background:linear-gradient(130deg,#1b2440,#1b1d33);
  border:1px solid #7f8cbd40;
  border-radius:18px;box-shadow:inset 3px 0 #967ef6;
  padding:22px;margin:15px 0;
}
.shot-head h3{font-size:17px;color:#e7e8ff}
.shot .remove{border-radius:10px;padding:4px 9px;background:#bf5a7120}
.shot textarea{min-height:100px}
.shot-actions{padding-top:17px;border-top:1px solid var(--studio-line);margin-top:17px}
.shot-actions-line{display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr;gap:9px}
.shot-actions-line button{margin:0;width:100%;padding:11px 8px;font-size:12px;white-space:nowrap}
.shot-library-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}
.shot-library-row label{margin:3px 0 7px;color:#a9b9e0;font-weight:650}
.shot-library-row select{width:100%;max-width:none;padding:11px;font-size:12px}
.chosen-frame{display:flex;align-items:center;gap:9px;font-size:10px;color:#a2b8dc;overflow-wrap:anywhere}
.chosen-frame img {
  display:block;object-fit:cover;width:58px;height:74px;margin-top:10px;
  border-radius:7px;border:1px solid #9aabe14f;
}
.storyboard-actions{flex-wrap:wrap;gap:10px;margin-top:12px}
.storyboard-actions .primary{margin-top:0;flex:1;min-width:170px;width:auto}
.storyboard-actions .secondary{flex:0 0 auto;white-space:nowrap}
#storyConcept{min-height:110px}
.storyboard-actions+h3{margin-top:25px}
.single-video-card{margin-bottom:22px;border-color:#977ee274;background:linear-gradient(124deg,#242345,#172338 70%)}
.single-video-heading{align-items:center;margin-bottom:18px}
.single-video-heading h3{font-size:clamp(21px,2.2vw,29px);margin:12px 0 8px}
.single-video-heading p{max-width:820px}
.single-video-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.85fr);gap:30px}
.single-video-form{display:grid;gap:10px;align-content:start}
.single-video-form>label:not(.check){margin-top:6px}
.single-video-form textarea{min-height:72px}
.single-video-form #singlePlainVoice{display:grid;gap:8px}
.single-video-form input[type=range]{width:100%;accent-color:#a18fff;cursor:pointer}
.single-duration-heading{margin-top:6px}
.single-duration-heading output{font-weight:800;color:#d7c1ff;font-size:20px}
.duration-markers{margin-top:-7px;color:#a6b5d9;font-size:12px}
.single-generate{width:100%;padding:15px;margin-top:11px}
.single-generate:disabled{opacity:.55;cursor:wait}
.single-video-visual{min-width:0}
.source-mode-box,.multi-reference-box{
  border:1px solid #7c98c74d;border-radius:14px;padding:13px 15px;
  background:linear-gradient(128deg,#202c46bb,#28213db3);min-width:0;
}
.source-mode-box label,.multi-reference-box>label{margin:0 0 9px}
.source-mode-box select,.multi-reference-box select{width:100%;max-width:none}
.source-mode-box p{margin:8px 0 0}
.multi-reference-box #singleReferencePanel{padding-top:9px}
.reference-inputs{display:grid;grid-template-columns:1fr;gap:8px}
.reference-inputs>div{min-width:0}
.reference-inputs label{margin:7px 0}
.reference-inputs input{max-width:100%;width:100%;font-size:12px}
.reference-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:9px;margin-top:12px}
.reference-thumb{min-width:0;border-radius:11px;border:1px solid #98a5d459;background:#0e192d;padding:5px}
.reference-thumb img{width:100%;height:85px;object-fit:contain;display:block;border-radius:6px}
.reference-thumb span{display:block;font-size:10px;color:#c7d7ff;text-align:center;margin:5px 0 2px}
.reference-thumb.preview-load-error{border-color:#e9a0b0}
.reference-thumb.preview-load-error span{color:#ffd1da}
.single-video-visual>h3{margin:20px 0 11px}
.single-frame-preview{display:grid;place-items:center;min-height:260px;overflow:hidden;border-radius:15px;background:#0f1a2c;border:1px solid #8794d15a;text-align:center}
.single-frame-preview img{width:100%;max-height:370px;object-fit:contain}
#singleVideoPreview{min-height:90px}
#singleVideoPreview .result{padding:12px 0}
#singleVideoPreview video{width:100%;max-height:360px}
.timeline-global{margin-top:22px;padding:19px;border:1px solid #8fa5df36;border-radius:15px;background:#151e34a8}
.timeline-global>label{display:block;margin-bottom:10px}
.timeline-global>select{width:100%}
.timeline-panel{margin:14px 0 8px;padding:18px 0 5px;border-top:1px solid #8fa5df3c}
.timeline-panel>.row{align-items:center;gap:9px;flex-wrap:wrap}
.timeline-panel>.row strong{font-size:14px;color:#e1e6fd}
.timeline-panel>.row button{white-space:nowrap;width:auto}
.timeline-list{display:grid;gap:12px;margin:15px 0}
.timeline-row{display:grid;grid-template-columns:minmax(75px,.6fr) minmax(75px,.6fr) minmax(85px,.75fr) minmax(180px,2fr) 38px;gap:10px;align-items:end;padding:13px;background:#0f1930;border:1px solid #889bdd43;border-radius:12px}
.timeline-row label{display:grid;gap:7px;font-size:11px;color:#b9c7ee}
.timeline-row input,.timeline-row textarea{width:100%;min-width:0;padding:10px;border:1px solid #7c8bb65c;background:#141f37;border-radius:9px;color:#f7f8ff;font:inherit;font-size:13px}
.timeline-row textarea{resize:vertical;min-height:60px}
.timeline-row .timeline-remove{height:39px;padding:5px;font-size:18px;color:#f7afbd}
.timeline-panel>.secondary{margin-top:5px}
.result-toolbar{margin-bottom:12px}
.result-toolbar button{width:auto;white-space:nowrap}
.download-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
.download-actions .download-button,.download-actions .device-share-button{display:flex;align-items:center;justify-content:center;flex:1 1 185px;min-height:45px;padding:11px 13px;margin:0;text-align:center;text-decoration:none;overflow-wrap:anywhere;font-size:13px}
.download-actions .download-button{background:linear-gradient(113deg,#9b65ec 0%,#656ff1 68%,#4d93d5 100%);color:#fff;border:1px solid #d3c3ff32}
.download-actions .device-share-button:disabled{opacity:.65}
.device-download-hint{margin:2px 0 14px;font-size:12px}
.download-screen{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));background:#060a16f2;backdrop-filter:blur(17px);overflow-y:auto}
.download-sheet{width:min(100%,510px);max-height:100%;overflow-y:auto;padding:24px;border:1px solid #a99efb65;border-radius:22px;background:linear-gradient(140deg,#242c4d,#191a34 75%);box-shadow:0 24px 90px #000b;text-align:center}
.download-sheet-top{margin-bottom:24px;flex-wrap:wrap}
.download-sheet-top button{white-space:normal;text-align:left}
.download-sheet-icon{width:72px;height:72px;display:grid;place-items:center;border-radius:25px;background:linear-gradient(125deg,#a77cff,#627df1);margin:0 auto 17px;font-size:39px;font-weight:800}
.download-sheet h2{font-size:27px;margin:0 0 10px}
#downloadFileName{overflow-wrap:anywhere;margin-bottom:13px}
#downloadStatus{padding:13px;border:1px solid #64cbb14d;background:#164d4242;border-radius:12px;font-size:14px;line-height:1.75;text-align:left}
.download-sheet>button{display:block;width:100%;margin:12px 0 0;white-space:normal}
.download-sheet .download-help{margin:18px 0 0;line-height:1.7;text-align:left}
#downloadFrames{position:fixed;left:-10000px;top:0;width:1px;height:1px;overflow:hidden;pointer-events:none}
.download-transport{display:block;border:0;width:1px;height:1px;opacity:0;pointer-events:none}
.storyboard-actions .primary:disabled{opacity:.48}
.preview-card,.gallery-grid .media{background:#192236}
.empty{border:1px dashed #7f8ebc55;color:#9caed0;background:#101d31a3}
.media{border:1px solid #7188b63c;box-shadow:0 9px 24px #0002}
.media:hover{border-color:#9d98e1ad}
.result{border-top:1px solid #8b9fc82a;padding-top:12px}
.result a,.media a{color:#bfb1ff}
.job-box {
  background:linear-gradient(145deg,#253354f9,#242542f9);
  border:1px solid #9984e5aa;
  box-shadow:0 15px 50px #01040cdd;
  backdrop-filter:blur(17px);
}
.progress{height:9px;background:#222f51}
.progress div{background:linear-gradient(90deg,#a376fc,#699cfa 56%,#65e2cd)}
.auth-overlay{background:#060a16e9}
.auth-card{
  background:linear-gradient(150deg,#253052,#191a36);
  border:1px solid #af9fe762;box-shadow:0 35px 90px #000b;
}
.studio-toast {
  position:fixed;right:25px;bottom:25px;max-width:min(450px,calc(100vw - 30px));
  background:#173b39;border:1px solid #58bfaf;color:#d3fffa;
  box-shadow:0 12px 48px #0009;border-radius:14px;
  padding:13px 18px;z-index:130;font-size:13px;font-weight:700;
}
.studio-toast.bad{color:#ffe1e9;background:#532d3b;border-color:#e58b9f}
[hidden]{display:none!important}
footer{color:#7b8eae;padding-bottom:35px}
@media(max-width:970px){
  .single-video-grid{grid-template-columns:1fr}
  .single-frame-preview{min-height:185px}
  .timeline-row{grid-template-columns:minmax(75px,.7fr) minmax(75px,.7fr) minmax(95px,1fr) minmax(160px,2fr) 38px}
  .studio-intro{gap:20px;padding:32px}
  .studio-art{max-width:330px}
  .studio-art-stage{height:185px}
  .shot-actions-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  nav#tabs button{flex:0 0 auto;min-width:125px}
}
@media(max-width:750px){
  .timeline-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .timeline-row label:nth-child(3),.timeline-row .timeline-dialogue{grid-column:1/-1}
  .timeline-row .timeline-remove{grid-column:2;justify-self:end;width:46px}
  .timeline-panel{padding-top:15px}
  .timeline-panel>.row button{white-space:normal}
  .shell{padding:0 15px}
  header{padding:17px 0 20px;margin-bottom:16px;align-items:flex-start}
  .brand{gap:9px}
  .brand .logo{width:44px;height:44px}
  .brand h1{font-size:20px}
  .brand small{font-size:8px;letter-spacing:1px}
  .status{font-size:10px;max-width:138px;text-align:center}
  .studio-intro{padding:28px 22px;grid-template-columns:1fr;gap:15px;border-radius:19px}
  .studio-intro h2{font-size:33px;letter-spacing:-1px;margin:17px 0 10px}
  .studio-intro p{font-size:13px;line-height:1.8}
  .studio-steps{gap:6px;margin-top:18px}
  .studio-steps span{font-size:9px;padding:7px}
  .studio-art{display:none}
  nav#tabs{margin-bottom:24px;padding:5px}
  nav#tabs button{font-size:12px;min-width:112px;padding:12px 13px}
  .card{padding:19px;border-radius:17px}
  .shot{padding:15px}
  .shot-actions-line{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .shot-actions-line button{font-size:11px;padding:11px 6px}
  .shot-library-row{grid-template-columns:1fr}
  .storyboard-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .storyboard-actions button{font-size:11px!important;padding:12px 6px!important;min-width:0!important;width:100%!important}
  .storyboard-actions .primary{margin:0}
  .row:not(.spread){flex-wrap:wrap}
  .row.action-row .primary,.row.action-row .secondary{white-space:normal}
  .studio-toast{right:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}