body {
      box-sizing: border-box;
    }
    * {
      font-family: 'Nunito', sans-serif;
    }
    h1, h2, h3, h4, h5, h6, .heading {
      font-family: 'Fredoka', sans-serif;
    }
    
    :root {
      --sky-blue: #5BC0EB;
      --sunshine-yellow: #FFD166;
      --candy-red: #EF476F;
      --mint-green: #06D6A0;
      --soft-purple: #9B5DE5;
      --soft-white: #FFF9F0;
    }
    
    .gradient-rainbow {
      background: linear-gradient(135deg, #5BC0EB 0%, #9B5DE5 25%, #EF476F 50%, #FFD166 75%, #06D6A0 100%);
    }
    
    .gradient-sky {
      background: linear-gradient(180deg, #E8F7FF 0%, #FFF9F0 100%);
    }
    
    .text-gradient {
      background: linear-gradient(135deg, #5BC0EB, #9B5DE5, #EF476F);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-15px) rotate(3deg); }
    }
    
    @keyframes wiggle {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }
    
    @keyframes bounce-soft {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    
    @keyframes sparkle {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.2); }
    }
    
    @keyframes confetti-fall {
      0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
      100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }
    
    @keyframes cloud-drift {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100vw); }
    }
    
    .float { animation: float 3s ease-in-out infinite; }
    .wiggle:hover { animation: wiggle 0.3s ease-in-out infinite; }
    .bounce-soft { animation: bounce-soft 2s ease-in-out infinite; }
    .sparkle { animation: sparkle 1.5s ease-in-out infinite; }
    
    .card-hover {
      transition: all 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 40px rgba(91, 192, 235, 0.3);
    }
    
    .btn-fun {
      transition: all 0.3s ease;
      box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    }
    .btn-fun:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 0 rgba(0,0,0,0.2);
    }
    .btn-fun:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 rgba(0,0,0,0.2);
    }
    
    .wave-footer {
      position: relative;
    }
    .wave-footer::before {
      content: '';
      position: absolute;
      top: -50px;
      left: 0;
      right: 0;
      height: 50px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%235BC0EB' d='M0,50 C360,100 720,0 1080,50 C1260,75 1380,75 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat;
      background-size: cover;
    }
    
    .star {
      position: absolute;
      width: 10px;
      height: 10px;
      background: #FFD166;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }
    
    .cloud {
      position: absolute;
      background: white;
      border-radius: 50px;
      opacity: 0.8;
    }
    
    .modal-overlay {
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5px);
    }
    
    .badge {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 20px;
    }
    
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
    
    input:focus, textarea:focus, select:focus {
      outline: none;
      border-color: var(--sky-blue);
      box-shadow: 0 0 0 3px rgba(91, 192, 235, 0.3);
    }
    
    .toast {
      animation: slideIn 0.3s ease-out;
    }
    
    @keyframes slideIn {
      from { transform: translateY(-100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }