:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin:0;
  color:#f5f5f7;
  background:
    radial-gradient(circle at top, rgba(180,0,0,.18), transparent 38%),
    linear-gradient(180deg, #090909 0%, #0d0b0d 100%);
}
header, main { max-width:980px; margin:auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:22px 18px 10px; }
.topbar h1 { margin:0; font-size:30px; letter-spacing:1px; }
.topbar p { margin:4px 0 0; color:#c94747; font-weight:600; }
main { padding:12px 18px 48px; }
.card,.recording,.empty,.loginbox {
  background:rgba(20,18,22,.92);
  border:1px solid rgba(255,50,50,.18);
  border-radius:22px;
  box-shadow: 0 0 0 1px rgba(255,0,0,.05), 0 15px 35px rgba(0,0,0,.35);
}
.banner { overflow:hidden; margin-bottom:22px; }
.banner img, .loginbanner {
  width:100%;
  display:block;
  border-radius:20px 20px 0 0;
}
.bannertext { padding:18px; }
.bannertext h2 { margin:0 0 6px; font-size:28px; }
.bannertext p { margin:0; color:#b8b8c2; }
.hero { padding:18px; margin-bottom:28px; }
.hero h2, .sectionhead h2 { margin-top:0; }
video {
  width:100%;
  background:#000;
  border-radius:14px;
  margin-top:10px;
  max-height:60vh;
  border:1px solid rgba(255,70,70,.2);
}
.primary {
  width:100%;
  border:0;
  border-radius:14px;
  padding:15px 18px;
  font-size:17px;
  font-weight:700;
  margin-top:14px;
  background:linear-gradient(180deg, #ff3c3c 0%, #d11515 100%);
  color:#fff;
  box-shadow: 0 8px 22px rgba(255,0,0,.22);
}
.primary:hover { filter: brightness(1.05); cursor:pointer; }
.small { color:#ddd; text-decoration:none; font-size:14px; }
.muted { color:#969ca7; margin-top:8px; min-height:20px; }
.grid { display:grid; grid-template-columns:1fr; gap:16px; }
.recording { padding:14px; }
.thumb {
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,60,60,.25), rgba(255,60,60,.1));
  float:left; margin-right:12px; border:1px solid rgba(255,70,70,.18);
}
.meta { min-height:44px; display:flex; flex-direction:column; justify-content:center; }
.meta span { color:#969ca7; font-size:13px; margin-top:3px; }
.empty { text-align:center; padding:34px 20px; color:#bbb; }
.empty .big { font-size:48px; margin-bottom:8px; }
.loginbody { min-height:100vh; display:grid; place-items:center; padding:18px; }
.loginwrap { width:100%; max-width:520px; padding:0; }
.loginbox { padding:0 0 24px; text-align:center; overflow:hidden; }
.loginbox h1 { margin:18px 0 8px; padding: 0 20px; }
.loginbox p { padding:0 20px; color:#c8c8d0; }
.loginbox form { padding:0 20px; }
.loginbox input {
  width:100%; border-radius:14px; padding:15px; font-size:20px; text-align:center;
  border:1px solid #4a2323; background:#0f1115; color:#fff;
}
.error { color:#ff8b8b; padding: 0 20px; }
.sectionhead { display:flex; justify-content:space-between; align-items:center; }
@media (min-width:700px) { .grid { grid-template-columns:1fr 1fr; } }