/* Login — Spotify dark theme */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:#121212; padding:24px;
}
.login-card{
  background:#181818; width:100%; max-width:400px; padding:48px 40px;
  border-radius:8px; box-shadow:0 24px 64px rgba(0,0,0,0.7);
}
.brand{
  display:flex; align-items:center; gap:10px; margin-bottom:24px;
}
.brand .mark{
  width:36px; height:36px; background:#1ed760; border-radius:8px; color:#000;
  font-weight:900; font-size:18px; display:flex; align-items:center; justify-content:center;
}
.brand .name{ font-size:20px; font-weight:900; color:#fff; letter-spacing:-0.5px;}
.login-card h2{ color:#fff; font-size:26px; margin-bottom:8px; font-weight:900;}
.login-card p.sub{ color:#b3b3b3; font-size:14px; margin-bottom:32px;}
.form-group{ margin-bottom:20px;}
.form-group label{
  display:block; font-size:12px; font-weight:800; color:#b3b3b3;
  margin-bottom:8px; text-transform:uppercase; letter-spacing:0.4px;
}
.form-group input{
  width:100%; padding:14px 16px; font-size:15px; background:#000;
  border:1px solid #282828; border-radius:4px; color:#fff;
}
.form-group input:focus{ border-color:#1ed760; background:#121212; outline:none;}
.btn-login{
  width:100%; padding:14px; background:#1ed760; color:#000; border:none;
  border-radius:4px; font-size:15px; font-weight:700; margin-top:8px;
}
.btn-login:hover{ background:#1aa34a; }
.btn-login:active{ transform:scale(0.98);}
.cred{ margin-top:24px; text-align:center; color:#b3b3b3; font-size:13px;}
.cred b{ color:#fff; }
.error{
  color:#ff4d4d; background:#2a1a1a; border:1px solid #4a1a1a;
  padding:12px; border-radius:4px; margin-bottom:20px; font-size:13px; font-weight:700;
}