@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap");

body{
   margin: 0px;
   min-height: 100vh;
   font-family: "Plus Jakarta Sans", sans-serif;
}

* {
   box-sizing: border-box;
 }

.login-layout {   
   min-height: 100vh;
   display: flex;
}

.login-branding-panel {
   flex: 1;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 3rem;
   color: #e0f2fe;
   background: linear-gradient(140deg, #082f49 0%, #0f3e73 46%, #115e78 100%);
 }

.login-branding-panel::before {
   content: "";
   position: absolute;
   inset: -22%;
   background:
      radial-gradient(circle at 72% 30%, rgba(56, 189, 248, 0.35) 0%, transparent 36%),
      radial-gradient(circle at 20% 72%, rgba(30, 64, 175, 0.44) 0%, transparent 48%);
   animation: auth-pulse 12s ease-in-out infinite;
}

.login-branding-content {
   position: relative;
   z-index: 1;
   max-width: 30rem;
   text-align: center;
}

.login-branding-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 5rem;
   height: 5rem;
   margin-bottom: 1.5rem;
   border-radius: 1.15rem;
   background: linear-gradient(140deg, #06b6d4 0%, #1d4ed8 100%);
   box-shadow: 0 20px 44px -30px rgba(14, 165, 233, 0.8);
   font-family: "Space Grotesk", sans-serif;
   font-size: 1.45rem;
   font-weight: 700;
   letter-spacing: 0.04em;
}

.login-branding-title {
   margin: 1.4rem 0 0.45rem;
   font-family: "Space Grotesk", sans-serif;
   font-size: clamp(1.9rem, 4vw, 2.8rem);
   line-height: 1.05;
   font-weight: 700;
   letter-spacing: -0.02em;
}

.login-branding-copy {
   margin: 0;
   color: rgba(224, 242, 254, 0.86);
   font-size: 1rem;
   line-height: 1.6;
}

.login-form-panel {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2rem;
   background: #f8fafc;
}

.login-form-card {
   position: relative;
   width: 100%;
   max-width: 28rem;
   border-radius: 1.25rem;
   background: #ffffff;
   padding: 2rem;
   box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.login-card-badge {
   position: absolute;
   top: 0.625rem;
   right: 0.625rem;
}

.login-form-header h2 {
   margin: 0;
   font-family: "Space Grotesk", sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   color: #0f172a;
}

.login-form-header p {
   margin-top: 0.5rem;
   color: #475569;
   font-size: 0.95rem;
}

@keyframes auth-pulse {
   0%,
   100% {
      transform: scale(1);
      opacity: 0.7;
   }

   50% {
      transform: scale(1.1);
      opacity: 0.35;
   }
}

.login-form-stack {
   margin-top: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.login-field label {
   display: block;
   margin-bottom: 0.375rem;
   font-size: 0.875rem;
   font-weight: 600;
   color: #334155;
}

.login-field input {
   width: 100%;
   border: 1px solid #cbd5e1;
   border-radius: 0.75rem;
   padding: 0.75rem 0.9rem;
   font-size: 0.95rem;
   color: #0f172a;
   background: #fff;
}

.login-field input:focus {
   outline: none;
   border-color: #0891b2;
   box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14);
}

.login-submit-btn {
   border: 0;
   border-radius: 0.85rem;
   background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
   color: white;
   font-weight: 700;
   padding: 0.85rem 1rem;
   cursor: pointer;
}

.login-submit-btn:hover {
   filter: brightness(1.03);
}

.login-alert {
   border: 1px solid #fecaca;
   background: #fef2f2;
   color: #b91c1c;
   border-radius: 0.75rem;
   padding: 0.85rem 1rem;
   font-size: 0.9rem;
}

.login-field-error {
   margin-top: 0.35rem;
   color: #b91c1c;
   font-size: 0.85rem;
}

.login-recovery-link {
   margin-top: 1.25rem;
   text-align: center;
   font-size: 0.9rem;
}

.login-recovery-link--left {
   text-align: left;
}

.login-recovery-link a {
   color: #0e7490;
}

.turnstile-floating {
   position: fixed;
   right: 1.5rem;
   bottom: 1.5rem;
   z-index: 40;
}

@media (max-width: 900px) {
   .login-layout {
      flex-direction: column;
   }

   .login-branding-panel {
      min-height: 15rem;
      padding: 1.5rem;
   }

   .login-branding-title {
      margin-top: 1rem;
      font-size: clamp(1.5rem, 7vw, 2rem);
   }

   .login-form-panel {
      padding: 1rem 1rem 2rem;
   }
}