CAPTCHA 组件 - 水彩/艺术

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">

  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden relative border border-solid border-gray-300 dark:border-gray-700
              bg-gradient-to-br from-blue-50 dark:from-blue-950 to-purple-50 dark:to-purple-950
              transform transition-all duration-300 hover:scale-[1.01]">

    <!-- Artistic Background Elements (simulated with layered divs and subtle effects) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-300 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
      <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
      <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-teal-200 dark:bg-teal-800 rounded-full mix-blend-multiply filter blur-lg opacity-60"></div>
    </div>

    <div class="relative z-10 p-8">
      <h2 class="text-2xl font-extrabold text-blue-900 dark:text-blue-200 mb-4 text-center tracking-tight leading-tight"
          style="font-family: 'Times New Roman', serif;">Security Check</h2>
      <p class="text-sm text-gray-700 dark:text-gray-300 mb-6 text-center leading-relaxed">
        To proceed, please verify you are human.
      </p>

      <div class="flex flex-col items-center mb-6">
        <!-- CAPTCHA Image Placeholder -->
        <div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden border border-purple-400 dark:border-purple-600 shadow-md mb-4 flex items-center justify-center relative">
          <img src="https://picsum.photos/300/150?blur=5&random=1" alt="CAPTCHA Challenge" class="absolute inset-0 w-full h-full object-cover filter brightness-75 dark:brightness-50 opacity-80">
          <span class="relative z-10 text-3xl font-bold italic text-white dark:text-gray-200 tracking-wider select-none transform -rotate-3 blur-[0.7px]">
            A0bK9x
          </span>
        </div>

        <button class="flex items-center text-sm font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 transition duration-200 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7 0 0116 0V3a1 1 0 112 0v2.101a7.002 7 0 01-16 0V3a1 1 0 011-1zm6 4a4 4 0 100 8a4 4 0 000-8zm0 2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd" />
          </svg>
          Get a new challenge
        </button>
      </div>

      <form>
        <label for="captcha-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Enter the characters</label>
        <input type="text" id="captcha-input" placeholder="Enter the characters above" class="w-full px-4 py-2 mb-4 text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-2 border-purple-500 dark:border-purple-400 rounded-md shadow-sm
                focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent
                placeholder-gray-400 dark:placeholder-gray-500 transition duration-200 ease-in-out text-center tracking-wider font-semibold">

        <button type="submit" class="w-full py-2 px-4 rounded-md text-lg font-bold text-white shadow-lg
                bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all duration-300 ease-in-out
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900
                transform hover:scale-[1.02]">Verify</button>
      </form>
    </div>
  </div>
</div>