*{box-sizing:border-box}
html,body{margin:0;background:#111;color:#f2f2f2;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:17px}
header{padding:10px 12px 6px;background:#1b1b1b;border-bottom:2px solid #333;position:sticky;top:0;z-index:5}
h1{font-size:20px;margin:0 0 8px}
#photoRow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
#photoRow button{flex:0 0 auto}
#photoRow button.active{background:#ffd400;color:#000;border-color:#ffd400}
main{display:flex;gap:14px;padding:12px;align-items:flex-start}
#stageWrap{flex:1 1 auto;min-width:0}
aside{flex:0 0 320px;max-width:100%}
@media (max-width:900px){main{flex-direction:column}aside{flex:1 1 auto;width:100%}}
#stage{position:relative;width:min(100%,calc(66vh*4/3));margin:0 auto;aspect-ratio:4/3;background:#000;border:2px solid #444;border-radius:6px;overflow:hidden}
#cv{width:100%;height:100%;display:block;touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;background:rgba(0,0,0,.6)}
#loading[hidden]{display:none}
#selBar{margin:8px 0;padding:10px 12px;background:#222;border-radius:6px;border-left:6px solid #666;font-weight:600}
#selBar.on{border-left-color:#ffd400;background:#2b2a14}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
button{font:inherit;font-weight:700;min-height:48px;padding:10px 14px;border-radius:8px;border:2px solid #888;background:#2c2c2c;color:#fff;cursor:pointer;touch-action:manipulation}
button:hover{background:#3a3a3a}
button:disabled{opacity:.35;cursor:not-allowed}
button.primary{background:#0a63d1;border-color:#4b9bff}
button.danger{background:#8a1c1c;border-color:#e05050}
details{background:#1d1d1d;border:2px solid #333;border-radius:8px;padding:8px 12px;margin-bottom:12px}
summary{font-weight:700;font-size:18px;cursor:pointer;min-height:36px;display:flex;align-items:center}
ol{padding-left:22px;margin:6px 0;line-height:1.45}
.hint{color:#bbb;font-size:15px;margin:4px 0 8px}
#layerList{list-style:none;margin:0;padding:0}
#layerList li{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;border:2px solid transparent;margin-bottom:4px;background:#262626}
#layerList li.sel{border-color:#ffd400;background:#3a3614}
#layerList li.hid .nm{opacity:.45;text-decoration:line-through}
#layerList .nm{flex:1;min-height:40px;text-align:left;background:none;border:none;padding:6px}
#layerList .vis{min-height:40px;padding:6px 10px;font-size:15px}
#picker{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:20;display:flex;align-items:center;justify-content:center;padding:10px}
#picker[hidden]{display:none}
.pickerInner{background:#1b1b1b;border:2px solid #555;border-radius:10px;width:min(960px,100%);max-height:92vh;display:flex;flex-direction:column}
.pickerHead{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:2px solid #333}
.pickerHead h2{margin:0;font-size:20px}
#pickerBody{overflow-y:auto;padding:10px 14px}
#pickerBody h3{margin:14px 0 8px;font-size:17px;color:#ffd400}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.piece{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;min-height:150px}
.piece img{max-width:110px;max-height:90px;object-fit:contain;background:repeating-conic-gradient(#555 0 25%,#777 0 50%) 0 0/16px 16px;border-radius:4px}
.piece span{font-size:14px;line-height:1.2;text-align:center}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#ffd400;color:#000;font-weight:700;padding:12px 18px;border-radius:8px;z-index:30;max-width:90vw;text-align:center}
#toast[hidden]{display:none}