:root {
  --gold: #c7a15a;
  --gold-light: #e2c98f;
  --black: #080808;
  --panel: rgba(7, 7, 7, .84);
  --text: #f7f4ee;
  --muted: #c6c0b6;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Arial, Helvetica, sans-serif; background: var(--black); color: var(--text); }
body { min-height: 100vh; }
.login-page {
  background-image: url('got-it-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.overlay { position: fixed; inset: 0; background: radial-gradient(circle at center, rgba(0,0,0,.28), rgba(0,0,0,.78)); }
.login-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card { width: min(430px, 100%); background: var(--panel); border: 1px solid var(--gold); border-radius: 18px; padding: 34px; box-shadow: 0 24px 80px rgba(0,0,0,.55); backdrop-filter: blur(10px); }
.brand { color: var(--gold-light); font-weight: 800; letter-spacing: .22em; font-size: 14px; }
h1 { margin: 14px 0 8px; font-size: clamp(28px, 5vw, 40px); }
.subtitle { color: var(--muted); margin: 0 0 26px; line-height: 1.5; }
label { display: block; margin: 15px 0 7px; font-size: 14px; color: #e6e0d5; }
input { width: 100%; padding: 14px 15px; border: 1px solid #4e473d; border-radius: 10px; background: #111; color: white; font-size: 16px; outline: none; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199,161,90,.14); }
button { width: 100%; margin-top: 22px; padding: 14px 18px; border: 1px solid var(--gold); border-radius: 10px; background: var(--gold); color: #0b0b0b; font-weight: 800; font-size: 16px; cursor: pointer; }
button:hover { filter: brightness(1.08); }
.error { margin: 16px 0; padding: 11px 13px; border-radius: 9px; background: rgba(150,35,35,.22); border: 1px solid rgba(255,120,120,.45); color: #ffd6d6; font-size: 14px; }
.watch-page { background: #050505; }
.watch-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; border-bottom: 1px solid #25211b; }
.logout { color: var(--gold-light); text-decoration: none; font-size: 14px; }
.video-shell { min-height: calc(100vh - 70px); display: grid; align-content: center; justify-items: center; padding: 28px 4vw; }
.video-frame { position: relative; width: min(1180px, 100%); aspect-ratio: 16 / 9; background: #000; border: 1px solid #2e281f; box-shadow: 0 25px 85px rgba(0,0,0,.5); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-note { color: #77716a; font-size: 12px; margin-top: 14px; letter-spacing: .04em; }
@media (max-width: 600px) { .login-card { padding: 26px 22px; } .watch-header { padding: 0 20px; } .video-shell { padding: 20px 0; } .video-note { padding: 0 18px; text-align: center; } }