{# Passkey login — standalone page, same pattern as callback.html #}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Otto — Sign In</title>
    {{ font_link | safe }}
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #0A0A0A;
            color: #F0EEE8;
            min-height: 100vh;
            display: flex; align-items: center; justify-content: center;
            padding: 24px;
            -webkit-font-smoothing: antialiased;
        }
        .auth-card {
            width: 100%; max-width: 400px; text-align: center;
            background: #111113; border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px; padding: 48px 32px;
        }
        .brand { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
                  font-weight: 700; color: #6B6B63; margin-bottom: 32px; }
        .heading { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px;
                   letter-spacing: -0.01em; }
        .subtitle { font-size: 0.875rem; color: #A8A8A0; margin-bottom: 32px; line-height: 1.5; }
        .btn-passkey {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            width: 100%; padding: 12px 24px; border: none; border-radius: 8px;
            background: #B8974E; color: #0A0A0A; font-size: 0.875rem; font-weight: 600;
            cursor: pointer; transition: opacity 0.15s;
        }
        .btn-passkey:hover { opacity: 0.9; }
        .btn-passkey:disabled { opacity: 0.5; cursor: not-allowed; }
        .auth-error {
            margin-top: 16px; padding: 12px; border-radius: 8px;
            background: rgba(248,113,113,0.1); color: #f87171;
            font-size: 0.813rem; display: none;
        }
    </style>
</head>
<body>
    <div class="auth-card">
        <div class="brand">OTTO</div>
        <h1 class="heading">Welcome back</h1>
        <p class="subtitle">Sign in with your passkey to access the admin panel.</p>
        <button class="btn-passkey" id="loginBtn">Sign in with Passkey</button>
        <div class="auth-error" id="errorMsg"></div>
    </div>
    {{ auth_login_js | safe }}
</body>
</html>
