Authentification à deux facteurs

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 space-y-6">
      <div class="flex items-center justify-center mb-4">
        <div class="w-16 h-16 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-600 dark:via-yellow-600 dark:to-green-600 rounded-full flex items-center justify-center shadow-lg">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
          </svg>
        </div>
      </div>
      <h2 class="text-2xl font-extrabold text-center text-gray-900 dark:text-gray-100 uppercase tracking-wide">Two-Factor Authentication</h2>
      <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
        Please enter the 6-digit code from your authenticator app.
      </p>
      <form class="space-y-4">
        <div class="flex justify-center space-x-2">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 1" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 2" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 3" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 4" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 5" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 6" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
        </div>
        <button type="submit" class="w-full py-3 px-4 rounded-lg text-white font-semibold shadow-md
        bg-gradient-to-r from-purple-600 via-pink-500 to-red-500
        hover:from-purple-700 hover:via-pink-600 hover:to-red-600
        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
        dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out text-lg">
          Verify Code
        </button>
      </form>
      <div class="text-center">
        <a href="#" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
          Having trouble? Try another method
        </a>
      </div>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-950">
  <div class="relative w-full max-w-md p-8 overflow-hidden rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-indigo-500/20 to-purple-700/20 dark:from-indigo-900/30 dark:to-purple-900/30 shadow-2xl transition-all duration-300 transform scale-95 hover:scale-100 ring-2 ring-purple-500 dark:ring-indigo-700">
    <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-purple-700"></div>
    <div class="absolute top-0 -right-4 w-72 h-72 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-indigo-700"></div>
    <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:bg-pink-700"></div>

    <div class="relative z-10 text-center">
      <h2 class="text-4xl font-extrabold mb-4 text-white drop-shadow-[0_0_8px_rgba(168,85,247,0.7)] dark:drop-shadow-[0_0_8px_rgba(129,140,248,0.8)] sm:text-5xl">
        Verify Your Account
      </h2>
      <p class="text-lg mb-8 text-indigo-200 dark:text-indigo-300">
        Enter the 6-digit code sent to your email or phone.
      </p>

      <form class="space-y-6">
        <div class="flex justify-center gap-x-3 sm:gap-x-4">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 1">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 2">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 3">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 4">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 5">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 6">
        </div>

        <button type="submit" class="w-full py-3 px-6 rounded-lg text-xl font-semibold text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-950 transition-all duration-300 shadow-lg neon-button">
          Verify Code
        </button>

        <p class="text-center text-white/80 dark:text-indigo-300 text-base sm:text-lg mt-4">
          Didn't receive the code?
          <a href="#" class="font-medium text-pink-400 hover:text-pink-300 dark:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 ring-offset-2 ring-offset-gray-100 dark:ring-offset-gray-950 focus:ring-2 focus:ring-pink-400 focus:outline-none rounded-md">
            Resend Code
          </a>
        </p>
      </form>
    </div>
  </div>
</div>

<style>
  /* This is for the custom animation and glow effects */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  .glow-input {
    box-shadow: 0 0 5px rgba(168, 85, 247, 0.5), inset 0 0 5px rgba(168, 85, 247, 0.5);
  }

  .dark .glow-input {
    box-shadow: 0 0 5px rgba(129, 140, 248, 0.6), inset 0 0 5px rgba(129, 140, 248, 0.6);
  }

  .glow-input:focus {
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.8), inset 0 0 10px rgba(168, 85, 247, 0.8), 0 0 0 4px rgba(168,85,247,0.4);
  }

  .dark .glow-input:focus {
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.9), inset 0 0 10px rgba(129, 140, 248, 0.9), 0 0 0 4px rgba(129,140,248,0.5);
  }

  .neon-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 15px rgba(168,85,247,0.6);
  }

  .neon-button:hover {
    box-shadow: 0 0 25px rgba(168,85,247,0.8), 0 0 40px rgba(168,85,247,0.4);
  }

  .dark .neon-button {
      box-shadow: 0 0 15px rgba(129,140,248,0.7);
  }

  .dark .neon-button:hover {
      box-shadow: 0 0 25px rgba(129,140,248,0.9), 0 0 40px rgba(129,140,248,0.5);
  }
