:root {
  --venue-ui-panel: rgba(9, 11, 15, .92);
  --venue-ui-panel-solid: #0b0e13;
  --venue-ui-surface: rgba(28, 33, 40, .82);
  --venue-ui-surface-hover: rgba(42, 48, 57, .9);
  --venue-ui-ink: #f1f4f8;
  --venue-ui-muted: #96a0ad;
  --venue-ui-line: rgba(203, 213, 225, .16);
  --venue-ui-line-strong: rgba(203, 213, 225, .28);
  --venue-ui-accent: #69c7c2;
  --venue-ui-accent-soft: rgba(79, 174, 169, .18);
  --venue-ui-shadow: 0 24px 64px rgba(0, 0, 0, .46);
}

.glass {
  border-color: var(--venue-ui-line);
  background: var(--venue-ui-panel);
  color: var(--venue-ui-ink);
  box-shadow: var(--venue-ui-shadow);
  backdrop-filter: blur(18px) saturate(.8);
}

.topbar {
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
}

.title {
  display: grid;
  gap: 2px;
  min-width: 150px;
  max-width: min(260px, calc(100vw - 190px));
  padding: 11px 15px;
  border-radius: 14px;
}

.title h1 {
  margin: 0;
  overflow: hidden;
  color: var(--venue-ui-ink);
  font-size: 17px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title p {
  margin: 0;
  color: var(--venue-ui-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.actions { align-items: center; }

.actions button,
.exit-venue {
  min-height: 44px;
  border: 1px solid var(--venue-ui-line);
  border-radius: 13px;
  background: rgba(13, 16, 21, .9);
  color: var(--venue-ui-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  font-weight: 750;
  white-space: nowrap;
  backdrop-filter: blur(16px);
}

.actions button:hover,
.exit-venue:hover {
  border-color: var(--venue-ui-line-strong);
  background: var(--venue-ui-surface-hover);
}

#venue-tools-toggle { border-color: rgba(105, 199, 194, .38); }
.exit-venue { background: rgba(20, 23, 29, .9); }

.venue-tools[popover] {
  color-scheme: dark;
  inset: auto max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  width: auto;
  max-height: min(48dvh, 480px);
  margin: 0;
  padding: 0 14px 14px;
  overflow: auto;
  border: 1px solid var(--venue-ui-line-strong);
  border-radius: 20px;
  background: var(--venue-ui-panel);
  color: var(--venue-ui-ink);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .64);
  scrollbar-color: #4b535e transparent;
  backdrop-filter: blur(22px) saturate(.75);
}

.venue-tools[popover]:popover-open {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 1.15fr .85fr;
  grid-template-areas:
    "header header header header"
    "stage audience lighting gyro"
    "performance performance glow glow"
    "language help glow glow";
  align-items: stretch;
}

.venue-tools::backdrop {
  background: rgba(0, 0, 0, .08);
  backdrop-filter: none;
}

.venue-tools-header {
  grid-area: header;
  position: sticky;
  z-index: 3;
  top: 0;
  min-height: 54px;
  margin: 0 -14px;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--venue-ui-line);
  background: rgba(9, 11, 15, .97);
  backdrop-filter: blur(18px);
}

.venue-tools-header strong {
  color: var(--venue-ui-ink);
  font-size: 16px;
}

.venue-tools-header-actions { gap: 7px; }

.venue-tools button,
.venue-tools select,
.performance-switcher summary,
.selection-actions button,
.venue-seat-tool {
  border: 1px solid var(--venue-ui-line) !important;
  background: var(--venue-ui-surface) !important;
  color: var(--venue-ui-ink) !important;
  box-shadow: none !important;
}

.venue-tools button,
.performance-switcher summary { white-space: nowrap; }

.venue-tools button:hover:not(:disabled),
.venue-tools select:hover,
.performance-switcher summary:hover,
.selection-actions button:hover,
.venue-seat-tool:hover {
  border-color: var(--venue-ui-line-strong) !important;
  background: var(--venue-ui-surface-hover) !important;
}

.venue-tools button:focus-visible,
.venue-tools select:focus-visible,
.performance-switcher summary:focus-visible,
.selection-actions button:focus-visible,
.venue-seat-tool:focus-visible {
  outline-color: var(--venue-ui-accent);
}

.venue-tools-reset { padding: 0 12px; }
.venue-tools-close { width: 42px; min-width: 42px; min-height: 42px; padding: 0; font-size: 22px; }

.control-stage { grid-area: stage; }
.control-audience { grid-area: audience; }
.control-lighting { grid-area: lighting; }
.control-gyro { grid-area: gyro; }
.control-performance { grid-area: performance; }
.control-glowstick { grid-area: glow; }
.control-language { grid-area: language; }
.control-help { grid-area: help; }

.tool-group,
.language-picker {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--venue-ui-line);
  border-left: 1px solid var(--venue-ui-line);
}

.control-stage,
.control-performance,
.control-language { border-left: 0; }

.tool-label {
  color: var(--venue-ui-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}

.language-picker {
  align-content: start;
  gap: 8px;
}

.language-picker select {
  width: 100%;
  min-height: 40px;
  border-radius: 11px;
  padding: 0 10px;
}

.performance-switcher { margin: 0; }
.performance-switcher summary { width: 100%; min-height: 40px; border-radius: 11px; }
.performance-switcher-controls { gap: 7px; }
.performance-switcher select,
.performance-switcher button { min-height: 38px; border-radius: 10px; }

.audience-modes,
.lighting-controls { gap: 6px; }

.audience-modes button,
.lighting-controls button {
  min-height: 40px;
  border-radius: 11px;
}

.audience-modes button[aria-pressed="true"],
.lighting-controls button[aria-pressed="true"],
#gyroscope-toggle[aria-pressed="true"],
#glowstick-toggle[aria-pressed="true"],
.venue-seat-tool[aria-pressed="true"] {
  border-color: rgba(105, 199, 194, .7) !important;
  background: var(--venue-ui-accent-soft) !important;
  color: #c9fffb !important;
}

.stage-switcher {
  padding: 5px;
  border: 1px solid var(--venue-ui-line);
  border-radius: 13px;
  background: rgba(3, 5, 8, .34);
}

.stage-switcher button { border-color: transparent !important; }
.stage-switcher strong { color: var(--venue-ui-ink); font-size: 12px; }

#glowstick-ui { gap: 8px; }
.glowstick-theme-label { color: var(--venue-ui-muted); font-size: 11px; }
.glowstick-theme-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.glowstick-theme-switcher {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--venue-ui-line);
  border-radius: 11px;
  background: rgba(3, 5, 8, .34);
}

.glowstick-theme-switcher button {
  min-height: 34px;
  padding: 0 !important;
  border-color: transparent !important;
}

.glowstick-theme-switcher strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 6px;
  color: var(--venue-ui-ink);
  font-size: 11px;
  white-space: nowrap;
}

