.login-hero{
  padding: 40px 20px;
  text-align:center;
}

.login-msg-wrap{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.login-wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:center;
  max-width:900px;
  margin:60px auto;
  padding:0 20px;
}

.login-box{
  background:#1a1a2e;
  border:1px solid #2a3555;
  border-radius:12px;
  padding:40px 30px;
  text-align:center;
  box-shadow:0 15px 40px rgba(0,0,0,0.8);
  flex:1;
  min-width:300px;
}
.login-box.admin{ border-top:4px solid var(--dart-red); }
.login-box.player{ border-top:4px solid var(--dart-green); }

.login-icon{ font-size:3.5rem; margin-bottom:10px; }
.login-title{ color:#fff; margin-bottom:5px; text-transform:uppercase; letter-spacing:1px; }
.login-sub{ color:#888; font-size:.85rem; margin-bottom:25px; }

.error-box{
  background:rgba(227,41,46,.15);
  border-left:4px solid var(--dart-red);
  padding:10px;
  border-radius:4px;
  margin-bottom:20px;
  color:#fff;
  font-weight:bold;
  width:100%;
  text-align:center;
}

.login-select{
  margin-bottom:15px;
  text-align:center;
}
.login-pin{
  text-align:center;
  font-size:1.2rem;
  letter-spacing:5px;
  margin-bottom:20px;
}
.login-admin-pass{
  text-align:center;
  font-size:1.2rem;
  letter-spacing:3px;
  margin-bottom:20px;
  margin-top:60px;
}
.login-btn{
  width:100%;
  padding:15px;
}
.login-btn-admin{
  width:100%;
  padding:15px;
  background: linear-gradient(135deg, var(--dart-red), #9e191d);
  border-color:#c72529;
}

@media (max-width: 720px){
  .login-wrapper{
    gap:16px;
    margin:30px auto;
  }
  .login-box{
    min-width:unset;
    width:100%;
    padding:28px 20px;
  }
  .login-admin-pass{
    margin-top:20px;
  }
}
/* Light mode */
html[data-theme="light"] .login-box{
  background:#ffffff;
  border-color:#d6e1ef;
  box-shadow:0 10px 24px rgba(15,23,42,0.10);
}

html[data-theme="light"] .login-title{
  color:#0f172a;
}

html[data-theme="light"] .login-sub{
  color:#64748b;
}

html[data-theme="light"] .error-box{
  background:#fff1f2;
  border-left-color:#ef4444;
  color:#7f1d1d;
}

html[data-theme="light"] .login-box.admin{
  border-top-color:#ef4444;
}

html[data-theme="light"] .login-box.player{
  border-top-color:#16a34a;
}