/* Hide browser built-in password reveal button */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

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

:root{
  --bg:       #0f0f1a;
  --bg2:      #1a1a2e;
  --bg3:      #16213e;
  --border:   #2a2a4e;
  --gold:     #ffd200;
  --gold2:    #f7971e;
  --text:     #e0e0e0;
  --muted:    #888;
  --green:    #27ae60;
  --red:      #c0392b;
  --orange:   #e67e22;
  --shadow:   0 8px 32px rgba(0,0,0,.5);
  --shadow-lg:0 16px 48px rgba(0,0,0,.6);
  --glow:     0 0 20px rgba(255,210,0,.25);
}

body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
}

/* ── Login page ── */
.login-bg{
  background:var(--bg);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.login-container{width:100%;max-width:450px;padding:20px;position:relative;z-index:1;}
.login-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow-lg),var(--glow);
  padding:52px 40px;
  text-align:center;
  animation:slideUp .5s ease-out;
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}

/* Header */
.login-header{margin-bottom:36px;}
.quiz-icon{
  font-size:58px;color:var(--gold);display:block;
  margin-bottom:16px;
  animation:breathing 2.5s infinite;
  filter:drop-shadow(0 0 12px rgba(255,210,0,.5));
}
@keyframes breathing{
  0%,100%{transform:scale(1);   filter:drop-shadow(0 0 12px rgba(255,210,0,.4));}
  40%    {transform:scale(1.12);filter:drop-shadow(0 0 22px rgba(255,210,0,.7));}
  60%    {transform:scale(.96); filter:drop-shadow(0 0 8px  rgba(255,210,0,.3));}
}
.login-header h1{font-size:30px;font-weight:800;color:var(--gold);letter-spacing:1px;margin-bottom:6px;text-shadow:0 0 20px rgba(255,210,0,.3);}
.tagline{color:var(--muted);font-size:13px;}
.star-icon{color:var(--gold);font-size:10px;}

/* Inputs */
.login-form{margin-bottom:20px;}
.input-group{position:relative;margin-bottom:16px;}
.input-group i{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:17px;
}
.input-group input,
.select-input{
  width:100%;padding:13px 15px 13px 48px;
  background:var(--bg3);
  border:2px solid var(--border);
  border-radius:10px;
  color:var(--text);
  font-size:15px;
  transition:border-color .2s,box-shadow .2s;
  appearance:none;
}
.input-group input:focus,
.select-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,210,0,.12);}
.input-group input::placeholder{color:#555;}

/* Buttons */
.btn-primary.btn-large{
  width:100%;padding:14px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a1a1a;border:none;border-radius:10px;
  font-size:1rem;font-weight:800;cursor:pointer;
  margin-top:8px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .2s;
  box-shadow:0 4px 16px rgba(255,210,0,.25);
}
.btn-primary.btn-large:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(255,210,0,.4);
}

/* Divider */
.divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:#444;font-size:.82rem;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}

/* Register button */
.btn-register{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px;
  background:transparent;
  border:2px solid var(--gold);
  color:var(--gold);
  border-radius:10px;
  font-size:.95rem;font-weight:700;
  text-decoration:none;
  transition:all .2s;
}
.btn-register:hover{background:var(--gold);color:#1a1a1a;}

/* Alerts */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.88rem;text-align:left;}
.alert-error  {background:rgba(192,57,43,.18);border:1px solid var(--red);  color:#e74c3c;}
.alert-success{background:rgba(39,174,96,.18); border:1px solid var(--green);color:#2ecc71;}

/* Footer */
.login-footer{color:var(--muted);margin-top:20px;font-size:.85rem;}
.link-accent{color:var(--gold);text-decoration:none;font-weight:700;}
.link-accent:hover{text-decoration:underline;}

/* Particles */
.particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.particles span{
  position:absolute;display:block;
  width:5px;height:5px;
  background:rgba(255,210,0,.12);
  border-radius:50%;
  animation:float 8s infinite;
}
.particles span:nth-child(1){left:10%;animation-delay:0s;  animation-duration:7s;}
.particles span:nth-child(2){left:25%;animation-delay:1s;  animation-duration:9s;}
.particles span:nth-child(3){left:40%;animation-delay:2s;  animation-duration:6s;}
.particles span:nth-child(4){left:55%;animation-delay:3s;  animation-duration:8s;}
.particles span:nth-child(5){left:70%;animation-delay:1.5s;animation-duration:10s;}
.particles span:nth-child(6){left:80%;animation-delay:.5s; animation-duration:7s;}
.particles span:nth-child(7){left:90%;animation-delay:2.5s;animation-duration:9s;}
.particles span:nth-child(8){left:5%; animation-delay:4s;  animation-duration:8s;}
@keyframes float{
  0%  {bottom:-10px;opacity:0;transform:scale(.8);}
  10% {opacity:1;}
  90% {opacity:.5;}
  100%{bottom:110vh;opacity:0;transform:scale(1.2);}
}

/* ── Mobile scroll fix ── */
@media (max-width: 600px) {
  html { overflow-y: auto !important; height: auto !important; }
  body { overflow-y: auto !important; height: auto !important; }
  .login-bg {
    overflow: visible !important;
    overflow-y: auto !important;
    min-height: 100vh !important;
    height: auto !important;
    align-items: flex-start !important;
    padding: 16px 0 40px !important;
  }
  .login-container {
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .login-card {
    padding: 24px 16px 20px !important;
    border-radius: 14px !important;
  }
  .input-group input,
  .select-input {
    font-size: 16px !important;
  }
}