:root {
          --primary-color: #4f46e5;
          --primary-hover: #4338ca;
          --bg-gradient  : linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
      }

      /* Remove a barra de rolagem e impede a rolagem na página inteira */
      html,
      body {
          height  : 100vh;
          margin  : 0;
          padding : 0;
          overflow: hidden;
          /* Oculta as barras de rolagem vertical e horizontal */
      }

      body {
          font-family    : 'Poppins', sans-serif;
          background     : var(--bg-gradient);
          min-height     : 100vh;
          display        : flex;
          align-items    : center;
          justify-content: center;
          margin         : 0;
          padding        : 20px;
      }

      /* Card de Login com Glassmorphism */
      .login-card {
          background     : rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(10px);
          border-radius  : 20px;
          box-shadow     : 0 15px 35px rgba(0, 0, 0, 0.2);
          border         : 1px solid rgba(255, 255, 255, 0.2);
          overflow       : hidden;
          width          : 100%;
          max-width      : 420px;
          transition     : transform 0.3s ease;
      }

      .login-card:hover {
          transform: translateY(-3px);
      }

      .card-header-custom {
          text-align    : center;
          padding-top   : 2.5rem;
          padding-bottom: 1rem;
      }

      .brand-icon {
          width          : 60px;
          height         : 60px;
          background     : rgba(79, 70, 229, 0.1);
          color          : var(--primary-color);
          border-radius  : 50%;
          display        : inline-flex;
          align-items    : center;
          justify-content: center;
          font-size      : 1.8rem;
          margin-bottom  : 1rem;
      }

      /* Input Customizados com Ícones */
      .input-group-text {
          background-color: #f8fafc;
          border-right    : none;
          color           : #64748b;
          border-radius   : 12px 0 0 12px !important;
          padding-left    : 1.25rem;
      }

      .form-control {
          background-color: #f8fafc;
          border-left     : none;
          border-radius   : 0 12px 12px 0 !important;
          padding         : 0.75rem 1rem;
          font-size       : 0.95rem;
          color           : #334155;
      }

      .form-control:focus {
          background-color: #ffffff;
          box-shadow      : none;
          border-color    : #cbd5e1;
      }

      /* Botão para alternar visibilidade da senha */
      .toggle-password {
          background-color: #f8fafc;
          border          : 1px solid #dee2e6;
          border-left     : none;
          color           : #64748b;
          border-radius   : 0 12px 12px 0 !important;
          cursor          : pointer;
          transition      : color 0.2s;
      }

      .toggle-password:hover {
          color: var(--primary-color);
      }

      .input-password-field {
          border-radius: 0 !important;
      }

      /* Botão Principal */
      .btn-primary-custom {
          background-color: var(--primary-color);
          border          : none;
          border-radius   : 12px;
          padding         : 0.8rem;
          font-weight     : 600;
          letter-spacing  : 0.5px;
          color           : #ffffff;
          transition      : all 0.3s ease;
          box-shadow      : 0 4px 12px rgba(79, 70, 229, 0.3);
      }

      .btn-primary-custom:hover {
          background-color: var(--primary-hover);
          transform       : translateY(-2px);
          box-shadow      : 0 6px 18px rgba(79, 70, 229, 0.4);
          color           : #ffffff;
      }

      /* Links e Detalhes */
      .forgot-link {
          color          : var(--primary-color);
          text-decoration: none;
          font-weight    : 500;
          font-size      : 0.875rem;
          transition     : color 0.2s;
      }

      .forgot-link:hover {
          color          : var(--primary-hover);
          text-decoration: underline;
      }

      .alert-custom {
          border-radius: 12px;
          font-size    : 0.9rem;
      }