:root{color-scheme:dark;--bg:#0b0d12;--panel:#151820;--line:#2b303d;--text:#f2f4f8;--muted:#9299aa;--accent:#7c9cff;--accent2:#a98bff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;min-height:100vh}header{height:76px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#11131a}.brand,.top-actions,.row{display:flex;align-items:center;gap:12px}.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:800}.brand h1{font-size:18px;margin:0}.brand p{font-size:12px;color:var(--muted);margin:3px 0 0}button,.button,input,select{font:inherit}button,.button{border:1px solid var(--line);background:#20242e;color:var(--text);border-radius:10px;padding:9px 13px;cursor:pointer;transition:.15s}button:hover,.button:hover{border-color:#596276;background:#292e3a}.primary{background:var(--accent);border-color:var(--accent);color:#080a10;font-weight:700}main{display:grid;grid-template-columns:280px minmax(0,1fr) 220px;height:calc(100vh - 76px)}.panel{background:var(--panel);overflow:auto}.controls{border-right:1px solid var(--line)}.layers{border-left:1px solid var(--line);padding:18px}.controls section{padding:17px;border-bottom:1px solid var(--line)}h2{font-size:14px;margin:0 0 13px}.controls label{display:flex;flex-direction:column;gap:6px;color:#c6cad4;font-size:13px;flex:1}.controls input:not([type=color]):not([type=range]),select{width:100%;border:1px solid var(--line);background:#0f1117;color:var(--text);border-radius:8px;padding:9px}.controls input[type=color]{width:100%;height:34px;padding:2px;border:1px solid var(--line);background:#0f1117;border-radius:8px}.controls input[type=range]{width:100%;accent-color:var(--accent)}.color-row button{margin-top:18px}.wide{width:100%;margin-top:10px}.switch{flex-direction:row!important;align-items:center;margin:10px 0}.switch input{accent-color:var(--accent)}.hint,.notice p{font-size:12px;line-height:1.55;color:var(--muted);margin:10px 0 0}.workspace{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background-color:#0d0f15;background-image:linear-gradient(45deg,#151820 25%,transparent 25%),linear-gradient(-45deg,#151820 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#151820 75%),linear-gradient(-45deg,transparent 75%,#151820 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.workspace.dragover{outline:3px solid var(--accent);outline-offset:-6px}#stageWrap{flex:1;min-height:0;display:grid;place-items:center;padding:28px}canvas{display:block;max-width:100%;max-height:100%;box-shadow:0 20px 70px #0009;touch-action:none;cursor:default}#dropHint{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 18px;border:1px dashed #596276;border-radius:12px;background:#11131add;color:var(--muted);pointer-events:none}.status{height:38px;background:#11131ae8;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 14px;color:var(--muted);font-size:12px}.layer{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;margin-bottom:7px;border:1px solid var(--line);border-radius:9px;background:#1b1e27;font-size:13px}.layer.active{border-color:var(--accent)}.layer button{padding:2px 7px}.empty{color:var(--muted);font-size:12px}.notice{margin-top:24px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#11131a}.notice strong{font-size:13px}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;padding:10px 15px;border-radius:9px;background:#f2f4f8;color:#11131a;font-size:13px;transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){header{height:auto;min-height:72px;gap:10px}.brand p{display:none}main{grid-template-columns:240px 1fr;height:calc(100vh - 72px)}.layers{display:none}}@media(max-width:650px){header{padding:10px 12px}.brand h1{font-size:15px}.top-actions{gap:6px}.top-actions button,.top-actions .button{padding:8px}main{display:flex;flex-direction:column;height:auto}.controls{border:0;max-height:none}.workspace{height:70vh}.status span:last-child{display:none}}