:root { --bg:#14161b; --card:#1d2027; --line:#2c303a; --ink:#eceae6; --mute:#9aa0a6; --gold:#d3ac75; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 -apple-system,"PingFang SC",sans-serif; }
.wrap { max-width:980px; margin:0 auto; padding:16px; display:grid; gap:16px; grid-template-columns: minmax(0,420px) minmax(0,1fr); align-items:start; }
@media (max-width:760px) { .wrap { grid-template-columns:1fr; } }
h1 { grid-column:1/-1; margin:0; font-size:18px; letter-spacing:.08em; }
h1 small { color:var(--mute); font-weight:400; margin-left:8px; font-size:12px; letter-spacing:0; }
.stage { position:sticky; top:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; }
.canvas { position:relative; width:100%; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:#22252c; }
.canvas img { position:absolute; display:block; pointer-events:none; user-select:none; }
.canvas .bgimg { inset:0; width:100%; height:100%; object-fit:cover; }
.tabs, .chips { display:flex; flex-wrap:wrap; gap:8px; }
.tab { padding:6px 14px; border-radius:99px; background:var(--card); border:1px solid var(--line); color:var(--ink); cursor:pointer; font:inherit; }
.tab[aria-pressed="true"] { border-color:var(--gold); color:var(--gold); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; display:grid; gap:14px; }
.panel h2 { margin:0 0 8px; font-size:13px; color:var(--mute); font-weight:500; letter-spacing:.1em; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
.item { position:relative; background:#262a33; border:1px solid var(--line); border-radius:10px; padding:4px 4px 6px; cursor:pointer; color:var(--ink); font:inherit; text-align:center; }
.item .th { height:84px; display:grid; place-items:center; }
.item .th img { max-width:100%; max-height:84px; object-fit:contain; }
.item small { display:block; font-size:11px; color:var(--mute); margin-top:2px; }
.item[aria-pressed="true"] { border-color:var(--gold); background:#2e2a22; }
.item[aria-pressed="true"] small { color:var(--gold); }
.bgs .item .th { height:64px; } .bgs .item .th img { width:100%; height:64px; object-fit:cover; border-radius:6px; }
.bar { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.btn { flex:1; padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:#262a33; color:var(--ink); font:inherit; cursor:pointer; }
.btn.gold { background:var(--gold); color:#2a2318; border-color:var(--gold); font-weight:600; }
.note { color:var(--mute); font-size:12px; grid-column:1/-1; }

@media (max-width:760px) { .stage { position:static; } }