:root {
     --primary-color: #6366f1;
     --secondary-color: #4f46e5;
 }

 body {
     background-color: #f8fafc;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     min-height: 100vh;
     display: flex;
     align-items: center;
 }

 .login-container {
     max-width: 400px;
     width: 100%;
     margin: 0 auto;
     padding: 2rem;
     background-color: white;
     border-radius: 0.5rem;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }

 .login-header {
     text-align: center;
     margin-bottom: 2rem;
 }

 .login-header .logo {
     width: 80px;
     height: 80px;
     background-color: var(--primary-color);
     color: white;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1rem;
     font-size: 2rem;
 }

 .login-header h2 {
     font-weight: 600;
     color: #1e293b;
 }

 .login-header p {
     color: #64748b;
 }

 .form-control:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
 }

 .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
 }

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

 .form-floating label {
     color: #64748b;
 }