:root{
  --bg:#181512; --bg2:#1f1b17; --pnl:#221d19; --line:#3a3129; --line2:#4a3f34;
  --ink:#efe6da; --dim:#b6a795; --dim2:#8d7f70; --acc:#d9a558; --acc2:#8C1B2F;
  --paper:#F2EDE4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,Menlo,Consolas,"SF Mono",monospace;font-size:12.5px}

.top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#221d18,#191510)}
.brand b{font-size:16px;letter-spacing:.04em}
.brand .sub{color:var(--acc);margin-left:6px;font-size:12.5px}
.topnote{color:var(--dim2);font-size:12px}
.topnote b{color:var(--dim)}

.wrap{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:0;align-items:start}
@media (max-width:980px){.wrap{grid-template-columns:1fr}}

.left{padding:18px;min-width:0}
.panel{border-left:1px solid var(--line);background:var(--pnl);padding:14px;min-height:calc(100vh - 52px)}

.drop{border:1.5px dashed var(--line2);border-radius:12px;background:#1c1814;
  padding:34px 18px;text-align:center;cursor:pointer;transition:.15s}
.drop:hover,.drop.hot{border-color:var(--acc);background:#241e17}
.drop:focus{outline:2px solid var(--acc);outline-offset:2px}
.dropTitle{font-size:16px;font-weight:600}
.dropSub{color:var(--dim2);font-size:12.5px;margin-top:6px}
.dropErr{margin-top:10px;color:#ff9c7d;font-size:13px;white-space:pre-wrap}

.stageWrap{margin-top:14px}
.stage{background:
  linear-gradient(45deg,#161310 25%,transparent 25%,transparent 75%,#161310 75%),
  linear-gradient(45deg,#161310 25%,#1d1a16 25%,#1d1a16 75%,#161310 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
  border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;justify-content:center}
#view{max-width:100%;max-height:74vh;display:block;cursor:grab;box-shadow:0 10px 34px rgba(0,0,0,.5)}
#view.drag{cursor:grabbing}
#view:focus{outline:2px solid var(--acc);outline-offset:3px}
.stageBar{display:flex;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap}
.grow{flex:1}
.hint{color:var(--dim2);font-size:12px}
.warn{margin-top:10px;padding:8px 12px;border:1px solid #b4553f;border-radius:8px;
  background:#2a1f1c;color:#ffb9a1;font-size:12.5px;white-space:pre-wrap}

.grp{border:1px solid var(--line);border-radius:10px;background:#1e1a16;padding:11px 12px;margin-bottom:12px}
.grpHead{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);
  font-weight:700;margin-bottom:9px}
summary.grpHead{cursor:pointer;margin-bottom:0}
details[open]>summary.grpHead{margin-bottom:9px}
summary::-webkit-details-marker{color:var(--acc)}

.row{display:flex;align-items:center;gap:8px;margin:6px 0;flex-wrap:wrap}
.lbl{color:var(--dim);font-size:12.5px;min-width:62px}
.val{color:var(--ink)}
.note{color:var(--dim2);font-size:11.5px;line-height:1.5;margin-top:7px}
.chk{align-items:flex-start}
.chk input{margin-top:3px}
.chk span{font-size:12.5px;color:var(--dim);flex:1;min-width:0}
.chk b{color:var(--ink)}

input[type=text],input[type=number],select,textarea{
  background:#141110;border:1px solid var(--line2);color:var(--ink);border-radius:6px;padding:5px 7px;font-size:13px}
input[type=color]{background:none;border:1px solid var(--line2);border-radius:6px;width:38px;height:26px;padding:1px;cursor:pointer}
input[type=range]{accent-color:var(--acc);flex:1;min-width:90px}
.hexIn{width:82px}
.hexIn.wide{width:100px;letter-spacing:.1em}
select{padding:4px 6px}

button{font-family:inherit}
.btn{background:#2b2521;color:var(--ink);border:1px solid var(--line2);border-radius:7px;
  padding:7px 11px;font-size:13px;cursor:pointer;transition:.13s}
.btn:hover:not(:disabled){background:#37302a;border-color:var(--acc)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:#3a2c1a;border-color:#7a5b2c}
.btn.primary:hover{background:#4a3820}
.wideBtn{display:block;width:100%;margin-top:4px}
.mini{background:#2b2521;color:var(--dim);border:1px solid var(--line2);border-radius:6px;
  padding:4px 8px;font-size:11.5px;cursor:pointer}
.mini:hover{color:var(--ink);border-color:var(--acc)}
.exRow{gap:6px}
.exRow .btn{flex:1}

.seg{display:inline-flex;border:1px solid var(--line2);border-radius:7px;overflow:hidden}
.seg button{background:#191512;color:var(--dim);border:0;border-right:1px solid var(--line2);
  padding:5px 9px;font-size:12px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--acc);color:#1a1206;font-weight:600}
.seg button:disabled{opacity:.4;cursor:not-allowed}

.patBtns{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.patBtn{background:#191512;border:1px solid var(--line2);border-radius:7px;color:var(--dim);
  padding:5px 2px 6px;cursor:pointer;text-align:center}
.patBtn canvas{display:block;margin:0 auto 3px;image-rendering:auto}
.patBtn small{font-size:9.5px;line-height:1.15;display:block}
.patBtn.on{border-color:var(--acc);background:#2c2317;color:var(--ink)}
.patBtn:disabled{opacity:.4}

.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sw{height:44px;border-radius:7px;border:1px solid var(--line2);cursor:pointer;position:relative;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;overflow:hidden}
.sw.on{outline:2px solid var(--acc);outline-offset:1px}
.sw span{font:10px/1 ui-monospace,monospace;color:#2a2320;background:rgba(255,255,255,.62);
  border-radius:3px;padding:1px 3px}

.marks{margin-top:8px}
.mark{border:1px solid var(--line);border-radius:9px;background:#1a1613;padding:9px;margin-bottom:9px}
.mark>summary{cursor:pointer;font-size:12.5px;color:var(--acc);font-weight:600;list-style:none}
.mark>summary::-webkit-details-marker{display:none}
.mark .tplRow{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:7px 0}
.mark .txtIn{flex:1;min-width:80px}
.badge{font:10px/1.4 ui-monospace,monospace;border:1px solid var(--line2);border-radius:4px;
  padding:1px 5px;color:var(--acc);background:#241d13}
.badge.warnB{color:#ffc46b;border-color:#7a5b2c}
.delMark{margin-left:auto}

.status{color:var(--dim2);font-size:12px;margin-top:8px;white-space:pre-wrap}
.status.ok{color:#9fd39a}
.status.bad{color:#ff9c7d}
.exImg{margin-top:9px;border-top:1px solid var(--line);padding-top:8px}
#exportImgBox img{max-width:100%;display:block;border:1px solid var(--line2);border-radius:6px;margin-top:6px}

.checkOut{margin-top:9px;font-size:12px;color:var(--dim);line-height:1.6}
.checkOut table{width:100%;border-collapse:collapse}
.checkOut td{padding:4px 3px;border-bottom:1px solid var(--line);vertical-align:top}
.checkOut td:first-child{color:var(--dim2);width:32%}
.checkOut .num{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink)}
.checkOut .red{color:#ff9c7d}
.checkOut .na{color:var(--dim2);font-style:italic}