:root{
      --brand:#6FC04A;
      --brand2:#2FA8E1;
      --text:#1f2a24;
      --muted:#51635a;
      --ring: rgba(47,168,225,.35);
      --card: rgba(255,255,255,.82);
      --border: rgba(228,221,210,.75);
      --shadow: 0 22px 60px rgba(27, 39, 33, .16);
    }
    body{
      font-family:'Public Sans',sans-serif;
      min-height:100vh;
      margin:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 1.25rem;
      color: var(--text);
      background:
        radial-gradient(900px 520px at 10% 12%, rgba(111,192,74,.22), transparent 60%),
        radial-gradient(900px 520px at 90% 0%, rgba(47,168,225,.25), transparent 60%),
        linear-gradient(120deg, #f4fbf2, #ffffff 45%, #eef6ff);
    }

    .auth-box{
      width: 100%;
      max-width: 440px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 22px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 2.1rem 1.85rem;
      position: relative;
    }

    .mini-badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.45rem .8rem;
      border-radius: 999px;
      background: rgba(111,192,74,.18);
      border: 1px solid rgba(28,79,184,.2);
      color:#1C4FB8;
      font-weight:800;
      font-size:.9rem;
    }

    .brand-title{
      margin: .75rem 0 .25rem;
      font-weight: 800;
      letter-spacing: -.02em;
      text-align:center;
      font-family:'Public Sans',sans-serif;
    }
    .brand-sub{
      text-align:center;
      color: var(--muted);
      font-size: .95rem;
      margin-bottom: 1.25rem;
    }

    .input-group-text{
      background: rgba(255,255,255,.65);
      border-color: rgba(2,6,23,.10);
    }
    .form-control{
      border-color: rgba(2,6,23,.10);
      padding-top: .85rem;
      padding-bottom: .85rem;
    }
    .form-control:focus{
      border-color: rgba(107,143,113,.45);
      box-shadow: 0 0 0 .25rem var(--ring);
    }

    .custom-green-btn{
      width: 100%;
      background: linear-gradient(90deg, var(--brand), var(--brand2));
      border: none;
      border-radius: 14px;
      font-weight: 800;
      padding: .95rem 1rem;
      color: #fff;
      box-shadow: 0 14px 30px rgba(47,168,225,.25);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .custom-green-btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 18px 40px rgba(47,168,225,.32);
      filter: brightness(1.02);
    }

    .fineprint{
      margin-top: 1rem;
      text-align:center;
      color: #64748b;
      font-size: .82rem;
    }

    /* success animation (optional) */
    .checkmark-container{
      width: 46px;
      height: 46px;
      margin: 0 auto;
      border-radius: 999px;
      background: rgba(111,192,74,.18);
      border: 1px solid rgba(28,79,184,.2);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .checkmark{
      width: 26px;
      height: 26px;
      fill: none;
      stroke: #1C4FB8;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fade-out{
      opacity: 0;
      transition: opacity .5s ease;
    }

    @media (max-width: 480px){
      .auth-box{ padding: 1.85rem 1.35rem; }
    }

/* ===== Professional Auth Recovery Override ===== */
body.auth-recovery{
  --auth-green:#16875b;
  --auth-green-dark:#0f754e;
  --auth-blue:#2878d7;
  --auth-ink:#10251f;
  --auth-text:#233f37;
  --auth-muted:#61766f;
  --auth-line:rgba(15,23,42,.12);
  --auth-ring:0 0 0 .22rem rgba(22,135,91,.18);
  align-items:center;
  padding:clamp(16px, 4vh, 32px) 16px;
  background:
    linear-gradient(90deg, rgba(25,135,84,.055) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(47,128,237,.045) 0 1px, transparent 1px),
    radial-gradient(760px 460px at 8% 12%, rgba(25,135,84,.16), transparent 62%),
    radial-gradient(780px 440px at 92% 8%, rgba(47,128,237,.13), transparent 62%),
    linear-gradient(135deg,#f4faf7 0%,#fbfefd 46%,#eef6ff 100%);
  background-size:42px 42px, 42px 42px, auto, auto, auto;
}

body.auth-recovery .auth-box{
  max-width:400px;
  padding:1.65rem 1.55rem 1.45rem;
  border-radius:18px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 24px 64px rgba(18,39,33,.13);
  overflow:hidden;
}

body.auth-recovery .auth-box::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--auth-green),var(--auth-blue));
}

