:root { font-family: Arial, Helvetica, sans-serif; color: #f5f8fb; background: #06191e; }
* { box-sizing: border-box; }
html, body, #app { margin: 0; width: 100%; height: 100%; overflow: hidden; }
#app { display: grid; grid-template-rows: 48px minmax(0, 1fr); }
button { font: inherit; cursor: pointer; }
.toolbar { z-index: 3; background: #10222d; border-bottom: 1px solid #31404c; display: flex; align-items: center; gap: 24px; padding: 0 20px; }
.toolbar-name { color: #d9e7f1; font-size: 15px; font-weight: 600; }
.editor-link { color:#a5cbeb; font-size:13px; text-decoration:none; margin-left:auto; }
.editor-link:hover { color:#fff; text-decoration:underline; }
.toolbar-label { color: #9dacba; font-size: 14px; }
.tickets-button { color: #fff; background: #021017; border: 0; border-radius: 28px; padding: 8px 28px; min-width: 160px; }
#ticket-count { color: #93bfe2; margin-left: 6px; }
#map-container { position: relative; overflow: hidden; background: #06191e; }
#map, .sm-svg { width: 100%; height: 100%; display: block; }
.sm-svg { cursor: grab; touch-action: none; }
.sm-svg:active { cursor: grabbing; }
.sm-seats circle { cursor: pointer; transition: opacity 100ms, stroke-width 100ms; }
.sm-seats circle:hover, .sm-seats .is-selected { stroke: #fff; stroke-width: 3.5; }
.sm-seats .is-selected { fill: #fff; }
.sm-seats .is-unavailable { opacity: .28; cursor: not-allowed; }
.sm-svg.filter-wheelchair .sm-seats circle:not(.is-wheelchair),
.sm-svg.filter-semiAmbulatory .sm-seats circle:not(.is-semi-ambulatory) { opacity: .12; }
.sm-stage-label { fill: #f8f9fa; font-size: 40px; font-weight: 700; paint-order: stroke; stroke: #302526; stroke-width: 4px; }
.map-controls { position: absolute; left: 15px; top: 14px; display: flex; align-items: flex-start; gap: 10px; z-index: 2; }
.mode-pill, .control-pill { color: white; background: #30343a; border: 1px solid #404850; box-shadow: 0 2px 10px #0004; border-radius: 25px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 17px; font-size: 15px; }
.mode-pill { font-weight: 700; }
.control-pill { gap: 9px; font-weight: 600; }
.access-wrap { position: relative; }
.access-menu { position: absolute; top: 48px; left: 0; min-width: 230px; padding: 8px; background: #30343a; border: 1px solid #404850; border-radius: 16px; box-shadow: 0 10px 28px #0007; }
.access-menu[hidden], .ticket-panel[hidden], #seat-tooltip[hidden] { display: none; }
.access-menu label { display: flex; align-items: center; gap: 8px; padding: 10px 6px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.access-menu input { accent-color: #1b7fff; width: 17px; height: 17px; }
.reset-button { position: absolute; right: 16px; bottom: 16px; z-index: 2; padding: 9px 16px; color: white; border: 1px solid #53606b; background: #30343a; border-radius: 20px; }
#seat-tooltip { position: absolute; pointer-events: none; z-index: 3; padding: 8px 11px; background: #262a2e; border: 1px solid #58646e; border-radius: 8px; color: white; font-size: 13px; box-shadow: 0 6px 20px #0008; white-space: nowrap; }
.ticket-panel { z-index: 4; position: absolute; right: 12px; top: 12px; background: #252a30; color: #fff; width: 250px; max-height: calc(100% - 24px); overflow-y: auto; padding: 16px; border: 1px solid #52616b; border-radius: 14px; box-shadow: 0 12px 30px #0007; }
.ticket-heading { display: flex; justify-content: space-between; align-items: center; }
.ticket-heading button { background: transparent; color: white; border: 0; font-size: 23px; }
.ticket-panel p, .ticket-panel li { color: #bbc8d1; font-size: 13px; }
.ticket-panel ul { padding-left: 20px; }
#clear-button { background: #334859; border: 0; color: white; padding: 8px 12px; border-radius: 8px; }
@media (max-width: 600px) { .toolbar-label { display: none; } .toolbar { padding: 0 10px; } .tickets-button { min-width: auto; padding: 8px 12px; } .control-pill { font-size: 13px; } }