:root{--visual-height:100dvh;--visual-offset:0px;--keyboard-offset:0px;--editor-toolbar-height:68px}
html.editor-viewport,body.editor-viewport{height:100dvh;max-height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none}
body.editor-viewport{position:fixed;inset:0;margin:0}
body.editor-viewport .app-shell{height:100dvh;height:var(--visual-height);min-height:0;max-height:100dvh;overflow:hidden}
body.editor-viewport #app{height:100dvh;height:var(--visual-height);min-height:0;max-height:100dvh;overflow:hidden;box-sizing:border-box}
body.editor-viewport #app>.f-screen:not(.editor-shell){height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
body.editor-viewport .editor-stage{overflow:hidden;overscroll-behavior:none}
body.editor-active{overflow:hidden}
body.editor-active .topbar{display:none}
body.editor-active main{height:var(--visual-height);padding:0 12px calc(var(--editor-toolbar-height) + env(safe-area-inset-bottom));overflow:hidden}
.editor-shell{height:calc(var(--visual-height) - var(--editor-toolbar-height) - env(safe-area-inset-bottom));min-height:0;display:grid;grid-template-rows:44px 42px minmax(0,1fr) 28px;gap:6px;padding:4px 0 6px}
.editor-shell-head{display:grid;grid-template-columns:44px 1fr auto;align-items:center}.editor-shell-head h1{margin:0;text-align:center;font-size:15px;font-weight:650}.editor-shell-head button{width:44px;height:44px;border:0;background:transparent;color:#d4d4dc}.editor-save-button{width:auto!important;padding:0 10px!important;color:#bda5ff!important;font-size:12px;font-weight:650}
.editor-slide-strip{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none}.editor-slide-strip::-webkit-scrollbar{display:none}.editor-slide-strip button{min-width:40px;height:36px;padding:0 10px;border:1px solid #272733;border-radius:10px;background:#12121a;color:#8f909c;font-size:11px}.editor-slide-strip button.active{border-color:#8b5cf6;background:#8b5cf622;color:#c8b3ff}
.editor-stage{min-height:0;display:grid;place-items:center;padding:2px 0}.editor-stage .visual-canvas{height:100%;max-height:100%;width:auto;max-width:100%;aspect-ratio:4/5;border-radius:13px;box-shadow:0 18px 50px #000a}
.editor-selection{min-height:28px;display:flex;align-items:center;justify-content:center;color:#8e909d;font-size:11px}.editor-selection strong{color:#c9cad2;font-weight:550}
.editor-primary-toolbar{position:fixed;z-index:35;left:0;right:0;bottom:0;height:calc(var(--editor-toolbar-height) + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);padding:5px 7px env(safe-area-inset-bottom);border-top:1px solid #252530;background:#0c0c13f5;backdrop-filter:blur(18px)}.editor-primary-toolbar button{min-width:0;height:58px;display:grid;place-items:center;align-content:center;gap:3px;border:0;border-radius:11px;background:transparent;color:#8e909d;font-size:10px}.editor-primary-toolbar button svg{width:19px;height:19px}.editor-primary-toolbar button.active{background:#8b5cf617;color:#b99cff}
.editor-sheet.sheet.open{visibility:visible}.editor-sheet .sheet-shade{background:#0007}.editor-sheet .sheet-panel{max-height:min(70vh,calc(var(--visual-height) - 74px));padding:8px 14px calc(14px + env(safe-area-inset-bottom));border-color:#292935;background:#15151ded;backdrop-filter:blur(24px);overflow:hidden;transform:translateY(105%);transition:transform .22s cubic-bezier(.2,.75,.25,1)}.editor-sheet.open .sheet-panel{transform:none}.editor-sheet-body{max-height:calc(min(70vh,var(--visual-height) - 74px) - 54px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:4px}.sheet-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}.sheet-title span{display:grid}.sheet-title b{font-size:15px}.sheet-title small{color:#8f919e;font-size:10px}.sheet-title button{width:40px;height:40px;border:0;border-radius:10px;background:#23232e;color:#fff;font-size:18px}
.tool-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:7px}.tool-button,.tool-upload{min-height:46px;display:grid;place-items:center;padding:7px;border:1px solid #292936;border-radius:11px;background:#1b1b25;color:#dedee6;font-size:11px;text-align:center}.tool-button.danger{color:#ff9da8}.tool-control{display:grid;gap:5px;margin:9px 0;color:#9a9ca8;font-size:10px}.tool-control input,.tool-control select,.tool-control textarea{width:100%;min-height:44px;padding:10px;border:1px solid #30303d;border-radius:11px;background:#101017;color:#fff;font:13px/1.4 Inter,sans-serif;outline:0}.tool-control textarea{min-height:84px;resize:none}.tool-control input[type=color]{padding:5px}.tool-control input[type=range]{padding:0}.tool-control :focus{border-color:#7d59cc}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ai-apply{width:100%;height:44px;margin-top:8px;border:0;border-radius:11px;background:linear-gradient(105deg,#8055eb,#a855f7);color:#fff;font-weight:650}.editor-draft-hint{margin:7px 0 0;color:#797b88;font-size:10px}
.generation-screen{overflow:hidden}.generation-logo{position:relative}.generation-logo:after{content:'';position:absolute;inset:-12px;border:1px solid #986fff55;border-radius:50%;animation:generationBreath 2s ease-in-out infinite}.progress-step{position:relative;transition:color .3s,opacity .3s}.progress-step i{transition:background .3s,border-color .3s,transform .3s}.progress-step.pending{opacity:.42}.progress-step.current{color:#fff}.progress-step.current i{border-color:#9d79f5;background:#8b5cf61f;animation:stagePulse 1.25s ease-in-out infinite}.progress-step.current i:after{content:'';width:5px;height:5px;border-radius:50%;background:#bd9fff}.progress-step.completed i{border-color:#7f59db;background:#7f59db;color:#fff;transform:scale(1.02)}.progress-step.completed:after{background:#7653ca}.progress-step .stage-copy{display:grid}.progress-step .stage-copy small{color:#777986;font-size:9px}.generation-complete .generation-logo:after{border-color:#77d7a2}.generation-complete h1{animation:readyIn .35s ease-out}
@keyframes generationBreath{50%{transform:scale(1.08);opacity:.45}}@keyframes stagePulse{50%{box-shadow:0 0 0 7px #8b5cf612}}@keyframes readyIn{from{opacity:0;transform:translateY(5px)}}
@media(min-width:700px){body.editor-active{padding:18px}.editor-primary-toolbar{left:50%;right:auto;width:428px;translate:-50% 0;border-radius:0 0 24px 24px}.editor-sheet .sheet-panel{left:50%;right:auto;width:428px;translate:-50% 0}.editor-stage .visual-canvas{max-height:calc(var(--visual-height) - 190px)}}
.editor-sheet .sheet-panel{bottom:var(--keyboard-offset);max-height:min(70vh,calc(var(--visual-height) - 18px))}.editor-shell,.editor-sheet-body{max-width:100%;overflow-x:hidden}
.editor-history{display:flex;justify-content:center;gap:8px}.editor-history button{width:44px;height:44px;border:1px solid #e3e5e8;border-radius:10px;background:#fff;color:#495167;font-size:22px}.editor-history button:disabled{opacity:.4}