.seatmap { position: relative; width: 100%; min-height: 24rem; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background-color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 0.75rem; }
.seatmap svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.seatmap .world { fill: var(--color-background); stroke: var(--color-border); stroke-width: 1; }
.seatmap .grid-dot { fill: var(--color-border); }
.seatmap .shape-rect { fill: color-mix(in oklab, var(--color-muted-foreground) 14%, transparent); stroke: var(--color-muted-foreground); stroke-width: 1; stroke-dasharray: 5 4; rx: 6; }
.seatmap .shape-stage { fill: color-mix(in oklab, var(--color-foreground) 12%, transparent); stroke: var(--color-foreground); stroke-opacity: 0.4; stroke-width: 1.5; rx: 8; }
.seatmap .shape-text { fill: var(--color-foreground); font-size: 16px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; letter-spacing: 0.08em; }
.seatmap .shape-label .shape-text { font-weight: 500; letter-spacing: 0; }
.seatmap .shape-label rect { fill: transparent; stroke: none; }
.seatmap .shape.selected rect { stroke: var(--color-primary); stroke-width: 2.5; stroke-dasharray: none; }
.seatmap .seat { cursor: pointer; outline: none; }
.seatmap .seat-body { fill: var(--seat-color, #9ca3af); stroke: color-mix(in oklab, var(--seat-color, #9ca3af) 55%, #000); stroke-width: 1.2; transition: opacity 120ms ease; }
.seatmap .seat-label { fill: #fff; font-size: 9px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.seatmap.zoomed-out .seat-label { display: none; }
.seatmap .seat.unassigned .seat-body { fill: var(--color-muted); stroke: var(--color-muted-foreground); stroke-dasharray: 3 2; }
.seatmap .seat.unassigned .seat-label { fill: var(--color-muted-foreground); }
.seatmap .seat.blocked .seat-body { fill: #1f2937; stroke: #000; opacity: 0.85; }
.seatmap .seat.taken { cursor: not-allowed; }
.seatmap .seat.taken .seat-body { fill: var(--color-muted-foreground); stroke: var(--color-muted-foreground); opacity: 0.35; }
.seatmap .seat.held .seat-body { fill: #f59e0b; stroke: #b45309; opacity: 0.75; }
.seatmap .seat.mine .seat-body { stroke: var(--color-foreground); stroke-width: 2.5; }
.seatmap .seat.sold .seat-body { fill: var(--color-muted-foreground); stroke: var(--color-foreground); opacity: 0.7; }
.seatmap .seat.selected .seat-body { stroke: var(--color-primary); stroke-width: 3; }
.seatmap .seat.selected .seat-ring { display: block; }
.seatmap .seat-ring { display: none; fill: none; stroke: var(--color-primary); stroke-width: 2; }
.seatmap .seat:focus-visible .seat-ring { display: block; stroke: var(--color-foreground); stroke-dasharray: 3 2; }
.seatmap .seat-access { fill: #2563eb; stroke: #fff; stroke-width: 1; }
.seatmap .seat.locked .seat-body { stroke-dasharray: none; }
.seatmap .marquee { fill: color-mix(in oklab, var(--color-primary) 14%, transparent); stroke: var(--color-primary); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.seatmap.pan-tool, .seatmap.pan-tool .seat { cursor: grab; }
.seatmap.panning, .seatmap.panning .seat { cursor: grabbing; }
.seatmap-controls { position: absolute; right: 0.75rem; bottom: 0.75rem; display: grid; gap: 0.375rem; }
.seatmap-controls button { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-foreground); font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px oklch(0 0 0 / 0.1); }
.seatmap-controls .zoom-readout { font-size: 0.6875rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.seatmap-controls button:hover { background: var(--color-muted); }
.seat-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.8125rem; color: var(--color-muted-foreground); }
.seat-legend .swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; margin-right: 0.375rem; vertical-align: -1px; }
.seatmap .seat.house .seat-body { fill: #7c3aed; stroke: #4c1d95; opacity: 0.9; }
.seatmap .seat.inspected .seat-body { stroke: var(--color-primary); stroke-width: 3; }
.seatmap .shape-image .shape-outline { fill: none; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; }
.seatmap .shape-image { cursor: move; }
.seatmap .shape-image.selected .shape-outline { stroke: var(--color-primary); stroke-dasharray: 6 4; }
.seatmap .shape-image.locked, .seatmap:not(.editing) .shape-image { pointer-events: none; }
.seatmap .guide { stroke: #ec4899; stroke-width: 1; }
.seatmap .seat-draft { fill: color-mix(in oklab, var(--color-primary) 35%, transparent); stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 3 2; }
.seatmap.seat-tool, .seatmap.seat-tool .seat, .seatmap.seat-tool .shape { cursor: crosshair; }
.seatmap .seat-glyph { display: none; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.seatmap .glyph-x, .seatmap .glyph-dash { stroke: var(--color-foreground); stroke-width: 2.5; }
.seatmap .glyph-check circle { fill: var(--color-primary); stroke: var(--color-background); stroke-width: 1.5; }
.seatmap .glyph-check path { fill: none; stroke: var(--color-primary-foreground); stroke-width: 2; }
.seatmap .seat.taken .glyph-x, .seatmap .seat.sold .glyph-x, .seatmap .seat.blocked .glyph-x { display: block; }
.seatmap .seat.held .glyph-dash { display: block; }
.seatmap .seat.selected .glyph-check, .seatmap .seat.mine .glyph-check { display: block; }
.seatmap.seat-glyphs .seat.taken .seat-label, .seatmap.seat-glyphs .seat.sold .seat-label, .seatmap.seat-glyphs .seat.blocked .seat-label, .seatmap.seat-glyphs .seat.held .seat-label { display: none; }
.seatmap.seat-glyphs .seat.taken .seat-body { opacity: 0.6; }
.seat-legend-kiosk { gap: 0.75rem 1.5rem; font-size: 1.125rem; color: var(--color-foreground); }
.seat-legend-kiosk > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.seat-swatch { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.seat-swatch .swatch-body { fill: var(--color-background); stroke: var(--color-foreground); stroke-width: 1.5; }
.seat-swatch .swatch-mark { fill: none; stroke: var(--color-foreground); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.seat-swatch.swatch-held .swatch-body { fill: #f59e0b; }
.seat-swatch.swatch-taken .swatch-body { fill: color-mix(in oklab, var(--color-muted-foreground) 35%, var(--color-background)); }
.seat-swatch.swatch-selected .swatch-body { fill: var(--color-primary); stroke: var(--color-primary); }
.seat-swatch.swatch-selected .swatch-mark { stroke: var(--color-primary-foreground); }
.seatmap g.seat[data-audio-focus] .seat-ring { display: block; stroke: var(--color-foreground); stroke-width: 3; stroke-dasharray: none; }
.seatmap.seat-glyphs .seatmap-controls button { width: 3.25rem; height: 3.25rem; font-size: 1.5rem; }