* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       body {
           font-family: 'Inter', 'Arial', sans-serif;
           background: #f8fafc;
           min-height: 100vh;
           display: flex;
           flex-direction: column;
           line-height: 1.6;
           overflow-x: hidden;
       }

       /* Header */
       .header {
           background: white;
           padding: 1rem;
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
           position: sticky;
           top: 0;
           z-index: 100;
           width: 100%;
       }

       .header-content {
           max-width: 1200px;
           margin: 0 auto;
           display: flex;
           justify-content: space-between;
           align-items: center;
           width: 100%;
       }

       .logo {
           display: flex;
           align-items: center;
           text-decoration: none;
           transition: transform 0.2s ease;
           flex-shrink: 0;
       }

       .logo:hover {
           transform: scale(1.02);
       }

       .logo img {
           height: 32px;
           width: auto;
       }

       .header-actions {
           display: flex;
           gap: 0.5rem;
           align-items: center;
           flex-shrink: 0;
       }

       .btn-header {
           padding: 0.4rem 1rem;
           border-radius: 8px;
           text-decoration: none;
           font-weight: 500;
           transition: all 0.2s ease;
           border: none;
           cursor: pointer;
           font-size: 0.875rem;
           white-space: nowrap;
       }

       .btn-login {
           background: #005BF0;
           color: white;
       }

       .btn-login:hover {
           background: #0048c7;
           color: white;
       }

       .btn-signup {
           background: #f3f4f6;
           color: #374151;
       }

       .btn-signup:hover {
           background: #e5e7eb;
           color: #374151;
       }

       /* Main Content */
       .page-wrapper {
           flex: 1;
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 1rem;
           width: 100%;
       }

       .login-container {
           background: white;
           border-radius: 16px;
           padding: 2rem 1.5rem;
           box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
           width: 100%;
           max-width: 420px;
           border: 1px solid #e5e7eb;
           transition: all 0.3s ease;
           animation: fadeInUp 0.6s ease-out;
       }

       .login-container:hover {
           box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
           transform: translateY(-2px);
       }

       @keyframes fadeInUp {
           from {
               opacity: 0;
               transform: translateY(30px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .page-title {
           font-size: 1.75rem;
           font-weight: 700;
           color: #1f2937;
           text-align: center;
           margin-bottom: 1.5rem;
       }

       /* Form Styles */
       .form-group {
           margin-bottom: 1.25rem;
       }

       .form-label {
           display: block;
           font-size: 0.875rem;
           font-weight: 500;
           color: #374151;
           margin-bottom: 0.5rem;
       }

       .form-control {
           width: 100%;
           padding: 0.875rem 1rem 0.875rem 3rem;
           border: 2px solid #e5e7eb;
           border-radius: 12px;
           font-size: 1rem;
           background: white;
           transition: all 0.2s ease;
           outline: none;
           position: relative;
       }

       .form-control:focus {
           border-color: #005BF0;
           box-shadow: 0 0 0 3px rgba(0, 91, 240, 0.1);
           transform: translateY(-1px);
       }

       .form-control::placeholder {
           color: #9ca3af;
       }

       .form-control.is-invalid {
           border-color: #ef4444;
           animation: shake 0.5s ease-in-out;
       }

       @keyframes shake {

           0%,
           100% {
               transform: translateX(0);
           }

           25% {
               transform: translateX(-5px);
           }

           75% {
               transform: translateX(5px);
           }
       }

       /* Input Icons */
       .input-wrapper {
           position: relative;
       }

       .input-icon {
           position: absolute;
           left: 1rem;
           top: 50%;
           transform: translateY(-50%);
           color: #a0aec0;
           transition: color 0.3s ease;
           z-index: 2;
       }

       .form-control:focus+.input-icon {
           color: #005BF0;
       }

       /* Password Toggle */
       .password-wrapper {
           position: relative;
       }

       .password-toggle {
           position: absolute;
           right: 1rem;
           top: 50%;
           transform: translateY(-50%);
           background: none;
           border: none;
           cursor: pointer;
           color: #6b7280;
           transition: color 0.2s ease;
           z-index: 2;
           padding: 0.25rem;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .password-toggle:hover {
           color: #374151;
       }

       /* Form Actions */
       .form-actions {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 1.5rem;
           flex-wrap: wrap;
           gap: 1rem;
       }

       .forgot-link {
           color: #005BF0;
           text-decoration: none;
           font-size: 0.875rem;
           font-weight: 500;
           transition: color 0.2s ease;
       }

       .forgot-link:hover {
           color: #0048c7;
           text-decoration: underline;
       }

       /* Submit Button */
       .btn-primary {
           background: linear-gradient(135deg, #005BF0, #0048c7);
           color: white;
           border: none;
           padding: 0.875rem 2rem;
           border-radius: 12px;
           font-size: 1rem;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.2s ease;
           position: relative;
           overflow: hidden;
           min-width: 120px;
       }

       .btn-primary::before {
           content: '';
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
           transition: left 0.6s;
       }

       .btn-primary:hover::before {
           left: 100%;
       }

       .btn-primary:hover {
           transform: translateY(-2px);
           box-shadow: 0 8px 25px rgba(0, 91, 240, 0.3);
       }

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

       .btn-primary:disabled {
           background: #9ca3af;
           cursor: not-allowed;
           transform: none;
       }

       /* Register Link */
       .register-section {
           text-align: center;
           padding-top: 1.5rem;
           border-top: 1px solid #e5e7eb;
           color: #6b7280;
           font-size: 0.875rem;
       }

       .register-link {
           color: #005BF0;
           text-decoration: none;
           font-weight: 600;
           transition: color 0.2s ease;
       }

       .register-link:hover {
           color: #0048c7;
           text-decoration: underline;
       }

       /* Error Messages */
       .invalid-feedback {
           color: #ef4444;
           font-size: 0.75rem;
           margin-top: 0.25rem;
           display: none;
           outline:none;
       }

       .form-control.is-invalid~.invalid-feedback {
           display: block;
       }

       .alert-error {
           background: #fef2f2;
           border: 1px solid #fecaca;
           color: #dc2626;
           padding: 0.75rem;
           border-radius: 8px;
           margin-bottom: 1rem;
           font-size: 0.875rem;
       }

       /* Loading State */
       .loading {
           pointer-events: none;
           opacity: 0.7;
       }

       .loading .btn-primary {
           background: #9ca3af;
           cursor: not-allowed;
       }

       /* Accessibility */
       .sr-only {
           position: absolute;
           width: 1px;
           height: 1px;
           padding: 0;
           margin: -1px;
           overflow: hidden;
           clip: rect(0, 0, 0, 0);
           white-space: nowrap;
           border: 0;
       }

       /* Focus styles for better accessibility */
       .form-control:focus,
       .btn-primary:focus,
       .forgot-link:focus,
       .register-link:focus,
       .password-toggle:focus {
           outline: 2px solid #005BF0;
           outline-offset: 2px;
       }

       /* Mobile Responsive Design */
       @media (max-width: 640px) {
           .header {
               padding: 0.75rem;
           }

           .logo img {
               height: 28px;
           }

           .btn-header {
               padding: 0.375rem 0.75rem;
               font-size: 0.8rem;
           }

           .page-wrapper {
               padding: 0.5rem;
               align-items: flex-start;
               padding-top: 2rem;
           }

           .login-container {
               padding: 1.5rem 1rem;
               margin: 0;
               max-width: none;
               border-radius: 12px;
               box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
           }

           .page-title {
               font-size: 1.5rem;
               margin-bottom: 1.25rem;
           }

           .form-group {
               margin-bottom: 1rem;
           }

           .form-control {
               padding: 0.75rem 0.875rem 0.75rem 2.75rem;
               font-size: 0.9rem;
           }

           .input-icon {
               left: 0.875rem;
           }

           .password-toggle {
               right: 0.875rem;
           }

           .form-actions {
               flex-direction: column;
               align-items: stretch;
               gap: 0.75rem;
           }

           .btn-primary {
               width: 100%;
               padding: 0.875rem;
               font-size: 0.95rem;
           }

           .forgot-link {
               text-align: center;
               order: 1;
           }

           .register-section {
               padding-top: 1.25rem;
               font-size: 0.8rem;
           }
       }

       /* Extra small mobile devices */
       @media (max-width: 480px) {
           .header-actions {
               gap: 0.25rem;
           }

           .btn-header {
               padding: 0.3rem 0.6rem;
               font-size: 0.75rem;
           }

           .page-wrapper {
               padding: 0.25rem;
               padding-top: 1.5rem;
           }

           .login-container {
               padding: 1.25rem 0.875rem;
           }

           .page-title {
               font-size: 1.375rem;
           }

           .form-control {
               padding: 0.7rem 0.75rem 0.7rem 2.5rem;
           }

           .input-icon {
               left: 0.75rem;
           }

           .password-toggle {
               right: 0.75rem;
           }
       }

       /* Landscape orientation adjustments */
       @media (max-height: 600px) and (orientation: landscape) {
           .page-wrapper {
               padding: 0.5rem;
               align-items: center;
           }

           .login-container {
               padding: 1rem;
           }

           .page-title {
               font-size: 1.25rem;
               margin-bottom: 1rem;
           }

           .form-group {
               margin-bottom: 0.75rem;
           }

           .register-section {
               padding-top: 1rem;
           }
       }

       /* Tablet adjustments */
       @media (min-width: 641px) and (max-width: 1024px) {
           .header {
               padding: 1rem 1.5rem;
           }

           .logo img {
               height: 36px;
           }

           .btn-header {
               padding: 0.5rem 1.25rem;
               font-size: 0.9rem;
           }

           .login-container {
               padding: 2.5rem 2rem;
               max-width: 480px;
           }

           .page-title {
               font-size: 1.875rem;
           }
       }

       /* High DPI displays */
       @media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {

           .form-control,
           .btn-primary {
               border-width: 1px;
           }
       }

       /* Touch device improvements */
       @media (hover: none) and (pointer: coarse) {
           .form-control {
               min-height: 48px;
           }

           .btn-primary {
               min-height: 48px;
           }

           .password-toggle {
               min-width: 48px;
               min-height: 48px;
           }

       }