</style>
              

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-900 dark:to-blue-950 transition-all duration-500 ease-in-out font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 ease-in-out group hover:shadow-2xl dark:shadow-blue-900/50 border border-blue-50/50 dark:border-blue-900 relative">

    <!-- Background Blob/Gradient Effect -->
    <div class="absolute -top-20 -left-20 w-64 h-64 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-blue-700 dark:to-blue-900 transition-all duration-500 ease-in-out"></div>
    <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-gradient-to-br from-cyan-400 to-sky-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animation-delay-2000 animate-blob dark:from-sky-700 dark:to-teal-900 transition-all duration-500 ease-in-out"></div>
    <div class="absolute -top-10 -right-10 w-48 h-48 bg-gradient-to-br from-indigo-400 to-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animation-delay-4000 animate-blob dark:from-purple-700 dark:to-fuchsia-900 transition-all duration-500 ease-in-out"></div>

    <div class="p-8 sm:p-10 relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-blue-600 dark:text-blue-400 transform transition-all duration-500 ease-in-out group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
        </svg>
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mt-4 leading-tight group-hover:text-amber-500 dark:group-hover:text-indigo-400 transition-colors duration-500 ease-in-out">
          Two-Factor Authentication
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out">
          Please enter the 6-digit code sent to your device.
        </p>
      </div>

      <form action="#" method="POST">
        <div class="space-y-6">
          <div class="flex justify-center space-x-2 sm:space-x-4">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <span class="h-full w-2 sm:w-4 flex items-center justify-center text-gray-400 dark:text-gray-500 text-4xl">-</span>
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
          </div>

          <button type="submit" class="w-full flex justify-center py-4 px-6 border border-transparent rounded-full shadow-lg text-lg font-semibold text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75 dark:from-blue-700 dark:to-blue-900 dark:hover:from-blue-600 dark:hover:to-blue-800 dark:focus:ring-blue-700 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group-hover:shadow-2xl group-hover:shadow-blue-500/40 dark:group-hover:shadow-blue-900/60">
            Verify Code
          </button>
        </div>
      </form>

      <div class="mt-8 text-center text-sm">
        <p class="mb-2 text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out">
          Didn't receive the code?
        </p>
        <p>
          <a href="#" class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300 ease-in-out hover:underline group-hover:text-blue-700 dark:group-hover:text-blue-500">
            Resend Code
          </a>
          <span class="mx-2 text-gray-400 dark:text-gray-600">•</span>
          <a href="#" class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300 ease-in-out hover:underline group-hover:text-blue-700 dark:group-hover:text-blue-500">
            Use another method
          </a>
        </p>

        <div class="mt-8 pt-6 border-t border-blue-100 dark:border-blue-900/50 transition-colors duration-500 ease-in-out">
          <p class="text-xs text-gray-500 dark:text-gray-400">
            Having trouble? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline">Contact Support</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the blob animation - Tailwind CSS doesn't support complex keyframe animations directly */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Styles for input focus/auto-tabbing - requires JS for full functionality, but basic styling can be here */
  .space-x-2 > input:focus, .space-x-4 > input:focus {
    outline: none !important; /* Remove default outline */
  }
</style>
              

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-xl shadow-2xl p-8 transform perspective-1000 rotate-x-6 rotate-y-3 transition-all duration-300 hover:rotate-x-0 hover:rotate-y-0 hover:shadow-3xl flex flex-col items-center border border-gray-200 dark:border-gray-600">
    <div class="bg-blue-200 dark:bg-blue-600 rounded-full p-4 mb-6 shadow-md transform translate-z-20">
      <svg class="w-12 h-12 text-blue-800 dark:text-blue-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v3h8z" />
      </svg>
    </div>
    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 text-center transform translate-z-10">
      2-Step Verification
    </h2>
    <p class="text-sm text-gray-600 dark:text-gray-300 mb-6 text-center transform translate-z-5">
      Please enter the 6-digit code sent to your email address or phone number.
    </p>

    <div class="flex space-x-3 sm:space-x-4 mb-6 transform translate-z-10">
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
    </div>

    <button class="w-full py-3 px-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold rounded-lg shadow-lg transform translate-z-15 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-700 mb-4">
      Verify Code
    </button>

    <p class="text-sm text-gray-500 dark:text-gray-400 transform translate-z-5">
      Didn't receive the code? <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 font-medium transition-colors duration-200">Resend Code</a>
    </p>
  </div>
