/* One continuous canvas; controls float above it without reserving image space. */
#main-page .workspace.floating-workspace{--floating-settings-width:340px;--floating-layers-width:280px;--floating-left:340px;--floating-right:280px;--floating-gap:14px;position:relative;isolation:isolate;display:block;flex:1;min-height:0;width:100%;height:100%;padding:0;gap:0;overflow:hidden;background:#101014}
#main-page .floating-workspace>.canvas-editor{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:visible;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:0}
#main-page .floating-workspace .canvas-stage{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;margin:0;overflow:hidden;background-color:#111116;background-size:22px 22px;background-image:radial-gradient(circle,#bcb6d520 .7px,transparent 1px);border:0;border-radius:0}
#main-page .floating-workspace #editor-canvas{width:100%;height:100%}
#main-page .floating-workspace>.studio-settings{position:absolute;z-index:10;top:var(--floating-gap);bottom:var(--floating-gap);left:var(--floating-gap);width:var(--floating-settings-width);height:auto;max-height:none;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #ffffff18;border-radius:15px;background:#19191ff0;box-shadow:0 10px 36px #0005,inset 0 1px #ffffff05;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#main-page .floating-workspace .studio-settings .panel-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
#main-page .floating-workspace .studio-settings .settings-top{padding:15px 16px;gap:11px;flex-shrink:0;background:transparent}
#main-page .floating-workspace .studio-settings .panel-upload{padding:13px 16px;flex-shrink:0}
#main-page .floating-workspace .studio-settings .left-scroll{padding:14px 16px 13px;flex:0 0 auto}
#main-page .floating-workspace .studio-settings #prompt-input{height:96px;min-height:72px;max-height:180px}
#main-page .floating-workspace .studio-settings .left-generate-bar{padding:12px 16px;flex-shrink:0;border-radius:0 0 15px 15px;background:#1b1b22f5}
#main-page .floating-workspace>.canvas-layers-panel[data-layout=split]{position:absolute;z-index:10;top:var(--floating-gap);bottom:var(--floating-gap);right:var(--floating-gap);left:auto;width:var(--floating-layers-width);height:auto;max-height:none;min-height:0;display:flex;border:1px solid #ffffff18;border-radius:15px;background:#1a1a20f2;box-shadow:0 10px 36px #0005,inset 0 1px #ffffff05;overflow:hidden;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#main-page .floating-workspace [data-layout=split] .canvas-sidebar-content{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(160px,.85fr) minmax(340px,1.15fr)}
#main-page .floating-workspace [data-layout=split] .canvas-tasks-view{grid-column:1;grid-row:1;border-right:0;border-bottom:1px solid #ffffff17;background:transparent}
#main-page .floating-workspace [data-layout=split] .canvas-layers-view{grid-column:1;grid-row:2;background:transparent}
#main-page .floating-workspace [data-layout=split] .canvas-layer-stack{flex:1;min-height:60px;max-height:none}
#main-page .floating-workspace .canvas-floating-dock{position:absolute;z-index:12;left:calc(50% + (var(--floating-left) - var(--floating-right))/2);bottom:18px;transform:translateX(-50%);display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:calc(100% - var(--floating-left) - var(--floating-right) - 64px);min-height:48px;padding:8px 10px;border:1px solid #ffffff22;border-radius:13px;background:#23232bed;box-shadow:0 8px 30px #0007,inset 0 1px #ffffff08;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#main-page .floating-workspace .canvas-floating-dock .canvas-header-tools{display:flex;flex:0 0 auto;justify-content:flex-start;flex-wrap:nowrap;min-width:0;min-height:30px;padding:0;gap:5px;border:0;background:transparent}
#main-page .floating-workspace .canvas-floating-dock .canvas-tool-group{gap:3px}
#main-page .floating-workspace .canvas-floating-dock .canvas-ratio-control{margin-left:2px;padding-left:8px;border-left:1px solid #ffffff18}
#main-page .floating-workspace .canvas-floating-dock .canvas-editor-actions{margin:0;padding-left:9px;gap:5px;border-left:1px solid #ffffff18}
#main-page .floating-workspace .canvas-floating-dock .canvas-button{font-size:10px;min-height:30px;padding:5px 7px}
#main-page .floating-workspace .canvas-floating-dock .canvas-icon-button{width:29px;height:30px;min-height:30px;padding:6px;border-radius:7px}
#main-page .floating-workspace .canvas-floating-dock #canvas-ratio{height:30px;min-height:30px;min-width:58px}
#main-page .floating-workspace .canvas-zoom-controls{right:calc(var(--floating-right) + var(--floating-gap) + 18px);bottom:82px;z-index:3;padding:4px;border-color:#ffffff1c;background:#23232bdc;border-radius:9px;box-shadow:0 5px 22px #0004}
#main-page .floating-workspace .canvas-statusbar{position:absolute;z-index:2;top:18px;left:calc(var(--floating-left) + var(--floating-gap) + 18px);right:calc(var(--floating-right) + var(--floating-gap) + 18px);min-height:0;padding:0;border:0;background:transparent;pointer-events:none;color:#b4b0c2;font-size:9px;text-shadow:0 1px 3px #0008}
#main-page .floating-workspace .canvas-statusbar #canvas-status{max-width:70%}
#main-page .floating-workspace .canvas-empty{left:calc(var(--floating-left) + var(--floating-gap));right:calc(var(--floating-right) + var(--floating-gap));bottom:90px;padding:20px;min-width:0}
#main-page .floating-workspace .canvas-progress{left:calc(50% + (var(--floating-left) - var(--floating-right))/2);bottom:88px;max-width:calc(100% - var(--floating-left) - var(--floating-right) - 64px)}
/* Imported images are a real material library; only the thumbnail grid scrolls. */
.canvas-material-library{display:flex;flex-direction:column;flex:1 1 auto;min-height:170px;margin:0 12px 12px;border:1px solid #ffffff13;border-radius:10px;background:#11111670;overflow:hidden;transition:border-color .16s,background .16s}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-heading{display:flex;align-items:center;gap:8px;flex-shrink:0;min-height:34px;margin:0;padding:8px 10px;border:0;border-bottom:1px solid #ffffff0c;background:transparent;font-size:11px;color:#d6d2e2}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-heading>span:first-child{font-weight:500}
#main-page .floating-workspace .canvas-material-library #canvas-selection-count{font-size:9px;color:#cbbf92}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-tip{display:none}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:92px;align-content:start;align-items:stretch;gap:8px;flex:1;min-height:0;max-height:none;margin:0;padding:9px;overflow-x:hidden;overflow-y:auto;border:0;background:transparent;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#625e6d transparent}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-item{width:auto;height:92px;min-height:92px;min-width:0;margin:0;border-radius:8px;background:#24232b;border-color:#ffffff24}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-pick{position:relative;grid-template-rows:62px 16px;gap:4px;padding:5px;width:100%;height:100%;overflow:hidden}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-pick img{width:100%;height:62px;border-radius:4px;object-fit:contain}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-label,#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-state{line-height:16px}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-import{width:auto;height:92px;min-height:92px;min-width:0;padding:8px;gap:6px;border-radius:8px;font-size:10px;background:#dfc66d05}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-import>span:first-child{font-size:20px;font-weight:300;line-height:20px}
.canvas-material-library.is-file-over{border-color:#efce69b3;background:#efce690e;box-shadow:inset 0 0 0 1px #efce6933}
.canvas-result-badge{position:absolute;z-index:4;right:5px;bottom:23px;display:inline-flex;align-items:center;justify-content:center;padding:3px 5px;border:1px solid #ffdf7770;border-radius:4px;background:#493b13eb;color:#ffe49b;font-size:8px;line-height:1;font-weight:500;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px #0005}
#main-page .floating-workspace .canvas-filmstrip-item.has-unseen-result{border-color:#f0ce69;box-shadow:0 0 0 1px #e8ca6233,0 0 14px #e8ca6217}
.canvas-filmstrip-item.has-unseen-result .canvas-filmstrip-pick::after{content:'';position:absolute;inset:-35% -80%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffe7a22b 48%,#fff3c849 50%,#ffe7a21a 53%,transparent 64%);transform:translateX(-50%);animation:canvasUnreadSheen 3.6s ease-in-out infinite}
@keyframes canvasUnreadSheen{0%,20%{transform:translateX(-48%)}65%,100%{transform:translateX(48%)}}
.canvas-panel-toggle{display:none}
@media(min-width:1600px){#main-page .workspace.floating-workspace{--floating-settings-width:380px;--floating-layers-width:300px;--floating-left:380px;--floating-right:300px;--floating-gap:16px}.canvas-material-library{margin-left:15px;margin-right:15px}#main-page .floating-workspace .canvas-material-library .canvas-filmstrip{grid-auto-rows:100px}#main-page .floating-workspace .canvas-material-library :is(.canvas-filmstrip-item,.canvas-filmstrip-import){height:100px;min-height:100px}#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-pick{grid-template-rows:70px 16px}#main-page .floating-workspace .canvas-material-library .canvas-filmstrip-pick img{height:70px}}
@media(min-width:1101px) and (max-width:1399px){#main-page .workspace.floating-workspace{--floating-settings-width:320px;--floating-layers-width:260px;--floating-left:320px;--floating-right:260px;--floating-gap:12px}#main-page .floating-workspace .studio-settings .settings-top,#main-page .floating-workspace .studio-settings .left-scroll{padding:13px 14px}#main-page .floating-workspace .studio-settings .panel-upload{padding:12px 14px}#main-page .floating-workspace .studio-settings .left-generate-bar{padding:11px 14px}#main-page .floating-workspace .canvas-floating-dock{gap:7px;padding:7px 8px}#main-page .floating-workspace .canvas-floating-dock .canvas-tool-group{gap:1px}#main-page .floating-workspace .canvas-floating-dock .canvas-icon-button{width:27px;padding:5px}#main-page .floating-workspace .canvas-floating-dock .canvas-editor-actions{gap:4px;padding-left:7px}}
@media(min-width:1101px) and (max-height:820px){#main-page .floating-workspace .studio-settings .settings-top{padding:11px 13px;gap:8px}#main-page .floating-workspace .studio-settings .panel-upload{padding:10px 13px}#main-page .floating-workspace .studio-settings .left-scroll{padding:11px 13px}#main-page .floating-workspace .studio-settings #prompt-input{height:72px;min-height:60px}#main-page .floating-workspace .studio-settings .prompt-header{margin-bottom:7px}#main-page .floating-workspace .studio-settings .prompt-optimize-tools{margin-top:7px}.canvas-material-library{min-height:130px}#main-page .floating-workspace [data-layout=split] .canvas-sidebar-content{grid-template-rows:minmax(150px,.8fr) minmax(300px,1.2fr)}#main-page .floating-workspace [data-layout=split] .canvas-layer-controls{flex-shrink:1;max-height:188px;min-height:100px;overflow-y:auto;scrollbar-width:thin}#main-page .floating-workspace [data-layout=split] .canvas-layer-stack{min-height:60px}}
@media(max-width:1100px){html.floating-workspace,html.floating-workspace body{height:100%;min-height:100%;overflow:hidden}html.floating-workspace #app{height:100dvh;min-height:0}html.floating-workspace #main-page.page{height:100%;min-height:0}#main-page .workspace.floating-workspace{--floating-settings-width:330px;--floating-layers-width:300px;--floating-left:0px;--floating-right:0px;--floating-gap:12px;display:block;flex:1;min-height:0;height:100%;overflow:hidden}#main-page .floating-workspace>.studio-settings,#main-page .floating-workspace>.canvas-layers-panel[data-layout=split]{display:none;z-index:20;top:55px;bottom:100px;height:auto;max-height:none;min-height:0;width:min(var(--floating-settings-width),calc(100% - 24px));box-shadow:0 15px 50px #0009;background:#1a1a21fa}#main-page .floating-workspace>.canvas-layers-panel[data-layout=split]{width:min(var(--floating-layers-width),calc(100% - 24px))}#main-page .floating-workspace.show-settings-panel>.studio-settings{display:flex}#main-page .floating-workspace.show-layers-panel>.canvas-layers-panel[data-layout=split]{display:flex}.canvas-panel-toggle{position:absolute;z-index:25;top:12px;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:7px 11px;border:1px solid #ffffff23;border-radius:9px;background:#25252feb;box-shadow:0 4px 18px #0004;backdrop-filter:blur(12px);color:#d8d3e5;font:inherit;font-size:11px;line-height:1.2;cursor:pointer}.canvas-panel-toggle-settings{left:12px}.canvas-panel-toggle-layers{right:12px}.canvas-panel-toggle[aria-expanded=true]{color:#f2d77e;border-color:#e6c7656b;background:#333023f5}#main-page .floating-workspace .canvas-floating-dock{left:50%;bottom:15px;max-width:calc(100% - 24px);gap:8px;padding:8px 10px}#main-page .floating-workspace .canvas-statusbar{top:57px;left:16px;right:16px;font-size:9px}#main-page .floating-workspace .canvas-zoom-controls{right:16px;bottom:84px}#main-page .floating-workspace .canvas-empty{left:16px;right:16px;top:40px;bottom:90px}#main-page .floating-workspace .canvas-progress{left:50%;bottom:90px;max-width:calc(100% - 32px)}#main-page .floating-workspace .studio-settings .panel-body{display:flex;overflow-y:auto}#main-page .floating-workspace .studio-settings .settings-top{display:flex;flex-direction:column;padding:12px;gap:9px}#main-page .floating-workspace .studio-settings .settings-top>.control-group{display:block}#main-page .floating-workspace .studio-settings .settings-top>.control-group>label{margin:0 0 5px}#main-page .floating-workspace .studio-settings .panel-upload{padding:10px 12px;border:0;border-bottom:1px solid #ffffff0d}#main-page .floating-workspace .studio-settings .left-scroll{padding:11px 12px;border:0}#main-page .floating-workspace .studio-settings #prompt-input{height:65px;min-height:60px}#main-page .floating-workspace .studio-settings .left-generate-bar{padding:10px 12px}.canvas-material-library{min-height:150px;margin:0 10px 10px}#main-page .floating-workspace [data-layout=split] .canvas-sidebar-content{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(130px,.85fr) minmax(300px,1.15fr)}#main-page .floating-workspace [data-layout=split] .canvas-layer-controls{max-height:188px;min-height:110px;flex-shrink:1;overflow-y:auto;scrollbar-width:thin}#main-page .floating-workspace [data-layout=split] .canvas-layer-stack{min-height:60px}}
@media(max-width:540px){#main-page .floating-workspace .canvas-floating-dock{width:max-content;max-width:calc(100% - 24px);min-height:0;flex-direction:column;gap:7px;padding:8px 10px;border-radius:12px}#main-page .floating-workspace .canvas-floating-dock .canvas-header-tools{order:0;flex:0 0 auto;width:auto;min-height:28px;justify-content:center;gap:5px}#main-page .floating-workspace .canvas-floating-dock .canvas-editor-actions{order:1;justify-content:center;flex:0 0 auto;margin:0;padding:6px 0 0;width:100%;border-left:0;border-top:1px solid #ffffff13;gap:7px}#main-page .floating-workspace .canvas-floating-dock .canvas-tool-group{gap:3px}#main-page .floating-workspace .canvas-floating-dock .canvas-button{min-height:27px;padding:4px 7px;font-size:10px}#main-page .floating-workspace .canvas-floating-dock .canvas-icon-button{min-height:28px;height:28px;width:28px}#main-page .floating-workspace .canvas-floating-dock #canvas-export{display:inline-flex}#main-page .floating-workspace .canvas-zoom-controls{bottom:126px;right:12px}#main-page .floating-workspace .canvas-empty{bottom:130px}#main-page .floating-workspace .canvas-progress{bottom:135px}#main-page .floating-workspace>.studio-settings,#main-page .floating-workspace>.canvas-layers-panel[data-layout=split]{bottom:122px}.canvas-panel-toggle{font-size:10px;padding:7px 10px}#main-page .floating-workspace .canvas-material-library .canvas-filmstrip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.canvas-material-library{transition:none}.canvas-filmstrip-item.has-unseen-result .canvas-filmstrip-pick::after{animation:none;display:none}.canvas-result-badge{box-shadow:none}}
#main-page .floating-workspace .canvas-material-library .canvas-filmstrip{overflow-anchor:none}
#main-page .floating-workspace [data-layout=split] .canvas-layer-controls{overscroll-behavior:contain;scroll-padding-block:8px;scrollbar-width:thin;scrollbar-color:#6b6577 #17171d}
#main-page .floating-workspace [data-layout=split] .canvas-layer-controls::-webkit-scrollbar{width:5px}
#main-page .floating-workspace [data-layout=split] .canvas-layer-controls::-webkit-scrollbar-thumb{border-radius:5px;background:#6b6577}
html.floating-workspace .credits-display{transition:background .18s,border-color .18s;white-space:nowrap}
html.floating-workspace .credits-display button{white-space:nowrap;flex-shrink:0;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}