body { font-family: 'Poppins', sans-serif; margin:0; padding:0; color:#373634; }
.screen { display:none; min-height:100vh; width:100%; padding:40px; box-sizing:border-box; position:relative; }
.active { display:block; animation: fade 0.5s; }
@keyframes fade { from{opacity:0;} to{opacity:1;} }
h1, h2 { color:#042690; margin-top:0; }
.btn { display:inline-block; padding:15px 30px; margin:20px 10px 0 10px; font-size:18px; border:none; border-radius:14px; cursor:pointer; color:#fff; box-shadow:0 6px 12px rgba(0,0,0,.15); }
.btn-next { background:#e78413; }
.btn-prev { background:#47bd3d; }
.btn-start { background:#042690; }
.progress { margin:20px 0 0; font-weight:600; color:#042690; }
.card { position:relative; z-index:1; background:rgba(255,255,255,0.94); padding:28px; border-radius:22px; box-shadow:0 20px 40px rgba(0,0,0,0.18); max-width:980px; margin:0 auto; text-align:center; }
.card ul, .card ol { text-align:left; display:inline-block; max-width:820px; }
.card img { max-width:100%; margin:16px auto; border:3px solid #47bd3d; border-radius:14px; display:block; }
.overlay { position:absolute; inset:0; background:rgba(4,38,144,0.25); pointer-events:none; z-index:0; }

.progress-bar {
  width: 100%;
  background: #ddd;
  border-radius: 10px;
  height: 16px;
  margin: 10px 0 20px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: #042690;
  transition: width 0.4s ease;
}
.progress-text {
  margin-top: 10px;
  font-weight: bold;
  color: #042690;
}