body {
          background-color: #f8f9fa;
          font-family: 'Segoe UI', Arial, sans-serif;
          color: #5C6066;
          min-height: 100vh;
          display: flex;
          align-items: center;
          padding: 20px 0;
        }
        
        .login-card {
          border: none;
          border-radius: 12px;
          box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
          overflow: hidden;
          background: #fff;
        }
        
        .form-control {
          padding: 0.75rem 1rem;
          border-radius: 8px;
          border: 1px solid #ddd;
          transition: all 0.3s;
        }
        
        .form-control:focus {
          border-color: #00B395;
          box-shadow: 0 0 0 0.25rem rgba(0, 179, 149, 0.25);
        }
        
        .btn-access {
          background-color: #00B395;
          color: white;
          border: none;
          padding: 0.75rem;
          font-weight: 600;
          border-radius: 8px;
          transition: all 0.3s;
        }
        
        .btn-access:hover {
          background-color: #008e78;
          transform: translateY(-2px);
          color: white;
        }
        
        .login-links a {
          color: #00B395;
          text-decoration: none;
          transition: all 0.3s;
          font-size: 0.9rem;
        }
        
        .login-links a:hover {
          color: #008e78;
          text-decoration: underline;
        }
        
        .password-container {
          position: relative;
        }
        
        .toggle-password {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          color: #6c757d;
        }
        
        .logo-container {
          padding: 2rem 1rem 1rem;
        }
        
        @media (max-width: 768px) {
          .login-container {
            padding: 0 15px;
          }
          
          .logo-container {
            padding: 1.5rem 1rem 0.5rem;
          }
          
          .login-links {
            flex-direction: column;
            gap: 0.5rem;
            align-items: center;
          }
          
          .login-links div {
            text-align: center;
          }
        }
        
        @media (max-width: 576px) {
          .card-body {
            padding: 1.5rem;
          }
        }