@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    
    * {
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    
    body {
      scroll-behavior: smooth;
    }
    
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #0ea5e9;
      border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #0284c7;
    }
    
    .dark ::-webkit-scrollbar-track {
      background: #1f2937;
    }
    
    .dark ::-webkit-scrollbar-thumb {
      background: #38bdf8;
    }
    
    .dark ::-webkit-scrollbar-thumb:hover {
      background: #7dd3fc;
    }
    
    /* Movie Card */
    .movie-card {
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      transform-origin: center;
      perspective: 1000px;
    }
    
    .movie-card:hover {
      transform: translateY(-8px) scale(1.02) rotateY(2deg) rotateX(1deg);
      box-shadow: 0 15px 30px rgba(2, 132, 199, 0.25);
    }
    
    .movie-card-inner {
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    
    .movie-card:hover .movie-card-inner {
      transform: rotateY(2deg) rotateX(1deg);
    }
    
    /* Modal Animation */
    .modal-enter {
      opacity: 0;
      transform: scale(0.95);
    }
    
    .modal-enter-active {
      opacity: 1;
      transform: scale(1);
      transition: all 0.3s ease-out;
    }
    
    .modal-exit {
      opacity: 1;
      transform: scale(1);
    }
    
    .modal-exit-active {
      opacity: 0;
      transform: scale(0.95);
      transition: all 0.3s ease-in;
    }
    
    /* Gradient Text */
    .gradient-text {
      background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    
    /* Glow Effect */
    .glow {
      box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);
    }
    
    /* Smooth Shadow */
    .smooth-shadow {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Hover Effect */
    .card-hover-effect {
      transition: all 0.3s ease;
    }
    
    .card-hover-effect:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    }
    
    /* Loading Animation */
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    
    .shimmer {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }
    
    .dark .shimmer {
      background: linear-gradient(90deg, #2d3748 25%, #4a5568 50%, #2d3748 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }
    
    /* Custom Checkbox */
    .custom-checkbox {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #d1d5db;
      border-radius: 4px;
      outline: none;
      cursor: pointer;
      position: relative;
      transition: all 0.2s;
    }
    
    .custom-checkbox:checked {
      background-color: #0ea5e9;
      border-color: #0ea5e9;
    }
    
    .custom-checkbox:checked::after {
      content: "\2713";
      font-size: 12px;
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    /* Ripple Effect */
    .ripple-effect {
      position: relative;
      overflow: hidden;
    }
    
    .ripple-effect::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform .5s, opacity 1s;
    }
    
    .ripple-effect:active::after {
      transform: scale(0, 0);
      opacity: 0.3;
      transition: 0s;
    }
    
    /* Custom Radio */
    .custom-radio {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 18px;
      height: 18px;
      border: 2px solid #d1d5db;
      border-radius: 50%;
      outline: none;
      cursor: pointer;
      position: relative;
      transition: all 0.2s;
    }
    
    .custom-radio:checked {
      background-color: #0ea5e9;
      border-color: #0ea5e9;
    }
    
    .custom-radio:checked::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 6px;
      height: 6px;
      background-color: white;
      border-radius: 50%;
    }
    
    /* Tooltip */
    .tooltip {
      position: relative;
    }
    
    .tooltip .tooltip-text {
      visibility: hidden;
      width: 120px;
      background-color: #111827;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
      font-size: 12px;
    }
    
    .tooltip .tooltip-text::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #111827 transparent transparent transparent;
    }
    
    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }
    
    /* Custom Range Slider */
    .custom-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background: #0ea5e9;
      cursor: pointer;
      border-radius: 50%;
    }
    
    .custom-range::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: #0ea5e9;
      cursor: pointer;
      border-radius: 50%;
    }
    
    /* Transition Effects */
    .transition-all-300 {
      transition: all 0.3s ease;
    }
    
    .transition-transform-300 {
      transition: transform 0.3s ease;
    }
    
    .transition-opacity-300 {
      transition: opacity 0.3s ease;
    }
    
    /* Custom Toggle */
    .toggle-checkbox:checked {
      right: 0;
      border-color: #0ea5e9;
    }
    
    .toggle-checkbox:checked + .toggle-label {
      background-color: #0ea5e9;
    }