/* 可爱风格CSS样式 */

/* 基础样式变量 */
:root {
  --color-primary: #ff7eb6;
  --color-secondary: #9370db;
  --color-light: #ffffff;
  --color-dark: #f8f0ff;
  --color-accent: #ff9dbb;
  --color-bg: #fdf6f9;
}

/* 字体引入 */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg);
  font-family: 'Nunito', sans-serif;
  color: #333;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 126, 182, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(147, 112, 219, 0.05) 0%, transparent 50%);
  background-size: 100% 100%;
}

/* Tailwind CSS 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  
  .text-shadow-cute {
    text-shadow: 0 0 8px rgba(255, 126, 182, 0.5);
  }
  
  .glow-cute {
    box-shadow: 0 0 12px rgba(255, 126, 182, 0.5);
  }
  
  .bg-cute {
    background: radial-gradient(circle at 10% 20%, rgba(255, 253, 255, 0.95) 0%, rgba(255, 248, 252, 0.95) 90%);
  }
  
  .border-cute {
    border: 2px solid var(--color-primary);
    border-radius: 16px;
  }
  
  .btn-hover-cute {
    transition: all 0.3s ease;
  }
  
  .btn-hover-cute:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(255, 126, 182, 0.7);
  }
  
  .card-cute {
    background-color: white;
    border-radius: 16px;
    border: 2px solid #ffd8e8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }
  
  .card-cute:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  
  .scrollbar-cute {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) #f9f0f4;
  }
  
  .scrollbar-cute::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  .scrollbar-cute::-webkit-scrollbar-track {
    background: linear-gradient(90deg, #f9f0f4, #fdf0f8);
    border-radius: 10px;
    border: 1px solid rgba(255, 126, 182, 0.1);
  }
  
  .scrollbar-cute::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 10px;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(255, 126, 182, 0.2);
    transition: all 0.2s ease;
  }
  
  .scrollbar-cute::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #ff66a3, #8a5fd1);
    box-shadow: 0 0 8px rgba(255, 126, 182, 0.4);
    transform: scale(1.05);
  }
  
  .scrollbar-cute::-webkit-scrollbar-corner {
    background: #f9f0f4;
    border-radius: 10px;
  }
  
  .emoji-bubble::before {
    content: '✨';
    margin-right: 5px;
  }
  
  .meme-item {
    transition: all 0.3s ease;
  }
  
  .meme-item:hover {
    transform: scale(1.05);
  }
}