/* ==========================================================================
   External Imports
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');


   /* ==========================================================================
      Global Resets & Base Settings
      ========================================================================== */
   * {
     -webkit-font-smoothing: antialiased;
   }
   
   body {
     font-family: 'Inter Tight', sans-serif;
     background-color: #FCFCFD;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     margin: 0;
     font-weight: 500;
   }
   
   /* ==========================================================================
      Utility Classes
      ========================================================================== */
   .hidden,
   #password-requirements.hidden {
     display: none !important;
   }
   
   .hidden-anim {
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
   }
   
   .fade-in {
     animation: fadeIn 0.3s ease-out forwards;
   }
   
   .fade-in-up {
     animation: fadeInUp 0.3s ease-out forwards;
   }
   
   .overflow-visible {
     overflow: visible !important;
   }
   
   /* ==========================================================================
      Keyframes & Animations
      ========================================================================== */
   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
   
   @keyframes fadeIn {
     0% {
       opacity: 0;
       transform: translateY(0px);
     }
     100% {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   @keyframes fadeInUp {
     0% {
       opacity: 0;
       transform: translateY(12px);
     }
     100% {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   @keyframes fadeInScale {
     from {
       opacity: 1;
       transform: scale(0.98);
     }
     to {
       opacity: 1;
       transform: scale(1);
     }
   }
   
   /* ==========================================================================
      Typography & Links
      ========================================================================== */
   label.sr-only {
     font-size: 12px;
     font-weight: 600;
     color: #60646C;
     display: inline-flex;
     margin-bottom: 12px;
   }
   
   .text-link {
     color: #5753C6;
     font-size: 12px;
     text-decoration: none;
     font-weight: 600;
     transition: all 0.3s ease;
   }
   
   .text-link:hover {
     color: #272962;
     transition: all 0.3s ease;
   }
   
   /* ==========================================================================
      Buttons & Inputs
      ========================================================================== */
   button {
     width: 100%;
     height: 42px;
     outline: none;
     background-color: #fff;
     color: #1C2024;
     font-size: 15px;
     cursor: pointer;
     font-weight: 600;
     border-radius: 6px;
     border: 1px solid #D9D9E0;
     box-shadow: 0 2px 3px -1px rgba(33,31,38,0.06), 0 0 0 0 #F0F0F3;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     gap: 6px;
     transform: scale(1);
   }
   
   button:hover {
     background-color: #FCFCFD;
     box-shadow: 0 2px 3px -1px rgba(33,31,38,0.06), 0 0 0 3px #F0F0F3;
   }
   
   button:focus {
     transform: scale(0.99);
   }
   
   .button-primary {
     box-shadow: 0 0 0 0 #E6E7FF;
     background-color: #5151CD;
     border-color: #5151CD;
     color: #fff;
   }
   
   .button-primary:hover {
     background-color: #5753C6;
     border-color: #5151CD;
     box-shadow: 0 0 0 3px #E6E7FF;
     transition: ease all 0.3s;
   }
   
   .plain-button {
     font-size: 12px;
     text-decoration: none;
     color: #60646C;
     font-weight: 600;
     padding: 12px;
     border-radius: 6px;
     transition: ease all 0.3s;
     width: fit-content;
   }
   
   .plain-button:hover {
     background-color: #F0F0F3;
     transition: ease all 0.3s;
   }
   
   .login-container input {
     width: 100%;
     padding: 12px;
     border: 1px solid #E8E8EC;
     background-color: #ffffff;
     border-radius: 6px;
     box-sizing: border-box;
     height: 42px;
     font-size: 16px;
     font-weight: 500;
     transition: ease all 0.3s;
     color: #1C2024;
     margin: 0;
   }
   
   .login-container input:focus {
     transition: ease all 0.3s;
     border-color: #CDCED6;
     box-shadow: 0 2px 3px -1px rgba(33,31,38,0.06),
                 0 0 0 3px #F0F0F3;
     outline: none;
   }
   
   .login-container input::placeholder {
     color: #8B8D98;
     font-weight: 500;
   }
   
   /* ==========================================================================
      Spinners
      ========================================================================== */
   .spinner {
     width: 14px;
     height: 14px;
     border: 2px solid #E6E7FF; /* Light blue outline */
     border-top: 2px solid #5B5BD6; /* Bright blue top color */
     border-radius: 50%;
     animation: spin 0.4s linear infinite;
   }
   
   .spinner.warning {
     width: 14px;
     height: 14px;
     border: 2px solid #E5484D; /* Light red outline */
     border-top: 2px solid #FFD1D9; /* Lighter red top color */
     border-radius: 50%;
     animation: spin 0.4s linear infinite;
   }
   
   /* ==========================================================================
      Popover / Tooltip
      ========================================================================== */
   .popover-label {
     color: #B0B4BA !important;
     font-size: 12px;
     font-weight: 600;
     display: inline-block;
     margin-bottom: 6px;
   }
   
   #password-requirements {
     position: absolute;
     top: 100%; /* below the input */
     left: 0;
     width: 252px;
     background: rgba(24, 25, 27, 0.84);
     backdrop-filter: blur(12px);
     padding: 10px;
     z-index: 10;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     font-size: 0.9em;
     border-radius: 12px;
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.3s ease, transform 0.3s ease;
     pointer-events: none;
     box-sizing: border-box;
   }
   
   #password-requirements.visible {
     opacity: 1;
     transform: translateY(6px);
     pointer-events: auto;
   }
   
   #password-requirements ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   #password-requirements li {
     display: flex;
     align-items: center;
     margin-bottom: 6px;
     color: #EDEEF0;
   }
   
   #password-requirements .dot {
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background: #E5484D; /* Not met */
     margin-right: 6px;
     transition: background 0.3s ease;
   }
   
   #password-requirements .dot.met {
     background: #30A46C;
   }
   
   /* ==========================================================================
      Layout & Containers
      ========================================================================== */
   
