:root{--cream:#fff3d9;--cream2:#fdf8ee;--paper:#fffdf8;--brown:#ac7e52;--brown-d:#7b5634;--ink:#4a3523;--muted:#8d9095;--orange:#f7b774;--line:#ecdcc0;--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:60px;display:flex;align-items:center;gap:18px;padding:0 20px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}.brand .mark{width:36px;height:36px}.brand b{display:block;color:var(--brown);font-size:16px}.brand small{color:var(--muted);font-size:11px}
.cur-file{background:var(--paper);border:1px solid var(--line);border-radius:var(--pill);padding:5px 14px;color:var(--brown-d);font-weight:600;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cur-file:empty{display:none}
.hbtns{margin-left:auto;display:flex;align-items:center;gap:10px}
main{display:flex;height:calc(100% - 60px);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:380px;flex:none;overflow:auto}.ptitle{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);gap:8px}.ptitle b{color:var(--brown);font-size:14px}
.pad{padding:10px 16px}.muted{color:var(--muted);font-size:11px}
.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}
.btn:hover{background:#ffe9bf}.btn.sm{padding:3px 10px}.btn.ghost{background:transparent}.btn.primary{background:var(--brown);color:#fff}.btn.primary:hover{background:var(--brown-d)}.btn.on{background:var(--brown);color:#fff}.btn.danger{color:#b5432f}
select,input[type=number],input[type=text]{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:4px 6px;font:inherit}
input[type=checkbox]{accent-color:var(--brown)}
#view{flex:1;position:relative;overflow:hidden;min-width:0}#canvasWrap{position:absolute;inset:0}
#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.emptybox{text-align:center;color:var(--brown-d);border:2px dashed var(--line);border-radius:16px;padding:40px 50px;background:var(--cream2)}.emptybox b{font-size:17px}.emptybox p{color:var(--muted)}
#view.drag .emptybox,#view.drag{outline:3px dashed var(--orange);outline-offset:-8px}
#loading,#plates{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff3d980;z-index:9}
.loadbox{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 22px;min-width:300px;box-shadow:0 10px 30px #4a352333;display:flex;flex-direction:column;gap:8px}
.bar{height:8px;background:var(--cream);border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--brown);transition:width .15s}
#plateList{display:flex;flex-direction:column;gap:6px}
.vtop{position:absolute;top:10px;left:10px;right:80px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;z-index:3}.vtop label{background:var(--paper);border:1px solid var(--line);border-radius:var(--pill);padding:3px 10px;cursor:pointer}
.seg{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:var(--pill);padding:2px}
.layers{position:absolute;right:12px;top:50px;bottom:60px;width:60px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px 0;font-size:11px;color:var(--brown-d);text-align:center}
.lyr{flex:1;position:relative;width:30px}.lyr input{position:absolute;inset:0;writing-mode:vertical-lr;direction:rtl;width:30px;height:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.lyr input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:22px;height:12px;border-radius:6px;background:var(--brown);cursor:pointer}.lyr input::-moz-range-thumb{pointer-events:auto;width:22px;height:12px;border-radius:6px;background:var(--brown)}
.lyr::before{content:"";position:absolute;left:13px;width:4px;top:0;bottom:0;background:var(--line);border-radius:2px}
.vbtns{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:var(--paper);border:1px solid var(--line);padding:5px;border-radius:22px;z-index:3}
#legend{position:absolute;left:10px;bottom:12px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 10px;z-index:3;max-width:40%;font-size:11px}#legend span{display:inline-flex;align-items:center;gap:4px;margin-right:10px}#legend i,.sw{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid #0002;vertical-align:-1px}
.slot{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:var(--cream2)}.slot .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}.slot select{max-width:180px}.slot input[type=number]{width:64px}
.strip{height:16px;border-radius:5px;margin:6px 0 2px;width:100%;display:block;border:1px solid #0001}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:4px 0 10px}.kv span{color:var(--muted)}
h4{margin:12px 0 6px;color:var(--brown-d);font-size:13px}
.tl{margin:0;padding-left:0;list-style:none}.tl li{padding:2px 0;display:flex;gap:6px;align-items:center}
.obj{border-top:1px dashed var(--line);padding:6px 0}.obj b{word-break:break-all}.obj .r{display:flex;gap:6px;align-items:center;font-size:12px}.obj .r em{margin-left:auto;font-style:normal;color:var(--muted)}
.modal{position:fixed;inset:0;background:#4a352355;display:flex;align-items:center;justify-content:center;z-index:20}.mbox{width:min(760px,94vw);max-height:88vh;display:flex;flex-direction:column}.mbody{overflow:auto;padding:12px 16px}
.fil{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px}.fil .hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.segs{margin-top:8px;display:flex;flex-direction:column;gap:5px}.segs .s{display:grid;grid-template-columns:22px 64px minmax(120px,1fr) 64px 14px auto;gap:6px;align-items:center}.segs .s>*{min-width:0}.segs input[type=number]{width:100%;box-sizing:border-box}.segs .cc{display:grid;grid-template-columns:1fr 36px;gap:4px;min-width:0}.segs .cc input[type=text]{width:100%;min-width:0;box-sizing:border-box}.segs .cc input[type=color]{width:36px;height:26px;padding:0;box-sizing:border-box}.segs .gbar{grid-column:1/-1;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#3a2a1c;text-shadow:0 0 3px #fff,0 0 2px #fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;border:1px solid rgba(0,0,0,.08)}@media(max-width:520px){.segs .s{grid-template-columns:20px 58px minmax(90px,1fr) 52px 12px;row-gap:4px}.segs .sb{grid-column:3/-1}}
.tag{background:var(--orange);color:var(--ink);border-radius:8px;padding:0 6px;font-size:11px}
.hidden{display:none!important}

.segs .sb{display:flex;gap:2px}

.seo-intro{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.langsw{display:inline-flex;align-items:center;gap:2px;color:var(--muted);white-space:nowrap}.langsw a{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid transparent;border-radius:var(--pill);padding:6px 10px;font:inherit;font-weight:600;line-height:inherit;color:var(--muted);text-decoration:none}.langsw a:hover{color:var(--brown-d)}.langsw a.on{color:var(--brown-d);background:var(--cream)}