:root{--c-primary: #585DA9;--c-secondary: #6C7A84;--c-tertiary: #343B41;--c-alt: #403D55;--c-text: #EFEFF1;--c-text-muted: #B0B2B5;--c-btn-text: #121212;--c-bg: #21243A;--c-bg-2: #18191F;--c-line: #22282F;--c-line-strong: #262D34;--c-shadow: rgba(26, 26, 26, .42);--swatch-available: #069862;--swatch-booked: #acafaf;--swatch-selected: rgba(88,93,169,.22);--seat-outline: var(--c-primary);--seat-size: 28px;--radius-seat: 6px;--radius-btn: 10px;--radius-card: 12px}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--c-text);background:var(--c-bg)}.container{max-width:1100px;margin:0 auto;padding:20px}.event-title{margin:14 0 6px 0;padding-top:20px;text-align:center;color:var(--c-text);font-size:22px;font-weight:700}.theater-image{display:block;width:min(100%,640px);height:auto;margin:12px auto;border-radius:var(--radius-seat);border:1px solid var(--c-line-strong);background:var(--c-bg-2)}.zones-bar.center{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:10px 0 6px}.success-hero{display:flex;align-items:center;gap:12px;margin:4px 0 12px}.success-check{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:#0698622e;border:1px solid rgba(6,152,98,.4);color:#86efac;font-weight:800;font-size:18px}.success-heading{font-size:18px;font-weight:800;color:var(--c-text);margin-bottom:2px}.success-sub{font-size:13px;color:var(--c-text-muted)}.success-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 12px}.stat-pill{background:#1e2135;border:1px solid var(--c-line);border-radius:12px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between}.stat-label{font-size:12px;color:var(--c-text-muted)}.stat-value{font-weight:800;color:var(--c-text)}.success-created .success-title{font-weight:700;margin:6px 0;color:var(--c-text)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:#585da926;border:1px solid rgba(88,93,169,.35);color:#cdd0ff;border-radius:999px;font-size:12px;font-weight:600}.status-chip{font-size:11px;line-height:1;padding:2px 6px;border-radius:999px;border:1px solid transparent}.status-chip.created{background:#0698622e;border-color:#06986273;color:#86efac}.server-message{margin:10px 0 0;color:#9ab4ff;font-size:13px}.success-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0 12px}.summary-row{background:#1e2135;border:1px solid var(--c-line);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center}.summary-label{font-size:12px;color:var(--c-text-muted)}.summary-value{font-weight:600;color:var(--c-text)}.zone-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-bg-2);color:var(--c-text);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}.zone-pill:hover{background:#2a2d44}.zone-pill:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}.zone-pill.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary);box-shadow:0 0 0 2px #585da940}.zone-pill .badge{min-width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 6px;background:var(--c-secondary);color:var(--c-text)}.zone-pill.active .badge{background:var(--c-alt);color:#fff}.zone-pill .price{font-size:12px;opacity:.85}.legend{display:flex;justify-content:center;gap:16px;margin:8px 0 16px;font-size:13px;color:var(--c-text-muted)}.legend-item{display:flex;align-items:center;gap:6px}.legend-swatch{width:14px;height:14px;border-radius:var(--radius-seat);border:1px solid var(--c-line)}.legend-swatch.available{background:var(--swatch-available)}.legend-swatch.booked{background:var(--swatch-booked)}.legend-swatch.selected{background:var(--swatch-selected)}.zone-panel{margin-top:8px}.zone-title{text-align:center;margin:0 0 6px}.zone-stats{text-align:center;font-size:13px;color:var(--c-text-muted);margin:0 0 10px}.zoom-controls{display:flex;justify-content:center;gap:8px;margin-bottom:10px}.zoom-btn{padding:6px 10px;border-radius:var(--radius-btn);background:var(--c-bg-2);border:1px solid var(--c-line);color:var(--c-text);cursor:pointer;transition:filter .12s ease,transform .06s ease,box-shadow .15s ease}.zoom-btn:hover{filter:brightness(1.1)}.zoom-btn:active{transform:translateY(1px)}.zoom-btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}.seats-wrapper{overflow:auto;padding:12px 24px 16px}.seat-rows{display:grid;gap:10px;width:max-content;margin:0 auto}.seat-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.row-label{grid-column:1 / 2;justify-self:end;font-weight:600;min-width:2.4ch;text-align:right;color:var(--c-text)}.row-seats{grid-column:2 / 3;display:grid;grid-auto-flow:column;gap:6px;justify-content:center}.seat{width:var(--seat-size);height:var(--seat-size);aspect-ratio:1 / 1;display:grid;place-items:center;box-sizing:border-box;padding:3px;border-radius:var(--radius-seat);border:1px solid var(--c-line);background:var(--zone-seat, var(--swatch-available));color:#fff;line-height:1;transition:box-shadow .15s ease,transform .06s ease,filter .12s ease}.seat .seat-label{display:block;white-space:nowrap;overflow:visible;text-overflow:clip;font-weight:600;line-height:1}.seat.available{cursor:pointer}.seat.available:hover{filter:brightness(1.08)}.seat.available:active{transform:translateY(1px)}.seat.booked{background:var(--swatch-booked);color:var(--c-btn-text);cursor:not-allowed}.seat.selected{outline:2px solid var(--seat-outline);background:var(--swatch-selected);color:var(--c-text);box-shadow:0 0 0 2px #585da940 inset}.continue-bar{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--c-bg-2);border-top:1px solid var(--c-line);box-shadow:0 -6px 18px -10px var(--c-shadow)}.summary{display:flex;align-items:center;gap:8px}.summary .dot{width:4px;height:4px;border-radius:50%;background:var(--c-text-muted)}.actions{display:flex;gap:8px}.link-btn{background:transparent;border:1px solid transparent;color:var(--c-text-muted);cursor:pointer;padding:8px 10px;border-radius:var(--radius-btn);transition:color .12s ease,background .12s ease,border-color .12s ease}.link-btn:hover{color:var(--c-text);background:#ffffff08;border-color:var(--c-line)}.link-btn:disabled{opacity:.55;cursor:default}.continue-btn{padding:8px 14px;border:1px solid var(--c-primary);background:var(--c-primary);color:#fff;border-radius:var(--radius-btn);cursor:pointer;transition:filter .12s ease,transform .06s ease,box-shadow .15s ease}.continue-btn:hover{filter:brightness(1.08)}.continue-btn:active{transform:translateY(1px)}.continue-btn:focus-visible{outline:2px solid #ffffff;outline-offset:2px;box-shadow:0 0 0 3px #585da959}.continue-btn:disabled{background:var(--c-tertiary);border-color:var(--c-tertiary);color:#fff;cursor:default;box-shadow:none}.modal-root{position:fixed;inset:0;z-index:9999}.modal-backdrop{position:absolute;inset:0;background:#00000073;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,520px);max-height:80vh;overflow:auto;background:var(--c-bg-2);color:var(--c-text);border-radius:var(--radius-card);border:1px solid var(--c-line);padding:16px;box-shadow:0 20px 60px #00000073}.modal-card h3{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--c-text)}.modal-card p{margin:6px 0;color:var(--c-text-muted)}.modal-card strong{color:var(--c-text)}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.alert-error{color:#ff6b6b;margin:0 0 8px;font-weight:600}.modal-root[aria-label="Confirm Booking"] .modal-card{width:min(90vw,420px);padding:14px}.modal-root[aria-label="Booking Successful"] .modal-card{width:min(90vw,440px);padding:14px}.modal-root[aria-label="Confirm Booking"] .modal-card h3,.modal-root[aria-label="Booking Successful"] .modal-card h3{font-size:17px;margin-bottom:6px}.modal{position:fixed;inset:0;pointer-events:none}.modal.open{pointer-events:auto}.modal-backdrop{position:absolute;inset:0;background:#00000059}.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,520px);background:var(--c-bg-2);color:var(--c-text);border-radius:var(--radius-card);border:1px solid var(--c-line);padding:16px}