:root{color-scheme:dark;--bg:#070707;--panel:#1f1f1f;--panel2:#2a2a2a;--text:#f7f7f7;--muted:#b8b8b8;--accent:#58b8aa;--bottom:92px}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}
button,input{font:inherit}
.editor-shell{position:fixed;inset:0;display:grid;grid-template-rows:72px 1fr;background:#050505;overflow:hidden}
.editor-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px;background:#181818;border-bottom:1px solid #242424;z-index:50}
.icon-btn{width:50px;height:50px;border:0;border-radius:999px;background:transparent;color:white;font-size:34px;line-height:1;text-decoration:none;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover,.icon-btn.active{background:#303030}
.canvas-stage{position:relative;display:grid;place-items:center;min-height:0;background:#090909;padding:14px 14px calc(var(--bottom) + 14px);overflow:hidden}
#editorCanvas{max-width:100%;max-height:100%;background:white;box-shadow:0 0 0 1px #333;touch-action:none}
.upload-card{width:min(420px,92vw);min-height:260px;border:1px dashed #555;border-radius:18px;background:#171717;display:grid;place-items:center;gap:8px;text-align:center;padding:30px;color:white;cursor:pointer}
.upload-card input{display:none}.upload-card span{width:58px;height:58px;border-radius:16px;background:var(--accent);display:grid;place-items:center;font-size:38px}.upload-card small{color:var(--muted)}.upload-card.hidden{display:none}
.control-drawer{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#171717;border-top:1px solid #2c2c2c}
.tool-grid{position:absolute;left:0;right:0;bottom:var(--bottom);display:none;grid-template-columns:repeat(4,minmax(72px,1fr));max-height:min(54vh,440px);overflow:auto;border-top:1px solid #343434;border-bottom:1px solid #2e2e2e;background:#202020;box-shadow:0 -20px 44px rgba(0,0,0,.48)}
.tool-grid.open{display:grid}
.tool-grid button,.bottom-tabs button,.crop-options button{border:0;background:#202020;color:white;min-height:76px;padding:8px;display:grid;place-items:center;gap:5px;cursor:pointer}
.tool-grid button{border-right:1px solid #303030;border-bottom:1px solid #303030}
.tool-grid button strong{font-size:24px;font-weight:500}.tool-grid button span,.bottom-tabs span{font-size:13px}
.tool-grid button.active,.bottom-tabs button.active,.crop-options button.active{background:var(--accent);box-shadow:inset 0 0 0 2px #8eeee3}
.bottom-tabs{height:var(--bottom);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(92px,1fr);overflow-x:auto;background:#202020}
.bottom-tabs button{min-height:var(--bottom);font-size:28px}.bottom-tabs span{display:block;color:white}
.slider-panel,.brush-panel,.text-panel{position:absolute;left:0;right:0;bottom:var(--bottom);padding:18px 22px;background:#1f1f1f;border-top:1px solid #333;box-shadow:0 -20px 44px rgba(0,0,0,.48)}
.slider-panel label{display:flex;justify-content:space-between;color:white;margin-bottom:10px}.slider-panel input,.brush-panel input[type=range]{width:100%;accent-color:var(--accent)}
.crop-options{position:absolute;left:0;right:0;bottom:var(--bottom);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr);overflow-x:auto;background:#191919;border-top:1px solid #2b2b2b;box-shadow:0 -20px 44px rgba(0,0,0,.48)}
.crop-options[hidden],.slider-panel[hidden],.brush-panel[hidden],.text-panel[hidden]{display:none}
.crop-options button{min-height:76px}
.text-panel{grid-template-columns:1fr 52px 70px;gap:10px}.text-panel:not([hidden]){display:grid}
.text-panel input[type=text]{border:0;border-radius:10px;padding:12px;background:#2c2c2c;color:white}.text-panel button{border:0;border-radius:10px;background:var(--accent);color:white}
.brush-panel{grid-template-columns:1fr 1fr 46px 70px;gap:12px;align-items:center}.brush-panel:not([hidden]){display:grid}
.brush-panel label{display:grid;gap:5px;color:white;font-size:13px}.brush-panel button{border:0;border-radius:10px;background:#303030;color:white;padding:11px}
.crop-box{position:absolute;border:2px solid white;box-shadow:0 0 0 9999px rgba(0,0,0,.48);pointer-events:none}
.crop-box i,.crop-box b,.crop-box em,.crop-box strong{position:absolute;width:28px;height:28px;background:white;border-radius:4px}.crop-box i{left:-14px;top:-14px}.crop-box b{right:-14px;top:-14px}.crop-box em{left:-14px;bottom:-14px}.crop-box strong{right:-14px;bottom:-14px}
@media(max-width:720px){:root{--bottom:88px}.editor-shell{grid-template-rows:64px 1fr}.icon-btn{width:42px;height:42px;font-size:30px}.tool-grid{grid-template-columns:repeat(4,1fr);max-height:52vh}.brush-panel{grid-template-columns:1fr}.text-panel{grid-template-columns:1fr 50px 64px}}