*{margin:0;padding:0;box-sizing:border-box}

body{
  min-height:100vh;
  font-family:Segoe UI,system-ui;
  background:
    radial-gradient(circle at top left,#0f766e,transparent 40%),
    radial-gradient(circle at bottom right,#22c55e,transparent 40%),
    #020617;
  color:#e5e7eb;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* OVERLAY */
#overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(5px);
}

/* FORM */
#userForm{
  position:fixed;
  background:rgba(17,24,39,.9);
  padding:30px;
  border-radius:16px;
  z-index:10;
  text-align:center;
  width:320px;
}

#userForm h3{color:#4ade80;margin-bottom:15px}
#userForm input{
  width:100%;
  padding:12px;
  margin-bottom:12px;
  border-radius:10px;
  border:none;
  background:#020617;
  color:white;
}
#userForm button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,#22c55e,#4ade80);
  font-weight:700;
}

/* CARD */
.quiz-card{
  max-width:700px;
  width:100%;
  padding:35px;
  background:rgba(2,6,23,.75);
  backdrop-filter:blur(14px);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.7);
}

.quiz-title{
  text-align:center;
  color:#4ade80;
  margin-bottom:20px;
}

/* PROGRESS */
.progress-wrapper{margin-bottom:25px}
#progressText{font-size:.9rem;color:#94a3b8;margin-bottom:6px}
.progress-bar-bg{
  height:10px;
  background:#1f2937;
  border-radius:10px;
  overflow:hidden;
}
#progressBar{
  height:100%;
  width:0;
  background:linear-gradient(90deg,#22c55e,#4ade80);
  transition:.4s;
}

/* OPTIONS */
.opt-btn{
  width:100%;
  padding:14px;
  margin-bottom:12px;
  border-radius:14px;
  background:#020617;
  border:1px solid #334155;
  color:#e5e7eb;
  transition:.25s;
}
.opt-btn:hover{background:#064e3b}
.opt-btn.ok{background:#16a34a;color:#020617}
.opt-btn.no{background:#dc2626}

/* BUTTONS */
.buttons{display:flex;gap:15px;margin-top:20px}
.btn-next,.btn-skip{
  flex:1;
  padding:12px;
  border:none;
  border-radius:14px;
  font-weight:700;
}
.btn-next{background:#4ade80;color:#020617}
.btn-skip{background:#1f2937;color:white}

/* RESULT */
#resultContainer{text-align:center}
#scoreText{color:#4ade80;margin-bottom:15px}

.summary-item{
  background:#020617;
  padding:10px;
  margin-bottom:10px;
  border-left:4px solid #4ade80;
  border-radius:10px;
}

/* BADGE */
.badge-result{
  margin-top:20px;
  padding:14px;
  border-radius:14px;
  font-weight:800;
}
.gold{background:linear-gradient(135deg,#facc15,#fde047);color:#020617}
.silver{background:linear-gradient(135deg,#e5e7eb,#cbd5f5);color:#020617}
.bronze{background:linear-gradient(135deg,#fb923c,#f97316);color:#020617}

/* MOBILE */
@media(max-width:600px){
  .quiz-card{padding:22px}
  .buttons{flex-direction:column}
  .opt-btn{font-size:1.05rem;padding:16px}
}