.seating-map-viewport {
    overflow: auto;
    max-height: 65vh;
    border: 1px solid #cad4dc;
    border-radius: 0.375rem;
    overscroll-behavior: contain;
}

.seating-map-viewport svg { display: block; width: 100%; height: auto; }
.seating-seat-map { background: #f3f6f8; }
.seating-table-body { stroke-width: var(--table-stroke, 2px); }
.seating-seat-marker { cursor: pointer; outline: none; }
.seating-seat-marker circle { fill: #edf8f2; stroke: #147349; stroke-width: var(--seat-stroke, 1.5px); }
.seating-seat-marker text { fill: #123e2b; font-size: 9px; font-weight: 700; pointer-events: none; }
.seating-seat-marker.is-selected circle { fill: #ffc861; stroke: #815000; stroke-width: calc(var(--seat-stroke, 1.5px) * 1.5); }
.seating-seat-marker.is-unavailable { cursor: not-allowed; }
.seating-seat-marker.is-unavailable circle { fill: #d4dae0; stroke: #6f7a85; stroke-dasharray: 3 2; }
.seating-seat-marker.is-unavailable text { fill: #414b55; }
.seating-seat-marker:focus-visible circle { stroke: #165eb9; stroke-width: calc(var(--seat-stroke, 1.5px) * 2); }
.seating-map-legend { display: inline-flex; align-items: center; gap: 0.4rem; }
.seating-map-swatch { width: 1rem; height: 1rem; border: 1px solid #147349; background: #edf8f2; border-radius: 50%; }
.seating-map-swatch.selected { background: #ffc861; border-color: #815000; }
.seating-map-swatch.unavailable { background: #d4dae0; border-color: #6f7a85; }