<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accedi — Postilot</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: #f5f2ed; color: #1c1917;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 15px; line-height: 1.5;
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      padding: 40px 16px;
    }
    .card {
      background: #fff; border: 1px solid #e7e2da; border-radius: 20px;
      padding: 48px 40px; max-width: 440px; width: 100%;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06); text-align: center;
    }
    .brand {
      font-size: 13px; font-weight: 700; color: #4285F4;
      letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 20px;
      display: block;
    }
    .icon { font-size: 40px; margin-bottom: 16px; display: block; }
    h1 { font-size: 22px; font-weight: 800; color: #1c1917; margin-bottom: 10px; letter-spacing: -0.4px; }
    p { font-size: 14px; color: #78716c; line-height: 1.6; margin-bottom: 28px; }
    .btn {
      display: block; width: 100%; padding: 13px;
      border-radius: 10px; font-size: 14px; font-weight: 700;
      text-decoration: none; transition: all 0.15s; border: none; cursor: pointer;
      margin-bottom: 10px;
    }
    .btn-primary { background: #4285F4; color: #fff; }
    .btn-primary:hover { background: #3367D6; }
    .btn-ghost { background: #f0ece5; color: #57534e; }
    .btn-ghost:hover { background: #e5e0d8; }
    .divider { border: none; border-top: 1px solid #e7e2da; margin: 20px 0; }
    .note { font-size: 12px; color: #a8a29e; }
    .note a { color: #4285F4; text-decoration: none; }
    .note a:hover { text-decoration: underline; }
  </style>
</head>
<body>
<div class="card">
  <span class="brand">Postilot</span>
  <span class="icon">🤖</span>
  <h1>Accedi alla dashboard</h1>
  <p>La dashboard Postilot si apre direttamente dall'estensione Chrome. Installa l'estensione, poi clicca "Apri dashboard" dal pannello.</p>
  <a href="https://chrome.google.com/webstore" class="btn btn-primary" target="_blank" rel="noopener">Installa l'estensione</a>
  <a href="/registrati/" class="btn btn-ghost">Crea account gratuito</a>
  <hr class="divider">
  <p class="note">Hai già un account? Apri la pagina su cui vuoi scrivere, clicca sull'icona di Postilot nella barra Chrome, poi "Apri dashboard".<br><br>
  <a href="/">Torna alla home</a></p>
</div>
</body>
</html>
