{# OAuth callback result — standalone page with test-pinned CSS strings.
   This template does NOT extend base.html; it uses its own inline styles
   to guarantee exact CSS strings that tests assert on. #}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Otto Authentication</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: system-ui, -apple-system, sans-serif;
            background: #0a0a0a;
            color: #e8e8e4;
            min-height: 100vh;
            display: flex; align-items: center; justify-content: center;
            padding: 24px;
        }
        .card {
            width: 100%; max-width: 480px; text-align: center;
            background: #1a1a18; border: 1px solid #2a2a28; padding: 48px 32px;
        }
        .symbol { font-size: 2rem; margin-bottom: 20px; }
        .symbol.success { color: #4d9e6a; }
        .symbol.error   { color: #b85c5c; }
        .status {
            font-size: 1rem; font-weight: 600;
            letter-spacing: -0.01em; margin-bottom: 10px;
        }
        .message { font-size: 0.875rem; color: #6b6b67; line-height: 1.6; }
    </style>
</head>
<body>
    <div class="card">
        <div class="symbol {{ 'success' if success else 'error' }}">{{ ('&#10003;' if success else '&#10005;') | safe }}</div>
        <p class="status">{{ 'Authentication successful' if success else 'Authentication failed' }}</p>
        <p class="message">{{ message }}</p>
    </div>
</body>
</html>
