* {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }

      body {
        font-family: "Poppins", sans-serif;
        overflow: hidden;
        background: linear-gradient(135deg, #ffe5ec 0%, #ffc0d9 25%, #ffb3d9 50%, #ff97c4 75%, #ff6b9d 100%);
        background-size: 400% 400%;
        animation: gradientShift 8s ease infinite;
      }

      @keyframes gradientShift {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      .script-font {
        font-family: "Great Vibes", cursive;
        font-weight: 400;
        letter-spacing: 0.5px;
      }

      /* Floating Hearts Background */
      .floating-heart {
        position: fixed;
        animation: floatUp 20s linear forwards;
        pointer-events: none;
        z-index: 0;
        opacity: 0.4;
      }

      @keyframes floatUp {
        0% {
          transform: translateY(100vh) rotate(0deg) translateX(0);
          opacity: 0.4;
        }
        50% {
          opacity: 0.6;
        }
        100% {
          transform: translateY(-100vh) rotate(720deg) translateX(100px);
          opacity: 0;
        }
      }

      /* Card Animations */
      .card-enter {
        animation: cardEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      }

      .card-exit {
        animation: cardExit 0.6s ease-out forwards;
      }

      @keyframes cardEnter {
        from {
          opacity: 0;
          transform: scale(0.8) translateY(30px);
        }
        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }

      @keyframes cardExit {
        from {
          opacity: 1;
          transform: scale(1) rotateY(0deg);
        }
        to {
          opacity: 0;
          transform: scale(0.95) rotateY(-90deg);
        }
      }

      /* Text Animations */
      .text-fade-in {
        animation: textFadeIn 1s ease-in-out forwards;
      }

      .text-fade-out {
        animation: textFadeOut 0.7s ease-out forwards;
      }

      @keyframes textFadeIn {
        from {
          opacity: 0;
          transform: translateY(15px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes textFadeOut {
        from {
          opacity: 1;
          transform: translateY(0);
        }
        to {
          opacity: 0;
          transform: translateY(-15px);
        }
      }

      /* Enhanced Heartbeat */
      .heartbeat {
        animation: enhancedBeat 1.2s cubic-bezier(0.36, 0, 0.66, 1) infinite;
      }

      @keyframes enhancedBeat {
        0%,
        100% {
          transform: scale(1);
        }
        14% {
          transform: scale(1.15);
        }
        28% {
          transform: scale(1);
        }
        42% {
          transform: scale(1.15);
        }
      }

      /* Button Styles */
      .btn-base {
        position: relative;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
      }

      .btn-base::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
      }

      .btn-base:hover::before {
        width: 300px;
        height: 300px;
      }

      .btn-yes {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 1rem 2.5rem;
        border-radius: 50px;
        font-size: 1.125rem;
        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
        z-index: 20;
      }

      .btn-yes:hover:not(:disabled) {
        transform: scale(1.08);
        box-shadow: 0 15px 35px rgba(16, 185, 129, 0.5);
      }

      .btn-no {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        color: white;
        padding: 1rem 2.5rem;
        border-radius: 50px;
        font-size: 1.125rem;
        box-shadow: 0 10px 25px rgba(107, 114, 128, 0.3);
      }

      .btn-no:hover {
        filter: brightness(1.1);
      }

      .btn-primary {
        background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
        color: white;
        padding: 0.875rem 2rem;
        border-radius: 50px;
        font-size: 1rem;
        box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3);
      }

      .btn-primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(236, 72, 153, 0.4);
      }

      .btn-primary:active {
        transform: translateY(0);
      }

      .btn-primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      /* Glass Morphism */
      .glass-card {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.95);
        border-radius: 2rem;
      }

      /* Make intro card transparent (keeps other cards glassy) */
      #intro-card {
        background: transparent;
        backdrop-filter: none;
        border: none;
        color: wheat;
      }

      /* Strongly enforce wheat text inside the intro card and remove
         any text gradients/transparent rules that might hide the color. */
      #intro-card *,
      #intro-card *::before,
      #intro-card *::after {
        color: wheat !important;
        -webkit-text-fill-color: wheat !important;
        background-image: none !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
      }

      /* Specifically restore plain color for the main heading which used
         background-clip text previously. */
      #intro-card #intro-text {
        color: wheat !important;
        background-image: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
      }

      /* Login Pane */
      #login-pane {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 1rem;
        padding: 1.5rem;
        max-width: 22rem;
        width: 100%;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      }

      #login-pane h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #ec4899;
        margin-bottom: 0.75rem;
        text-align: center;
      }

      #login-pane .form-group { margin-bottom: 0.75rem; }

      #login-pane input[type="text"] {
        width: 100%;
        padding: 0.6rem 0.9rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        font-size: 1rem;
      }

      #login-pane .login-error { color: #dc2626; font-size: 0.875rem; display: none; margin-top: 0.5rem; }


      /* Accessibility */
      @media (prefers-reduced-motion: reduce) {
        * {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }

      /* Responsive */
      @media (max-width: 768px) {
        .btn-yes,
        .btn-no {
          padding: 0.875rem 1.5rem;
          font-size: 1rem;
        }
      }