.auth-wrap{ max-width: 460px; margin: 60px auto 100px; }
.auth-panel{ background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 32px; }
.auth-panel h1{ font-size: 24px; margin-bottom: 8px; }
.auth-panel > p{ font-size: 14px; margin-bottom: 24px; }

.field{ margin-bottom: 16px; }
.field label{ display:block; font-size: 13px; color: var(--text-mid); margin-bottom: 6px; }
.field input{
  width:100%; background: var(--bg-2); border: 1px solid var(--border-soft-2); border-radius: 8px;
  padding: 12px 14px; color: var(--text-hi); font-family: var(--font-body); font-size: 14px; outline:none;
}
.field input:focus{ border-color: var(--gold); }
.field-error{ font-size: 12px; color: #ff6b6b; margin-top: 6px; display:none; }
.field.has-error input{ border-color: #ff6b6b; }
.field.has-error .field-error{ display:block; }

.fee{
  display:flex; justify-content:space-between; align-items:center;
  background: rgba(255,196,38,0.1); border: 1px solid rgba(255,196,38,0.35);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 22px; font-weight:700; color:var(--text-hi);
}
.fee span:last-child{ color: var(--gold); font-family: var(--font-display); font-size: 18px; }

.pay-security{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--text-dim); margin-top: 14px; justify-content:center; }
.pay-security svg{ flex-shrink:0; color: var(--robotics); }

.form-alert{
  display:none; align-items:flex-start; gap: 10px; font-size: 13.5px;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px;
}
.form-alert.show{ display:flex; }
.form-alert.error{ background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.35); color:#ffb3b3; }
.form-alert.info{ background: var(--iot-soft); border: 1px solid rgba(47,168,255,0.35); color:#bfe0ff; }

/* success state */
.success-panel{ text-align:center; }
.success-check{
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 20px;
  background: rgba(34,217,138,0.15); border: 1px solid rgba(34,217,138,0.4);
  display:flex; align-items:center; justify-content:center; color: var(--robotics);
}
.success-panel h1{ margin-bottom: 10px; }
.success-panel p{ font-size: 14.5px; color: var(--text-mid); margin-bottom: 24px; }
.btn-whatsapp{
  background: #25D366; color: #05270f; width: 100%; justify-content:center;
  box-shadow: 0 8px 24px -8px rgba(37,211,102,0.5);
}
.btn-whatsapp:hover{ box-shadow: 0 10px 30px -6px rgba(37,211,102,0.65); }
.success-ref{ font-size: 12px; color: var(--text-dim); margin-top: 18px; word-break: break-all; }

.btn[disabled]{ opacity: 0.6; pointer-events: none; }

.fx-note{
  text-align: center; font-size: 12px; color: var(--text-dim);
  margin: -12px 0 20px;
}

#feeAmount{ transition: color .2s ease; }
.fx-note a{ font-weight: 600; }

/* password visibility toggle */
.field-password{ position: relative; }
.field-password input{ padding-right: 44px; }
.toggle-password{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 6px;
  border-radius: 6px;
}
.toggle-password:hover{ color: var(--text-hi); background: rgba(255,255,255,0.06); }

/* forgot password link */
.forgot-link{ display: block; text-align: right; font-size: 12.5px; color: var(--text-dim); margin-top: -8px; margin-bottom: 16px; }
.forgot-link:hover{ color: var(--gold); }