</div>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <div class="p-6 sm:p-8 flex flex-col items-center text-center">
      <div class="mb-6">
        <svg class="w-16 h-16 text-gray-800 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v3h8z"></path>
        </svg>
      </div>
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-3">Two-Factor Authentication</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed mb-6">
        For your security, we've sent a 6-digit verification code to your registered mobile device.
        Please enter it below to continue.
      </p>

      <div class="w-full space-y-4">
        <label for="verification-code" class="sr-only">Verification Code</label>
        <div class="flex justify-center space-x-2 sm:space-x-3">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 1 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 2 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 3 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 4 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 5 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 6 of verification code">
        </div>

        <button type="submit" class="w-full py-3 px-4 rounded-lg bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 font-semibold shadow-md hover:bg-gray-800 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 dark:focus:ring-gray-100 dark:focus:ring-offset-gray-800 transition-colors duration-200">
          Verify Code
        </button>
      </div>

      <div class="mt-6 text-sm text-gray-600 dark:text-gray-400">
        Didn't receive the code? 
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors duration-200">
          Resend Code
        </a>
      </div>

      <div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6 w-full text-left">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">What is 2FA?</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
          Two-Factor Authentication (2FA) adds an extra layer of security to your account.
          It requires both your password and a second piece of information (like a code from your phone)
          to verify your identity before granting access.
        </p>
        <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mt-2">
          This protects your account even if your password is stolen.
        </p>
      </div>
    </div>
  </div>
</div>
              

                <div class="min-h-screen bg-gray-900 text-gray-200 p-4 flex items-center justify-center dark">
  <div class="max-w-md w-full bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48"
          src="https://picsum.photos/400/500?grayscale&blur=5"
          alt="Abstract geometric pattern">
      </div>
      <div class="p-6 md:p-8 flex-1">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-2xl md:text-3xl font-extrabold text-gray-50 uppercase tracking-wide">Secure Login</h2>
          <svg class="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2h-2a2 2 0 01-2-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M5 10v6a2 2 0 002 2h4a2 2 0 002-2v-6m-9-4h11a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2a2 2 0 002 2z">
            </path>
          </svg>
        </div>

        <p class="text-gray-300 mb-6 text-sm md:text-base">
          A security code has been sent to your registered email address.
          Please enter it below to complete your login.
        </p>

        <form>
          <div class="grid grid-cols-6 gap-3 mb-6">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
            <input type="text" inputmode="numeric" maxlength="1"
              class="w-full h-12 text-center text-xl font-bold text-indigo-300 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-200 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:text-indigo-300">
          </div>

          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 text-sm md:text-base">
            <a href="#"
              class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out mb-2 sm:mb-0">Resend
              Code</a>
            <span class="text-gray-400 hidden sm:inline-block">•</span>
            <a href="#"
              class="text-indigo-400 hover:text-indigo-300 font-medium transition duration-200 ease-in-out">Change
              Authentication Method</a>
          </div>

          <button type="submit"
            class="w-full bg-indigo-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition duration-300 ease-in-out text-lg md:text-xl transform hover:scale-105">
            Verify
          </button>
        </form>

        <p class="text-center text-gray-500 mt-8 text-xs md:text-sm">
          Need help? <a href="#" class="text-indigo-400 hover:text-indigo-300 font-medium">Contact Support</a>
        </p>
      </div>
    </div>
  </div>
