:root{--bg:#121416;--panel:#1b1e22;--line:#30353b;--text:#eef1f4;--muted:#9ca4ad;--blue:#3c8cff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px system-ui,Segoe UI,sans-serif;overflow:hidden}header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#17191c;border-bottom:1px solid var(--line)}header b{font-size:18px}header span{color:var(--muted);font-size:11px}.upload,.primary{background:var(--blue);color:#fff;border:0;border-radius:7px;padding:9px 13px;cursor:pointer}.upload input{display:none}main{height:calc(100vh - 58px);display:grid;grid-template-columns:225px 1fr 290px}.library,.controls{background:var(--panel);padding:14px;overflow:auto}.library{border-right:1px solid var(--line)}.controls{border-left:1px solid var(--line)}h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#bac1c9;margin:15px 0 9px}.toolbar,.row,.presets{display:flex;gap:7px;flex-wrap:wrap}button,select,input{background:#292d32;color:var(--text);border:1px solid #3a4047;border-radius:6px;padding:7px 9px}button{cursor:pointer}button:hover{border-color:#6d7680}.photo{position:relative;margin:10px 0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#101214}.photo.active{border-color:var(--blue)}.photo img{width:100%;height:112px;object-fit:cover;display:block}.photo .name{padding:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.photo input{position:absolute;top:7px;left:7px}.stage{position:relative;display:flex;align-items:center;justify-content:center;background:#0d0f11;overflow:hidden}.stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(45deg,#171a1d 25%,transparent 25%),linear-gradient(-45deg,#171a1d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#171a1d 75%),linear-gradient(-45deg,transparent 75%,#171a1d 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;opacity:.5}#empty{z-index:1;text-align:center;color:var(--muted)}#canvasWrap{z-index:1;max-width:92%;max-height:83%;box-shadow:0 8px 35px #000;display:none}.bottom{position:absolute;z-index:3;bottom:14px;display:flex;gap:8px}.tabs{display:flex;gap:4px}.tab{flex:1}.tab.active{background:#3c8cff}.panel{display:none}.panel.active{display:block}.slider{margin:12px 0}.slider label{display:flex;justify-content:space-between;margin-bottom:5px;color:#cbd1d7}.slider input{width:100%;padding:0}.controls button{margin-bottom:5px}.controls>div>button{width:100%}.presets button,.row button{width:auto!important;flex:1}.controls input,.controls select{width:100%}.layer{display:flex;gap:5px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}.layer span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hint{color:var(--muted);font-size:12px;line-height:1.5}#toast{position:fixed;right:20px;bottom:20px;background:#edf5ff;color:#152235;padding:11px 16px;border-radius:7px;display:none;z-index:9}@media(max-width:900px){main{grid-template-columns:170px 1fr}.controls{position:absolute;right:0;top:58px;bottom:0;width:270px;z-index:5}.stage{margin-right:270px}}