body.auth-recovery .auth-logo{
  margin:.15rem 0 .45rem;
}

body.auth-recovery .auth-logo img{
  width:82px;
  height:78px;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(15,23,42,.12));
}

body.auth-recovery .mini-badge{
  padding:.4rem .72rem;
  background:rgba(22,135,91,.10);
  border:1px solid rgba(22,135,91,.18);
  color:var(--auth-green-dark);
  font-size:.82rem;
}

body.auth-recovery .brand-title{
  margin:.55rem 0 .15rem;
  color:var(--auth-ink);
  font-size:1.48rem;
  font-weight:850;
  line-height:1.15;
}

body.auth-recovery .brand-sub{
  margin-bottom:1rem;
  color:var(--auth-muted);
  font-size:.93rem;
}

body.auth-recovery .input-group{
  border-radius:12px;
  margin-bottom:1rem !important;
  transition:box-shadow .18s ease;
}

body.auth-recovery .input-group-text,
body.auth-recovery .form-control{
  min-height:46px;
  background:rgba(255,255,255,.92);
  border-color:var(--auth-line);
}

body.auth-recovery .input-group-text{
  border-right:0;
  border-radius:12px 0 0 12px;
  color:#6c8398;
}

body.auth-recovery .form-control{
  border-left:0;
  border-radius:0 12px 12px 0;
  color:var(--auth-text);
  font-size:.95rem;
  box-shadow:none !important;
}

body.auth-recovery .form-control:focus{
  border-color:rgba(22,135,91,.55);
}

body.auth-recovery .input-group:focus-within{
  box-shadow:var(--auth-ring);
}

body.auth-recovery .custom-green-btn{
  min-height:48px;
  border-radius:12px;
  background:#16875b;
  border:1px solid #0f754e;
  box-shadow:0 16px 30px rgba(22,135,91,.24);
  font-weight:800;
}

body.auth-recovery .custom-green-btn:hover{
  background:#0f754e;
  box-shadow:0 18px 34px rgba(22,135,91,.28);
  filter:none;
}

body.auth-recovery .auth-submit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
}

body.auth-recovery .auth-submit-icon{
  font-size:1rem;
  transition:transform .22s ease;
}

body.auth-recovery .auth-submit-spinner{
  display:none;
  width:1rem;
  height:1rem;
  border:2px solid rgba(255,255,255,.42);
  border-top-color:#fff;
  border-radius:50%;
  animation:authSubmitSpin .7s linear infinite;
}

body.auth-recovery .auth-submit-btn.is-loading,
body.auth-recovery .auth-submit-btn.is-loading:hover{
  cursor:wait;
  pointer-events:none;
  background:#0f754e;
  border-color:#0f754e;
  box-shadow:0 18px 34px rgba(22,135,91,.28);
  transform:translateY(-1px);
}

body.auth-recovery .auth-submit-btn.is-loading .auth-submit-icon{
  transform:translateX(2px);
}

body.auth-recovery .auth-submit-btn.is-loading .auth-submit-spinner{
  display:inline-block;
}

@keyframes authSubmitSpin{
  to{
    transform:rotate(360deg);
  }
}

body.auth-recovery .auth-link{
  color:#526a60;
  font-size:.86rem;
  font-weight:700;
  text-decoration:none;
}

body.auth-recovery .auth-link:hover{
  color:#0f754e;
  text-decoration:underline;
  text-underline-offset:2px;
}

body.auth-recovery #success-msg{
  padding:.9rem .8rem;
  border:1px solid rgba(22,135,91,.14);
  border-radius:12px;
  background:rgba(239,250,244,.82);
}

body.auth-recovery .checkmark-container{
  background:rgba(22,135,91,.12);
  border-color:rgba(22,135,91,.18);
}

body.auth-recovery .checkmark{
  stroke:#16875b;
}

body.auth-recovery .alert-danger{
  border-radius:12px;
  font-size:.88rem;
}

@media (max-width:575.98px){
  body.auth-recovery{
    align-items:flex-start;
    padding:14px 10px;
  }

  body.auth-recovery .auth-box{
    max-width:100%;
    padding:1.45rem 1.12rem 1.25rem;
    border-radius:16px;
  }
}