<div class="notice supsystic-admin-notice" style="
    padding: 0;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    margin: 16px 0;
    width:99%;
">
    <div style="
        position: relative;
        background: linear-gradient(135deg, #0d1b2a 0%, #0f2233 50%, #0a1628 100%);
        padding: 28px 32px;
        overflow: hidden;
    ">

        <!-- Grid background -->
        <div class="noticeAiBgCell"></div>

        <!-- Glow accent -->
        <div style="
               position: absolute;
    top: -150px;
    left: -50px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(74, 232, 234, 0.15) 0%, transparent 70%);
        "></div>

        <!-- Content -->
        <div style="position: relative; z-index: 1;">

            <!-- Badge -->
            <div style="display: inline-flex; align-items: center; gap: 6px; background: rgba(74,232,234,0.12); border: 1px solid rgba(74,232,234,0.3); border-radius: 20px; padding: 4px 12px; margin-bottom: 14px;">
                <span style="width: 7px; height: 7px; border-radius: 50%; background: #4ae8ea; display: inline-block; box-shadow: 0 0 6px #4ae8ea;"></span>
                <span style="font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: #4ae8ea; text-transform: uppercase; font-family: monospace;">NEW &mdash; MCP Integration</span>
            </div>

            <!-- Heading -->
            <h3 style="margin: 0 0 10px; font-size: 22px; font-weight: 700; color: #ffffff; line-height: 1.3;">
                ⚡ Data Tables now speak <span style="color: #4ae8ea;">AI</span>
            </h3>

            <!-- Description -->
            <p style="margin: 0 0 20px; font-size: 14px; color: #ffffff; max-width: 740px; line-height: 1.6;">
                Connect <strong style="color: #4ae8ea;">Claude, Cursor, or any MCP-compatible</strong> AI agent to your WordPress tables via Model Context Protocol. Read, analyze, export, import, create, edit &mdash; in plain language. 🚀
            </p>

            <!-- Buttons -->
            <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                <a
                    class="button"
                    href="https://supsystic.com/data-tables-generator-now-supports-ai-via-mcp-claude-cursor-ide/"
                    target="_blank"
                    data-response-code="hide"
                    data-response-type="ai"
                    style="
                        background: #4ae8ea;
                        border-color: #4ae8ea;
                        color: #0a1628;
                        font-weight: 700;
                        font-size: 13px;
                        padding: 6px 18px;
                        border-radius: 6px;
                        box-shadow: 0 0 16px rgba(74,232,234,0.35);
                        text-decoration: none;
                        display: inline-flex;
                        align-items: center;
                        gap: 6px;
                    "
                >
                    ✦ Learn More
                </a>

                <button
                    class="button"
                    data-response-code="later"
                    data-response-type="ai"
                    style="
                        background: rgba(255,255,255,0.08);
                        border-color: rgba(255,255,255,0.25);
                        color: #000000;
                        font-size: 13px;
                        padding: 6px 16px;
                        border-radius: 6px;
                        cursor: pointer;
                    "
                >
                    🕐 Maybe Tomorrow
                </button>

                <button
                    class="button"
                    data-response-code="done"
                    data-response-type="ai"
                    style="
                        background: transparent;
                        border-color: rgba(255,255,255,0.15);
                        color: #ffffff;
                        font-size: 12px;
                        cursor: pointer;
                        padding: 6px 12px;
                        border-radius: 6px;
                    "
                >
                    Not Interested
                </button>
            </div>

        </div>
    </div>
</div>
