:root {
  color-scheme: light dark;
  --ink: #0b0e14;
  --paper: #eef1f5;
  --surface: #ffffff;
  --line: #d7dde6;
  --muted: #5b6472;
  --accent: #ffb703;
  --accent-ink: #24190a;
  --live: #e5383b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1f5;
    --paper: #0b0e14;
    --surface: #12161f;
    --line: #232b38;
    --muted: #8b93a1;
    --accent: #ffb703;
    --accent-ink: #0b0e14;
    --live: #ff5a5f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 "Space Grotesk", sans-serif;
}

header { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 2rem; }
header a {
  color: var(--muted); text-decoration: none;
  font: 500 .8rem/1 "JetBrains Mono", monospace; letter-spacing: .02em;
}
header a:hover { color: var(--ink); }

h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
h2 {
  font: 700 .75rem/1 "JetBrains Mono", monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .75rem;
}

main { display: grid; gap: 1rem; }

.card {
  display: block; padding: 1.1rem 1.25rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); text-decoration: none; color: inherit;
  opacity: 0; transform: translateY(6px);
  animation: reveal .4s ease forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.card h2 {
  font: 700 1.05rem/1.3 "Space Grotesk", sans-serif;
  text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 .5rem;
}
.card:hover { border-color: var(--accent); }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; transform: none; animation: none; }
}

.row {
  display: flex; gap: .85rem; align-items: center; flex-wrap: wrap;
  padding: .75rem 0; border-bottom: 1px solid var(--line);
}

video { width: 100%; background: #000; border-radius: 10px; }

.badge {
  font: 700 .68rem/1 "JetBrains Mono", monospace; letter-spacing: .06em;
  text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px;
  background: var(--line); color: var(--muted);
}
.badge.live { background: var(--live); color: #fff; }
.badge.off { background: var(--line); color: var(--muted); }

.muted { color: var(--muted); }
.error { color: var(--live); }

input, select, button {
  font: 500 .88rem/1 "JetBrains Mono", monospace;
  padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink);
}
button { cursor: pointer; font-weight: 700; }
button:hover { border-color: var(--accent); }
button.primary, #create, #save-token {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

.publish {
  white-space: pre-wrap; word-break: break-all; margin: .5rem 0 0;
  padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface);
  font: 400 .82rem/1.5 "JetBrains Mono", monospace;
  min-height: 0;
}
.publish:empty { display: none; padding: 0; border: 0; }