:root {
    --font-family-sans: 'Inter', sans-serif;
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-text-dark: #1f2937;
    --color-text-medium: #4b5563;
    --color-text-light: #ffffff;
    --border-radius-lg: 0.5rem;
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --color-error-bg: #fee2e2;
    --color-error-text: #b91c1c;
    --color-error-border: #ef4444;
    --color-success-bg: #d1fae5;
    --color-success-text: #047857;
    --color-success-border: #10b981;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: var(--font-family-sans); background-color: #f3f4f6;
    color: var(--color-text-medium); line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-height: 100vh; padding: 2rem 0;
}
a { text-decoration: none; color: var(--color-primary); transition: color 0.2s ease-in-out; }
a:hover { text-decoration: underline; color: var(--color-primary-hover); }
.login-container {
    background-color: var(--color-text-light); padding: 2.5rem;
    border-radius: var(--border-radius-lg); box-shadow: var(--shadow-xl);
    width: 90%; max-width: 450px; text-align: center;
}
.login-header { margin-bottom: 2rem; }
.login-header .logo {
    font-size: 1.8rem; font-weight: 700; color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem;
}
.login-header .logo i { margin-right: 0.5rem; }
.login-header h1 { font-size: 1.75rem; color: var(--color-text-dark); margin-bottom: 0.5rem; }
.login-header p { color: var(--color-text-medium); font-size: 0.9rem; }
.message-area { margin-bottom: 1.5rem; }
.message {
    padding: 0.75rem 1.25rem; border-radius: var(--border-radius-lg);
    font-size: 0.9rem; text-align: left; border: 1px solid transparent;
}
.message.error { background-color: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error-border); }
.message.success { background-color: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }

.form-group { margin-bottom: 1.25rem; text-align: left; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-text-dark); margin-bottom: 0.375rem; }

.form-group .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%; padding: 0.75rem 1rem; border: 1px solid #d1d5db;
    border-radius: var(--border-radius-lg); font-size: 0.9rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-group .input-wrapper input[type="password"],
.form-group .input-wrapper input[type="text"].password-input {
     padding-right: 2.8rem;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus {
    border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25);
}
.form-group input::placeholder { color: #9ca3af; }

.password-toggle-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--color-text-medium);
    z-index: 10;
    padding: 0.25rem;
}
.password-toggle-icon:hover {
    color: var(--color-primary);
}

.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; font-size: 0.875rem; }
.form-options .remember-me { display: flex; align-items: center; }
.form-options .remember-me input[type="checkbox"] { margin-right: 0.375rem; accent-color: var(--color-primary); }
.form-options .remember-me label { margin-bottom: 0; color: var(--color-text-medium); font-weight: normal; }
.form-options .forgot-password-link { color: var(--color-primary); }
.form-options .forgot-password-link:hover { color: var(--color-primary-hover); }

.btn-submit {
    display: block; width: 100%; background-color: var(--color-primary);
    color: var(--color-text-light); font-weight: 600; padding: 0.875rem 1.5rem;
    border-radius: var(--border-radius-lg); border: none; cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    font-size: 1rem; margin-top: 1.5rem;
}
.btn-submit:hover { background-color: var(--color-primary-hover); transform: translateY(-2px); }
.btn-submit:focus { outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4); }

.register-link-container { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; }
.register-link-container p { margin-bottom: 0.5rem;}
.register-link-container a { font-weight: 500; }

@media (max-width: 480px) {
    .login-container { padding: 2rem 1.5rem; margin-top: 1rem; margin-bottom: 1rem; }
    .login-header h1 { font-size: 1.5rem; }
    .form-options { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}