.login-page {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1.5rem;
     background: linear-gradient(135deg, #0c1427 0%, #1a2744 40%, #0f1729 100%);
     position: relative;
     overflow: hidden;
 }

 .login-page::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background:
         radial-gradient(circle at 30% 20%, rgba(101, 113, 255, 0.08) 0%, transparent 50%),
         radial-gradient(circle at 70% 80%, rgba(102, 209, 209, 0.06) 0%, transparent 45%);
     pointer-events: none;
 }

 .login-page .auth-card {
     position: relative;
     background: rgba(255, 255, 255, 0.98);
     border-radius: 1.25rem;
     box-shadow:
         0 25px 50px -12px rgba(0, 0, 0, 0.35),
         0 0 0 1px rgba(255, 255, 255, 0.05);
     overflow: hidden;
     max-width: 420px;
     width: 100%;
 }

 .login-page .auth-card::before {
     content: '';
     display: block;
     height: 4px;
     background: linear-gradient(90deg, #6571ff 0%, #66d1d1 100%);
 }

 [dir="rtl"] .login-page .auth-card::before {
     background: linear-gradient(270deg, #6571ff 0%, #66d1d1 100%);
 }

 .login-page .auth-form-wrapper {
     padding: 2.25rem 2rem 2.5rem;
 }

 .login-page .login-logo {
     display: block;
     text-align: center;
     margin-bottom: 1rem;
 }

 .login-page .login-logo img {
     max-width: 65%;
     height: auto;
 }

 .login-page .login-title {
     font-size: 1.35rem;
     font-weight: 600;
     color: #212a3a;
     margin-bottom: 1.75rem;
     text-align: center;
     letter-spacing: -0.02em;
 }

 .login-page .form-label {
     font-weight: 500;
     color: #495057;
     margin-bottom: 0.4rem;
     font-size: 0.9rem;
 }

 .login-page .form-control {
     border-radius: 0.65rem;
     padding: 0.65rem 1rem;
     border: 1px solid #e2e8f0;
     font-size: 0.95rem;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 .login-page .form-control:focus {
     border-color: #6571ff;
     box-shadow: 0 0 0 3px rgba(101, 113, 255, 0.15);
     outline: none;
 }

 .login-page .form-control::placeholder {
     color: #94a3b8;
 }

 .login-page .btn-login {
     width: 100%;
     padding: 0.75rem 1.5rem;
     font-weight: 600;
     font-size: 1rem;
     border-radius: 0.65rem;
     border: none;
     background: linear-gradient(135deg, #6571ff 0%, #5a67d8 100%);
     color: #fff;
     transition: transform 0.15s, box-shadow 0.2s;
     box-shadow: 0 4px 14px rgba(101, 113, 255, 0.4);
 }

 .login-page .btn-login:hover {
     color: #fff;
     transform: translateY(-1px);
     box-shadow: 0 6px 20px rgba(101, 113, 255, 0.45);
 }

 .login-page .btn-login:active {
     transform: translateY(0);
 }

 .login-page .alert-danger {
     border-radius: 0.65rem;
     border: none;
     background: #fef2f2;
     color: #b91c1c;
 }

 .login-page .divider {
     height: 1px;
     background: #e2e8f0;
     margin: 1.25rem 0;
 }