: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; 
    --color-info-bg: #eff6ff;
    --color-info-text: #3b82f6;
    --color-info-border: #93c5fd;
}
body {
    font-family: var(--font-family-sans); background-color: #f3f4f6; 
    color: var(--color-text-medium); line-height: 1.6;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-height: 100vh; padding: 2rem 0;
}
.form-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: 480px; text-align: center; 
}
.form-header { margin-bottom: 2rem; }
.form-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;}
.form-header .logo i { margin-right: 0.5rem; }
.form-header h1 { font-size: 1.75rem; color: var(--color-text-dark); margin-bottom: 0.5rem; }
.form-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); }
.message.info { background-color: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-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[type="email"], .form-group input[type="text"], .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;
}
.form-group input:focus { border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25); }
.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;
    font-size: 1rem; margin-top: 1.5rem;
}
.btn-submit:hover { background-color: var(--color-primary-hover); }
.login-link { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }