<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" fill="none">
  <!-- Background -->
  <rect width="400" height="400" fill="#f8fafc"/>

  <!-- Gradient definitions -->
  <defs>
    <linearGradient id="envelopeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#6366f1;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="checkGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="xGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#ef4444;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#dc2626;stop-opacity:1" />
    </linearGradient>
  </defs>

  <!-- Decorative background elements -->
  <circle cx="80" cy="80" r="40" fill="#e0e7ff" opacity="0.5"/>
  <circle cx="320" cy="320" r="50" fill="#ddd6fe" opacity="0.5"/>
  <circle cx="350" cy="100" r="30" fill="#bfdbfe" opacity="0.5"/>
  <circle cx="60" cy="280" r="35" fill="#d1fae5" opacity="0.5"/>

  <!-- Main envelope -->
  <g transform="translate(100, 120)">
    <!-- Envelope body -->
    <rect x="0" y="40" width="200" height="140" rx="8" fill="white" stroke="url(#envelopeGradient)" stroke-width="4"/>

    <!-- Envelope flap background -->
    <path d="M 0 40 L 100 120 L 200 40" fill="#f1f5f9"/>

    <!-- Envelope flap outline -->
    <path d="M 0 40 L 100 120 L 200 40" fill="none" stroke="url(#envelopeGradient)" stroke-width="4" stroke-linejoin="round"/>

    <!-- Envelope top -->
    <path d="M 0 40 L 100 120 L 200 40 L 200 35 L 100 115 L 0 35 Z" fill="url(#envelopeGradient)"/>

    <!-- Email lines inside envelope -->
    <line x1="30" y1="100" x2="170" y2="100" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>
    <line x1="30" y1="120" x2="140" y2="120" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>
    <line x1="30" y1="140" x2="160" y2="140" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- Checkmark (valid) -->
  <g transform="translate(260, 80)">
    <circle cx="30" cy="30" r="28" fill="white" stroke="url(#checkGradient)" stroke-width="3"/>
    <circle cx="30" cy="30" r="25" fill="url(#checkGradient)" opacity="0.1"/>
    <path d="M 18 30 L 26 38 L 42 20" stroke="url(#checkGradient)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
  </g>

  <!-- X mark (invalid) - smaller, at bottom left -->
  <g transform="translate(70, 280)">
    <circle cx="20" cy="20" r="18" fill="white" stroke="url(#xGradient)" stroke-width="2"/>
    <circle cx="20" cy="20" r="16" fill="url(#xGradient)" opacity="0.1"/>
    <path d="M 13 13 L 27 27 M 27 13 L 13 27" stroke="url(#xGradient)" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- Warning/suspicious icon - at bottom right -->
  <g transform="translate(310, 270)">
    <circle cx="20" cy="20" r="18" fill="white" stroke="#f59e0b" stroke-width="2"/>
    <circle cx="20" cy="20" r="16" fill="#fbbf24" opacity="0.1"/>
    <path d="M 20 10 L 20 22" stroke="#f59e0b" stroke-width="3" stroke-linecap="round"/>
    <circle cx="20" cy="28" r="2" fill="#f59e0b"/>
  </g>

  <!-- At symbol decoration -->
  <g transform="translate(30, 40)">
    <text x="0" y="0" font-family="system-ui, -apple-system, sans-serif" font-size="32" fill="#8b5cf6" font-weight="700" opacity="0.6">@</text>
  </g>

  <!-- Domain decoration -->
  <g transform="translate(340, 240)">
    <text x="0" y="0" font-family="monospace" font-size="14" fill="#6366f1" font-weight="600" opacity="0.6">.com</text>
  </g>

  <!-- Shield icon (security/validation) -->
  <g transform="translate(130, 290)">
    <path d="M 20 0 L 30 5 L 30 18 Q 30 28 20 35 Q 10 28 10 18 L 10 5 Z" fill="url(#checkGradient)" opacity="0.3" stroke="url(#checkGradient)" stroke-width="2"/>
    <path d="M 15 17 L 19 21 L 26 12" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
  </g>

  <!-- Magnifying glass (validation checking) -->
  <g transform="translate(280, 200)">
    <circle cx="15" cy="15" r="12" fill="none" stroke="#6366f1" stroke-width="3"/>
    <line x1="24" y1="24" x2="32" y2="32" stroke="#6366f1" stroke-width="3" stroke-linecap="round"/>
    <path d="M 10 15 L 14 19 L 20 11" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
  </g>

  <!-- Floating validation icons -->
  <g opacity="0.5">
    <!-- Small checkmarks -->
    <circle cx="180" cy="90" r="8" fill="#10b981" opacity="0.3"/>
    <path d="M 176 90 L 178 92 L 184 86" stroke="#10b981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>

    <!-- Small X -->
    <circle cx="220" cy="320" r="8" fill="#ef4444" opacity="0.3"/>
    <path d="M 216 316 L 224 324 M 224 316 L 216 324" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round"/>
  </g>

  <!-- Email text examples (decorative) -->
  <g opacity="0.4">
    <text x="40" y="180" font-family="monospace" font-size="11" fill="#3b82f6" font-weight="600">user@</text>
    <text x="300" y="150" font-family="monospace" font-size="11" fill="#8b5cf6" font-weight="600">@mail</text>
  </g>

  <!-- Connecting lines (validation flow) -->
  <g opacity="0.2">
    <path d="M 200 200 Q 250 160 280 110" stroke="#6366f1" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
    <path d="M 200 240 Q 160 260 100 290" stroke="#6366f1" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
  </g>
</svg>
