/* Komponen bersama /seats/, /my-seat/, /proof/ — dimuat setelah site.css + app.css. */
.page > .idx:first-child { margin-top: 8px; }
.page-head .head-note { margin: 0; max-width: 420px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.page .gap-top { margin-top: 72px; }
.num, .tbl td.num { font-variant-numeric: tabular-nums; }
.r { text-align: right !important; }
.nw { white-space: nowrap; }

/* tombol non-aktif */
.btn:disabled { cursor: default; background: #1a1a1f; color: var(--soft); }
.btn:disabled .dot { background: var(--soft); }
.btn.quiet:disabled { background: transparent; color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }

/* tautan explorer */
.xlink { display: inline-flex; gap: 4px; align-items: baseline; font-family: 'Geist Mono', monospace; font-size: 12.5px; color: var(--ink); border-bottom: 1px solid var(--line2); }
.xlink span { color: var(--accent); font-size: 11px; }
.xlink:hover { border-color: var(--accent); }

/* status transaksi */
.txs { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 11px 13px; font-size: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.txs .spin { width: 12px; height: 12px; color: var(--accent); }
.txs .mk { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.txs > span { min-width: 0; }
.txs.ok { border-color: rgba(76,111,255,.45); background: rgba(76,111,255,.08); color: var(--accent-ink); }
.txs.ok .mk { background: var(--accent); }
.txs.bad { border-color: rgba(255,180,168,.4); background: rgba(255,180,168,.06); color: #ffd2ca; }
.txs.bad .mk { background: #ffb4a8; }
.txs[hidden] { display: none; }

/* status kursi */
.st { display: inline-flex; align-items: center; gap: 7px; font: 500 10.5px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--soft); }
.st-1 { color: var(--ink); }
.st-1::before { background: var(--accent); }
.st-2::before { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }
.st-3 { color: #ffb4a8; }
.st-3::before { background: #ffb4a8; }

/* tabel lebar penuh dengan gulir mendatar sendiri (bukan halaman) */
.tbl-wrap { margin-top: 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg2); overflow-x: auto; }
.tbl-wrap .tbl tr:last-child td { border-bottom: 0; }
.tbl td .muted, .tbl td.muted { color: var(--muted); }
.tbl-wrap .tbl td { white-space: nowrap; }
.net-demo { white-space: nowrap; }

/* modal konfirmasi */
.modal-card.cm { width: min(480px, 100%); gap: 14px; padding: 24px; max-height: calc(100svh - 32px); overflow: auto; }
.cm h3 { font-size: 26px; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; margin: 0; }
.cm-body { display: grid; gap: 14px; }
.cm-body .kv { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cm-body p { margin: 0; }
.cm-ack { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; cursor: pointer; padding: 12px 14px; border: 1px solid var(--line2); }
.cm-ack input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.cm-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cm-actions .btn:not(.quiet) { flex: 1 1 auto; }

.pulse.off { background: var(--soft); animation: none; box-shadow: none; }

@media (max-width: 760px) {
  .page-head { margin-bottom: 26px; }
  .page .gap-top { margin-top: 56px; }
  .hide-s { display: none; }
  .page .idx span + span { display: none; }
  .txs { grid-template-columns: 12px minmax(0, 1fr); }
  .txs > a { grid-column: 2; justify-self: start; }
  /* label demo dari kerangka bersama terlalu lebar di HP; dipadatkan khusus halaman ini */
  .app-nav .net-demo { padding: 7px 8px; font-size: 0; letter-spacing: .1em; }
  .app-nav .net-demo::after { content: 'Demo'; font-size: 10px; }
  .app-nav .brand { gap: 9px; letter-spacing: .2em; }
  .app-nav .nav-right { gap: 6px; }
  .tbl th, .tbl td { padding: 12px 10px; }
  .cm-actions .btn { flex: 1 1 auto; }
}