<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recuperar Senha - MonitorPing</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root { --bg:#0f172a; --card:rgba(30,41,59,0.7); --primary:#3b82f6; --primary-hover:#2563eb; --text:#f8fafc; --muted:#94a3b8; --border:rgba(255,255,255,0.1); }
        * { box-sizing:border-box; margin:0; padding:0; font-family:'Inter',sans-serif; }
        body { background:var(--bg); color:var(--text); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
        .card { width:100%; max-width:420px; background:var(--card); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:24px; padding:48px; box-shadow:0 25px 50px -12px rgba(0,0,0,0.5); animation:slideUp 0.5s cubic-bezier(0.16,1,0.3,1); }
        @keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
        .logo { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#3b82f6,#6366f1); margin-bottom:24px; font-size:1.2rem; }
        h2 { font-size:1.6rem; font-weight:600; margin-bottom:8px; }
        p.sub { color:var(--muted); font-size:0.9rem; margin-bottom:28px; line-height:1.5; }
        .alert { padding:12px 16px; border-radius:8px; font-size:0.88rem; margin-bottom:20px; }
        .alert-err { background:rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.2); }
        .alert-ok  { background:rgba(34,197,94,0.1); color:#4ade80; border:1px solid rgba(34,197,94,0.2); }
        .form-group { margin-bottom:20px; }
        .form-group label { display:block; font-size:0.85rem; font-weight:500; margin-bottom:8px; color:#cbd5e1; }
        .form-group input { width:100%; padding:14px 16px; background:rgba(15,23,42,0.5); border:1px solid var(--border); border-radius:12px; color:#fff; font-size:1rem; transition:all 0.2s; }
        .form-group input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,0.2); }
        .btn { width:100%; padding:14px; background:var(--primary); color:#fff; border:none; border-radius:12px; font-size:1rem; font-weight:600; cursor:pointer; transition:background 0.2s; }
        .btn:hover { background:var(--primary-hover); }
        .back { display:block; text-align:center; margin-top:24px; color:var(--muted); font-size:0.88rem; }
        .back a { color:var(--primary); text-decoration:none; font-weight:600; }
        .back a:hover { text-decoration:underline; }
    </style>
</head>
<body>
    <div class="card">
        <div class="logo">📡</div>
        <h2>Recuperar Senha</h2>
        <p class="sub">Informe seu e-mail e enviaremos um link para redefinir sua senha.</p>

        <?php if (!empty($error)): ?>
            <div class="alert alert-err"><?= h($error) ?></div>
        <?php endif; ?>
        <?php if (!empty($success)): ?>
            <div class="alert alert-ok"><?= h($success) ?></div>
        <?php endif; ?>

        <?php if (empty($success)): ?>
        <form method="post" action="index.php?page=forgot_password">
            <input type="hidden" name="csrf_token" value="<?= h(csrf_token()) ?>">
            <div class="form-group">
                <label>E-mail cadastrado</label>
                <input type="email" name="email" placeholder="seu@email.com" required autofocus>
            </div>
            <button type="submit" class="btn">Enviar link de recuperação</button>
        </form>
        <?php endif; ?>

        <div class="back"><a href="index.php?page=login">← Voltar para o login</a></div>
    </div>
</body>
</html>
