{# SVG-сцены: явные цвета для совместимости с темами #}
{% macro error_visual(visual_key) %}
<div class="error-scene error-scene--{{ visual_key | default('server') }}" aria-hidden="true">
    {% if visual_key == 'route' %}
    <svg class="error-scene-svg" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="48" cy="80" r="16" fill="rgba(255,255,255,0.2)" stroke="rgba(255,255,255,0.85)" stroke-width="2"/>
        <circle cx="152" cy="80" r="16" fill="rgba(255,255,255,0.2)" stroke="rgba(255,255,255,0.85)" stroke-width="2"/>
        <circle cx="100" cy="80" r="22" fill="rgba(236,72,153,0.25)" stroke="rgba(251,191,232,0.95)" stroke-width="2.5"/>
        <path d="M64 80 H76 M124 80 H136" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-dasharray="5 4" stroke-linecap="round"/>
        <path d="M92 72 L108 88 M108 72 L92 88" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
        <path d="M100 34 Q142 48 156 80" stroke="rgba(255,255,255,0.35)" stroke-width="1.5" fill="none"/>
    </svg>
    {% elif visual_key == 'auth' %}
    <svg class="error-scene-svg" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="72" y="48" width="56" height="64" rx="12" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.8)" stroke-width="2"/>
        <circle cx="100" cy="72" r="14" fill="rgba(255,255,255,0.25)" stroke="#fff" stroke-width="2"/>
        <path d="M100 86v18M88 98h24" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
    </svg>
    {% elif visual_key == 'forbidden' %}
    <svg class="error-scene-svg" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M100 28 L148 48 V88 C148 112 128 128 100 136 C72 128 52 112 52 88 V48 Z" fill="rgba(255,255,255,0.12)" stroke="#fff" stroke-width="2"/>
        <path d="M82 78 L118 98 M118 78 L82 98" stroke="#fda4af" stroke-width="4" stroke-linecap="round"/>
    </svg>
    {% elif visual_key == 'license' %}
    <svg class="error-scene-svg" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="52" y="40" width="96" height="72" rx="10" fill="rgba(255,255,255,0.12)" stroke="rgba(255,255,255,0.7)" stroke-width="2"/>
        <rect x="88" y="72" width="24" height="28" rx="4" fill="rgba(255,255,255,0.22)" stroke="#fff" stroke-width="1.5"/>
        <path d="M94 72 V64 C94 56 106 56 106 64 V72" stroke="#fff" stroke-width="2" fill="none"/>
    </svg>
    {% elif visual_key == 'network' %}
    <svg class="error-scene-svg" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        <ellipse cx="100" cy="72" rx="52" ry="28" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.6)" stroke-width="2"/>
        <path d="M76 88 L76 108 M100 80 L100 108 M124 88 L124 108" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
        <path d="M48 100 H152" stroke="#f87171" stroke-width="2" stroke-dasharray="6 5"/>
    </svg>
    {% elif visual_key == 'clock' %}
    <svg class="error-scene-svg" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="80" r="44" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.75)" stroke-width="2"/>
        <line class="error-svg-hour" x1="100" y1="80" x2="100" y2="50" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
        <line class="error-svg-min" x1="100" y1="80" x2="126" y2="88" stroke="#fbcfe8" stroke-width="2" stroke-linecap="round"/>
        <circle cx="100" cy="80" r="5" fill="#fff"/>
    </svg>
    {% elif visual_key == 'form' %}
    <svg class="error-scene-svg" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="44" y="36" width="112" height="88" rx="12" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.7)" stroke-width="2"/>
        <rect x="60" y="56" width="80" height="10" rx="4" fill="rgba(255,255,255,0.35)"/>
        <rect x="60" y="76" width="56" height="10" rx="4" fill="rgba(255,255,255,0.2)"/>
        <path d="M100 104 L88 124 H112 Z" fill="rgba(251,191,36,0.85)" stroke="#fff" stroke-width="1.5"/>
    </svg>
    {% else %}
    <svg class="error-scene-svg" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="68" y="32" width="64" height="96" rx="8" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.75)" stroke-width="2"/>
        <rect x="76" y="44" width="48" height="12" rx="3" fill="rgba(255,255,255,0.35)"/>
        <rect x="76" y="62" width="48" height="12" rx="3" fill="rgba(255,255,255,0.25)"/>
        <rect class="error-svg-slot-alert" x="76" y="80" width="48" height="12" rx="3" fill="rgba(251,113,133,0.9)"/>
        <rect x="76" y="98" width="48" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
        <circle cx="40" cy="56" r="10" fill="rgba(255,255,255,0.2)" stroke="#fff" stroke-width="1.5"/>
        <circle cx="160" cy="56" r="10" fill="rgba(255,255,255,0.2)" stroke="#fff" stroke-width="1.5"/>
        <path d="M50 56 H68 M132 56 H150" stroke="rgba(255,255,255,0.55)" stroke-width="1.5"/>
    </svg>
    {% endif %}
</div>
{% endmacro %}