<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 440" width="720" height="440">
<defs>
<radialGradient id="av" cx="40%" cy="35%"><stop offset="0%" stop-color="#5a8a6a"/><stop offset="50%" stop-color="#2a5a3a"/><stop offset="100%" stop-color="#1a2a1a"/></radialGradient>
</defs>
<rect width="720" height="440" fill="#000"/>
<!-- โโโ ROW 1: TAG VARIANTS โโโ -->
<text x="360" y="24" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">tag variants</text>
<!-- 7 pills in one row. pad=12 each side. gap=16. -->
<!-- green W=72, red W=52, blue W=58, white W=78, gray W=76, on W=48, off W=48 -->
<!-- total = 432 + 6ร16 = 528. offset = (720-528)/2 = 96 -->
<g transform="translate(96, 40)">
<rect x="0" y="0" width="72" height="24" rx="12" fill="#00fe00" opacity="0.15"/><rect x="0" y="0" width="72" height="24" rx="12" fill="none" stroke="#00fe00" stroke-width="0.5" opacity="0.3"/>
<text x="36" y="16" font-family="Play, sans-serif" font-size="12" fill="#00fe00" text-anchor="middle">verified</text>
</g>
<g transform="translate(184, 40)">
<rect x="0" y="0" width="52" height="24" rx="12" fill="#ff0000" opacity="0.15"/><rect x="0" y="0" width="52" height="24" rx="12" fill="none" stroke="#ff0000" stroke-width="0.5" opacity="0.3"/>
<text x="26" y="16" font-family="Play, sans-serif" font-size="12" fill="#ff0000" text-anchor="middle">spam</text>
</g>
<g transform="translate(252, 40)">
<rect x="0" y="0" width="58" height="24" rx="12" fill="#00acff" opacity="0.15"/><rect x="0" y="0" width="58" height="24" rx="12" fill="none" stroke="#00acff" stroke-width="0.5" opacity="0.3"/>
<text x="29" y="16" font-family="Play, sans-serif" font-size="12" fill="#00acff" text-anchor="middle">cyber</text>
</g>
<g transform="translate(326, 40)">
<rect x="0" y="0" width="78" height="24" rx="12" fill="#fff" opacity="0.08"/><rect x="0" y="0" width="78" height="24" rx="12" fill="none" stroke="#fff" stroke-width="0.5" opacity="0.15"/>
<text x="39" y="16" font-family="Play, sans-serif" font-size="12" fill="#fff" text-anchor="middle">text 1.3k</text>
</g>
<g transform="translate(420, 40)">
<rect x="0" y="0" width="76" height="24" rx="12" fill="#4b4b4d" opacity="0.2"/><rect x="0" y="0" width="76" height="24" rx="12" fill="none" stroke="#4b4b4d" stroke-width="0.5"/>
<text x="38" y="16" font-family="Play, sans-serif" font-size="12" fill="#4b4b4d" text-anchor="middle">archived</text>
</g>
<g transform="translate(512, 40)">
<rect x="0" y="0" width="48" height="24" rx="12" fill="#00fe00" opacity="0.2"/><rect x="0" y="0" width="48" height="24" rx="12" fill="none" stroke="#00fe00" stroke-width="0.5" opacity="0.4"/>
<text x="24" y="16" font-family="Play, sans-serif" font-size="12" fill="#00fe00" text-anchor="middle">on</text>
</g>
<g transform="translate(576, 40)">
<rect x="0" y="0" width="48" height="24" rx="12" fill="#333" opacity="0.15"/><rect x="0" y="0" width="48" height="24" rx="12" fill="none" stroke="#4b4b4d" stroke-width="0.5"/>
<text x="24" y="16" font-family="Play, sans-serif" font-size="12" fill="#4b4b4d" text-anchor="middle">off</text>
</g>
<!-- icon + text pill -->
<g transform="translate(310, 80)">
<rect x="0" y="0" width="76" height="24" rx="12" fill="#00acff" opacity="0.15"/><rect x="0" y="0" width="76" height="24" rx="12" fill="none" stroke="#00acff" stroke-width="0.5" opacity="0.3"/>
<text x="12" y="17" font-family="Play, sans-serif" font-size="13">๐</text>
<text x="48" y="16" font-family="Play, sans-serif" font-size="12" fill="#00acff" text-anchor="middle">linked</text>
</g>
<text x="348" y="120" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">icon + text</text>
<!-- โโโ ROW 3: LOADING SKELETON โโโ -->
<rect x="40" y="136" width="640" height="1" fill="#1a1a1a"/>
<text x="360" y="160" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">loading skeleton</text>
<g transform="translate(160, 176)">
<rect x="0" y="0" width="80" height="24" rx="12" fill="#fff" opacity="0.3"/>
<text x="40" y="44" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">short</text>
</g>
<g transform="translate(280, 176)">
<rect x="0" y="0" width="120" height="24" rx="12" fill="#fff" opacity="0.3"/>
<text x="60" y="44" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">medium</text>
</g>
<g transform="translate(440, 176)">
<rect x="0" y="0" width="160" height="24" rx="12" fill="#fff" opacity="0.3"/>
<text x="80" y="44" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">wide</text>
</g>
<!-- โโโ ROW 4: PROGRESS MODE โโโ -->
<rect x="40" y="236" width="640" height="1" fill="#1a1a1a"/>
<text x="360" y="260" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">progress mode</text>
<g transform="translate(84, 276)">
<rect x="0" y="0" width="120" height="24" rx="12" fill="#333" opacity="0.15"/>
<rect x="0" y="0" width="110" height="24" rx="12" fill="#00fe00" opacity="0.2"/>
<text x="60" y="44" font-family="Play, sans-serif" font-size="10" fill="#00fe00" text-anchor="middle">92%</text>
</g>
<g transform="translate(228, 276)">
<rect x="0" y="0" width="120" height="24" rx="12" fill="#333" opacity="0.15"/>
<rect x="0" y="0" width="78" height="24" rx="12" fill="#00fe00" opacity="0.15"/>
<text x="60" y="44" font-family="Play, sans-serif" font-size="10" fill="#00fe00" text-anchor="middle">65%</text>
</g>
<g transform="translate(372, 276)">
<rect x="0" y="0" width="120" height="24" rx="12" fill="#333" opacity="0.15"/>
<rect x="0" y="0" width="36" height="24" rx="12" fill="#fcf000" opacity="0.15"/>
<text x="60" y="44" font-family="Play, sans-serif" font-size="10" fill="#fcf000" text-anchor="middle">30%</text>
</g>
<g transform="translate(516, 276)">
<rect x="0" y="0" width="120" height="24" rx="12" fill="#333" opacity="0.15"/>
<rect x="0" y="0" width="12" height="24" rx="12" fill="#ff0000" opacity="0.15"/>
<text x="60" y="44" font-family="Play, sans-serif" font-size="10" fill="#ff0000" text-anchor="middle">10%</text>
</g>
<!-- โโโ ROW 5: STATES โโโ -->
<rect x="40" y="336" width="640" height="1" fill="#1a1a1a"/>
<text x="360" y="360" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">states</text>
<g transform="translate(248, 376)">
<rect x="0" y="0" width="72" height="24" rx="12" fill="#00fe00" opacity="0.25"/>
<rect x="0" y="0" width="72" height="24" rx="12" fill="none" stroke="#00fe00" stroke-width="1" opacity="0.5"/>
<text x="36" y="16" font-family="Play, sans-serif" font-size="12" fill="#00fe00" text-anchor="middle">verified</text>
<text x="36" y="44" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">hover</text>
</g>
<g transform="translate(400, 377)">
<rect x="1" y="1" width="70" height="22" rx="11" fill="#00fe00" opacity="0.2"/>
<rect x="1" y="1" width="70" height="22" rx="11" fill="none" stroke="#00fe00" stroke-width="0.5" opacity="0.4"/>
<text x="36" y="15" font-family="Play, sans-serif" font-size="12" fill="#00fe00" text-anchor="middle">verified</text>
<text x="36" y="44" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">active</text>
</g>
</svg>