</div>
              

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

  <!-- Main Card Container -->
  <div class="bg-zinc-100 dark:bg-zinc-800 border-2 border-zinc-300 dark:border-zinc-700 rounded-lg shadow-xl overflow-hidden max-w-lg w-full transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01]">

    <!-- Header Section -->
    <div class="bg-zinc-200 dark:bg-zinc-700 p-6 sm:p-8 border-b-2 border-zinc-300 dark:border-zinc-600 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full bg-[url('https://picsum.photos/800/400?grayscale')] bg-cover bg-center opacity-10 dark:opacity-5"></div>
      <div class="relative z-10 flex items-center mb-4">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-orange-600 dark:text-orange-400 mr-3 transform -rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c0 3.072 1.335 5.965 3.129 8.243a12.003 12.003 0 0017.95-8.243c0-3.072-1.335-5.965-3.129-8.243z"></path>
        </svg>
        <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Two-Factor Authentication</h2>
      </div>
      <p class="text-sm sm:text-base text-zinc-700 dark:text-zinc-300 max-w-md">
        For enhanced security, please enter the 6-digit code sent to your registered device.
      </p>
    </div>

    <!-- Body Section - OTP Input -->
    <div class="p-6 sm:p-8">
      <div class="flex items-center space-x-3 mb-6">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-orange-500 dark:border-orange-400 object-cover">
        <div>
          <p class="text-sm text-zinc-700 dark:text-zinc-300">Verifying access for:</p>
          <p class="font-semibold text-lg text-zinc-900 dark:text-zinc-100">Olivia Davis</p>
        </div>
      </div>

      <form class="space-y-6">
        <div>
          <label for="otp-code" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Enter your 6-digit code</label>
          <div class="flex justify-center space-x-2 md:space-x-3">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" autocomplete="one-time-code" pattern="\d*">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <span class="flex items-center text-zinc-400 dark:text-zinc-500 text-3xl font-light mx-1 md:mx-2">-</span>
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
            <input type="text" inputmode="numeric" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-zinc-50 dark:bg-zinc-700 border-2 border-zinc-300 dark:border-zinc-600 rounded-lg text-zinc-900 dark:text-zinc-100 focus:border-orange-500 dark:focus:border-orange-400 focus:ring-1 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 outline-none shadow-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
          </div>
        </div>

        <p class="text-sm text-center text-red-600 dark:text-red-400 mt-4" role="alert" aria-live="polite" id="error-message" style="display:none;">Invalid code. Please try again.</p>

        <div class="flex flex-col sm:flex-row sm:justify-between sm:space-x-4 space-y-4 sm:space-y-0">
          <button type="submit" class="w-full sm:w-auto px-6 py-3 bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
            Verify Code
          </button>
          <button type="button" class="w-full sm:w-auto px-6 py-3 bg-zinc-300 hover:bg-zinc-400 dark:bg-zinc-600 dark:hover:bg-zinc-500 text-zinc-800 dark:text-zinc-200 font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
            Resend Code
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-zinc-600 dark:text-zinc-400">
          Need help? <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline font-medium">Contact Support</a> or <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline font-medium">Change Method</a>.
        </p>
      </div>
    </div>

    <!-- Footer Section (optional, for additional info) -->
    <div class="bg-zinc-200 dark:bg-zinc-700 p-4 sm:p-5 border-t-2 border-zinc-300 dark:border-zinc-600 text-center">
      <p class="text-xs text-zinc-500 dark:text-zinc-400">Your security is our priority. © 2023 Acme Events.</p>
    </div>

  </div>
</div>

<!-- Script for automatic focus and potential error display (purely illustrative, would need JS in a real app) -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const inputs = document.querySelectorAll('input[maxlength="1"][type="text"]');
    inputs.forEach((input, index) => {
      input.addEventListener('input', (e) => {
        if (e.data && e.data.match(/\d/)) { // Allow only digits
          if (index < inputs.length - 1) {
            inputs[index + 1].focus();
          }
        } else if (e.inputType === 'deleteContentBackward') {
          if (index > 0) {
            inputs[index - 1].focus();
          }
        } else {
          input.value = ''; // Clear non-digit input
        }
      });

      input.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && input.value === '') {
          if (index > 0) {
            inputs[index - 1].focus();
          }
        }
      });
    });

    // Example of showing an error message (would be triggered by backend validation)
    // const errorMessage = document.getElementById('error-message');
    // document.querySelector('form').addEventListener('submit', (e) => {
    //   e.preventDefault();
    //   errorMessage.style.display = 'block'; // Or 'none' on success
    //   setTimeout(() => errorMessage.style.display = 'none', 3000); // Hide after a few seconds
    // });
  });