#login-form > div, #reset-form > div, #set-password-form > div, #account-activation-form > div, #activate-account-form > div {
  width: 100%;
}  
   
      #signIn {
     display: flex;
     flex-direction: column;
     gap: 24px;
     width: 300px;
   }
   
   .login-container {
     padding: 24px;
     border-radius: 12px;
     width: 300px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: 36px;
     overflow: hidden;
     transition: height 0.3s ease;
     height: auto;
     will-change: height;
   }
   
   .login-container h1 {
     margin-bottom: 1rem;
     text-align: center;
   }
   
   /* Authentication Views */
   #auth-views,
   #email-signin-form,
   #password-reset-form,
   #password-set-form,
   #set-password-form, #reset-form, #password-success-view, #login-form, #account-activation-form, #activate-account-form {
     display: flex;
     flex-direction: column;
     gap: 24px;
     width: 100%;
     align-items: center;
   }
   
   #initial-view {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     width: 100%;
   }
   
   /* Sign-up and Footer */
   #signUp-container {
     text-align: center;
     font-size: 12px;
     color: #60646C;
     font-weight: 500;
   }
   
   #login-footer {
     display: none;
     text-align: center;
     font-size: 12px;
     color: #60646C;
     font-weight: 500;
   }
   
   /* Error / Success Message */
   #error-message {
     height: auto;
     display: none;
     width: 100%;
     padding: 12px;
     border-radius: 6px;
     font-size: 12px;
     text-align: center;
     font-weight: 500;
     opacity: 0;
     transition: opacity 0.3s ease, height 0.3s ease;
     box-sizing: border-box;
     text-wrap: balance;
   }
   
   #error-message.visible {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     opacity: 1;
   }
   
   #error-message.error {
     color: #D8000C;
     background-color: #FEEBEC;
   }
   
   #error-message.success {
     background-color: #E6F6EB;
     color: #218358;
   }
   
   /* Miscellaneous */
   #userEmail {
     font-weight: 600;
   }
   
   #signIn p {
     font-size: 15px;
     line-height: 1.5;
     text-wrap: balance;
     color: #1C2024;
     font-weight: 500;
     margin: 0;
   }
   
   #password-group {
     display: flex;
     flex-direction: row;
     align-items: top;
     justify-content: space-between;
   }
   
   /* Logo */
   .logo-container {
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .logo {
     max-height: 20px;
     opacity: 1;
     user-select: none;
     transition: ease all 0.3s;
     cursor: pointer;
   }
   
   .logo:hover {
     opacity: 0.8;
     transition: ease all 0.3s;
   }
   
   /* ==========================================================================
      Responsive Styles
      ========================================================================== */
   @media (max-width: 600px) {
     body {
       padding: 0;
     }
     
     #signIn p {
       font-size: 17px;
     }
     
     .plain-button {
       font-size: 15px;
     }
     
     .text-link {
       font-size: 15px;
     }
     
     .login-container {
       width: 100%;
       padding: 48px 24px;
       border-radius: 0;
       height: 100vh;
       gap: 48px;
     }
     
     button {
       height: 48px;
       font-size: 17px;
     }
     
     .login-container input {
       height: 48px;
       font-size: 17px;
       width: 100%;
     }
     
     #signIn {
       width: 100%;
     }
     
     #signUp-container {
       font-size: 15px;
     }
     
     label.sr-only {
       font-size: 15px;
     }
     
     .logo {
       max-height: 30px;
       user-select: none;
       pointer-events: none;
     }
     
     #initial-view {
       gap: 18px;
     }
     
     #error-message {
       font-size: 15px;
     }

     #password-requirements {
      width: 100%;
     }

     #password-requirements .dot {
      height: 6px;
      width: 6px;
     }

   }