/* =========================================================
   GLOBAL REVIEWER STYLES – Sky-Blue Theme
   ========================================================= */
body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: linear-gradient(135deg, #87CEEB, #B0E0E6, #E0F7FA);
  color: #222;
  margin: 0;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

/* =========================================================
   MAIN PAGE CONTAINER
   ========================================================= */
.page-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40px 50px;
  width: 90%;
  max-width: 900px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  text-align: center;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.page-container.fade-in-page { opacity: 1; transform: translateY(0); }

/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */
header h1 { color: #0057d8; font-size: 2.3rem; margin-bottom: 6px; }
.subtitle   { font-size: 1.05rem; color: #444; margin-bottom: 25px; }

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}
nav ul li a {
  background: #4682B4;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: .95rem;
  transition: .3s;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
nav ul li a:hover {
  background: #0057d8;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0,0,0,.22);
}

/* =========================================================
   SCORE CARD (PASS / FAIL)
   ========================================================= */
.score-card {
  background: linear-gradient(135deg,#e6f7ff,#f8fdff);
  border: 2px solid #87CEEB;
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
  font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.score-card.pass  { border-color:#28a745; background:linear-gradient(135deg,#d4edda,#f8fff9); }
.score-card.fail  { border-color:#dc3545; background:linear-gradient(135deg,#f8d7da,#fff5f5); }
.score-card strong { color:#0057d8; }

/* =========================================================
   QUESTION CARD
   ========================================================= */
.question-card {
  background:#fdfdfd;
  border-left:5px solid #87CEEB;
  border-radius:12px;
  padding:20px;
  margin:18px 0;
  text-align:left;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
  transition:.2s;
}
.question-card:hover { transform:translateX(5px); box-shadow:0 5px 15px rgba(0,0,0,.12); }
.question-card h3 { color:#0057d8; margin-top:0; font-size:1.2rem; }
.correct-answer {
  background:#d4edda;
  color:#155724;
  padding:10px;
  border-radius:8px;
  border-left:4px solid #28a745;
  font-weight:bold;
  margin:10px 0;
}
.explanation { font-style:italic; color:#555; font-size:.95rem; margin-top:8px; }

/* =========================================================
   FLOATING HOME BUTTON
   ========================================================= */
.home-button {
  position:fixed; bottom:25px; right:25px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; background:#007bff; color:#fff;
  font-weight:bold; font-size:1rem; border-radius:30px;
  text-decoration:none; box-shadow:0 4px 10px rgba(0,0,0,.2);
  transition:.3s; z-index:1000;
}
.home-button:hover { background:#0056b3; transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.3); }
.home-button.shrink { width:55px; height:55px; padding:0; border-radius:50%; font-size:1.4rem; gap:0; }
.home-button.shrink span { display:none; }

/* =========================================================
   FOOTER
   ========================================================= */
footer { margin-top:50px; font-size:.9rem; color:#555; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:600px){
  .page-container{padding:25px 20px;}
  nav ul{flex-direction:column;}
  nav ul li a{width:80%;margin:5px auto;}
}