html[data-theme='dark'] {
      background: linear-gradient(to right, #0f172a, #1e293b);
      color: white;
    }

    html[data-theme='light'] {
      background: linear-gradient(to right, #ffffff, #f4f4f4);
      color: black;
    }

    html[data-theme='dark'] body,
    html[data-theme='light'] body {
      transition: background 0.5s ease, color 0.3s ease;
    }

    .transition-theme {
      transition: all 0.3s ease-in-out;
    }

    .fade-in {
      animation: fadeIn 0.8s ease-out;
    }

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

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

    .slide-in {
      animation: slideIn 0.8s ease-out both;
    }

    @keyframes pulseGlow {
      0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
      70% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
      100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    }

    .pulse {
      animation: pulseGlow 2s infinite;
    }

    @keyframes zoomIn {
      from { transform: scale(0.9); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .zoom-in {
      animation: zoomIn 0.6s ease-out;
    }

    input, select {
      transition: all 0.3s ease;
    }

    html[data-theme='dark'] input,
    html[data-theme='dark'] select {
      background-color: #1f2937;
      color: white;
      border: 1px solid #374151;
    }

    html[data-theme='light'] input,
    html[data-theme='light'] select {
      background-color: white;
      color: black;
      border: 1px solid #ccc;
    }