<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>Reset Password</h1>
      <p>Enter your new password below.</p>
    </div>
    <% if (error && error.length) { %><div class="alert alert-error"><i class="bi bi-exclamation-circle-fill"></i> <%= error[0] %></div><% } %>
    <form action="/reset-password" method="POST" class="auth-form">
      <input type="hidden" name="token" value="<%= token %>">
      <div class="form-group"><label>New Password</label>
        <div class="input-icon"><i class="bi bi-lock-fill"></i><input type="password" name="password" id="passwordField" required placeholder="New password" autofocus>
        <button type="button" class="input-toggle" onclick="togglePassword('passwordField',this)"><i class="bi bi-eye"></i></button></div>
        <small class="form-help">Must contain uppercase, lowercase, number, and symbol.</small>
      </div>
      <button type="submit" class="btn btn-primary btn-block btn-lg">Reset Password</button>
    </form>
  </div>
</div>
<script>function togglePassword(id,btn){const f=document.getElementById(id);const icon=btn.querySelector('i');f.type=f.type==='password'?'text':'password';icon.className=f.type==='password'?'bi bi-eye':'bi bi-eye-slash';}</script>
