:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101418; color: #f4f7f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #26323a, #101418 55%); }
.centered { display: grid; place-items: center; padding: 1rem; }
.card { width: min(100%, 25rem); padding: 2rem; border: 1px solid #3a4952; border-radius: 1rem; background: #182026; box-shadow: 0 1rem 3rem #0008; }
h1 { margin-top: 0; }
label { display: grid; gap: .4rem; margin: 1rem 0; font-weight: 650; }
input { width: 100%; padding: .8rem; border: 1px solid #60717b; border-radius: .5rem; background: #0e1316; color: white; font: inherit; }
button { border: 0; border-radius: .5rem; padding: .75rem 1rem; background: #57b7ff; color: #07131b; font: inherit; font-weight: 750; cursor: pointer; }
button.secondary { padding: .5rem .8rem; background: #dce8ef; }
.login-card button { width: 100%; }
.muted, .schedule { color: #bdc9cf; }
.schedule { font-size: .9rem; }
.error { padding: .75rem; border-radius: .5rem; background: #5c1b22; color: #ffd9dd; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1rem, calc((100% - 70rem) / 2)); background: #11191ecc; border-bottom: 1px solid #344149; }
.badge { margin-left: .6rem; padding: .2rem .45rem; border-radius: 99rem; background: #344a57; color: #d8ebf4; font-size: .75rem; text-transform: uppercase; }
.viewer { width: min(100%, 70rem); margin: 0 auto; padding: 1rem; }
video { display: block; width: 100%; max-height: calc(100vh - 10rem); background: black; border-radius: .75rem; box-shadow: 0 .75rem 2rem #0008; }