:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f7f8fb;
  color: #171717;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 182, 220, .24), transparent 28rem),
    radial-gradient(circle at 82% 14%, rgba(125, 211, 252, .18), transparent 24rem),
    linear-gradient(135deg, #fffafb 0%, #eef9ff 48%, #f6f1ff 100%);
}
button, input, select, textarea { font: inherit; }
button {
  border: 0;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}
button:disabled { opacity: .45; cursor: not-allowed; }
.shell { min-height: 100vh; padding: 24px; }
.workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100vh - 48px);
  border: 1px solid rgba(217, 222, 231, .9);
  border-radius: 8px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 24px 70px rgba(50, 62, 88, .12);
  overflow: hidden;
}
.sidebar {
  background: rgba(255, 255, 255, .78);
  border-right: 1px solid #d9dee7;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.eyebrow { color: #6b7280; font-size: 12px; letter-spacing: 0; font-weight: 800; text-transform: uppercase; }
h1 { font-size: 27px; line-height: 1.15; margin: 8px 0 0; }
h2 { margin: 0; font-size: 22px; }
h3 { margin: 0 0 14px; color: #111827; font-size: 15px; }
.muted { color: #6b7280; margin: 6px 0 0; }
nav { display: grid; gap: 8px; }
.tab {
  background: transparent;
  color: #374151;
  text-align: left;
  border: 1px solid #d9dee7;
}
.tab.active { background: #111827; color: #fff; }
.status { margin-top: auto; color: #6b7280; font-size: 13px; }
.panel { display: none; padding: 24px; overflow: auto; }
.panel.active { display: block; }
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.template-card {
  min-height: 76px;
  background: #fff;
  border: 1px solid #d9dee7;
  color: #111827;
  text-align: left;
  display: grid;
  gap: 4px;
  align-content: center;
}
.template-card strong { font-size: 15px; }
.template-card span { color: #6b7280; font-size: 12px; font-weight: 600; }
.template-card.active {
  background: #eef4ff;
  border-color: #2457ff;
  color: #111827;
  box-shadow: 0 0 0 3px rgba(36, 87, 255, .12);
}
.form-sections { display: grid; gap: 14px; }
.form-section {
  border: 1px solid #d9dee7;
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  padding: 16px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
label { display: grid; gap: 6px; color: #374151; font-size: 13px; font-weight: 800; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d9dee7;
  background: #fff;
  color: #111827;
  border-radius: 8px;
  padding: 10px 12px;
}
input[type="color"] { padding: 4px; }
.date-field { height: 42px; min-height: 42px; line-height: 20px; appearance: none; }
.access-key { font-size: 12px; }
textarea { min-height: 92px; resize: vertical; }
.wide { grid-column: 1 / -1; }
pre {
  margin-top: 18px;
  border: 1px solid #d9dee7;
  background: #fff;
  color: #111827;
  padding: 14px;
  border-radius: 8px;
  overflow: auto;
  white-space: pre-wrap;
}
pre.error { color: #991b1b; border-color: #fecaca; background: #fff1f2; }
.seat-map-toolbar {
  display: inline-grid;
  grid-template-columns: repeat(6, auto);
  gap: 6px;
  margin-top: 14px;
  padding: 4px;
  border: 1px solid #d9dee7;
  border-radius: 8px;
  background: #eef0f4;
}
.map-mode {
  min-height: 34px;
  border-radius: 6px;
  background: transparent;
  color: #374151;
  padding: 0 12px;
}
.map-zoom,
.map-reset {
  min-height: 34px;
  border-radius: 999px;
  background: #2f3033;
  color: #f8fafc;
  padding: 0 12px;
}
.map-reset {
  background: #3b3b3f;
  font-size: 12px;
}
.map-mode.active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 4px rgba(17, 24, 39, .1);
}
.seat-map {
  position: relative;
  height: 430px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #27272a;
  background: #151515;
  overflow: hidden;
}
.seat-map-canvas {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, .04), transparent 44%),
    linear-gradient(180deg, #1b1b1d, #121212);
  transform-origin: var(--focus-x, 50%) var(--focus-y, 50%);
  transition: transform .2s ease;
}
.seat-map[data-mode="detail"] .seat-map-canvas,
.seat-map[data-mode="gate"] .seat-map-canvas,
.seat-map[data-mode="overview"] .seat-map-canvas { transform: scale(var(--map-scale, 1)); }
.seat-map[data-mode="gate"] .seat-block { opacity: .3; }
.venue-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.svg-outer {
  fill: #202124;
  stroke: #303236;
  stroke-width: 4;
  opacity: 1;
}
.svg-sector {
  stroke: #151515;
  stroke-width: 6;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .18));
}
.sector-outfield { fill: #303235; }
.sector-third { fill: #292b2e; }
.sector-first { fill: #292b2e; }
.sector-balcony { fill: #383328; }
.svg-inner {
  fill: #252525;
  stroke: rgba(255, 255, 255, .12);
  stroke-width: 3;
}
.svg-stage {
  fill: #303033;
}
.svg-stage-text,
.svg-field,
.svg-label,
.svg-gate {
  text-anchor: middle;
  dominant-baseline: middle;
  font-weight: 900;
  letter-spacing: 0;
}
.svg-stage-text { fill: #d4d4d8; font-size: 28px; }
.svg-field { fill: rgba(244, 244, 245, .38); font-size: 22px; }
.svg-label { fill: rgba(244, 244, 245, .42); font-size: 24px; }
.svg-gate {
  fill: #f59e0b;
  font-size: 24px;
  paint-order: stroke;
  stroke: #151515;
  stroke-width: 8px;
}
.seat-dot {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  z-index: 7;
  background: #ef4444;
  color: #fff;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(239, 68, 68, .28);
  transition: left .2s ease, top .2s ease;
}
.gate-label {
  position: absolute;
  z-index: 2;
  color: #6b7280;
  background: rgba(255, 255, 255, .8);
  border: 1px solid #d9dee7;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 900;
}
.gate-left { left: 16px; top: 50%; }
.gate-right { right: 16px; top: 50%; }
.gate-top { left: 50%; top: 11%; transform: translateX(-50%); }
.gate-bottom { left: 50%; bottom: 9%; transform: translateX(-50%); }
.seat-zone {
  position: absolute;
  z-index: 1;
  color: rgba(17, 24, 39, .48);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}
.zone-1b { right: 18%; top: 42%; transform: rotate(-18deg); }
.zone-3b { left: 18%; top: 42%; transform: rotate(18deg); }
.zone-outfield { left: 50%; top: 20%; transform: translateX(-50%); }
.zone-balcony { left: 50%; top: 31%; transform: translateX(-50%); }
.seat-block-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
}
.seat-block {
  position: absolute;
  min-width: 16px;
  min-height: 8px;
  padding: 0;
  border: 1px solid rgba(244, 244, 245, .10);
  border-radius: 3px;
  background: rgba(82, 82, 91, .62);
  color: #d4d4d8;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  box-shadow: none;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
}
.seat-block.labeled {
  min-width: 42px;
  min-height: 20px;
  padding: 5px 6px;
}
.seat-block.unlabeled {
  color: transparent;
  opacity: .48;
}
.seat-block.stand-block { border-color: rgba(244, 244, 245, .12); }
.seat-block.outfield-block { background: rgba(63, 63, 70, .75); }
.seat-block.balcony-block { background: rgba(92, 75, 35, .75); }
.seat-block.arena-block { background: rgba(63, 63, 70, .65); }
.seat-map[data-mode="gate"] .svg-sector { opacity: .45; }
.seat-map[data-mode="gate"] .svg-gate { font-size: 32px; fill: #fbbf24; }
.seat-map[data-mode="detail"] .seat-block {
  opacity: 0;
  pointer-events: none;
}
.seat-map[data-mode="detail"] .seat-block.nearby {
  opacity: 1;
  min-width: 54px;
  padding: 7px 8px;
  font-size: 13px;
  pointer-events: auto;
}
.seat-map[data-mode="detail"] .seat-block.selected {
  opacity: 1;
}
.seat-map[data-mode="detail"] .svg-label,
.seat-map[data-mode="detail"] .svg-field,
.seat-map[data-mode="detail"] .svg-gate { opacity: .62; }
.seat-map[data-mode="detail"] .svg-stage-text { opacity: .82; }
.seat-block.nearby {
  border-color: rgba(250, 204, 21, .42);
  background: rgba(63, 63, 70, .88);
  color: #f4f4f5;
}
.seat-block.selected {
  border-color: #ef4444;
  background: rgba(127, 29, 29, .92);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .24);
}
.seat-block.major:not(.nearby):not(.selected) {
  opacity: .68;
  background: rgba(113, 113, 122, .78);
}
.seat-block.d-block,
.seat-block.e-block,
.seat-block.f-block {
  opacity: .74;
  min-width: 36px;
  font-size: 10px;
}
.seat-map[data-mode="overview"] .seat-block.d-block,
.seat-map[data-mode="overview"] .seat-block.e-block,
.seat-map[data-mode="overview"] .seat-block.f-block {
  opacity: .32;
}
.seat-target {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 6;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.seat-target span,
.seat-target b {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 2px solid rgba(239, 68, 68, .72);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}
.seat-target span:nth-child(1) { width: 26px; height: 26px; }
.seat-target span:nth-child(2) { width: 48px; height: 48px; opacity: .78; }
.seat-target span:nth-child(3) { width: 70px; height: 70px; opacity: .52; }
.seat-target b {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border: 0;
}
.seat-map.has-arena-overlay .venue-svg {
  opacity: .38;
}
.seat-map.has-arena-overlay .seat-map-canvas::after {
  content: "";
  position: absolute;
  left: 28%;
  top: 47%;
  z-index: 2;
  width: 44%;
  height: 34%;
  border: 2px solid rgba(219, 39, 119, .42);
  border-radius: 8px;
  background-image: var(--arena-overlay);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, .88);
  box-shadow: 0 16px 38px rgba(17, 24, 39, .18);
}
.arena-import {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.arena-map-candidates {
  display: grid;
  gap: 8px;
}
.arena-map-candidates button {
  display: grid;
  gap: 4px;
  border: 1px solid #d9dee7;
  background: #fff;
  color: #111827;
  text-align: left;
}
.arena-map-candidates span,
.arena-map-candidates p {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.seat-intel,
.arrival-grid {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #d9dee7;
  border-radius: 8px;
  background: #fff;
  color: #374151;
}
.seat-intel span,
.arrival-grid p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}
.arrival-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.arrival-grid strong,
.seat-intel strong {
  color: #111827;
  font-size: 13px;
}
.seat-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr);
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(234, 179, 8, .42);
  border-radius: 8px;
  background: #292416;
}
.seat-detail-kicker {
  display: block;
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.seat-detail strong {
  display: block;
  color: #f4f4f5;
  font-size: 20px;
  text-align: center;
}
.seat-detail p {
  margin: 5px 0 0;
  color: #d4d4d8;
  font-size: 13px;
  text-align: center;
}
.mini-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: start;
}
.mini-blocks span {
  min-width: 48px;
  padding: 6px 8px;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  background: #18181b;
  color: #d4d4d8;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.mini-blocks span.active {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}
.seat-adjust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.seat-adjust input {
  padding: 0;
}
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.box { border: 1px solid #d9dee7; padding: 16px; border-radius: 8px; display: grid; gap: 12px; background: #fff; }
.list { display: grid; gap: 10px; }
.item { border: 1px solid #d9dee7; padding: 14px; border-radius: 8px; background: #fff; display: flex; justify-content: space-between; gap: 12px; }
.item p { margin: 4px 0 0; color: #6b7280; }
.item a { color: #2457ff; }
[hidden] { display: none !important; }
@media (max-width: 980px) {
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .shell { padding: 0; }
  .workspace { grid-template-columns: 1fr; min-height: 100vh; border: 0; border-radius: 0; }
  .sidebar { border-right: 0; border-bottom: 1px solid #d9dee7; }
  nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid, .split, .template-grid, .arrival-grid, .seat-detail, .seat-adjust { grid-template-columns: 1fr; }
  .seat-map { height: 340px; }
}