* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Space Grotesk', sans-serif;
      overflow-x: hidden;
    }

    /* Custom Slider Styles */
    .slider::-webkit-slider-thumb {
      appearance: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: linear-gradient(135deg, #06b6d4, #ec4899);
      cursor: pointer;
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
      transition: all 0.3s ease;
    }

    .slider::-webkit-slider-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 0 30px rgba(6, 182, 212, 0.8);
    }

    .slider::-moz-range-thumb {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: linear-gradient(135deg, #06b6d4, #ec4899);
      cursor: pointer;
      border: none;
      box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
      transition: all 0.3s ease;
    }

    .slider::-moz-range-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 0 30px rgba(6, 182, 212, 0.8);
    }

    /* Color Input Custom Styles */
    input[type="color"] {
      appearance: none;
      background: transparent;
      border: none;
      cursor: pointer;
    }

    input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    input[type="color"]::-webkit-color-swatch {
      border: none;
      border-radius: 8px;
    }

    input[type="color"]::-moz-color-swatch {
      border: none;
      border-radius: 8px;
    }

    /* Select Dropdown Custom Styles */
    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 1.5em;
      appearance: none;
      padding-right: 2.5rem;
    }

    select option {
      background: #1e1b4b;
      color: white;
    }

    /* QR Code Animation */
    #qrcode {
      animation: fadeInScale 0.5s ease-out;
    }

    @keyframes fadeInScale {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Smooth transitions */
    button, input, select, textarea {
      transition: all 0.3s ease;
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #06b6d4, #ec4899);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #0891b2, #db2777);
    }