#login-screen {
  position: fixed; 
  inset: 0; 
  z-index: 2000;
  background: linear-gradient(135deg, #FFF8EC 0%, #F3E8D5 50%, #DCCCAC 100%);
  display: flex; 
  align-items: center; 
  justify-content: center;
}
#login-screen.hidden { 
  display: none; 
}
.login-box {
  background: white; 
  border-radius: var(--radius);
  padding: 40px 36px; 
  box-shadow: var(--shadow-lg);
  width: min(400px, 92vw); 
  text-align: center;
}
.login-logo { 
  font-size: 56px; 
  margin-bottom: 8px; 
}
.login-title { 
  font-size: 26px; 
  font-weight: 900; 
  margin-bottom: 4px; 
}
.login-sub { 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--text-soft); 
  margin-bottom: 28px; 
}
.login-field {
  width: 100%; 
  background: var(--blush); 
  border: 2px solid var(--rose);
  border-radius: 14px; 
  padding: 13px 16px; 
  margin-bottom: 12px;
  font-family: 'Nunito', sans-serif; 
  font-size: 16px; 
  font-weight: 600;
  color: var(--text); 
  outline: none; 
  text-align: left;
}
.login-field:focus { 
  border-color: var(--rose-dark); 
}
.login-btn {
  width: 100%; 
  background: var(--rose); 
  border: none; 
  border-radius: 14px;
  padding: 14px; 
  font-family: 'Nunito', sans-serif; 
  font-size: 17px; 
  font-weight: 800;
  color: var(--text); 
  cursor: pointer; 
  transition: all 0.2s; 
  margin-top: 4px;
}
.login-btn:hover { 
  background: var(--rose-dark); 
  transform: scale(1.02); 
}
.login-btn:disabled { 
  opacity: 0.6; 
  cursor: not-allowed; 
  transform: none; 
}
.login-error {
  background: #FFE0E8; 
  border-radius: 10px; 
  padding: 10px 14px;
  font-size: 14px; 
  font-weight: 700; 
  color: #C05070;
  margin-top: 12px; 
  display: none;
}
.login-error.visible { 
  display: block; 
}