*{box-sizing:border-box}
html,body{margin:0;height:100%;font:13px/1.35 system-ui,Segoe UI,Arial,sans-serif;background:#1c1b1a;color:#e8e4de}
body{display:flex}
aside{width:380px;min-width:380px;height:100%;overflow-y:auto;padding:10px 12px;background:#262523;border-right:1px solid #111}
h1{font-size:18px;margin:2px 0 10px}h1 small{font-size:11px;color:#9a948a;font-weight:normal;margin-left:6px}
main{flex:1;display:flex;flex-direction:column;min-width:0}
#bar{display:flex;gap:10px;align-items:center;padding:6px 10px;background:#2d2b29;border-bottom:1px solid #111}
#tabs{display:flex;gap:4px;flex-wrap:wrap}
#tabs button{padding:4px 10px}
#tabs button.on{background:#c9a36b;color:#1c1b1a;border-color:#c9a36b}
#status{margin-left:auto;color:#b9b2a6;font-size:12px}
#stage{position:relative;flex:1;min-height:0}
#cv{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
#cv.drag{cursor:grabbing}
#info{position:absolute;left:10px;bottom:8px;font-size:12px;color:#d6cfc2;background:#0008;padding:4px 8px;border-radius:4px;max-width:70%;pointer-events:none;white-space:pre-line}
.sec{margin-bottom:10px;border:1px solid #3a3835;border-radius:6px;padding:6px 8px;background:#2a2927}
.sec>summary{cursor:pointer;font-weight:600;padding:2px 0}
summary small{font-weight:normal;color:#9a948a}
input,select,button{font:inherit;color:inherit;background:#1c1b1a;border:1px solid #4a4743;border-radius:4px;padding:4px 6px}
input[type=number]{width:100%}input[type=color]{padding:0;width:30px;height:24px}
input[type=checkbox]{vertical-align:middle}
button{cursor:pointer;background:#3a3835}button:hover{background:#4a4743}
button.primary{background:#8a5a2f;border-color:#a8713f}button.primary:hover{background:#a8713f}
button.danger{color:#e89a8a}
.row{display:flex;gap:6px;margin:6px 0;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;margin:6px 0}
.grid2 label,label.chk{display:flex;flex-direction:column;gap:2px;color:#b9b2a6;font-size:12px}
label.chk{flex-direction:row;gap:6px;align-items:center;margin:4px 0}
.pair{display:flex;gap:4px}
.note{color:#8f897f;font-size:11.5px;margin:4px 0}
.sw{display:inline-block;width:12px;height:3px;vertical-align:middle}
#results{list-style:none;margin:4px 0;padding:0}
#results li{padding:4px 6px;cursor:pointer;border-radius:4px;font-size:12px}#results li:hover{background:#3a3835}
.layer{border:1px solid #45423e;border-radius:6px;margin:6px 0;background:#201f1d}
.layer.off{opacity:.55}
.lh{display:flex;gap:4px;align-items:center;padding:5px}
.lh input[type=text]{flex:1;min-width:0}
.lh button{padding:2px 6px}
.lb{padding:2px 8px 8px;border-top:1px solid #3a3835}
.lb h4{margin:8px 0 3px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#9a948a}
.chips{display:flex;flex-wrap:wrap;gap:3px 10px}
.chips label{display:flex;align-items:center;gap:4px;font-size:12px}
.eg{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;font-size:12px}
.eg select{padding:1px 4px}
.warn{color:#e8c06a;font-size:11.5px;margin-top:4px}
#pk{position:absolute;inset:0;width:100%;height:100%;cursor:grab}#pk.drag{cursor:grabbing}
#pickHelp{display:none;position:absolute;left:10px;top:10px;background:#000b;padding:6px 10px;border-radius:6px;font-size:12px;gap:10px;align-items:center}
#pickHelp button{margin-left:10px}
#stage.picking #pickHelp{display:flex}#stage.picking #info{display:none}