* { box-sizing: border-box; font-family: "Segoe UI", Tahoma, sans-serif; }

body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(135deg, #6366f1, #3b82f6, #06b6d4);
    display: flex; align-items: center; justify-content: center;
}

.login-container {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(14px);
    border-radius: 18px;
    padding: 36px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 25px 45px rgba(0,0,0,0.25);
    animation: fadeIn 0.8s ease;
}

.error-message {
    display: none;
    color: #e02424; /* Red color */
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    margin: -0.5rem 0 1rem 0; /* Adjust spacing to fit between Title and Form */
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn { from {opacity:0; transform:translateY(25px);} to {opacity:1; transform:translateY(0);} }

h1 { text-align:center; margin-bottom:28px; color:#fff; font-weight:600; letter-spacing:0.5px; }

.input-group { margin-bottom:18px; }
.input-group label { display:block; margin-bottom:6px; font-size:14px; color:#e5e7eb; }

.input-group input {
    width:100%; padding:13px 15px; border-radius:12px; border:none;
    outline:none; font-size:14px; background: rgba(255,255,255,0.9);
}
.input-group input:focus { box-shadow:0 0 0 2px rgba(99,102,241,0.7); }

.password-wrapper { position:relative; }
.toggle-password {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    border:none; background:none; cursor:pointer; padding:0;
}
.eye {
    display:inline-block;
    width:18px; height:18px;
    background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23000" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l22 22M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12Z"/></svg>') no-repeat center;
    background-size: contain;
}
.eye.eye-open {
    background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23000" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12Z"/><circle cx="12" cy="12" r="3"/></svg>') no-repeat center;
    background-size: contain;
}

.login-btn {
    width:100%; padding:13px; margin-top:10px; border:none; border-radius:14px;
    background: linear-gradient(135deg,#6366f1,#3b82f6);
    color:#fff; font-size:15px; font-weight:500; cursor:pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.login-btn:hover { transform:translateY(-2px); box-shadow:0 12px 22px rgba(0,0,0,0.3); }

.extras { margin-top:18px; display:flex; justify-content:flex-start; font-size:13px; }
.extras a { color:#e0e7ff; text-decoration:none; }
.extras a:hover { text-decoration:underline; }

.footer { margin-top:25px; text-align:center; font-size:13px; color:#e5e7eb; }
.footer a { color:#fff; font-weight:500; text-decoration:none; }
.footer a:hover { text-decoration:underline; }