:root,[data-theme=wool]{--page:#f5f2ed;--surface:#fffefaed;--solid:#fffefa;--soft:#f2eee7;--ink:#3c372f;--accent:#806b50;--border:#e5ddd1;--muted:#766c5f;--glow-a:#ddc9a330;--glow-b:#c6b5a11f;color-scheme:light}
[data-theme=aurora]{--page:#edf5f3;--surface:#ffffffeb;--solid:#fff;--soft:#f0f7f4;--ink:#243b38;--accent:#147e70;--border:#d7e5df;--muted:#637d75;--glow-a:#7ed5c64a;--glow-b:#9eaee63d;color-scheme:light}
[data-theme=midnight]{--page:#111726;--surface:#1c2537ed;--solid:#1c2537;--soft:#26324a;--ink:#e3e9f7;--accent:#a3b4ff;--border:#39465e;--muted:#a6b4ca;--glow-a:#536dde38;--glow-b:#aa65d52e;color-scheme:dark}
[data-theme=sand]{--page:#f5f0e6;--surface:#fffdf8ed;--solid:#fffdf8;--soft:#f5eddc;--ink:#443b2e;--accent:#926b2c;--border:#e4d8c1;--muted:#81715a;--glow-a:#e6bb6240;--glow-b:#d8a6a536;color-scheme:light}
html{background:var(--page);color:var(--ink)}
body{isolation:isolate;background:transparent;color:var(--ink)}
#studio-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 12% 16%,var(--glow-a),transparent 60%),radial-gradient(ellipse at 85% 78%,var(--glow-b),transparent 62%),var(--page)}
#studio-atmosphere canvas{display:block;width:100%;height:100%}
.topbar,.controls,.stage-panel,.library,.queue-panel{background:var(--surface);border-color:var(--border)}
.stage-panel,.library,.queue-panel{border:1px solid var(--border);border-radius:10px}
.controls{border-radius:10px}.topbar{gap:20px}.top-actions{align-items:center;gap:7px}
.appearance-control{display:flex;align-items:center;gap:5px;margin:0;flex-shrink:0;color:var(--muted);font-size:11px}
.appearance-control select{width:auto;max-width:135px;height:32px;padding:0 7px;font-size:11px;border-radius:6px}
.controls>.section-head,.generation-footer,.library>.section-head,.queue-panel>.section-head,.video-settings-tabs,dialog,.preview-navigation{background:var(--solid);color:var(--ink)}
input,select,textarea,.secondary,.ratio-trigger,.ratio-grid button,.asset,.reference-thumbnail button,.asset-remove{background:var(--solid);color:var(--ink);border-color:var(--border)}
select option:disabled{color:var(--muted);}
.canvas-shell,#large-preview{background:var(--soft);border-color:var(--border)}
.result-stage{background-image:none;background-color:transparent}
.result-bottom,.segmented,.count,.size-summary,.asset .asset-preview,.upload,#prompt-optimizer,.video-generation-assets,.asset-open,.asset-add,.image-template-drawer>summary,#drama-preview-text{background:var(--soft);color:var(--muted);border-color:var(--border)}
.video-generation-assets #unified-asset-grid.is-empty #asset-add{background:var(--solid);border-color:var(--border);color:var(--accent)}
.segmented button.active,.ratio-grid button.selected,.video-settings-tabs button[aria-selected=true],.video-ratio-options button[aria-pressed=true],.batch-item.active{background:var(--soft);color:var(--accent);border-color:var(--accent)}
.primary{background:var(--accent);border-color:var(--accent);color:var(--solid)}
[data-theme=midnight] .primary{color:#111726}
.primary:hover{background:var(--accent);filter:brightness(.94)}
.secondary:hover,.icon-button:hover{background:var(--soft);border-color:var(--accent);color:var(--accent)}
.empty-state,.empty-state h2,.empty-state p,.empty-note,.dialog-note,.stage-head p,.selection-label,.text-meta,.video-settings-pane .dialog-note,.viewer-details,#viewer-status,.icon-button,.template-expand-label,#image-optimizer-config,#asset-counts,.batch-item small,.queue-row p,.queue-row .state{color:var(--muted)}
.reference-preview-link,.asset-kind-icon,.ratio-outline,.upload strong,.upload>svg{color:var(--accent)}
[data-theme=midnight] .retention-notice{background:#3b3223;border-color:#665334;color:#e5c58e}
html[lang=en] .workspace-tabs{gap:14px}html[lang=en] .workspace-tabs button{font-size:12px}
html[lang=en] .video-settings-tabs button{white-space:normal;font-size:10px}
@media(min-width:761px) and (max-width:1150px){.brand{min-width:135px}.brand small{display:none}.topbar{gap:12px;padding-inline:14px}.workspace-tabs{gap:12px}.appearance-control>span{display:none}#manage-models>span{display:none}.appearance-control select{max-width:113px}}
@media(max-width:760px){.topbar{gap:9px;padding-bottom:0}.top-actions{flex-wrap:wrap;justify-content:flex-end;flex:1}.appearance-control>span{display:none}.appearance-control select{height:30px;max-width:112px;font-size:10px}.workspace-tabs{justify-content:center}.brand small{display:none}.brand{min-width:110px}.top-actions #account{max-width:135px}.appearance-control{order:2}.top-actions #manage-models{margin-left:auto}}

#image-optimize-prompt{color:var(--accent)}
/* A quiet, flat header: typography, spacing and separators instead of pills. */
.brand-logo{display:block;width:34px;height:38px;object-fit:contain;flex-shrink:0}
.topbar .brand{gap:10px}
.topbar .top-actions{gap:0}
.topbar .appearance-control{gap:7px;padding:0 13px;min-height:30px}
.topbar .appearance-control>span{font-size:10px;color:var(--muted)}
.topbar .appearance-control select{border:0;border-radius:0;box-shadow:none;background-color:transparent;height:32px;padding:0 3px;font-size:12px;cursor:pointer;max-width:124px}
.topbar .appearance-control select:hover{color:var(--accent)}
.topbar .appearance-control select option{background:var(--solid);color:var(--ink)}
.topbar #manage-models,.topbar #account{border:0;border-left:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none;height:28px;min-height:28px;margin-left:8px;padding:0 15px;color:var(--muted);font-size:12px;font-weight:400;white-space:nowrap}
.topbar #account{padding-right:0}
.topbar #manage-models:hover,.topbar #account:hover{color:var(--ink);background:transparent}
.topbar #manage-models svg{width:15px;height:15px}
.topbar #account .status-dot{width:5px;height:5px}
.topbar #account.connected .status-dot{background:var(--accent)}
@media(min-width:761px) and (max-width:1150px){.topbar .appearance-control{padding:0 8px;gap:4px}.topbar #manage-models,.topbar #account{padding-left:11px;padding-right:4px;margin-left:5px}.topbar .appearance-control select{font-size:11px;max-width:106px}}
@media(max-width:760px){.brand-logo{width:29px;height:33px}.topbar .top-actions{row-gap:8px}.topbar .appearance-control{padding:0 7px;min-height:26px}.topbar .appearance-control select{height:27px;font-size:11px;max-width:103px}.topbar #manage-models,.topbar #account{font-size:10px;padding:0 9px;height:25px;min-height:25px;margin-left:0}.topbar #manage-models{border-left:0}.topbar #account{padding-right:0}.topbar .appearance-control:last-of-type{padding-right:0}}
/* Neutral utility rows in every palette. */
.size-summary{background:transparent;color:var(--muted)}
.image-template-drawer>summary{background:transparent;border:0;border-radius:0;padding-left:0;padding-right:0;color:var(--ink)}
.image-template-drawer>summary:hover{color:var(--accent);background:transparent}
/* Let the prompt use spare height; keep the action at the panel bottom. */
@media(min-width:761px){
body:not(.video-single-screen):not(.image-edit-layout) .controls form{grid-template-rows:minmax(0,1fr) auto;align-content:stretch}
body:not(.video-single-screen):not(.image-edit-layout) #parameter-fields{display:flex;flex-direction:column}
body:not(.video-single-screen):not(.image-edit-layout) #parameter-fields> *{flex-shrink:0}
body:not(.video-single-screen):not(.image-edit-layout) .image-prompt-field{display:flex;flex-direction:column;flex:1 0 140px;min-height:140px}
body:not(.video-single-screen):not(.image-edit-layout) #prompt{flex:1;min-height:88px;height:0;max-height:none;resize:none}
body:not(.video-single-screen):not(.image-edit-layout) .generation-footer{margin-top:0}
}
/* Give image references a comfortable drop target, including after upload. */
body.image-edit-layout:not(.video-single-screen) #reference-section #dropzone{min-height:100px;padding:12px;flex-direction:column;gap:8px}
body.image-edit-layout:not(.video-single-screen) #dropzone>svg{display:block;width:22px;height:22px}
body.image-edit-layout:not(.video-single-screen) #dropzone strong{font-size:11px}
@media(min-width:761px) and (min-height:900px){
body.image-edit-layout:not(.video-single-screen) .controls form{padding-bottom:0}
body.image-edit-layout:not(.video-single-screen) #reference-section{display:flex;flex-direction:column;flex:1;min-height:160px}
body.image-edit-layout:not(.video-single-screen) #reference-section #dropzone{flex:1;min-height:110px}
body.image-edit-layout:not(.video-single-screen) .image-prompt-field{flex:0 0 auto;min-height:0}
body.image-edit-layout:not(.video-single-screen) #prompt{flex:none;height:90px;min-height:90px;max-height:90px}
}
@media(min-width:761px) and (max-height:899px){
body.image-edit-layout:not(.video-single-screen) #reference-section #dropzone{min-height:64px;padding:7px;flex-direction:row;gap:7px}
body.image-edit-layout:not(.video-single-screen) #dropzone>svg{width:18px;height:18px}
body.image-edit-layout:not(.video-single-screen) #dropzone small{display:none}
}
@media(max-width:760px){body.image-edit-layout:not(.video-single-screen) #prompt{height:90px;min-height:90px;max-height:140px}}
@media(min-width:761px) and (min-height:900px) and (max-height:1049px){
body.image-edit-layout:not(.video-single-screen) #parameter-fields{gap:2px}
body.image-edit-layout:not(.video-single-screen) #parameter-fields input:not([type=range]),body.image-edit-layout:not(.video-single-screen) #parameter-fields select{height:27px}
body.image-edit-layout:not(.video-single-screen) .ratio-grid button{height:23px}
body.image-edit-layout:not(.video-single-screen) #reference-section{min-height:130px}
body.image-edit-layout:not(.video-single-screen) #reference-section #dropzone{min-height:80px}
body.image-edit-layout:not(.video-single-screen) #prompt{height:64px;min-height:64px;max-height:64px}
body.image-edit-layout:not(.video-single-screen) .reference-thumbnail{height:30px}
}
/* Share spare vertical space equally between references and the prompt. */
@media(min-width:761px) and (min-height:1050px){
body.image-edit-layout:not(.video-single-screen) #reference-section{flex:1 1 0;min-height:105px}
body.image-edit-layout:not(.video-single-screen) #reference-section #dropzone{min-height:55px}
body.image-edit-layout:not(.video-single-screen) .image-prompt-field{flex:1 1 90px;min-height:140px}
body.image-edit-layout:not(.video-single-screen) #prompt{flex:1;height:0;min-height:90px;max-height:none}
}
@media(min-width:761px) and (min-height:900px) and (max-height:1049px){
body.image-edit-layout:not(.video-single-screen) #reference-section{flex:0 0 auto;min-height:0}
body.image-edit-layout:not(.video-single-screen) #reference-section #dropzone{flex:none;min-height:40px;padding:6px;flex-direction:row}
body.image-edit-layout:not(.video-single-screen) .image-prompt-field{flex:1;min-height:100px}
body.image-edit-layout:not(.video-single-screen) #prompt{flex:1;height:0;min-height:64px;max-height:none}
}
@media(min-width:761px) and (max-height:899px){body.image-edit-layout:not(.video-single-screen) #reference-section #dropzone{min-height:32px;padding:4px}}
@media(max-width:760px){body.image-edit-layout:not(.video-single-screen) #reference-section #dropzone{min-height:50px;padding:6px;flex-direction:row}}
@media(min-width:761px) and (max-height:899px){body.image-edit-layout:not(.video-single-screen) #reference-section,body.image-edit-layout:not(.video-single-screen) .image-advanced,body.image-edit-layout:not(.video-single-screen) #clarity-field{margin-top:2px}}
@media(min-width:761px) and (max-height:899px){body.image-edit-layout:not(.video-single-screen) #parameter-fields{padding-bottom:4px}}