body {
            background: #fff;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-page-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 100vh;
        }
        .login-logo {
            width: 300px;
            margin-bottom: 28px;
            display: block;
        }
        .login-container {
            background-color: #f0f8ff;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(42, 157, 244, 0.2);
            width: 100%;
            max-width: 500px;
        }
        @media (max-width: 500px) {
            .login-logo { width: 100px; }
            .login-container { padding: 1rem; }
        }
    #preloader {position: fixed;top: 0; left: 0;width: 100vw; height: 100vh;background: #ffffff;display: flex;justify-content: center;align-items: center;z-index: 9999;transition: opacity 0.4s ease, visibility 0.4s ease;}
    #preloader.hidden {opacity: 0;visibility: hidden;}
    .spinner {width: 60px;height: 60px;border: 6px solid #2a9df4;border-top-color: transparent;border-radius: 50%;animation: spin 1s linear infinite;}
    @keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}
    .forgot-link {
  color: #2a9df4;
  font-size: 0.98rem;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
  position: relative;
}
.forgot-link:hover, .forgot-link:focus {
  color: #135b86;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .forgot-link { font-size: 1.04rem; }
}