:root {
  --bg: #141414;
  --panel: #202020;
  --panel-2: #292929;
  --line: #3a3a3a;
  --text: #f7f4ed;
  --muted: #b9b1a6;
  --accent: #e24a2a;
  --gold: #ffb33f;
  --violet: #b678ff;
  --danger: #ff3d54;
}

* { letter-spacing: 0; }
body {
  background: var(--bg);
  color: var(--text);
  padding-bottom: 78px;
}
a { color: inherit; }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 0 16px;
  background: rgba(20, 20, 20, .96);
  border-bottom: 1px solid var(--line);
}
.brand {
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}
.hero {
  padding: 22px 0 10px;
}
.hero h1 {
  font-size: clamp(2rem, 8vw, 4.5rem);
  line-height: .94;
  font-weight: 950;
  text-transform: uppercase;
}
.panel, .event-card, .discovery-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.panel { padding: 16px; }
.event-card, .discovery-card { padding: 14px; }
.event-card {
  display: grid;
  gap: 8px;
}
.time {
  color: var(--gold);
  font-weight: 800;
  white-space: nowrap;
}
.title {
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.stage {
  color: var(--muted);
  font-weight: 700;
}
.badge-rec { background: var(--gold); color: #191919; }
.badge-hidden { background: var(--violet); color: #12091d; }
.badge-must { background: var(--danger); }
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #b9341d;
  --bs-btn-hover-border-color: #b9341d;
}
.form-control, .form-select, textarea {
  background: #111;
  border-color: var(--line);
  color: var(--text);
}
.form-control:focus, .form-select:focus, textarea:focus {
  background: #111;
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(226, 74, 42, .22);
}
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #101010;
  border-top: 1px solid var(--line);
}
.bottom-nav a {
  min-height: 60px;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 800;
}
.bottom-nav a.active {
  color: var(--text);
  background: var(--panel-2);
  box-shadow: inset 0 3px 0 var(--accent);
}
.filter-bar {
  position: sticky;
  top: 58px;
  z-index: 15;
  background: var(--bg);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.muted { color: var(--muted); }
details pre {
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
}
@media (min-width: 760px) {
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}