<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>psyc · restricted</title>
  <meta name="robots" content="noindex,nofollow">
  <link rel="icon" type="image/png" href="/static/psyc-logo.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/static/cockpit.css">
  <link rel="stylesheet" href="/static/psyc-tokens.css">
</head>
<body class="gate-body">
  <div class="gate-bg"></div>
  <div class="gate-wrap">
    <div class="gate-card">
      <span class="corner tl"></span><span class="corner tr"></span>
      <span class="corner bl"></span><span class="corner br"></span>

      <div class="gate-emblem">
        <svg viewBox="0 0 48 48" width="46" height="46" aria-hidden="true">
          <path d="M24 3 L42 10 V24 C42 35 34 42 24 45 C14 42 6 35 6 24 V10 Z"
                fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round"/>
          <circle cx="24" cy="21" r="5" fill="none" stroke="currentColor" stroke-width="2.2"/>
          <rect x="22" y="24" width="4" height="8" rx="2" fill="currentColor"/>
        </svg>
        <span class="emblem-ring"></span>
      </div>

      <div class="gate-status"><span class="pulse-dot"></span> SECURE CHANNEL · TOTP</div>
      <h1 class="gate-title">RESTRICTED ZONE</h1>
      <p class="gate-sub">psyc · admin control center</p>

      {% if not provisioned %}
      <div class="gate-setup">
        <div class="gate-qr-frame">
          <img class="gate-qr" src="{{ qr }}" alt="TOTP enrollment QR">
          <span class="scanline"></span>
        </div>
        <p class="gate-step">Scan with Google&nbsp;Authenticator or Authy to enroll</p>
      </div>
      {% endif %}

      {% if error %}<div class="gate-error">✗ Invalid or expired code</div>{% endif %}

      <form method="post" action="/admin/verify" class="gate-form">
        <input type="text" name="code" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code"
               maxlength="6" placeholder="••••••" class="gate-input" autofocus>
        <button type="submit" class="gate-btn">UNLOCK</button>
      </form>
      <p class="gate-hint">6-digit code · rotates every 30 s</p>
    </div>
  </div>
</body>
</html>
