*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--fs-base); }
body {
    font-family: var(--font-primary); color: var(--clr-text-main); background-color: var(--clr-background);
    line-height: var(--leading-normal); display: flex; justify-content: center; align-items: center; min-height: 100vh;
    padding: var(--spacing-lg); background-image: linear-gradient(120deg, var(--clr-primary-100) 0%, var(--clr-common-white) 100%);
    position: relative;
    overflow-x: hidden;
}
a { color: var(--clr-primary-500); text-decoration: none; transition: color var(--transition-duration-normal) ease; }
a:hover { color: var(--clr-accent-500); text-decoration: underline; }

.error-popup {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #dc3545;
    color: var(--clr-common-white);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    opacity: 0;
    transition: top var(--transition-duration-normal) var(--transition-timing-function),
                opacity var(--transition-duration-normal) ease-in-out;
    min-width: 250px;
    text-align: center;
    font-weight: 500;
}

.error-popup.show {
    top: 20px;
    opacity: 1;
}

.auth-container {
    background-color: var(--clr-common-white); padding: var(--spacing-xl) var(--spacing-2xl);
    border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg);
    max-width: 450px; width: 100%; text-align: center;
    animation: fadeInScaleUp 0.6s var(--transition-timing-function) forwards; opacity: 0; transform: scale(0.95);
    z-index: 1;
}
@keyframes fadeInScaleUp { to { opacity: 1; transform: scale(1); } }

.auth-logo {
    font-family: var(--font-secondary); font-size: var(--fs-3xl); font-weight: 800;
    color: var(--clr-primary-700); margin-bottom: var(--spacing-md);
}
.auth-logo span { color: var(--clr-accent-500); }

.auth-title {
    font-family: var(--font-secondary); font-size: var(--fs-2xl); font-weight: 700;
    color: var(--clr-secondary-900); margin-bottom: var(--spacing-lg);
}

.auth-form { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.form-group { text-align: left; position: relative; }
.form-label {
    display: block; margin-bottom: var(--spacing-sm); font-weight: 600;
    font-size: var(--fs-md); color: var(--clr-secondary-700);
}
.form-input {
    width: 100%; padding: var(--spacing-md); font-size: var(--fs-md);
    border: 1px solid #dce3e9; border-radius: var(--border-radius-md);
    transition: border-color var(--transition-duration-normal) ease, box-shadow var(--transition-duration-normal) ease;
}
.form-input:focus {
    outline: none; border-color: var(--clr-primary-500);
    box-shadow: 0 0 0 3px rgba(0, 68, 136, 0.2);
}
.form-input.invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

.form-options {
    text-align: right;
    margin-top: var(--spacing-sm); 
    margin-bottom: var(--spacing-sm); 
}
.forgot-password-link { font-size: var(--fs-sm); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl); font-family: var(--font-secondary); font-weight: 600;
    font-size: var(--fs-md); border-radius: var(--border-radius-md); cursor: pointer; text-align: center;
    border: 2px solid transparent; transition: all var(--transition-duration-normal) var(--transition-timing-function);
    line-height: 1; width: 100%;
}
.btn--primary {
    background-color: var(--clr-primary-700); color: var(--clr-common-white); box-shadow: var(--shadow-md);
}
.btn--primary:hover {
    background-color: var(--clr-primary-500); transform: translateY(-2px); box-shadow: var(--shadow-lg);
}

.auth-link { margin-top: var(--spacing-lg); font-size: var(--fs-md); }

@media (max-width: 500px) {
    .auth-container {
        padding: var(--spacing-xl);
    }
    .error-popup {
        width: 90%;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--fs-sm);
    }
}