* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background:#f2f4f8; color:#111827; }
body.no-scroll { overflow: hidden; }

/* full screen stage */
.stage { height: 100vh; width: 100vw; display: grid; grid-template-columns: 28vw 1fr; grid-template-rows: 1fr auto; gap: 1.6vh 1.6vw; padding: 2vh 2vw; }
.panel { background:#fff; border-radius: 1.4vh; box-shadow: 0 1.2vh 2.4vh rgba(0,0,0,.06); padding: 2vh 2vw; }
.title { margin: 0 0 1vh; font-size: 3.2vh; letter-spacing: .1vh; }
.sub { color:#6b7280; margin: 0 0 2vh; font-size: 2vh; }

/* left qr panel compact */
.qr-panel { grid-column: 1; grid-row: 1 / span 1; display:flex; flex-direction: column; align-items:center; }
.qr-wrap.big { display:flex; align-items:center; justify-content:center; width: 100%; flex: 1; }
.qr-wrap.big img { width: 18vw; height: 18vw; max-width: 36vh; max-height: 36vh; border: 1.2vh solid #eaf1ff; border-radius: 1.8vh; background:#fff; }
.actions { display:flex; gap: 1vw; margin-top: 1.2vh; }
.actions.center { justify-content: center; }
button, .actions a { cursor:pointer; background:#eef2ff; border: .3vh solid #c7d2fe; color:#1f3fff; padding: 1.4vh 2.2vh; border-radius: 1.2vh; font-size: 2.2vh; user-select:none; -webkit-tap-highlight-color: transparent; }
button.primary { background:#2b44ff; color:#fff; border-color:#2b44ff; }
button.danger { background:#fff5f5; color:#e11d48; border-color:#fecdd3; }
button.lg { padding: 1.8vh 3.2vh; font-size: 2.6vh; }
button:active { transform: translateY(.2vh); }
.tip { color:#6b7280; font-size: 2vh; margin-top: 1vh; }

/* right list panel */
.list-panel { grid-column: 2; grid-row: 1 / span 1; display:flex; flex-direction: column; }
.list-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 1vh; }

/* auto-sized grid: columns/rows via CSS vars */
.name-grid.autosize { --cols: 6; --rows: 4; flex:1; display:grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: calc((100% - (var(--rows) - 1) * 1.2vh) / var(--rows)); gap: 1.2vh; }
.name-chip { background:#fff; border:.3vh solid #e5e7eb; border-radius: 1.2vh; display:flex; align-items:center; justify-content:center; font-weight:700; font-size: 2.4vh; color:#111827; box-shadow: 0 .4vh 1vh rgba(0,0,0,.04); }
.name-chip.active { border-color:#2b44ff; color:#2b44ff; box-shadow: 0 .6vh 1.8vh rgba(43,68,255,.18); opacity:.65; }

/* bottom action bar spanning two columns */
.page-actions { grid-column: 1 / -1; grid-row: 2; display:flex; justify-content:center; align-items:center; gap: 2vw; background: transparent; }

/* modal */
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.35); }
.modal.hidden { display:none; }
.modal-content { position:relative; z-index:2; width: min(92vw, 560px); background:#fff; border-radius:1.6vh; padding:2.2vh 2vw; box-shadow: 0 1vh 3vh rgba(0,0,0,.25); text-align:center; }
.result-text { font-size:3vh; margin-top: 1vh; font-weight:800; }

@media (max-width: 1100px) {
  .stage { grid-template-columns: 32vw 1fr; }
}
@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .qr-panel { order: 1; }
  .list-panel { order: 2; }
  .page-actions { order: 3; }
}