.epi-inventory {
    --epi-ink: #172338;
    --epi-line: #dae2ee;
    --epi-blue: #2458a8;
    color: var(--epi-ink);
    font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.epi-inventory * { box-sizing: border-box; }
.epi-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.epi-main, .epi-panel { min-width: 0; padding: 18px; background: #fff; border: 1px solid var(--epi-line); border-radius: 12px; }
.epi-main h3, .epi-panel h3 { margin: 0 0 12px; font-size: 1.12rem; }
.epi-side { display: grid; gap: 16px; min-width: 0; }
.epi-seat-detail { order: -1; }
.epi-muted, .epi-option small { color: #51617b; }
.epi-muted { margin: 0 0 12px; }
.epi-canvas { position: relative; width: 100%; overflow: hidden; border-radius: 8px; background: repeating-linear-gradient(45deg, #edf2fa, #edf2fa 16px, #e6ecf5 16px, #e6ecf5 32px); }
.epi-background { position: absolute; width: 100%; height: 100%; object-fit: fill; }
.epi-area { position: absolute; display: grid; place-items: center; min-width: 25px; min-height: 25px; padding: 3px; overflow: hidden; border: 2px solid #2458a8; border-radius: 6px; background: rgba(36, 88, 168, .18); color: #122d57; font-weight: 700; cursor: pointer; }
.epi-area:hover, .epi-area:focus-visible { background: rgba(36, 88, 168, .33); }
.epi-group-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.epi-group, .epi-back { padding: 7px 10px; border: 1px solid var(--epi-blue); border-radius: 8px; background: #fff; color: var(--epi-blue); cursor: pointer; }
.epi-back { margin-bottom: 12px; }
.epi-group:hover, .epi-back:hover { background: #e7f0ff; }
.epi-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.epi-seat { fill: #168864; stroke: #fff; stroke-width: 2px; }
.epi-seat.is-sold { fill: #3263b7; }
.epi-seat.is-held { fill: #e9a431; }
.epi-seat.is-blocked { fill: #d44747; }
.epi-seat.is-unavailable { fill: #79879b; }
.epi-seat.is-selected { fill: #724ac8; stroke: #241344; stroke-width: 3px; }
.epi-seat[aria-disabled="false"] { cursor: pointer; }
.epi-seat text { fill: #fff; stroke: none; font-weight: 700; font-size: 12px; pointer-events: none; }
.epi-seat:focus-visible { outline: none; stroke: #172338; stroke-width: 4px; }
.epi-option { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--epi-line); }
.epi-option strong, .epi-option small { display: block; }
.epi-stepper { display: flex; align-items: center; gap: 10px; }
.epi-stepper button { width: 32px; height: 32px; border: 1px solid var(--epi-blue); border-radius: 6px; background: #fff; color: var(--epi-blue); font-size: 1.1rem; cursor: pointer; }
.epi-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.epi-stepper span { min-width: 2ch; text-align: center; font-weight: 700; }
.epi-json { overflow-x: auto; padding: 12px; margin: 0; border-radius: 8px; background: #f2f5fa; color: #25334d; font-size: 12px; }
.epi-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.epi-legend span { display: inline-flex; align-items: center; gap: 6px; }
.epi-dot { width: 11px; height: 11px; border-radius: 50%; background: #168864; }
.epi-dot.is-sold { background: #3263b7; }
.epi-dot.is-held { background: #e9a431; }
.epi-dot.is-blocked { background: #d44747; }
.epi-dot.is-selected { background: #724ac8; }
.epi-inventory button:focus-visible { outline: 3px solid #172338; outline-offset: 2px; }

@media (max-width: 800px) {
    .epi-layout { grid-template-columns: 1fr; }
}