:root{--primary-color:#1a76d2;--secondary-color:#f8f9fa;--accent-color:#ff6b00}body{background-color:#f5f7fa;display:flex;flex-direction:column;font-family:Tajawal,sans-serif;min-height:100vh}.navbar{box-shadow:0 2px 10px rgba(0,0,0,.1)}.logo{height:50px;object-fit:contain;width:50px}.login-container{align-items:center;display:flex;flex:1;justify-content:center;padding:2rem 0}.login-container .login-card{background:#fff;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.1);max-width:1000px;overflow:hidden;width:100%}.login-form{padding:2.5rem}.login-form .login-header{margin-bottom:2rem;text-align:center}.login-form .login-header h2{color:var(--primary-color);font-weight:700;margin-bottom:.5rem}.login-form .login-header p{color:#6c757d}.login-form .form-label{color:#495057;font-weight:500;margin-bottom:.5rem}.login-form .form-control{border:2px solid #e2e8f0;border-radius:10px;padding:.75rem 1rem;transition:all .3s}.login-form .form-control:focus{border-color:var(--primary-color);box-shadow:0 0 0 .25rem rgba(26,118,210,.25)}.login-form .input-group .form-control{border-radius:10px 0 0 10px;border-right:none}.login-form .input-group .input-group-text{background-color:#fff;border:2px solid #e2e8f0;border-left:none;border-radius:0 10px 10px 0}.login-form .btn-primary{background-color:var(--primary-color);border-color:var(--primary-color);border-radius:10px;font-weight:500;padding:.75rem;transition:all .3s;width:100%}.login-form .btn-primary:hover{background-color:#0d47a1;border-color:#0d47a1;transform:translateY(-2px)}.login-form .form-footer,.login-form .register-link{margin-top:1.5rem;text-align:center}.login-form .form-footer{border-top:1px solid #e2e8f0;padding-top:1.5rem}.login-form .forgot-password{margin-top:.5rem;text-align:left}.login-image{align-items:center;background:linear-gradient(rgba(26,118,210,.8),rgba(26,118,210,.8)),url(https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80);background-position:50%;background-size:cover;color:#fff;display:flex;justify-content:center;padding:2rem}.login-image .login-image-content{text-align:center}.login-image .login-image-content h3{font-weight:700;margin-bottom:1rem}@media(max-width:992px){.login-image{display:none}.login-form{padding:2rem}}@media(max-width:576px){.login-form{padding:1.5rem}}