/* The studio fills the viewport; only the working panels scroll on desktop. */
html{min-height:100%;scrollbar-color:#46513f #181c18}
.brand,.sidebar .brand{flex-direction:column;align-items:flex-start;gap:7px;letter-spacing:1px;font-size:26px;white-space:nowrap}
.brand span,.sidebar .brand span{border:0;padding:0;font-size:11px;letter-spacing:1.4px;line-height:1.2;color:#bdcbb1}
.auth-art .brand{font-size:30px}
body:has(#app:not([hidden])){overflow:hidden}
.app{height:100dvh;min-height:0;grid-template-columns:clamp(174px,13vw,220px) minmax(0,1fr)}
.sidebar{position:relative;height:100%;min-height:0;overflow:auto;padding-top:27px}
.workspace-label{margin-top:38px}
.app>main{display:grid;grid-template-rows:56px minmax(0,1fr) 30px;min-width:0;min-height:0;height:100%;overflow:hidden}
.topbar{height:auto;padding:0 clamp(20px,2.4vw,42px)}
.page{width:100%;max-width:none;margin:0;padding:clamp(16px,2.5dvh,30px) clamp(20px,2.4vw,42px);min-width:0;min-height:0;overflow:auto}
#create-page{display:flex;flex-direction:column;overflow:hidden}
.page-heading{flex-shrink:0;margin-bottom:clamp(14px,2dvh,24px)}
.page-heading h1{font-size:clamp(24px,2.2vw,34px);margin:5px 0}
.page-heading p{font-size:12px}
.page-footer{margin:0 clamp(20px,2.4vw,42px);padding:5px 0;align-items:center}
.creative-grid{flex:1;min-height:0;grid-template-columns:minmax(360px,.95fr) minmax(300px,1.05fr);gap:clamp(18px,2vw,32px);align-items:stretch}
.creative-grid>.composer{display:flex;flex-direction:column;min-height:0;min-width:0;padding:clamp(16px,1.5vw,24px);overflow:hidden}
.mode-tabs{flex:none;margin-bottom:16px}
.mode-tabs button{width:auto;flex:1;white-space:nowrap;padding:9px 6px;font-size:13px}
#create-form{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
.composer-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:8px;scroll-padding:12px}
.composer-body>*:first-child{margin-top:0}
.prompt-box textarea{height:clamp(120px,17dvh,210px);min-height:100px;resize:vertical;padding:12px;font-size:13px}
.prompt-footer{font-size:11px;padding:2px 12px 10px}
.prompt-footer>span:first-child{max-width:none}
.field-label,legend{font-size:13px}
.prompt-label{margin-bottom:10px}
.settings-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(100px,.8fr);gap:16px}
.duration-setting{display:block}
.duration-setting>.field-label{margin-bottom:11px}
.duration-input{display:flex;align-items:center;background:#151718;border:1px solid var(--line);border-radius:8px;padding-right:13px;height:44px}
.duration-input:focus-within{border-color:#8fa75f}
.duration-input input{border:0;background:none;padding:9px 12px;font-size:14px;width:100%}
.duration-input>span{color:var(--muted);font-size:12px}
.duration-helper{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:11px 0 20px}
.duration-chips{display:flex;gap:7px}
.duration-chips button{border:1px solid var(--line);background:#161a16;color:var(--muted);border-radius:5px;padding:3px 10px;font-size:11px}
.duration-chips button.active{color:var(--lime);border-color:#5d704a}
#duration-hint{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.preset-field{margin:0 0 12px}
.preset-field legend{font-size:12px;margin-bottom:7px}
.preset-field .field-note{margin-top:6px;font-size:10px}
.preset-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.preset-options label{cursor:pointer;position:relative}
.preset-options input{position:absolute;opacity:0;width:1px;height:1px;left:12px;top:12px}
.preset-options label>span{display:block;border:1px solid var(--line);background:#141714;border-radius:9px;padding:7px 13px}
.preset-options strong{font-size:13px;display:block}
.preset-options small{font-size:11px;color:var(--muted);display:block;margin-top:2px}
.preset-options input:checked+span{background:#283221;border-color:#9bbd69;color:#e1f4c4}
.preset-options input:checked+span small{color:#b4c899}
.preset-options input:focus-visible+span{outline:2px solid var(--lime);outline-offset:3px}
.advanced{margin-top:17px;padding-top:13px;margin-bottom:6px}
.seed-field{margin-top:12px;font-size:12px;color:var(--muted)}
.seed-field input{margin-top:6px}
.submit-area{flex:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);background:var(--panel)}
.submit-note{font-size:11px}
.submit-area .primary{min-height:46px}
.preview-column{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;scrollbar-gutter:stable;padding-right:5px}
.section-heading{flex:none}
.preview-stage{flex:1 0 auto;aspect-ratio:auto;min-height:clamp(190px,34dvh,420px)}
.preview-stage video{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
.preview-details{flex:none}
.preview-details>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.preview-meta{font-size:11px}
.workflow-note{flex:none;margin:16px 0 20px;padding:12px 15px}
.workflow-note br{display:none}
.workflow-note p{font-size:12px}
.recent-heading,.recent-list{flex:none}
.recent-item{padding:9px 0}
.recent-item strong{max-width:none}
.recent-item small,.status-label{font-size:11px}
.profile small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ideas-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;color:var(--muted);font-size:11px}
.idea-chips{margin:8px 0 20px;gap:8px}
.idea-chips button{font-size:12px;padding:5px 10px}
#reference-area{margin-bottom:22px}
.reference-add{position:relative;overflow:hidden;cursor:pointer;color:var(--lime);font-size:12px;border:1px solid #52653e;border-radius:6px;padding:5px 10px}
.reference-add:focus-within{outline:2px solid var(--lime);outline-offset:2px}
.reference-add input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.reference-list{display:grid;gap:9px;grid-template-columns:1fr}
.reference-card{display:flex;align-items:center;gap:12px;background:#131713;border:1px solid #343e30;border-radius:9px;padding:10px;min-width:0}
.reference-card>img{width:72px;height:78px;border-radius:6px;object-fit:contain;background:#090d09;flex-shrink:0}
.reference-card>div{flex:1;min-width:0}
.reference-card strong{font-size:12px;display:block;margin-bottom:3px;color:#d3e1c7}
.reference-card input{padding:5px 8px;font-size:12px;border-radius:5px}
.reference-actions{display:flex;gap:10px;margin-top:5px}
.reference-actions button{padding:0 6px;background:none;border:0;color:var(--muted);font-size:12px}
.reference-actions button:hover{color:var(--lime)}
.reference-actions button:disabled{opacity:.25;cursor:default}
.reference-empty{text-align:center;border:1px dashed #4c5b40;border-radius:9px;padding:25px 10px;color:#b0c29c;font-size:13px;line-height:1.8}
.reference-empty small{font-size:11px;color:var(--muted)}
.interpolation-option{display:flex;align-items:center;gap:10px;margin:12px 0 4px;padding:11px 12px;border:1px solid var(--border,#343a30);border-radius:9px;cursor:pointer;background:#ffffff03}
.interpolation-option:has(input:checked){border-color:var(--lime);background:#c4f46b08}
.interpolation-option input{width:17px;height:17px;flex:0 0 17px;margin:0;accent-color:var(--lime);cursor:pointer}
.interpolation-option strong{display:block;font-size:13px;font-weight:500;color:var(--text,#e5e8df)}
.interpolation-option small{display:block;font-size:11px;color:var(--muted);line-height:1.6;margin-top:3px}
.interpolation-option input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

#reference-count{margin-left:8px}
.drop-zone{max-height:230px}
.drop-zone:has(#image-preview:not([hidden])){max-height:none}
.auth-screen{min-height:100dvh}
.auth-art{min-height:100dvh;display:flex;flex-direction:column;padding:clamp(24px,4vw,64px)}
.auth-statement{margin:auto 0;padding:40px 0}
.auth-foot{position:static;padding-bottom:0}
.auth-panel{min-width:0}
@media(min-width:1700px){.creative-grid{grid-template-columns:minmax(450px,.85fr) minmax(0,1.15fr)}.reference-list{grid-template-columns:1fr 1fr}.reference-card>img{width:62px}.composer-body{padding-right:12px}}
@media(min-width:901px) and (max-height:800px){.app>main{grid-template-rows:46px minmax(0,1fr) 24px}.page{padding-top:12px;padding-bottom:12px}.page-heading{margin-bottom:12px}.page-heading h1{font-size:25px}.page-heading .eyebrow{font-size:9px}.mode-tabs{margin-bottom:12px}.preview-stage{min-height:180px}.workflow-note{margin:12px 0;padding:10px 12px}.recent-list .recent-item:nth-child(n+3){display:none}.submit-area{margin-top:10px;padding-top:10px}.workspace-label{margin-top:28px}}
@media(max-width:1050px) and (min-width:901px){.app{grid-template-columns:168px minmax(0,1fr)}.creative-grid{grid-template-columns:minmax(320px,1fr) minmax(260px,.9fr);gap:16px}.page{padding-left:18px;padding-right:18px}.creative-grid>.composer{padding:15px}.mode-tabs button{font-size:12px}.submit-note{font-size:10px}.ratio-options button small{display:none}.preset-options label>span{padding:9px}}
@media(min-width:901px) and (max-height:620px){.app>main{grid-template-rows:40px minmax(0,1fr) 0}.page{padding-top:8px;padding-bottom:8px}.page-heading{margin-bottom:8px}.page-heading h1{font-size:22px;margin:0}.page-heading .eyebrow,.page-heading p,.version-tag,.page-footer{display:none}.creative-grid>.composer{padding:12px}.mode-tabs{margin-bottom:10px}.mode-tabs button{padding:7px}.submit-area{padding-top:8px;margin-top:8px}.preset-field{margin-bottom:8px}.preset-field .field-note{display:none}.preset-options label>span{padding:5px 10px}.submit-area .primary{min-height:40px;padding:9px 15px}.preview-stage{min-height:155px}.sidebar{padding-top:18px}.workspace-label{margin-top:22px}.profile{padding-top:10px}.engine-pill{margin-bottom:5px}.prompt-box textarea{height:110px}}
@media(max-width:900px){
  body:has(#app:not([hidden])){overflow:auto}
  .app{display:block;height:auto;min-height:100dvh}
  .sidebar{height:auto;position:static;overflow:visible;display:flex;flex-direction:row;align-items:center;padding:16px 20px;gap:20px}
  .sidebar .brand{padding:0;font-size:27px}.sidebar .brand span{font-size:8px}
  .sidebar nav{display:flex;gap:4px;margin-left:auto}.nav-button{width:auto;padding:9px 10px;font-size:12px;gap:0}
  .workspace-label,.sidebar-bottom,.nav-icon,.nav-count{display:none}
  .app>main{display:block;height:auto;min-height:0;overflow:visible}
  .topbar{height:45px;padding:0 20px}.topbar-note{display:none}.mobile-only{display:inline-block}
  .page{padding:24px 20px;overflow:visible}
  #create-page{display:block;overflow:visible}
  .creative-grid{display:grid;grid-template-columns:1fr;gap:26px;overflow:visible}
  .creative-grid>.composer{display:block;overflow:visible;padding:20px}
  #create-form{display:block}.composer-body{overflow:visible;padding:0;scrollbar-gutter:auto}
  .prompt-box textarea{height:155px}
  .preview-column{display:block;overflow:visible;padding:0;scrollbar-gutter:auto}
  .preview-stage{aspect-ratio:16/10;min-height:0;max-height:520px}
  .preview-stage video{position:relative;height:100%;max-height:520px}
  .submit-area{margin-top:18px;padding-top:18px}
  .page-footer{margin:0 20px 20px;padding-top:14px}
  .reference-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){.sidebar{padding:15px 16px;gap:10px;flex-wrap:wrap}.sidebar .brand span{display:none}.nav-button{padding:8px;font-size:11px}.page{padding:20px 16px}.topbar{padding:0 16px}.page-heading h1{font-size:27px}.creative-grid>.composer{padding:16px}.mode-tabs button{font-size:12px;padding:10px 3px}.settings-row{grid-template-columns:minmax(0,1.2fr) minmax(90px,.8fr);gap:12px}.duration-helper{gap:8px}.duration-chips button{padding:3px 8px}.preset-options{gap:8px}.preset-options label>span{padding:10px}.submit-note{font-size:10px}.reference-list{grid-template-columns:1fr}.page-footer{margin-left:16px;margin-right:16px}.auth-art{min-height:230px;padding:24px}.auth-statement{padding:28px 0 0}.auth-foot{display:none}.auth-statement h1{font-size:27px}.auth-panel{padding:30px 24px}.page-heading p{font-size:12px}.prompt-footer{font-size:10px}.preview-stage{aspect-ratio:16/11}}