:root{
  --bg:#0d0f14;
  --bg2:#141821;
  --panel:#1a2130;
  --text:#e7eefc;
  --muted:#9aa6bd;
  --accent:#4aa3ff;
  --sold:#ff8c1a;
  --scanned:#2b6cff;
  --free:#ffffff33;
  --stroke:#111723;
  --card:#101521;
  --ring:#2a3752;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
}

.topbar{
  display:flex; align-items:center; gap:16px;
  padding:12px 16px;
  background:linear-gradient(180deg, #0f1420 0%, #0c111a 100%);
  border-bottom:1px solid #0f1729;
  position:sticky; top:0; z-index:10;
}

.brand{
  font-weight:700; letter-spacing:.3px; font-size:18px;
  background: linear-gradient(90deg, #94bfff, #4aa3ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.venue-switch{
  display:flex; gap:8px;
  background:var(--card); padding:6px; border-radius:12px; border:1px solid var(--ring);
}

.venue-btn{
  background:transparent; color:var(--text); border:1px solid transparent;
  padding:8px 12px; border-radius:8px; cursor:pointer;
  font-weight:600; letter-spacing:.2px;
}
.venue-btn.active{
  background:var(--panel); border-color:#2a3957; box-shadow:0 0 0 1px #2a3957 inset;
}

.event-select{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:var(--card); padding:6px 10px; border-radius:12px; border:1px solid var(--ring);
}
.event-select label{ color:var(--muted); font-size:14px; }
.event-select select{
  appearance:none; background:var(--panel); color:var(--text);
  border:1px solid #2a3752; border-radius:8px; padding:8px 10px; min-width:260px;
}

.meta{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; border-radius:12px; border:1px solid var(--ring); background:var(--card);
}
#lastRef{ color:var(--muted); font-size:14px; }
#btn-refresh{
  background:var(--panel); color:var(--text); border:1px solid #2a3752; border-radius:8px;
  width:34px; height:34px; cursor:pointer; font-weight:700;
}

.content{
  display:grid; grid-template-columns: 280px 1fr; gap:18px;
  padding:18px; min-height:calc(100vh - 120px);
}

.legend{
  background:var(--card); border:1px solid var(--ring);
  padding:16px; border-radius:14px;
}
.legend-title{ font-weight:700; margin-bottom:12px; }
.legend-item{ display:flex; align-items:center; gap:10px; padding:6px 0; color:var(--muted); }
.dot{
  width:14px; height:14px; border-radius:50%;
  border:1px solid #0008;
  display:inline-block;
}
.dot-scanned{ background:var(--scanned); }
.dot-sold{ background:var(--sold); }
.dot-free{ background:var(--free); }

.legend-note{
  margin-top:12px; color:var(--muted); font-size:13px; line-height:1.3;
}

.stage{
  background:var(--bg2); border:1px solid #0f1729; border-radius:18px;
  padding:16px; display:flex; flex-direction:column; gap:12px;
}
.screen{
  align-self:center; padding:6px 12px; border-radius:999px;
  background:#0f1624; border:1px solid var(--ring); color:var(--muted);
  font-weight:700; letter-spacing:.3px; font-size:13px;
}
.svg-wrap{
  position:relative; width:100%; height: calc(100vh - 220px);
  background: radial-gradient(1000px 600px at 50% -200px, #122138 0%, #0d121e 35%, #0b0f18 100%);
  border-radius:12px; overflow:hidden; border:1px solid #0e1627;
  box-shadow: inset 0 0 0 1px #0a1220, 0 10px 40px rgba(0,0,0,.25);
}

#seatmap{
  width:100%; height:100%;
  background: transparent;
}

.foot{
  padding:10px 16px; border-top:1px solid #0f1729; color:var(--muted); font-size:13px;
}