*{
    box-sizing:border-box;
}

/*Center Card*/
.login-container {
    width: 100%;
    max-width:440px;
    padding: 42px;
    text-align: center;
}

/* Title */
.logo {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    color: var(--text-color);
}

.tagline{
    margin:12px 0 30px;
    color:var(--muted-text);
    font-size:1rem;
}

/* Inputs */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form input{
    width:100%;
    padding:16px 18px;
    border-radius:16px;
    border:2px solid var(--border-color);
    outline:none;
    background:var(--surface-color);
    color:var(--text-color);
    font-size:16px;
    transition:.2s;
}

.login-form input:focus {
    border-color:var(--primary-color);
    box-shadow:
         0 0 0 4px color-mix(
            in srgb,
            var(--primary-color),
            transparent 85%
        );
}

/* Button */
.login-form button[type="submit"]{
    width:100%;
    padding:14px;
    border:none;
    border-radius:999px;
    background:var(--primary-color);
    color:var(--white);
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.login-form button[type="submit"]:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
}

/*Register Link*/
.register-text{
    margin-top:22px;
    color:var(--muted-text);
}

a{
    color:var(--primary-color);
    text-decoration:none;
    font-weight:600;
}

a:hover{
    text-decoration:underline;
}

.guest-divider {
    margin:18px 0;
    color:var(--footer-muted);
    font-size:13px;
}

.guest-button{
    display:block;
    padding:14px;
    border-radius:999px;
    border:2px solid var(--border-color);
    background:var(--surface-color);
    color:var(--primary-hover);
    font-weight:700;
    text-decoration:none;
    transition:.2s;
}

.guest-button:hover{
    background:var(--secondary-background);
    border-color:var(--primary-color);
}

.auth-layout {
    min-height:
        calc(100vh - 80px);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:20px 20px;
}

/*Login Error Message*/
.error-message{
    margin-bottom:20px;
    padding:12px 16px;
    background:var(--danger-background);
    border:1px solid var(--danger-border);
    border-radius:12px;
    color:var(--danger-text);
    font-weight:600;
    text-align:center;
}

.success-message {
    color:var(--success-text);
    background:var(--success-background);
    border:1px solid var(--success-border);
    padding:12px;
    border-radius:12px;
    margin-bottom:15px;
    font-weight:600;
    text-align:center;
}

/*Forgot Password*/
.forgot-password{
    margin:16px 0;
}

.forgot-password a{
    font-size:15px;
}

.forgot-password a:hover{
    text-decoration:underline;
}

.password-input-wrapper{
    position:relative;
    width:100%;
}

.password-input-wrapper input {
    padding-right:55px;
}

.toggle-password {
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
}

.eye-icon {
    width:22px;
    height:22px;
    fill:none;
    stroke:var(--muted-text);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:.2s;
    pointer-events:none;
}

.eye-slash {
    opacity:0;
    transition:.2s;
}

.toggle-password.active .eye-slash {
    opacity:1;
}

.toggle-password:hover .eye-icon {
    stroke:var(--primary-color);
}

.eye-icon.closed .eye-slash{
    opacity:1;
}

.eye-icon.closed .eye-open{
    opacity:.35;
}

@media (max-width: 600px) {
    .auth-layout {
        min-height: auto;
        padding: 20px 12px 40px;
    }

    .login-container {
        width: 100%;
        max-width: 440px;
        padding: 28px 18px;
    }

    .logo {
        font-size: 30px;
        line-height: 1.2;
    }

    .tagline {
        margin: 10px 0 24px;
        font-size: .95rem;
        line-height: 1.5;
    }

    .login-form {
        gap: 10px;
    }

    .login-form input {
        padding: 14px 16px;
        border-radius: 14px;
    }

    .password-input-wrapper input {
        padding-right: 54px;
    }

    .toggle-password {
        right: 5px;
        width: 44px;
        height: 44px;
    }

    .login-form button[type="submit"] {
        min-height: 48px;
        padding: 13px 16px;
    }

    .forgot-password {
        margin: 14px 0;
    }

    .guest-divider {
        margin: 16px 0;
    }

    .guest-button {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
    }

    .register-text {
        margin-top: 20px;
        line-height: 1.5;
    }
}