<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}TheNicheQuiz{% endblock %}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --bg: #0a0a1a; --bg-card: #0f1023; --border: #1e1e3a;
            --text: #e8e8f0; --text-secondary: #8888a8; --text-muted: #555577;
            --amber: #F59E0B; --amber-dark: #d97706; --purple: #8B5CF6;
            --red: #ef4444; --green: #22c55e;
        }
        body {
            font-family: 'Inter', -apple-system, sans-serif;
            background: var(--bg); color: var(--text);
            min-height: 100vh; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            padding: 20px;
        }
        .auth-bg {
            position: fixed; inset: 0; z-index: 0;
            background:
                radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139,92,246,0.1), transparent),
                radial-gradient(ellipse 40% 40% at 80% 100%, rgba(245,158,11,0.06), transparent);
        }
        .auth-container {
            position: relative; z-index: 1; width: 100%; max-width: 420px;
        }
        .auth-logo {
            display: flex; align-items: center; justify-content: center;
            gap: 10px; margin-bottom: 40px; text-decoration: none;
        }
        .auth-logo-icon {
            width: 42px; height: 42px; border-radius: 12px;
            background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(139,92,246,0.15));
            border: 1px solid rgba(245,158,11,0.25);
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
        }
        .auth-logo-text {
            font-size: 22px; font-weight: 800; color: #fff;
        }
        .auth-logo-text span { color: var(--amber); }
        .auth-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 40px 36px;
        }
        .auth-title {
            font-size: 26px; font-weight: 800; margin-bottom: 6px;
            letter-spacing: -0.02em;
        }
        .auth-subtitle {
            font-size: 14px; color: var(--text-secondary); margin-bottom: 28px;
        }
        .auth-error {
            padding: 12px 16px; border-radius: 10px;
            background: rgba(239,68,68,0.08);
            border: 1px solid rgba(239,68,68,0.2);
            color: var(--red); font-size: 13px; font-weight: 500;
            margin-bottom: 20px;
        }
        .form-group { margin-bottom: 18px; }
        .form-label {
            display: block; font-size: 12px; font-weight: 600;
            color: var(--text-secondary); text-transform: uppercase;
            letter-spacing: 0.06em; margin-bottom: 6px;
        }
        .form-input {
            width: 100%; padding: 12px 16px;
            background: #141432; border: 1px solid var(--border);
            border-radius: 10px; color: var(--text);
            font-size: 15px; font-family: inherit;
            outline: none; transition: all 0.2s;
        }
        .form-input:focus {
            border-color: var(--amber);
            box-shadow: 0 0 0 3px rgba(245,158,11,0.1);
        }
        .form-input::placeholder { color: var(--text-muted); }
        .auth-btn {
            width: 100%; padding: 14px 24px;
            background: linear-gradient(135deg, var(--amber), var(--amber-dark));
            color: #000; font-size: 15px; font-weight: 800;
            border: none; border-radius: 10px; cursor: pointer;
            transition: all 0.3s; margin-top: 8px;
        }
        .auth-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 20px rgba(245,158,11,0.3);
        }
        .auth-footer {
            text-align: center; margin-top: 24px;
            font-size: 14px; color: var(--text-muted);
        }
        .auth-footer a {
            color: var(--amber); text-decoration: none; font-weight: 600;
        }
        .auth-footer a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <div class="auth-bg"></div>
    <div class="auth-container">
        <a href="/" class="auth-logo">
            <div class="auth-logo-icon">🎯</div>
            <div class="auth-logo-text">The<span>Niche</span>Quiz</div>
        </a>
        <div class="auth-card">
            {% block content %}{% endblock %}
        </div>
        {% block footer %}{% endblock %}
    </div>
</body>
</html>
