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%);
}

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; }


.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);
}

@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; }
.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);
}


.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); }



.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 0.4s ease-out, opacity 0.4s ease-in-out;
    min-width: 250px;
    text-align: center;
    font-weight: 500;
}

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


.form-input.invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}


body {
   
    position: relative;
    overflow-x: hidden;
}



.form-group { text-align: left; }


.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.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;
}


.password-wrapper i {
    position: absolute;
    right: 15px;
    cursor: pointer;
    color: var(--clr-secondary-300);
    transition: color var(--transition-duration-fast) ease;
}

.password-wrapper i:hover {
    color: var(--clr-primary-500);
}



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


.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 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}