<\/script>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 font-serif">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700
              transform transition-all duration-300 hover:scale-102 hover:shadow-2xl relative
              before:content-[''] before:absolute before:inset-0 before:bg-[url('https://www.transparenttextures.com/patterns/clean-paper-light.png')] dark:before:bg-[url('https://www.transparenttextures.com/patterns/dark-fish-skin.png')] before:opacity-20 before:pointer-events-none">

    <!-- Page Curl / Fold Accent -->
    <div class="absolute top-0 right-0 w-0 h-0 border-l-[30px] border-b-[30px] border-solid border-white dark:border-gray-800 border-t-accent-500 border-r-accent-500 rounded-bl-lg dark:border-opacity-30" style="border-bottom-color: transparent; border-left-color: transparent;"></div>

    <div class="p-6 sm:p-8 relative z-10">
      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-white leading-tight break-words">
        Two-Factor Authentication
      </h2>
      <p class="text-gray-600 dark:text-gray-300 mb-6 text-base sm:text-lg leading-relaxed break-words">
        Enter the 6-digit code from your authenticator app to complete your login.
      </p>

      <form>
        <div class="mb-6">
          <label for="auth_code" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 invisible h-0 w-0 absolute">Verification Code</label>
          <div class="flex space-x-2 sm:space-x-4 justify-center">
            <input type="text" id="code_digit_1" name="code_digit_1" maxlength="1" inputmode="numeric" pattern="[0-9]" autofocus
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_2" name="code_digit_2" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_3" name="code_digit_3" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <span class="flex items-center text-gray-400 dark:text-gray-500 text-3xl font-semibold print:text-gray-700 rotate-180 print:rotate-0">-</span>
            <input type="text" id="code_digit_4" name="code_digit_4" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_5" name="code_digit_5" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_6" name="code_digit_6" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
          </div>
        </div>

        <button type="submit"
                class="w-full py-3 px-4 rounded-lg bg-accent-500 text-white font-semibold text-lg
                       hover:bg-accent-600 focus:outline-none focus:ring-4 focus:ring-accent-300 focus:ring-opacity-75
                       transition duration-200 ease-in-out shadow-md dark:shadow-lg dark:hover:bg-accent-400
                       print:bg-gray-800 print:text-white print:hover:bg-gray-900 print:shadow-none">
          Verify Code
        </button>
      </form>

      <div class="mt-6 text-center text-sm sm:text-base">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-accent-500 dark:hover:text-accent-400 transition duration-150 print:text-gray-800 print:underline print:hover:text-gray-900">
          Can't access your authenticator? 
          <span class="font-medium underline">Reset 2FA</span>
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is to define the accent color from the instructions */
  :root {
    --color-accent-500: #FF4500; /* Example: OrangeRed */
    --color-accent-600: #E03E00;
    --color-accent-300: #FF7B33;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-accent-400: #FF6600; /* Slightly lighter for better contrast in dark mode */
    }
  }

  .bg-accent-500 { background-color: var(--color-accent-500); }
  .hover\:bg-accent-600:hover { background-color: var(--color-accent-600); }
  .focus\:ring-accent-300:focus { --tw-ring-color: var(--color-accent-300); }
  .text-accent-500 { color: var(--color-accent-500); }
  .hover\:text-accent-500:hover { color: var(--color-accent-500); }
  .focus\:border-accent-500:focus { border-color: var(--color-accent-500); }
  .focus\:ring-accent-500:focus { --tw-ring-color: var(--color-accent-500); }

  .dark .hover\:bg-accent-400:hover { background-color: var(--color-accent-400); }
  .dark .hover\:text-accent-400:hover { color: var(--color-accent-400); }

  /* Custom styling for the top-right corner fold to use accent color */
  .border-t-accent-500 { border-top-color: var(--color-accent-500); }
  .border-r-accent-500 { border-right-color: var(--color-accent-500); }

  /* For digit inputs, ensure they stay centered and are easily tabbable */
  input[type="text"][maxlength="1"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
</style>

<!-- Script for auto-focusing and handling digit input -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const inputs = document.querySelectorAll('input[maxlength="1"][inputmode="numeric"]');
    inputs.forEach((input, index) => {
      input.addEventListener('input', (e) => {
        if (e.target.value.length === 1 && index < inputs.length - 1) {
          inputs[index + 1].focus();
        }
      });

      input.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && e.target.value.length === 0 && index > 0) {
          inputs[index - 1].focus();
        }
      });

      // Simple number validation for non-numeric input
      input.addEventListener('beforeinput', (e) => {
        if (e.data && !/^[0-9]$/.test(e.data)) {
          e.preventDefault();
        }
      });
    });
  });
