.viewer { display: grid; grid-template-columns: 250px 1fr; gap: 18px; min-height: 640px; align-items: stretch; }
.viewer-side { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.vlabel { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
.vlabel[hidden], .vlist[hidden] { display: none; }
/* type and variant lists: one entry per line */
.vlist { display: flex; flex-direction: column; gap: 5px; }
.vlist button, .stage-tools button, .seg.wide button {
  background: #1d1414; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; font: inherit; font-size: .86rem; cursor: pointer; transition: .15s;
}
.vlist button { width: 100%; text-align: left; }
.vlist button:hover, .stage-tools button:hover, .seg.wide button:hover { border-color: var(--gold); }
.vlist button.on, .stage-tools button.on, .seg.wide button.on { background: linear-gradient(180deg, #7d1b1b, #4d0f0f); border-color: var(--gold); color: #fff; }
.seg.wide { display: flex; gap: 6px; margin-top: 0; } .seg.wide button { flex: 1; padding-inline: 6px; }
.viewer-stage { position: relative; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #3a1612 0%, #140a0a 60%, #090506 100%); min-height: 560px; }
#stage { position: absolute; inset: 0; } #stage canvas { width: 100%; height: 100%; display: block; }
.stage-hud { position: absolute; left: 16px; top: 14px; font-family: 'Cinzel', serif; font-size: 1.15rem; color: var(--gold); text-shadow: 0 2px 8px #000; pointer-events: none; }
.stage-tools { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.stage-load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); background: rgba(9, 5, 6, .55); backdrop-filter: blur(2px); }
.stage-load[hidden] { display: none; }
@media (max-width: 900px) {
  .viewer { grid-template-columns: 1fr; } .viewer-stage { min-height: 460px; order: -1; }
  .vlist { max-height: 250px; overflow-y: auto; }
}