:root{--win:#353535;--dock:#2f2f2f;--title:#262626;--base:#1e1e1e;--alt:#292929;--line:#4b4b4b;--line2:#3c3c3c;--text:#dddddd;--dim:#a0a0a0;--hl:#2a82da;--hlbg:#264f78;--c00:#000000;--c01:#0000ff;--c02:#ff0000;--flame:#f28c28;--warn:#e8b339;--err:#ef5350;--ok:#5cb85c}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--win);color:var(--text);font:13px/1.4 Segoe UI,system-ui,-apple-system,Roboto,sans-serif}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:1px solid var(--hl);outline-offset:1px}.app{display:grid;height:100%;grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr 360px;grid-template-areas:"menu menu" "tool tool" "work dock" "status status"}.menubar{grid-area:menu;display:flex;align-items:center;gap:2px;background:var(--title);border-bottom:1px solid #1a1a1a;padding:0 6px;height:28px}.menubar .appname{font-weight:600;padding:0 8px 0 4px;display:flex;align-items:center;gap:6px}.flame{width:14px;height:14px;border-radius:2px 2px 7px 7px;background:linear-gradient(180deg,#ffd27a,var(--flame) 55%,#c4501a)}.menubar .labs{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:2px;padding:0 4px;margin-left:4px}.menubar .spacer{flex:1}.mbtn{background:none;border:1px solid transparent;border-radius:2px;padding:2px 8px;height:22px}.mbtn:hover{background:#3d3d3d;border-color:var(--line)}.toolbar{grid-area:tool;display:flex;align-items:center;gap:4px;background:var(--win);border-bottom:1px solid #222;padding:4px 6px;overflow-x:auto}.tb{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;background:linear-gradient(#444,#3a3a3a);border:1px solid #232323;border-radius:3px;white-space:nowrap}.tb:hover:not(:disabled){background:linear-gradient(#4d4d4d,#424242)}.tb:disabled{opacity:.45;cursor:default}.tb svg{width:15px;height:15px}.sep{width:1px;height:20px;background:#232323;box-shadow:1px 0 #4a4a4a;margin:0 4px;flex:none}.conn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--dim);white-space:nowrap;padding-right:4px}.led{width:9px;height:9px;border-radius:50%;background:#7a2a2a;box-shadow:inset 0 0 0 1px #000}.led.on{background:#3fae49}.work{grid-area:work;position:relative;background:#262626;overflow:hidden;min-height:0;display:grid;grid-template-columns:22px 1fr;grid-template-rows:22px 1fr}.corner{background:var(--win);border-right:1px solid #222;border-bottom:1px solid #222}.ruler{background:var(--win);overflow:hidden;position:relative}.ruler.h{border-bottom:1px solid #222}.ruler.v{border-right:1px solid #222}.ruler svg{position:absolute;left:0;top:0}.canvas{position:relative;overflow:hidden;background-color:#2b2b2b;background-image:linear-gradient(#333 1px,transparent 1px),linear-gradient(90deg,#333 1px,transparent 1px);background-size:var(--g,20px) var(--g,20px);background-position:var(--gx,0) var(--gy,0)}.canvas .stage{position:absolute;left:0;top:0}.canvas .stage svg{display:block;overflow:visible}.empty[hidden],.dims[hidden]{display:none}.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--dim);padding:20px}.empty b{display:block;color:var(--text);font-size:15px;font-weight:600;margin-bottom:4px}.dims{position:absolute;right:8px;bottom:6px;background:#1e1e1ed9;border:1px solid var(--line2);padding:2px 6px;border-radius:2px;font-variant-numeric:tabular-nums;color:var(--dim)}.dock{grid-area:dock;display:flex;flex-direction:column;background:var(--dock);border-left:1px solid #1f1f1f;min-height:0}.dockwin{display:flex;flex-direction:column;min-height:0}.dockwin+.dockwin{border-top:1px solid #1f1f1f}.dtitle{display:flex;align-items:center;height:22px;padding:0 6px;background:var(--title);color:var(--text);font-size:12px;border-bottom:1px solid #1f1f1f}.dtitle span{flex:1}.dtitle i{font-style:normal;color:var(--dim);font-size:11px;padding:0 3px}#layersDock{flex:none}#aiDock{flex:1}table.layers{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.layers th{font-weight:400;text-align:left;color:var(--dim);background:var(--win);border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);padding:2px 6px;font-size:12px}.layers td{padding:3px 6px;border-bottom:1px solid var(--line2);background:var(--base)}.layers tr:nth-child(2n) td{background:var(--alt)}.layers td.none{color:var(--dim);text-align:center;padding:10px}.cnum{display:inline-block;min-width:30px;text-align:center;font-size:11px;padding:1px 4px;border:1px solid #111;color:#fff}.chk{color:var(--ok)}.log{flex:1;overflow-y:auto;background:var(--base);border-bottom:1px solid #1f1f1f;padding:8px;min-height:120px}.entry{margin:0 0 10px;padding-left:8px;border-left:2px solid var(--line)}.entry .who{font-size:11px;color:var(--dim)}.entry .txt{white-space:pre-wrap;word-wrap:break-word}.entry.user{border-left-color:var(--hl)}.entry.err{border-left-color:var(--err)}.entry.err .txt{color:#ffb3b0}.entry.busy .txt{color:var(--dim)}.result{margin-top:6px;border:1px solid var(--line);background:var(--dock);border-radius:2px}.result.sel{border-color:var(--hl)}.result .thumb{background:#2b2b2b;height:92px;display:grid;place-items:center;cursor:pointer;border-bottom:1px solid var(--line2)}.result .thumb svg{max-width:92%;max-height:84px;height:auto;width:auto}.result .rmeta{padding:4px 6px;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}.result .rwarn{padding:0 6px 4px;color:var(--warn);font-size:12px}.result .racts{display:flex;flex-wrap:wrap;gap:4px;padding:5px 6px;border-top:1px solid var(--line2)}.result .tb{height:24px;font-size:12px}.tb.go{background:linear-gradient(#2f8be6,#1f6fc1);border-color:#164f8a;color:#fff}.tb.go:hover:not(:disabled){background:linear-gradient(#3a96ef,#2779cc)}.examples{display:flex;flex-direction:column;gap:4px;margin-top:6px}.examples button{text-align:left;background:var(--dock);border:1px solid var(--line2);border-radius:2px;padding:4px 7px}.examples button:hover{border-color:var(--hl);background:#333}.composer{display:flex;gap:6px;padding:6px;background:var(--dock)}textarea{flex:1;resize:none;min-height:52px;max-height:140px;background:var(--base);border:1px solid var(--line);border-radius:2px;padding:6px}textarea:focus,input:focus,select:focus{outline:none;border-color:var(--hl)}.composer .tb{height:auto;align-self:stretch;padding:0 12px}.hint{padding:0 6px 6px;font-size:11px;color:var(--dim);background:var(--dock)}.statusbar{grid-area:status;display:flex;gap:14px;align-items:center;height:22px;padding:0 8px;background:var(--title);border-top:1px solid #1a1a1a;color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}.tabs{display:none}@media(max-width:820px){.app{grid-template-columns:1fr;grid-template-rows:auto auto 38vh auto 1fr auto;grid-template-areas:"menu" "tool" "work" "tabs" "dock" "status"}.tabs{grid-area:tabs;display:flex;background:var(--win);border-top:1px solid #1f1f1f}.tabs button{flex:1;background:var(--win);border:none;border-right:1px solid #222;border-bottom:2px solid transparent;padding:6px}.tabs button.on{background:var(--dock);border-bottom-color:var(--hl)}.dock{border-left:none}.dock .dtitle,.dock[data-tab=ai] #layersDock,.dock[data-tab=layers] #aiDock{display:none}#layersDock{flex:1}.menubar .mbtn.opt,.menubar .labs{display:none}.menubar .appname{padding-right:2px}#acctName{max-width:90px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}.statusbar .hide-m{display:none}}.overlay{position:fixed;inset:0;background:#00000080;display:none;align-items:center;justify-content:center;z-index:10;padding:10px}.overlay.open{display:flex}.dialog{background:var(--win);border:1px solid #1a1a1a;box-shadow:0 8px 30px #0009;width:100%;max-width:480px;max-height:94%;display:flex;flex-direction:column}.dialog .dtitle{height:26px}.dialog .dbody{padding:10px 12px;overflow-y:auto}.dialog .sub{color:var(--dim);margin:0 0 10px}fieldset{border:1px solid var(--line);border-radius:3px;margin:0 0 10px;padding:6px 10px 10px}fieldset.disabled{opacity:.5}legend{padding:0 4px}legend label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.desc{color:var(--dim);font-size:12px;margin:2px 0 6px}input[type=text],input[type=password],select{width:100%;background:var(--base);border:1px solid var(--line);border-radius:2px;padding:4px 6px;margin:2px 0 8px;height:26px}.frow{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:0 8px}.frow label{color:var(--dim)}.note{font-size:12px;color:var(--dim);border:1px solid var(--line2);background:var(--dock);padding:6px 8px;border-radius:2px}.dfoot{display:flex;justify-content:flex-end;gap:6px;padding:8px 12px;border-top:1px solid var(--line2)}.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%);background:#1b1b1b;border:1px solid var(--line);color:var(--text);padding:6px 12px;border-radius:2px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20;max-width:90%}.toast.show{opacity:1}@media(prefers-reduced-motion:reduce){.toast{transition:none}}.acct{display:inline-flex;align-items:center;gap:6px}.credits{display:inline-flex;align-items:center;gap:6px;color:var(--text);border:1px solid var(--line);border-radius:3px;padding:2px 8px;height:24px;background:var(--base);white-space:nowrap;font-variant-numeric:tabular-nums}.credits.low{border-color:var(--warn);color:var(--warn)}.credits.out{border-color:var(--err);color:var(--err)}.menu{position:absolute;right:6px;top:28px;background:var(--win);border:1px solid #1a1a1a;box-shadow:0 6px 20px #00000080;min-width:220px;z-index:5;display:none}.menu.open{display:block}.menu .who{padding:8px 10px;border-bottom:1px solid var(--line2);color:var(--dim);font-size:12px;word-break:break-all}.menu a,.menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:7px 10px;color:var(--text);text-decoration:none}.menu a:hover,.menu button:hover{background:var(--hlbg)}.paybadge{font-size:11px;color:var(--dim);border:1px solid var(--line2);border-radius:2px;padding:0 4px;margin-left:6px}.modeinfo{border:1px solid var(--line2);background:var(--dock);padding:8px 10px;border-radius:2px;margin-bottom:10px}.modeinfo b{display:block;margin-bottom:2px}.err{color:var(--err)}.ok{color:var(--ok)}
