:root { font-family: system-ui, sans-serif; color: #e8edf7; background: #0c1220; line-height: 1.55; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header, main, footer { max-width: 1500px; margin: auto; padding: 24px clamp(16px, 3vw, 48px); }
header { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid #29344a; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -.04em; }
h1, h2, p { margin: 0 0 12px; }
h2 { font-size: 1.17rem; }
.eyebrow { color: #aac5ff; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; margin-bottom: 4px; }
.badge { font-size: .82rem; color: #b8efd5; background: #142c29; padding: 7px 12px; border-radius: 30px; text-align: center; }
.card { background: #141e30; border: 1px solid #2d3b54; border-radius: 18px; padding: clamp(18px, 2vw, 28px); }
.narrow { max-width: 480px; margin: 20px auto 60px; }
.muted, footer { color: #b0bed4; font-size: .87rem; }
label { display: block; font-weight: 600; margin: 18px 0 6px; }
input { width: 100%; padding: 13px; border: 1px solid #64748b; border-radius: 9px; font: inherit; background: #0d1423; color: #fff; }
button { font: inherit; font-size: .91rem; font-weight: 650; min-height: 44px; padding: 10px 16px; background: #b8efd5; border: 1px solid transparent; border-radius: 9px; color: #102920; cursor: pointer; }
button.secondary { color: #e8edf7; border-color: #657794; background: #1c2a42; }
button.danger { color: #ffded8; border-color: #b48480; background: #40272e; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:hover:not(:disabled) { filter: brightness(1.15); }
:focus-visible { outline: 3px solid #fbd584; outline-offset: 4px; }
form button { width: 100%; margin: 24px 0 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.room-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.room-bar p { margin: 0; }
.separated { border-top: 1px solid #344158; padding-top: 18px; margin: 20px 0 14px; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 16px; }
#stream-panel { border: 1px solid #43526c; border-radius: 14px; overflow: hidden; background: #000; }
iframe { width: 100%; height: min(78vh, 920px); min-height: 380px; display: block; border: 0; }
#notice { color: #b8efd5; overflow-wrap: anywhere; }
#notice:empty { display: none; }
#notice.error, .warning { color: #ffd1a8; }
.seats { list-style: none; padding: 0; margin: 0; }
.seats li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #344158; }
.seats li span { overflow-wrap: anywhere; }
dl { margin: 20px 0; }
dl div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
dd { margin: 0; text-align: right; }
kbd { color: #fff; background: #243451; padding: 2px 5px; border: 1px solid #586b8b; border-radius: 4px; font: .85rem ui-monospace, monospace; }
footer { text-align: center; }
@media (max-width: 640px) {
  header { align-items: flex-start; }
  .room-bar { display: block; }
  .room-bar .actions { margin-top: 18px; }
  .actions button { flex: 1 1 auto; }
  iframe { height: 75dvh; min-height: 420px; }
}