/* RESET & BODY */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',sans-serif;background:#f4f6f8;color:#333;}
header{background:#002366;color:#fff;padding:20px;text-align:center;box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.hero{max-width:700px;margin:50px auto;padding:30px;background:#fff;border-radius:15px;box-shadow:0 8px 20px rgba(0,0,0,0.1);text-align:center;opacity:0;transition:opacity 1s;}
.login-section{max-width:400px;margin:30px auto;padding:30px;background:#fff;border-radius:15px;box-shadow:0 8px 20px rgba(0,0,0,0.1);opacity:0;transition:opacity 1s;}
.fade-in{opacity:1;}
.login-form{display:flex;flex-direction:column;gap:15px;}
.login-form input{padding:10px;border-radius:5px;border:1px solid #ccc;font-size:1rem;transition:0.3s;}
.login-form input:focus{border-color:#004aad;outline:none;box-shadow:0 0 10px rgba(0,74,173,0.3);}
.login-form button{padding:10px;background:#004aad;color:#fff;font-weight:bold;border:none;border-radius:5px;cursor:pointer;transition:0.3s;}
.login-form button:hover{background:#ff0000;}
.alert{padding:10px;background:#ffc107;color:#000;border-radius:5px;margin-bottom:15px;text-align:center;animation:shake 0.5s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}

/* PROGRESS BAR */
.progress-container{background:#eee;border-radius:10px;height:15px;margin:15px 0;overflow:hidden;}
.progress-bar{height:15px;border-radius:10px 0 0 10px;background:#004aad;width:0%;transition:width 1s ease;}

/* FLAG & BADGE */
.flag-box{background:#28a745;color:#fff;padding:20px;border-radius:10px;font-weight:bold;font-size:1.2rem;margin:15px 0;}
.badge{display:inline-block;padding:10px 15px;border-radius:20px;color:#fff;font-weight:bold;margin:10px 0;}
.badge.success{background:#28a745;animation:glow 1.5s infinite;}
@keyframes glow{0%{box-shadow:0 0 5px #28a745;}50%{box-shadow:0 0 20px #28a745;}100%{box-shadow:0 0 5px #28a745;}}

/* FOOTER */
footer{text-align:center;padding:20px;background:#002366;color:#fff;margin-top:50px;}

/* HINT */
.hint{margin-top:15px;font-size:0.9rem;color:#555;text-align:center;}

/* RESPONSIVE */
@media(max-width:767px){
.hero, .login-section{margin:30px 10px;padding:20px;}
}