:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f1e8;
  background: #11100e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 10%, rgba(255, 165, 0, 0.16), transparent 30rem),
    #11100e;
}

.shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0; }
header { margin-bottom: 28px; }
.eyebrow { color: #ffa500; font: 700 0.75rem/1 monospace; letter-spacing: 0.16em; text-transform: uppercase; }
h1 { margin: 8px 0; font-size: clamp(2.4rem, 8vw, 4.8rem); line-height: 0.95; }
header > p:last-child { color: #a8a39a; }

.card {
  border: 1px solid #35312b;
  border-left: 5px solid #ffa500;
  border-radius: 16px;
  background: rgba(29, 27, 23, 0.9);
  padding: clamp(20px, 5vw, 34px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h2 { margin: 0; }
.badge { padding: 7px 10px; border-radius: 999px; background: #34302a; color: #d6d0c5; font-size: 0.78rem; }
.badge.ok { background: #123c2a; color: #7ee2ad; }
.badge.error { background: #4a2020; color: #ff9999; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 28px 0; background: #35312b; }
.status-grid div { min-width: 0; padding: 16px; background: #1d1b17; }
dt { color: #938d83; font-size: 0.78rem; }
dd { margin: 7px 0 0; overflow-wrap: anywhere; font-weight: 650; }
.notice, .result { min-height: 1.4em; color: #ffad80; }
.success { color: #7ee2ad; }
.failure { color: #ff9999; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
button { border: 0; border-radius: 10px; padding: 12px 16px; background: #ffa500; color: #17130d; font: inherit; font-weight: 800; cursor: pointer; }
button.secondary { background: #35312b; color: #f5f1e8; }
button.danger { background: #4a2020; color: #ffb0b0; }
button.compact { padding: 8px 11px; font-size: 0.82rem; }
button:disabled { cursor: wait; opacity: 0.55; }
.scope { margin-top: 18px; padding: 16px 20px; color: #938d83; border: 1px dashed #35312b; border-radius: 12px; }
.discovery-card { margin-top: 18px; border-left-color: #5f75ff; }
.helper, .muted { color: #938d83; }
.discovery-form { margin: 24px 0 0; }
.discovery-form label { display: block; margin-bottom: 8px; font-weight: 700; }
.input-row { display: flex; gap: 10px; }
input {
  min-width: 0;
  flex: 1;
  border: 1px solid #4b463e;
  border-radius: 10px;
  padding: 12px 14px;
  background: #11100e;
  color: #f5f1e8;
  font: inherit;
}
input:focus { outline: 2px solid #5f75ff; outline-offset: 2px; }
.event-result { margin-top: 24px; padding-top: 24px; border-top: 1px solid #35312b; }
.event-heading, .session-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.event-heading h3 { margin: 5px 0; font-size: 1.35rem; }
.event-heading > p { margin: 0; color: #938d83; font-size: 0.82rem; }
.session-list { display: grid; gap: 10px; margin-top: 18px; }
.session { padding: 16px; border: 1px solid #35312b; border-radius: 12px; background: #181612; }
.session h4, .session p { margin: 0 0 8px; }
.session a { color: #9cafff; font-weight: 700; }
.session-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.availability { border-radius: 999px; padding: 5px 9px; font-size: 0.72rem; white-space: nowrap; background: #34302a; }
.availability.available { background: #123c2a; color: #7ee2ad; }
.availability.sold_out, .availability.unavailable { background: #4a2020; color: #ff9999; }
.availability.upcoming { background: #3e351c; color: #ffd77b; }
.monitor-card { margin-top: 18px; border-left-color: #ffa500; }
.monitor-list { display: grid; gap: 12px; margin-top: 20px; }
.monitor-item { padding: 18px; border: 1px solid #35312b; border-radius: 12px; background: #181612; }
.monitor-item h3, .monitor-item p { margin: 0 0 9px; }

@media (max-width: 560px) {
  .shell { padding: 36px 0; }
  .status-grid { grid-template-columns: 1fr; }
  .actions button { width: 100%; }
  .input-row, .event-heading { flex-direction: column; }
  .session-actions { align-items: flex-start; flex-direction: column; }
  .input-row button { width: 100%; }
}