</script>
              

                <div class="min-h-screen bg-[#F0F2EB] dark:bg-[#1A2C2A] flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="bg-white dark:bg-[#2F4F4F] shadow-2xl rounded-lg overflow-hidden max-w-sm w-full transform transition-all duration-300 hover:scale-105 border-4 border-[#3D695B] dark:border-[#74B7A4] p-6 lg:p-8 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
    </div>

    <!-- Art Deco Bottom Border -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-[#74B7A4] dark:bg-[#3D695B] flex justify-around items-center overflow-hidden">
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
      <div class="w-3 h-3 bg-white dark:bg-[#1A2C2A] rotate-45 transform skew-x-12"></div>
    </div>

    <div class="text-center mt-8 mb-4">
      <svg class="mx-auto h-16 w-16 text-[#3D695B] dark:text-[#74B7A4] mb-4 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M7.21 14.73C4.81 13.9 3 11.83 3 9.5a6.5 6.5 0 0113 0c0 2.33-1.81 4.4-4.21 5.23L12 18l-4.79-3.27zM17 11a5 5 0 00-10 0 5 5 0 0010 0zm-4.32-5.4A3.001 3.001 0 0012 3a3 3 0 00-2.68 1.6C7.59 4.7 6 6.94 6 9.5a6 6 0 0012 0c0-2.56-1.59-4.8-3.32-5.4zM12 21a1 1 0 01-1-1v-2h2v2a1 1 0 01-1 1zm-3-4a1 1 0 00-1 1v2a1 1 0 002 0v-2a1 1 0 00-1-1zM15 17a1 1 0 011-1v2a1 1 0 01-2 0v-2a1 1 0 011-1z" clip-rule="evenodd"/>
      </svg>
      <h2 class="text-3xl font-extrabold text-[#1A2C2A] dark:text-white mb-2 drop-shadow-md">Verify Your Identity</h2>
      <p class="text-md text-[#3D695B] dark:text-[#BACBC7]">Enter the 6-digit code from your authenticator app.</p>
    </div>

    <form class="space-y-6">
      <div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric" autocomplete="one-time-code">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50ransition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <div class="w-4 border-b-2 border-dashed border-[#74B7A4] dark:border-[#3D695B] self-center"></div>
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
        <input type="text" maxlength="1" class="w-12 h-16 text-center text-4xl border-2 border-[#74B7A4] dark:border-[#3D695B] rounded-lg shadow-inner bg-[#F0F2EB] dark:bg-[#1A2C2A] text-[#1A2C2A] dark:text-white focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 ArtDecoInput" pattern="[0-9]" inputmode="numeric">
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-[#3D695B] hover:bg-[#2E5245] dark:bg-[#74B7A4] dark:hover:bg-[#5C9482] focus:outline-none focus:ring-4 focus:ring-[#74B7A4]/50 dark:focus:ring-[#3D695B]/50 transition duration-200 transform hover:scale-105">
          <svg class="-ml-1 mr-3 h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M15.75 5.5a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm-7.5 0a.75.75 0 00-.75.75V15h-1.5a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h1.5v-1.5a.75.75 0 00.75-.75V6.25a.75.75 0 00-.75-.75zm7.5 9h-1.5v-1.5h1.5v1.5zm-7.5 0h-1.5v-1.5h1.5v1.5z" clip-rule="evenodd" />
          </svg>
          Verify Code
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm text-[#3D695B] dark:text-[#BACBC7]">
        Didn't receive a code? <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Resend Code</a>
      </p>
      <p class="mt-2 text-sm text-[#3D695B] dark:text-[#BACBC7]">
        <a href="#" class="font-medium text-[#2E5245] hover:text-[#1A2C2A] dark:text-[#BCEAD5] dark:hover:text-white transition-colors duration-200">Need help?</a>
      </p>
    </div>
  </div>
</div>


<style>
  /* This is an optional style for better visual of Art Deco inputs, 
     though the core design is pure Tailwind */
  .ArtDecoInput {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    /* This clip-path attempts a more geometric shape; 
       Adjust values for desired effect. Pure CSS for complex shapes is limited. */
    /* For simpler rounded squares, remove clip-path */
  }
  .dark .ArtDecoInput {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12);
  }
</style>
              

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-dark to-purple-light dark:from-gray-900 dark:to-black">
  <div class="relative p-8 rounded-xl shadow-lg bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-opacity-20 border-white max-w-md w-full mx-4">
    <div class="absolute inset-0 bg-white bg-opacity-5 dark:bg-black dark:bg-opacity-5 rounded-xl pointer-events-none"></div>
    
    <h2 class="text-3xl font-bold text-white mb-6 text-center">🔐 Two-Factor Authentication</h2>
    
    <p class="text-white text-opacity-80 mb-8 text-center">Please enter the 6-digit code from your authenticator app.</p>
    
    <div class="flex justify-center space-x-4 mb-8">
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
      <input type="text" maxlength="1" class="w-12 h-14 text-center text-white text-2xl bg-white bg-opacity-20 rounded-lg border border-opacity-30 border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-60 transition duration-200 dark:bg-black dark:bg-opacity-20 dark:border-opacity-30 dark:border-gray-700" />
    </div>
    
    <button class="w-full py-3 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold text-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-70 dark:bg-purple-700 dark:hover:bg-purple-800">
      Verify Code
    </button>
    
    <p class="text-white text-opacity-70 text-center mt-6 text-sm">
      Didn