拟物化 Pastel 密码重置

<!-- Ensure TailwindCSS is included in your project -->
<div class="min-h-screen bg-slate-100 dark:bg-slate-900 flex flex-col items-center justify-center p-4 transition-colors duration-300 selection:bg-rose-300 selection:text-rose-900">
  <!-- Skeuomorphic Card -->
  <div class="bg-white dark:bg-slate-800 p-6 sm:p-10 rounded-3xl 
              shadow-[0_10px_20px_rgba(0,0,0,0.04),_0_5px_10px_rgba(0,0,0,0.08)] 
              dark:shadow-[0_10px_20px_rgba(0,0,0,0.25),_0_5px_10px_rgba(0,0,0,0.45)] 
              w-full max-w-md transform transition-all duration-300 
              hover:shadow-[0_15px_30px_rgba(0,0,0,0.06),_0_8px_15px_rgba(0,0,0,0.10)]
              dark:hover:shadow-[0_15px_30px_rgba(0,0,0,0.3),_0_8px_15px_rgba(0,0,0,0.5)]">
    <!-- Header / Title -->
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-rose-600 dark:text-rose-400 tracking-tight">Password Recovery</h1>
      <p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Looks like you forgot your password. No worries!</p>
    </div>

    <!-- Decorative "Grooved" Line -->
    <div class="w-full h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-slate-600 to-transparent mt-8 mb-0"></div>
    <div class="w-full h-px bg-gradient-to-r from-transparent via-white/[0.7] dark:via-slate-700/[0.7] to-transparent mb-8 transform translate-y-[0.5px]"></div>

    <!-- Form -->
    <form action="#" method="POST">
      <div class="space-y-6">
        <!-- Email Input -->
        <div>
          <label for="email" class="block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1.5 select-none">Email Address</label>
          <div class="relative rounded-xl">
            <input type="email" name="email" id="email"
                   class="appearance-none block w-full px-4 py-3 
                          bg-slate-50 dark:bg-slate-700/[0.7] text-slate-800 dark:text-slate-100 
                          placeholder-slate-400 dark:placeholder-slate-500 
                          rounded-xl 
                          border border-slate-200 dark:border-slate-600
                          shadow-[inset_3px_3px_6px_rgba(0,0,0,0.07),_inset_-2px_-2px_4px_rgba(255,255,255,0.4)] 
                          dark:shadow-[inset_3px_3px_6px_rgba(0,0,0,0.3),_inset_-2px_-2px_4px_rgba(75,85,99,0.2)]
                          focus:outline-none focus:ring-2 focus:ring-rose-500 dark:focus:ring-rose-400 focus:border-rose-500 dark:focus:border-rose-400
                          sm:text-sm transition-all duration-200"
                   placeholder="[email protected]">
          </div>
        </div>

        <!-- "Send Reset Link" Button - Skeuomorphic -->
        <div>
          <button type="submit"
                  class="w-full flex justify-center py-3 px-4 rounded-xl 
                         text-base font-semibold text-white select-none
                         bg-gradient-to-br from-rose-500 to-pink-500 hover:from-rose-500 hover:to-pink-500 /* Adjusted hover for consistency of color */
                         dark:from-rose-600 dark:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-600
                         shadow-[0_4px_0_0_#a12147] dark:shadow-[0_4px_0_0_#9d174d] /* Rose-700/Pink-700 like fixed colors */
                         hover:shadow-[0_3px_0_0_#a12147] dark:hover:shadow-[0_3px_0_0_#9d174d]
                         active:shadow-[0_1px_0_0_#a12147] dark:active:shadow-[0_1px_0_0_#9d174d]
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 dark:focus:ring-offset-slate-900
                         transform transition-all duration-100 ease-in-out
                         hover:-translate-y-0.5 active:translate-y-[1px]">
            Send Reset Link
          </button>
        </div>
      </div>
    </form>

    <!-- Decorative "Grooved" Line -->
    <div class="w-full h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-slate-600 to-transparent mt-8 mb-0"></div>
    <div class="w-full h-px bg-gradient-to-r from-transparent via-white/[0.7] dark:via-slate-700/[0.7] to-transparent mb-8 transform translate-y-[0.5px]"></div>

    <!-- Footer Links -->
    <div class="mt-6 text-center">
      <p class="text-sm text-slate-500 dark:text-slate-400">
        Remember your password?
        <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 transition-colors duration-150">
          Back to Login
        </a>
      </p>
      <p class="mt-2 text-xs text-slate-400 dark:text-slate-500">
        Need help? <a href="#" class="hover:underline text-rose-500 dark:text-rose-400">Contact Support</a>
      </p>
    </div>

    <!-- Portfolio Purpose Stamp -->
    <div class="mt-8 text-center">
        <div class="inline-block mt-2 p-1.5 border-2 border-dashed border-rose-200 dark:border-slate-600 rounded-lg opacity-75 transform rotate-[-2deg] hover:rotate-0 transition-transform duration-200 select-none">
            <span class="text-xs font-mono text-rose-400 dark:text-slate-400 tracking-wider">DESIGN SHOWCASE</span>
        </div>
    </div>
  </div>

  <!-- Subtle "Surface" Background Element for depth -->
  <div class="absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-slate-200/70 dark:from-slate-950/70 to-transparent -z-10 pointer-events-none"></div>
</div>