:root {
  --pp-blue-50: #eff6ff;
  --pp-blue-200: #bed9ff;
  --pp-blue-500: #3287ff;
  --pp-blue-600: #1677ff;
  --pp-blue-700: #0a68eb;
  --pp-blue-800: #0f58be;
  --pp-blue-rgb: 22, 119, 255;
  --pp-navy-50: #f7fafd;
  --pp-navy-100: #eff4fb;
  --pp-navy-200: #dfe8f3;
  --pp-navy-400: #8ca2c0;
  --pp-navy-500: #5b7394;
  --pp-navy-700: #2c405c;
  --pp-navy-900: #0b1f3a;
  --pp-navy-rgb: 11, 31, 58;
  --pp-success: #16a34a;
  --pp-danger: #dc2626;
  --pp-radius-sm: 8px;
  --pp-radius: 12px;
  --pp-radius-lg: 16px;
  --pp-shadow-sm: 0 1px 2px rgb(var(--pp-navy-rgb) / 6%);
  --pp-shadow: 0 4px 14px rgb(var(--pp-navy-rgb) / 8%);
  --pp-shadow-primary: 0 6px 16px rgb(var(--pp-blue-rgb) / 24%);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-width: 320px; margin: 0; overflow: hidden; }
body { color: var(--pp-navy-900); background: var(--pp-navy-50); font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
a { color: inherit; }

.recovery-layout { width: 100%; height: 100dvh; overflow: hidden; }

.recovery-panel { position: relative; width: 100%; height: 100dvh; display: grid; place-items: center; padding: 64px 20px 24px; overflow: hidden; direction: rtl; background: var(--pp-navy-50); }
.recovery-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgb(var(--pp-blue-rgb) / 10%) 1px, transparent 1.5px); background-size: 20px 20px; mask-image: linear-gradient(135deg, #000, transparent 38%, transparent 62%, #000); }
.recovery-wordmark { position: absolute; z-index: 1; top: 20px; left: 28px; }
.recovery-wordmark img { width: 132px; height: 38px; display: block; object-fit: contain; }
.recovery-card { z-index: 1; width: min(100%, 430px); padding: 28px; border: 1px solid var(--pp-navy-200); border-radius: var(--pp-radius-lg); background: #fff; box-shadow: var(--pp-shadow); text-align: center; }
.recovery-icon { width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: var(--pp-radius); color: var(--pp-blue-700); background: var(--pp-blue-50); font-size: 23px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--pp-blue-700); font-size: 12px; font-weight: 700; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-blue-600); }
.recovery-heading h1 { margin: 4px 0 7px; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.3; }
.recovery-heading h1 span { color: var(--pp-blue-600); }
.recovery-heading p { margin: 0; color: var(--pp-navy-500); font-size: 12px; line-height: 1.8; }
#recoveryForm { margin-top: 22px; text-align: right; }
.form-field label { display: block; margin-bottom: 6px; color: var(--pp-navy-900); font-size: 12px; font-weight: 600; }
.input-control { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--pp-navy-200); border-radius: var(--pp-radius-sm); background: #fff; transition: 180ms ease; }
.input-control:focus-within { border-color: var(--pp-blue-600); box-shadow: 0 0 0 3px rgb(var(--pp-blue-rgb) / 18%); }
.input-control > i { color: var(--pp-navy-400); font-size: 17px; }
.input-control input { min-width: 0; width: 100%; align-self: stretch; padding: 0; border: 0; outline: 0; color: var(--pp-navy-700); background: transparent; direction: ltr; text-align: right; font-size: 13px; }
.input-control input::placeholder { color: var(--pp-navy-400); }
.password-toggle { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: var(--pp-radius-sm); color: var(--pp-navy-500); background: transparent; cursor: pointer; }
.password-toggle:hover { color: var(--pp-blue-700); background: var(--pp-blue-50); }
.password-toggle i { font-size: 16px; }
.field-error { min-height: 17px; display: block; padding-top: 3px; color: var(--pp-danger); font-size: 10px; font-weight: 600; }
.form-field.is-invalid .input-control { border-color: var(--pp-danger); box-shadow: 0 0 0 3px rgb(220 38 38 / 16%); }
.submit-button { width: 100%; min-height: 47px; position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--pp-radius); color: #fff; background: var(--pp-blue-600); box-shadow: var(--pp-shadow-primary); font-size: 13px; font-weight: 700; cursor: pointer; transition: 180ms ease; }
.submit-button:hover { background: var(--pp-blue-700); }
.submit-button:active { background: var(--pp-blue-800); transform: translateY(1px); }
.submit-button i { position: absolute; left: 22px; }
.security-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 13px 0 0; color: var(--pp-navy-500); text-align: center; font-size: 9px; }
.security-note i { color: var(--pp-success); font-size: 13px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--pp-blue-700); font-size: 11px; font-weight: 700; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.success-state { margin-top: 22px; }
.success-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 11px; border-radius: 50%; color: var(--pp-success); background: #f0fdf4; font-size: 25px; }
.success-state h2 { margin: 0 0 6px; font-size: 18px; }
.success-state p { margin: 0; color: var(--pp-navy-500); font-size: 11px; line-height: 1.8; }
.success-state strong { display: block; color: var(--pp-navy-700); direction: ltr; }
.success-state button { margin-top: 13px; padding: 8px 14px; border: 1px solid var(--pp-blue-200); border-radius: var(--pp-radius-sm); color: var(--pp-blue-700); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.success-state button:hover { background: var(--pp-blue-50); }
.success-action { display: inline-flex; margin-top: 14px; padding: 9px 16px; border-radius: var(--pp-radius-sm); color: #fff; background: var(--pp-blue-600); box-shadow: var(--pp-shadow-primary); font-size: 11px; font-weight: 700; text-decoration: none; }
.success-action:hover { background: var(--pp-blue-700); }
.reset-form .form-field + .form-field { margin-top: 3px; }
:where(a, button, input):focus-visible { outline: 2px solid var(--pp-blue-500); outline-offset: 2px; }
[hidden] { display: none !important; }

@media (max-width: 820px) {
  .recovery-panel { height: 100dvh; padding: 48px 18px 14px; }
  .recovery-wordmark { top: 7px; left: 18px; }
  .recovery-wordmark img { width: 108px; height: 31px; }
  .recovery-card { padding: 20px; }
}

@media (max-width: 430px) {
  .recovery-icon { width: 44px; height: 44px; margin-bottom: 8px; }
  .recovery-heading h1 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; }
}