:root{
  --primary:#4CAF93;
  --bg-light:#f7f9fc;
  --bg-dark:#1e293b;
  --card-light:#fff;
  --card-dark:#2c3e50;
  --text-light:#1e293b;
  --text-dark:#f1f5f9;
  --subtext-light:#64748b;
  --subtext-dark:#cbd5e1;
}

/* Base */
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--bg-light);
  color:var(--text-light);
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  transition:0.3s;
}

/* Card */
.login-card{
  background:var(--card-light);
  padding:40px 30px;
  border-radius:20px;
  width:100%;
  max-width:400px;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* Title */
.login-card h2{
  text-align:center;
  color:var(--primary);
  margin-bottom:25px;
}

/* Inputs */
.form-control{
  border-radius:12px;
  padding:12px;
}

/* Password wrapper fix */
.position-relative {
  position: relative;
}

/* Eye icon FIXED */
.toggle-password {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
  z-index: 5;
  display: flex;
  align-items: center;
}

/* Add spacing for icon */
#password {
  padding-right: 45px;
}

/* Login Button */
.btn-login{
  background:var(--primary);
  color:white;
  border-radius:999px;
  padding:12px;
  width:100%;
  font-weight:600;
}
.btn-login:hover{
  background:#3a846e;
  color:#fff;
}

/* Divider */
.divider{
  text-align:center;
  margin:20px 0;
  position:relative;
  font-size:0.85rem;
  color:var(--subtext-light);
}
.divider::before,
.divider::after{
  content:"";
  position:absolute;
  top:50%;
  width:40%;
  height:1px;
  background:#ddd;
}
.divider::before{left:0;}
.divider::after{right:0;}

/* Google Button */
.btn-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid #ddd;
  padding:10px;
  border-radius:999px;
  cursor:pointer;
}

/* DARK MODE */
.dark-mode{
  background:var(--bg-dark);
  color:var(--text-dark);
}

.dark-mode .login-card{
  background:rgba(44,62,80,0.9);
}

.dark-mode .form-control{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.2);
  color:var(--text-dark);
}

.dark-mode .form-control::placeholder{
  color:var(--subtext-dark);
}

/* ERROR STYLE (NO ICON) */
.form-control.is-invalid {
  background-image: none !important;
  border: 2px solid #dc3545 !important;
  box-shadow: none !important;
}

/* error text */
.text-danger {
  font-size: 13px;
}

.zen-dots-regular {
  font-family: "Zen Dots", sans-serif;
  font-weight: 400;
  font-style: normal;
}