Forgot Password

<section class="ws-auth flex min-h-screen items-center justify-center bg-[var(--ws-auth-bg)] px-6">
  <div class="w-full max-w-md">
    <div class="rounded-2xl border border-[var(--ws-auth-border)] bg-[var(--ws-auth-card-bg)] p-8 shadow-sm">
      <div class="flex justify-center">
        <div class="flex h-14 w-14 items-center justify-center rounded-full bg-[var(--ws-auth-action-bg)]/10">
          <svg class="h-7 w-7 text-[var(--ws-auth-action-bg)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
          </svg>
        </div>
      </div>

      <h1 class="mt-5 text-center text-xl font-bold text-[var(--ws-auth-text)]">Forgot your password?</h1>
      <p class="mt-2 text-center text-sm text-[var(--ws-auth-text-soft)]">No worries. Enter your email address and we'll send you a link to reset your password.</p>

      <form class="mt-6 space-y-4">
        <div>
          <label for="reset-email" class="block text-sm font-medium text-[var(--ws-auth-text-soft)]">Email address</label>
          <input type="email" id="reset-email" name="email" autocomplete="email" required
            class="mt-1.5 block w-full rounded-lg border border-[var(--ws-auth-input-border)] bg-[var(--ws-auth-card-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-auth-text)] focus:border-[var(--ws-auth-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-auth-action-bg)]"
            placeholder="you@company.com">
        </div>

        <button type="submit" class="w-full rounded-lg bg-[var(--ws-auth-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-auth-action-text)] transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--ws-auth-action-bg)] focus:ring-offset-2">
          Send reset link
        </button>
      </form>
    </div>

    <p class="mt-6 text-center text-sm text-[var(--ws-auth-text-soft)]">
      <a href="#" class="inline-flex items-center gap-1.5 font-semibold text-[var(--ws-auth-action-bg)]">
        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
        </svg>
        Back to login
      </a>
    </p>
  </div>
</section>