#friend-status,
#gyroscope-status,
#glowstick-hint,
#glowstick-theme-status { color: var(--venue-ui-muted); }

.menu-hint {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--venue-ui-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
  color: var(--venue-ui-muted);
  font-size: 11px;
  line-height: 1.55;
}

#selection {
  width: min(920px, calc(100% - 28px)) !important;
  min-width: 0;
  padding: 10px 11px 10px 16px;
  border-radius: 16px;
  border-color: var(--venue-ui-line-strong);
  background: var(--venue-ui-panel);
  color: var(--venue-ui-ink);
}

#selection strong { color: var(--venue-ui-ink); }
.selection-actions { flex-wrap: wrap; justify-content: flex-end; }
.selection-actions button { min-height: 42px; border-radius: 11px !important; font-weight: 750; }
#seat-view { border-color: rgba(105, 199, 194, .48) !important; }

#glowstick-actions button {
  border-color: var(--venue-ui-line);
  background: var(--venue-ui-panel);
  color: var(--venue-ui-ink);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
}

#glowstick-actions button.active {
  border-color: rgba(105, 199, 194, .7);
  background: var(--venue-ui-accent-soft);
  color: #c9fffb;
}

#friend-card { border-color: var(--venue-ui-line); background: var(--venue-ui-panel); color: var(--venue-ui-ink); }
#friend-card span { color: var(--venue-ui-muted); }

