body {font-family: 'Segoe UI', Roboto, Arial, sans-serif; background: #f4f4f6; margin: 0; color: #222;}
.header {text-align: center; background: #0b0b0b; color: #ffd700; padding: 24px 12px;}
.header .logo {max-width: 140px; display: block; margin: 0 auto 8px;}
.academy-name {font-size: 28px; font-weight: 700; margin: 0;}
.student-info, .instructions, .quiz-container, .access-section {margin: 20px auto; max-width: 820px; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 6px 18px rgba(11,11,11,0.06);}
.student-info h2, .instructions h2, .access-section h2 {margin-top: 0;}
label {display: block; margin: 12px 0;}
input[type=text], input[type=email], input[type=password] {width: 100%; padding: 10px; margin-top: 6px; border: 1px solid #d7d7d7; border-radius: 6px;}
.question {padding: 14px 0; border-bottom: 1px solid #eee;}
.question p {margin: 0 0 8px 0; font-weight: 600;}
.question label {display: block; margin: 6px 0; font-weight: 400;}
button {display: block; margin: 18px auto 0; background: #0b0b0b; color: #ffd700; border: none; padding: 12px 22px; border-radius: 8px; font-size: 16px; cursor: pointer;}
button:hover {opacity: 0.95;}
.timer {text-align:center; font-size:20px; font-weight:bold; margin:10px auto; color:#b00;}
.hidden {display:none;}
.error {color:red; text-align:center; margin-top:10px;}


.video-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.video-card {
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  background: #111;
  width: 320px;
}

.video-card video {
  width: 100%;
  border-radius: 8px;
  display: block;
  margin-bottom: 10px;
}