<style>
    .ac-wrap {
        font-family: Arial, sans-serif;
        padding: 20px 0;
        color: #333;
    }
    .ac-title {
        font-size: 22px;
        font-weight: bold;
        margin: 0 0 16px 0;
        color: #1a1a2e;
    }
    .ac-body {
        font-size: 15px;
        line-height: 1.6;
        color: #444;
        margin: 0 0 24px 0;
    }
    .ac-btn {
        display: inline-block;
        background-color: #2563eb;
        color: #ffffff !important;
        text-decoration: none;
        padding: 12px 28px;
        border-radius: 6px;
        font-weight: bold;
        font-size: 15px;
        margin: 0 0 24px 0;
    }
    .ac-note {
        font-size: 13px;
        color: #777;
        border-top: 1px solid #e5e7eb;
        padding-top: 16px;
        margin-top: 8px;
        line-height: 1.5;
    }
    .ac-url {
        font-family: monospace;
        font-size: 11px;
        word-break: break-all;
        color: #2563eb;
        margin-top: 8px;
        display: block;
    }
</style>

<div class="ac-wrap">
    <h1 class="ac-title">{{ title }}</h1>

    <p class="ac-body">{{ description|safe }}</p>

    {% if action_url and cta_label %}
    <a href="{{ action_url }}" class="ac-btn">{{ cta_label }}</a>

    <p style="font-size:13px; color:#999; margin: 4px 0 20px 0;">
        Pokud tlačítko nefunguje, zkopírujte tento odkaz do prohlížeče:
        <span class="ac-url">{{ action_url }}</span>
    </p>
    {% endif %}

    {% if note %}
    <p class="ac-note">{{ note }}</p>
    {% endif %}
</div>
