<div class="auth-page">
  <div class="auth-card">
    <div class="auth-header">
      <a href="/" class="auth-logo"><svg width="40" height="40" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="8" fill="#1a56db"/><path d="M8 10h8v16H8zM20 10h8v8h-8zM20 22h8v4h-8z" fill="white" opacity="0.9"/></svg></a>
      <h1>Forgot Password</h1>
      <p>Enter your email and we'll send you a reset link.</p>
    </div>
    <% if (error && error.length) { %><div class="alert alert-error"><i class="bi bi-exclamation-circle-fill"></i> <%= error[0] %></div><% } %>
    <% if (success && success.length) { %><div class="alert alert-success"><i class="bi bi-check-circle-fill"></i> <%= success[0] %></div><% } %>
    <form action="/forgot-password" method="POST" class="auth-form">
      <div class="form-group"><label>Email Address</label><div class="input-icon"><i class="bi bi-envelope-fill"></i><input type="email" name="email" required placeholder="you@company.com" autofocus></div></div>
      <button type="submit" class="btn btn-primary btn-block btn-lg">Send Reset Link <i class="bi bi-send-fill"></i></button>
    </form>
    <div class="auth-divider"><span>Remember your password?</span></div>
    <a href="/login" class="btn btn-outline-primary btn-block">Back to Sign In</a>
  </div>
</div>
