/* === Global === */
* { box-sizing: border-box; font-family: 'Roboto', sans-serif; }
body {
  margin: 0; padding: 0;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  display: flex; justify-content: center; align-items: center;
  height: 100vh; overflow: hidden;
}
.logo img{
   width: 70px; height: 70px; vertical-align: middle;
}

.tagline{
    font-size:14px;
    opacity:0.8;
    margin-bottom:20px;
}

.subtext{
    font-size:14px;
    opacity:0.7;
    margin-bottom:20px;
}
.form-container.modern {
  background-color: #fff; padding: 40px 30px;
  border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  width: 100%; text-align:center; max-width: 300px;
  opacity: 0; transform: translateY(-30px);
  animation: fadeInUp 0.8s forwards;
}
@keyframes fadeInUp { to { opacity:1; transform:translateY(0); } }
.form-container.modern h2 { text-align:center; margin-bottom:25px; color:#333; }

/* === Form Inputs === */
.form-group { position: relative; margin-bottom:25px; }
.form-group .icon { position: absolute; top:50%; left:12px; transform:translateY(-50%); color:#999; transition:0.3s; }
.form-group input {
  width:100%; padding:14px 12px 14px 40px; border:1px solid #ccc; border-radius:8px;
  font-size:16px; transition:0.3s;
}
.form-group input:focus { border-color:#2575fc; box-shadow:0 0 8px rgba(37,117,252,0.3); outline:none; }
.form-group label {
  position:absolute; left:40px; top:14px; color:#999; font-size:16px; pointer-events:none;
  transition:0.3s ease;
}
.form-group input:focus + label,
.form-group input.filled + label { top:-10px; font-size:12px; color:#2575fc; }

.toggle-password { position:absolute; top:50%; right:12px; transform:translateY(-50%); cursor:pointer; color:#999; transition:0.3s; }
.toggle-password:hover { color:#2575fc; }

.error { color:red; font-size:13px; margin-top:5px; }
.password-strength { font-size:13px; margin-top:5px; }

/* Password strength colors */
.password-weak { color:#dc2626; font-weight:600; }
.password-medium { color:#facc15; font-weight:600; }
.password-strong { color:#22c55e; font-weight:600; }

.submit-btn {
  width:100%; padding:14px; background:#2575fc; color:#fff; font-size:16px; font-weight:500;
  border:none; border-radius:10px; cursor:pointer; transition:0.3s;
}
.submit-btn:hover { background:#1a5bd8; transform:scale(1.03); }

.login-link { text-align:center; margin-top:15px; font-size:14px; }
.login-link a { color:#2575fc; text-decoration:none; }
.login-link a:hover { text-decoration:underline; }

.help-links { text-align:right; margin-top:-10px; margin-bottom:10px; }
.forgot-link { font-size:13px; color:#2575fc; text-decoration:none; }
.forgot-link:hover { text-decoration:underline; }

/* Toast */
#toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
  background:#333;color:#fff;padding:12px 20px;border-radius:8px;opacity:0;pointer-events:none;
  transition:0.3s; z-index:100; font-size:14px; }
#toast.show { opacity:1; pointer-events:auto; }