:root{--cream:#fff3d9;--cream2:#fdf8ee;--paper:#fffdf8;--brown:#ac7e52;--brown-d:#7b5634;--ink:#4a3523;--muted:#8d9095;--orange:#f7b774;--line:#ecdcc0;--brick:#8a4b38;--r:12px;--pill:17px}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--cream);color:var(--ink);font:13px/1.45 "Microsoft YaHei","微软雅黑","PingFang SC",Helvetica,Arial,sans-serif}
header{height:64px;display:flex;align-items:center;gap:18px;padding:0 20px;background:var(--cream);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}.brand .mark{width:38px;height:38px;border-radius:50%;background:var(--brown);color:var(--cream);display:grid;place-items:center;font:700 20px Georgia,serif;box-shadow:0 0 0 4px #f7b77455}
.brand b{display:block;color:var(--brown);font-size:16px;letter-spacing:.5px}.brand small{color:var(--muted);font-size:11px}
.cur-file{display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--pill);padding:5px 14px;color:var(--brown-d);font-weight:600;max-width:260px;white-space:nowrap;overflow:hidden}
#dirty{color:#e8833a;display:none}
.hbtns{margin-left:auto;display:flex;gap:10px;align-items:center}.seg{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:var(--pill);padding:2px}
main{display:flex;height:calc(100% - 64px);padding:14px;gap:14px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 4px 18px #ac7e521a}
aside{width:320px;flex:none;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ptitle{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}.ptitle b{color:var(--brown);font-size:14px}
.hint{color:var(--muted);font-size:11px}
#params{flex:1;overflow:auto}
.group{border-bottom:1px solid var(--line)}.group>summary{list-style:none;cursor:pointer;padding:12px 16px;font-weight:700;color:var(--brown-d);display:flex;justify-content:space-between}
.group>summary::after{content:"收起";color:var(--muted);font-weight:400;font-size:11px}.group:not([open])>summary::after{content:"展开"}.group[open]>summary{background:var(--cream2)}
.gbody{padding:4px 16px 12px}
.param{margin:12px 0}.plabel{display:flex;gap:6px;align-items:baseline;margin-bottom:6px;flex-wrap:wrap}.plabel b{font-weight:600;color:var(--ink)}.plabel span{color:var(--muted);font-size:11px}
.prow{display:flex;gap:10px;align-items:center}
.prow input[type=number],.param input[type=text],.param select{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 8px;font:inherit;outline:none}
.prow input:focus,.param select:focus,.param input[type=text]:focus{border-color:var(--orange);box-shadow:0 0 0 3px #f7b77440}
.prow input[type=number]{width:74px}.param input[type=text],.param select{width:100%}
input[type=range]{flex:1;accent-color:var(--brown)}input[type=checkbox]{accent-color:var(--brown);width:16px;height:16px}
.btn{background:var(--cream);color:var(--brown-d);border:1px solid transparent;border-radius:var(--pill);padding:6px 14px;cursor:pointer;font:inherit;font-weight:600;white-space:nowrap;transition:.15s}
.btn:hover{background:#ffe9bf}.btn.ghost{background:transparent}.btn.ghost:hover{background:var(--cream)}
.btn.sm{padding:3px 10px}.btn.icon{padding:6px 12px}
.btn.primary{background:var(--brown);color:#fff}.btn.primary:hover{background:var(--brown-d)}
.btn.accent{background:var(--orange);color:var(--ink)}.btn.accent:hover{background:#f3a656}.btn.accent.on{background:var(--brown);color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.pfoot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);align-items:center}.pfoot .primary{flex:1;padding:10px}
.dock{width:440px;flex:none;display:flex;flex-direction:column;min-height:0}.slide .pfoot,.dock .pfoot{justify-content:space-between}.slide .pfoot .primary,.dock .pfoot .primary{flex:none;padding:7px 18px}
#view{flex:1;position:relative;overflow:hidden;min-width:0}
#canvasWrap{position:absolute;inset:0}
.dim{color:var(--brick);background:#fffdf8d9;border-radius:6px;padding:1px 6px;font:700 12px system-ui;pointer-events:none}
#status{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cream);padding:6px 14px;border-radius:var(--pill);display:none;z-index:3}#status.err{background:#b5432f}
.vbtns{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;background:var(--paper);border:1px solid var(--line);padding:6px;border-radius:24px;box-shadow:0 4px 14px #ac7e5226;z-index:6}
#logBox{position:absolute;left:14px;bottom:16px;max-width:45%;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:5px 10px;z-index:2}
#logBox summary{cursor:pointer;color:var(--brown);font-weight:600}#log{max-height:220px;overflow:auto;margin:6px 0;font:11px ui-monospace,monospace;white-space:pre-wrap;color:var(--ink)}
.slide{position:absolute;top:10px;bottom:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px #4a352333;display:flex;flex-direction:column;z-index:5}
.slide.left{left:10px;width:280px}.slide.right{right:10px;width:min(480px,60%)}.hidden{display:none!important}
#code{flex:1;margin:12px;background:#2b2118;color:#f6e7cc;border:0;border-radius:10px;padding:12px;font:12px/1.6 ui-monospace,Consolas,monospace;resize:none;tab-size:4;outline:none}
#fileList{list-style:none;margin:0;padding:8px;flex:1;overflow:auto}
#fileList li{display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:10px}#fileList li:hover{background:var(--cream2)}#fileList li.cur{background:var(--cream);outline:1px solid var(--orange)}
#fileList .fi{flex:1;cursor:pointer;min-width:0}#fileList .fi b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--brown-d)}#fileList .fi span{color:var(--muted);font-size:11px}
#fileList .fa{display:flex;gap:4px}#fileList .empty{color:var(--muted);padding:14px}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
@media(max-width:1100px){.dock{width:360px}.brand small,.seg #loadSample{display:none}.cur-file{max-width:160px}}
@media(max-width:820px){
  header{height:auto;flex-wrap:wrap;padding:10px 12px;gap:8px}.hbtns{margin-left:0;flex-wrap:wrap;width:100%}.cur-file{margin-left:auto}
  main{flex-direction:column;height:auto;padding:10px}.dock{width:auto;height:60vh}aside{width:auto;max-height:48vh}#view{height:62vh;flex:none}
  .slide.left,.slide.right{width:auto;left:8px;right:8px}#logBox{max-width:60%}
}

.auth{display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid var(--line)}
.auth .tag{font-size:11px;color:var(--brown);border:1px solid var(--line);border-radius:var(--pill);padding:2px 8px;background:var(--paper)}
.uname{font-weight:700;color:var(--brown-d);margin-right:2px}
.modal{position:fixed;inset:0;background:#4a352366;display:grid;place-items:center;z-index:50}
.modal form{width:min(380px,92vw);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.modal h3{margin:0;color:var(--brown);font-size:18px}.modal .hint{margin:0}
.modal label{display:flex;flex-direction:column;gap:5px;font-weight:600;color:var(--brown-d)}
.modal input{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit;color:var(--ink);outline:none}
.modal input:focus{border-color:var(--orange);box-shadow:0 0 0 3px #f7b77440}
.aerr{color:#b5432f;min-height:18px;font-size:12px}.arow{display:flex;gap:8px;align-items:center}