:root{
  --brand-primary: #198754;
  --brand-dark: #0f172a;
  --brand-muted: #64748b;
  --brand-border: #e2e8f0;
  --brand-card: rgba(255,255,255,0.92);
}

body{
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(25,135,84,.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(13,110,253,.10), transparent 28%),
    linear-gradient(135deg, #f8fafc 0%, #eef6f1 45%, #f8fafc 100%);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--brand-dark);
}

.forgot-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 24px 0;
}

.forgot-card{
  background: var(--brand-card);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .10);
  backdrop-filter: blur(10px);
}

.forgot-left{
  background:
    linear-gradient(160deg, rgba(25,135,84,.96), rgba(14,116,144,.92)),
    url('../img/bg-login.jpg') center/cover no-repeat;
  color: #fff;
  position: relative;
  min-height: 100%;
}

.forgot-left::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10));
}

.forgot-left-content{
  position: relative;
  z-index: 2;
  padding: 42px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 14px;
  font-weight: 600;
  width: fit-content;
}

.hero-title{
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 14px;
}

.hero-text{
  font-size: 1rem;
  color: rgba(255,255,255,.86);
  max-width: 480px;
}

.hero-points{
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.hero-point{
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.92);
  font-size: 15px;
}

.hero-point i{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 16px;
}

.mini-info{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.mini-stat{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 14px;
}

.forgot-right{
  background: rgba(255,255,255,.74);
  padding: 42px;
}

.logo-box{
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, #198754, #20c997);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 12px 24px rgba(25,135,84,.18);
}

.forgot-title{
  font-size: 1.65rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--brand-dark);
}

.forgot-subtitle{
  color: var(--brand-muted);
  margin-bottom: 28px;
}

.form-label{
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.input-group-text{
  background: #fff;
  border-right: 0;
  border-color: var(--brand-border);
  color: #64748b;
  border-radius: 14px 0 0 14px;
}

.form-control{
  height: 50px;
  border-color: var(--brand-border);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  box-shadow: none !important;
}

.form-control:focus{
  border-color: #86efac;
}

.input-group:focus-within .input-group-text{
  border-color: #86efac;
}

.form-hint{
  font-size: 13px;
  margin-top: 6px;
  color: var(--brand-muted);
}

.btn-forgot{
  height: 52px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 12px 24px rgba(25,135,84,.18);
}

.btn-back{
  height: 52px;
  border-radius: 14px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
}

.footer-note{
  color: var(--brand-muted);
  font-size: 14px;
  margin-top: 24px;
}

.alert{
  border-radius: 14px;
}

.was-validated .form-control:invalid,
.form-control.is-invalid{
  border-color: #dc3545;
  box-shadow: none !important;
}

.was-validated .form-control:valid,
.form-control.is-valid{
  border-color: #198754;
  box-shadow: none !important;
}

.input-group.has-validation > .form-control:focus{
  z-index: 3;
}

.input-group.has-validation .invalid-feedback{
  width: 100%;
  margin-top: 6px;
  font-size: 13px;
}

@media (max-width: 991.98px){
  .forgot-left{
    display: none;
  }

  .forgot-right{
    padding: 30px 22px;
  }

  .forgot-card{
    border-radius: 20px;
  }
}