@media (max-width: 980px) {
  .venue-tools[popover]:popover-open {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "header header"
      "stage audience"
      "lighting gyro"
      "performance performance"
      "glow glow"
      "language help";
  }

  .control-lighting,
  .control-performance,
  .control-glowstick,
  .control-language { border-left: 0; }
  .control-audience,
  .control-gyro,
  .control-help { border-left: 1px solid var(--venue-ui-line); }
}

@media (max-width: 768px) {
  .topbar {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    gap: 8px;
  }

  .title {
    min-width: 112px;
    max-width: calc(100vw - 154px);
    padding: 9px 12px;
    border-radius: 13px;
  }

  .title h1 { font-size: 15px; }
  .title p { font-size: 9px; }
  .actions { gap: 6px; }
  .actions button,
  .exit-venue { min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 13px; font-size: 12px; }

  .venue-tools[popover] {
    inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: min(82dvh, 760px);
    padding: 0 10px 10px;
    border-radius: 22px;
  }

  .venue-tools[popover]:popover-open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "header header"
      "language performance"
      "stage gyro"
      "audience audience"
      "lighting lighting"
      "glow glow"
      "help help";
    align-items: start;
  }

  .venue-tools[popover]:has(.control-gyro[hidden]) .control-stage {
    grid-column: 1 / -1;
  }

  .venue-tools::backdrop { background: rgba(0, 0, 0, .36); backdrop-filter: blur(2px); }
  .venue-tools-header { margin: 0 -10px; padding-inline: 12px 8px; }
  .tool-group,
  .language-picker {
    padding: 9px 6px;
    border-left: 0;
  }

  .control-performance { border-left: 1px solid var(--venue-ui-line); }
  .control-audience,
  .control-stage,
  .control-lighting,
  .control-glowstick,
  .control-help { border-left: 0; }

  .control-gyro { border-left: 1px solid var(--venue-ui-line); }
  .audience-modes button,
  .lighting-controls button,
  .language-picker select,
  .performance-switcher summary { min-height: 36px; }

  .venue-tools button,
  .performance-switcher summary {
    min-width: 0;
    padding-inline: 6px;
    font-size: clamp(10px, 2.8vw, 12px);
  }

  .stage-switcher button { min-height: 36px; }
  #glowstick-ui {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 6px;
  }

  #glowstick-hint,
  #glowstick-theme-status {
    font-size: 10px;
    line-height: 1.35;
  }

  .glowstick-theme-label,
  .glowstick-theme-row,
  #glowstick-theme-status { grid-column: 1 / -1; }

  .glowstick-theme-row { grid-template-columns: minmax(0, 1fr) auto; }

  #selection.venue-seat-tools-ready {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto !important;
    padding: 11px;
    transform: none;
  }

  #selection.venue-seat-tools-ready .selection-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #selection.venue-seat-tools-ready .selection-actions button { min-width: 0; font-size: 12px; }
  #glowstick-actions { bottom: max(150px, calc(env(safe-area-inset-bottom) + 150px)); }
}

@media (max-width: 430px) {
  .title { max-width: calc(100vw - 132px); }
  .actions button,
  .exit-venue { width: auto; min-width: 44px; padding: 0 9px; font-size: 11px; }
}

@media (prefers-reduced-motion: no-preference) {
  .venue-tools:popover-open { animation: venue-console-in .18s ease-out; }
  @keyframes venue-console-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}