:root { --sm-ink: #18181b; --sm-sel: #111827; --sm-res: #d4d4d8; --sm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
/* ---------- Seat map component ---------- */
.sm { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab; touch-action: pan-y; }
.sm.sm-panning, .sm.sm-space { cursor: grabbing; }
.sm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sm-shape path, .sm-shape rect { fill: #27272a; }
.sm-shape text { fill: #fff; font: 700 15px var(--sm-font); letter-spacing: .3em; }
.sm-labels text { fill: #a1a1aa; font-family: var(--sm-font); font-weight: 700; }
.seat { cursor: pointer; }
.seat rect { fill: var(--z, #4f46e5); stroke: transparent; stroke-width: 1.6; transition: fill .2s, stroke .2s; }
.seat text { fill: #fff; font-family: var(--sm-font); font-weight: 600; pointer-events: none; }
.seat.av:hover rect { stroke: var(--sm-ink); }
.seat.sel rect { fill: var(--sm-sel); stroke: var(--z); stroke-width: 2.4; }
.seat.sel text { fill: #fff; }
.seat.held rect { fill: #fff; stroke: #a1a1aa; stroke-dasharray: 2.5 2; }
.seat.held text { fill: #a1a1aa; }
.seat.res rect { fill: var(--sm-res); }
.seat.res text { fill: #a1a1aa; }
.seat.res, .seat.held, .seat.blk { cursor: not-allowed; }
.seat.blk rect { fill: #f4f4f5; stroke: #e4e4e7; }
.seat.blk text { fill: transparent; }
.seat.pending { opacity: .55; }
.sm-ctrl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.sm-ctrl button {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid #e4e4e7; background: #fff; color: var(--sm-ink);
  font: 600 20px/1 var(--sm-font); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sm-ctrl button:hover { background: #f4f4f5; }
.sm-tip {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: var(--sm-ink); color: #fff; font-size: .82rem; line-height: 1.4; padding: 7px 10px; border-radius: 8px; white-space: nowrap;
}
.sm-tip.show { opacity: 1; }
.sm-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: rgba(24,24,27,.85); color: #fff; font-size: .85rem; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
}
.sm-hint.show { opacity: 1; }