:root{--bg:#eef5ff;--panel:#fff;--line:#c9dcf5;--blue:#1f6bff;--blue2:#e3eeff;--ink:#12305a;--mute:#6b83a6}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:13px/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;overscroll-behavior:none}
#app{display:flex;flex-direction:column;height:100dvh;max-width:1400px;margin:0 auto;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 6px;padding:6px 8px 4px}
h1{font-size:15px;margin:0;font-weight:700;letter-spacing:.5px;white-space:nowrap}
h1 small{font-weight:400;color:var(--mute);font-size:11px;margin-left:4px}
.row{display:flex;gap:4px;align-items:center}.row.wrap{flex-wrap:wrap}
.btn{height:26px;padding:0 9px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:6px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;text-decoration:none;white-space:nowrap;font-family:inherit}
.btn:active{background:var(--blue2)}
.btn:disabled{opacity:.4;cursor:default}
.btn.on,.btn.toggle[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.sq{width:28px;padding:0;font-size:14px}
.btn.brush i{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.25);display:inline-block}
.btn.file{position:relative;overflow:hidden}.btn.file input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
#toolbar{display:flex;gap:4px;align-items:center;padding:0 8px 6px;overflow-x:auto}
.seg{display:flex}.seg .btn{border-radius:0;margin-left:-1px}.seg .btn:first-child{border-radius:6px 0 0 6px;margin:0}.seg .btn:last-child{border-radius:0 6px 6px 0}
#btnBrush{margin-left:auto}
#stage{position:relative;flex:1;min-height:0;margin:0 6px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#dfeafa}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;cursor:grab}
#cv.paint{cursor:crosshair}
#zoomBox{position:absolute;right:6px;bottom:6px;display:flex;flex-direction:column;gap:3px}
#toast{position:absolute;left:50%;top:26px;transform:translateX(-50%);background:rgba(18,48,90,.88);color:#fff;padding:3px 10px;border-radius:12px;font-size:12px;pointer-events:none;white-space:nowrap}
#legend{background:var(--panel);border-top:1px solid var(--line);margin-top:6px;border-radius:10px 10px 0 0}
.handle{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:none;padding:6px 12px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.arrow{color:var(--blue);font-size:10px;transition:transform .2s}
#legend:not(.collapsed) .arrow{transform:rotate(180deg)}
#legendBody{max-height:36dvh;overflow:auto;padding:0 8px 4px}
#legend.collapsed #legendBody{display:none}
.legend-tools{display:flex;align-items:center;justify-content:space-between;color:var(--mute);font-size:11px;margin-bottom:4px;min-height:26px}
#legendGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:5px}
.chip{display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid transparent;background:none;border-radius:8px;padding:2px 0;cursor:pointer;color:var(--ink);font-family:inherit}
.chip i{width:34px;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px;font-weight:700}
.chip i.dash{border-style:dashed}
.chip span{font-size:11px;color:var(--mute)}
.chip.hl{border-color:var(--blue);background:var(--blue2)}
.chip.brush{box-shadow:0 0 0 2px var(--blue) inset}
.foot{margin:0;padding:2px 10px 6px;font-size:10px;color:var(--mute)}
.sheet{position:fixed;inset:0;background:rgba(18,48,90,.35);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet[hidden]{display:none}
.panel{background:#fff;width:100%;max-width:560px;max-height:86dvh;overflow:auto;border-radius:12px 12px 0 0;padding:10px 12px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
@media(min-width:700px){.sheet{align-items:center}.panel{border-radius:12px}}
.panel-h{display:flex;justify-content:space-between;align-items:center}
.note{margin:0;color:var(--mute);font-size:11px}
#palSearch,.form input[type=number],.form select{height:28px;border:1px solid var(--line);border-radius:6px;padding:0 8px;font-size:13px;width:100%;background:#fff;color:var(--ink);font-family:inherit}
#palGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:5px;overflow:auto;max-height:50dvh}
#palGrid .sec{grid-column:1/-1;font-size:11px;color:var(--mute);margin-top:2px}
#palGrid button{border:1px solid transparent;background:none;border-radius:6px;padding:2px 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-size:10px;color:var(--ink);font-family:inherit}
#palGrid button i{width:34px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.28)}
#palGrid button i.dash{border-style:dashed}
#palGrid button.cur{border-color:var(--blue);background:var(--blue2)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.form label{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--mute)}
.form label.chk{flex-direction:row;align-items:center;gap:5px;color:var(--ink);font-size:12px}
#thumbBox{display:flex;gap:8px;align-items:center}
#thumb{max-width:96px;max-height:96px;border:1px solid var(--line);border-radius:6px}
#thumbInfo{font-size:11px;color:var(--mute)}
#expResult{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#expResult img{max-width:100%;max-height:44dvh;border:1px solid var(--line);border-radius:6px;object-fit:contain;align-self:center}

#variant .btn{height:24px;padding:0 8px;font-size:12px}
#variant{flex:none}
@media(max-width:520px){#sizeInfo{display:none}}
@media(max-width:430px){header{gap:4px;padding:6px 6px 4px}h1{font-size:14px;letter-spacing:0}header .btn{padding:0 6px}#variant .btn{padding:0 6px}header .row{gap:3px}}

.exp-scale{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
.exp-scale .btn{min-width:38px}
#expInfo{line-height:1.7;color:var(--ink)}#expInfo em{color:#c2410c;font-style:normal}
#expResult[hidden]{display:none}

.exp-opt{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:13px;color:#12305a}
.exp-opt input{width:18px;height:18px}