{% extends spa_base or "base.html"%}
{% block title %}Acesso negado (403){% endblock %}
{% block meta_description %}Você não tem permissão para acessar esta página do Troço Play.{% endblock %}
{% block content %}
<style>
    .e403-wrap { max-width: 640px; margin: 70px auto 90px; padding: 0 20px; text-align: center; }
    .e403-code {
        font-size: 4.6em; font-weight: 800; line-height: 1; letter-spacing: -3px;
        background: linear-gradient(180deg, #fff 0%, var(--primary) 100%);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .e403-icon { font-size: 2.4em; margin: 10px 0 2px; }
    .e403-title { font-size: 1.5em; font-weight: 700; color: var(--text-primary); margin: 10px 0; }
    .e403-text { color: var(--text-muted); font-size: 0.98em; line-height: 1.6; margin-bottom: 28px; }
    .e403-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .e403-actions a {
        padding: 12px 26px; border-radius: var(--radius-md); text-decoration: none;
        font-weight: 600; font-size: 0.92em; transition: var(--transition);
    }
    .e403-actions .btn-primary { background: var(--primary); color: #fff; }
    .e403-actions .btn-primary:hover { background: var(--primary-hover); }
    .e403-actions .btn-ghost { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border); }
    .e403-actions .btn-ghost:hover { border-color: var(--border-hover); color: var(--text-primary); }
</style>

<div class="e403-wrap">
    <div class="e403-code">403</div>
    <div class="e403-icon">🔒</div>
    <h1 class="e403-title">Acesso negado</h1>
    <p class="e403-text">
        Sua conta não tem permissão para ver esta área.
        {% if not current_user.is_authenticated %}Entre na sua conta para continuar.{% endif %}
    </p>
    <div class="e403-actions">
        <a href="/" class="btn-primary">Voltar ao Início</a>
        {% if not current_user.is_authenticated %}
        <a href="/login" class="btn-ghost">Entrar</a>
        {% else %}
        <a href="/dashboard" class="btn-ghost">Minha Conta</a>
        {% endif %}
        <a href="/suporte" class="btn-ghost">Suporte</a>
    </div>
</div>
{% endblock %}