/* 🐹 灰宝的小窝 - 卡哇伊主题样式 (Tailwind 兼容版) */
/* 放置位置: static/css/kawaii-theme.css */
/* 此版本直接覆盖 Tailwind 实用类，无需修改模板类名 */

/* ========== 配色变量 ========== */
:root {
  --kawaii-cream: #FFF8F0;
  --kawaii-pink: #FFB7C5;
  --kawaii-pink-light: #FFE4E9;
  --kawaii-pink-dark: #FF8FA3;
  --kawaii-brown: #C4A882;
  --kawaii-brown-light: #E8D5C4;
  --kawaii-brown-dark: #8B7355;
  --kawaii-mint: #B8E0D2;
  --kawaii-mint-light: #E0F2EC;
  --kawaii-yellow: #FFE4A1;
  --kawaii-yellow-light: #FFF4D9;
  --kawaii-lavender: #D4C4E0;
  --kawaii-lavender-light: #EDE4F3;
  --kawaii-text: #5C4033;
  --kawaii-text-light: #8B7355;
  --kawaii-text-muted: #A89080;
  --kawaii-bg: #FFF8F0;
  --kawaii-bg-alt: #FFF0E4;
  --kawaii-card: #FFFFFF;
  --kawaii-shadow: 0 4px 20px rgba(196, 168, 130, 0.15);
  --kawaii-shadow-hover: 0 8px 30px rgba(196, 168, 130, 0.25);
  --kawaii-radius-sm: 12px;
  --kawaii-radius-md: 20px;
  --kawaii-radius-lg: 28px;
  --kawaii-radius-xl: 36px;
  --kawaii-radius-full: 9999px;
}

/* ========== 全局背景覆盖 ========== */
body, .bg-warm-50, .bg-gray-50, .bg-gray-100 {
  background-color: var(--kawaii-bg) !important;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 183, 197, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(184, 224, 210, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(255, 228, 161, 0.05) 0%, transparent 30%) !important;
  color: var(--kawaii-text) !important;
}

/* ========== 导航栏覆盖 ========== */
nav, .sticky, [class*="bg-white"], .bg-white\/80, .backdrop-blur-md {
  background: linear-gradient(135deg, var(--kawaii-cream) 0%, var(--kawaii-pink-light) 100%) !important;
  border-bottom: 3px solid var(--kawaii-pink) !important;
  box-shadow: var(--kawaii-shadow) !important;
  border-radius: 0 0 var(--kawaii-radius-lg) var(--kawaii-radius-lg) !important;
}

/* 导航链接 */
nav a, .nav-link, [class*="text-warm"] {
  color: var(--kawaii-text) !important;
  font-weight: 600 !important;
  border-radius: var(--kawaii-radius-full) !important;
  padding: 8px 16px !important;
  transition: all 0.3s ease !important;
}

nav a:hover, .nav-link:hover {
  background-color: var(--kawaii-pink-light) !important;
  color: var(--kawaii-pink-dark) !important;
  transform: translateY(-2px) !important;
}

/* Logo 仓鼠动画 */
nav img[alt*="灰宝"], nav img[alt*="logo"] {
  animation: kawaii-bounce 2s ease-in-out infinite !important;
}

/* ========== 卡片覆盖 ========== */
.bg-white, .card, [class*="rounded-xl"], [class*="rounded-lg"], [class*="rounded-2xl"], [class*="shadow-sm"], [class*="shadow-md"] {
  background: var(--kawaii-card) !important;
  border: 2px solid var(--kawaii-brown-light) !important;
  border-radius: var(--kawaii-radius-md) !important;
  box-shadow: var(--kawaii-shadow) !important;
  transition: all 0.3s ease !important;
}

.bg-white:hover, .card:hover, [class*="rounded-xl"]:hover {
  box-shadow: var(--kawaii-shadow-hover) !important;
  transform: translateY(-4px) !important;
  border-color: var(--kawaii-pink) !important;
}

/* 卡片头部 */
[class*="card-header"], .bg-gray-50, .bg-gray-100 {
  background: linear-gradient(135deg, var(--kawaii-pink-light) 0%, var(--kawaii-cream) 100%) !important;
  border-bottom: 2px dashed var(--kawaii-pink) !important;
  font-weight: 700 !important;
  color: var(--kawaii-brown-dark) !important;
}

/* ========== 按钮覆盖 ========== */
button, .btn, [class*="bg-\\["], [class*="bg-blue"], [class*="bg-green"], [class*="bg-red"], [class*="bg-yellow"], [class*="bg-purple"] {
  border-radius: var(--kawaii-radius-full) !important;
  font-weight: 600 !important;
  padding: 10px 24px !important;
  border: none !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* 主按钮 - 粉色 */
[class*="bg-\\[#8B7355\\]"], [class*="bg-brown"], [class*="bg-primary"], [class*="bg-blue-600"], [class*="bg-indigo"] {
  background: linear-gradient(135deg, var(--kawaii-pink) 0%, var(--kawaii-pink-dark) 100%) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(255, 183, 197, 0.4) !important;
}

[class*="bg-\\[#8B7355\\]"]:hover, [class*="bg-brown"]:hover {
  background: linear-gradient(135deg, var(--kawaii-pink-dark) 0%, var(--kawaii-pink) 100%) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(255, 183, 197, 0.5) !important;
}

/* 成功按钮 - 薄荷绿 */
[class*="bg-green"], [class*="bg-emerald"] {
  background: linear-gradient(135deg, var(--kawaii-mint) 0%, #8FD9C4 100%) !important;
  color: var(--kawaii-text) !important;
}

/* 危险按钮 - 粉红 */
[class*="bg-red"], [class*="bg-rose"] {
  background: linear-gradient(135deg, #FFB7B2 0%, #FF9E99 100%) !important;
  color: white !important;
}

/* 次要按钮 */
[class*="bg-gray"], [class*="bg-slate"] {
  background: linear-gradient(135deg, var(--kawaii-brown-light) 0%, var(--kawaii-brown) 100%) !important;
  color: var(--kawaii-text) !important;
}

/* ========== 图片覆盖 ========== */
img, .img-fluid, .card-img-top, [class*="object-cover"] {
  border-radius: var(--kawaii-radius-sm) !important;
  transition: all 0.3s ease !important;
}

img:hover, [class*="object-cover"]:hover {
  transform: scale(1.03) !important;
}

/* 图片边框装饰 */
[class*="aspect-square"], [class*="aspect-video"] {
  border: 4px solid var(--kawaii-pink-light) !important;
  border-radius: var(--kawaii-radius-md) !important;
  padding: 4px !important;
  background: white !important;
  box-shadow: var(--kawaii-shadow) !important;
}

/* ========== 表单覆盖 ========== */
input, select, textarea, .form-control, .form-select {
  border: 2px solid var(--kawaii-brown-light) !important;
  border-radius: var(--kawaii-radius-sm) !important;
  padding: 12px 16px !important;
  background: var(--kawaii-cream) !important;
  transition: all 0.3s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--kawaii-pink) !important;
  box-shadow: 0 0 0 4px rgba(255, 183, 197, 0.2) !important;
  background: white !important;
}

label, .form-label {
  font-weight: 600 !important;
  color: var(--kawaii-brown-dark) !important;
  margin-bottom: 8px !important;
}

/* ========== 上传区域覆盖 ========== */
[class*="border-dashed"], .upload-zone {
  border: 3px dashed var(--kawaii-pink) !important;
  border-radius: var(--kawaii-radius-lg) !important;
  background: linear-gradient(135deg, var(--kawaii-pink-light) 0%, var(--kawaii-cream) 100%) !important;
  padding: 3rem !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

[class*="border-dashed"]:hover, .upload-zone:hover {
  border-color: var(--kawaii-pink-dark) !important;
  background: linear-gradient(135deg, var(--kawaii-cream) 0%, var(--kawaii-pink-light) 100%) !important;
  transform: scale(1.02) !important;
}

/* ========== 徽章/标签覆盖 ========== */
.badge, [class*="badge"], [class*="rounded-full"][class*="px"] {
  border-radius: var(--kawaii-radius-full) !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

/* ========== 轮播图覆盖 ========== */
[class*="carousel"] img {
  border-radius: var(--kawaii-radius-md) !important;
  border: 4px solid var(--kawaii-pink-light) !important;
}

/* ========== 相册网格覆盖 ========== */
[class*="grid"] > div, .gallery-item {
  position: relative !important;
  border-radius: var(--kawaii-radius-md) !important;
  overflow: hidden !important;
  border: 3px solid var(--kawaii-brown-light) !important;
  transition: all 0.3s ease !important;
}

[class*="grid"] > div:hover, .gallery-item:hover {
  border-color: var(--kawaii-pink) !important;
  transform: translateY(-6px) rotate(1deg) !important;
  box-shadow: var(--kawaii-shadow-hover) !important;
}

/* 爪印装饰 */
[class*="grid"] > div::before, .gallery-item::before {
  content: '🐾' !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  font-size: 1.2rem !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 10 !important;
}

[class*="grid"] > div:hover::before, .gallery-item:hover::before {
  opacity: 1 !important;
  animation: kawaii-float 1.5s ease-in-out infinite !important;
}

/* ========== 文章卡片覆盖 ========== */
[class*="article"], [class*="border-l"] {
  border-left: 5px solid var(--kawaii-pink) !important;
  border-radius: 0 var(--kawaii-radius-md) var(--kawaii-radius-md) 0 !important;
}

[class*="article"]:hover, [class*="border-l"]:hover {
  border-left-color: var(--kawaii-pink-dark) !important;
}

/* ========== 页脚覆盖 ========== */
footer, .footer, [class*="footer"] {
  background: linear-gradient(135deg, var(--kawaii-brown-light) 0%, var(--kawaii-cream) 100%) !important;
  border-top: 3px solid var(--kawaii-pink) !important;
  border-radius: var(--kawaii-radius-lg) var(--kawaii-radius-lg) 0 0 !important;
  padding: 2rem 0 !important;
}

/* ========== 提示框覆盖 ========== */
[class*="alert"], [class*="bg-green-50"], [class*="bg-red-50"], [class*="bg-yellow-50"], [class*="bg-blue-50"] {
  border-radius: var(--kawaii-radius-md) !important;
  border: none !important;
  font-weight: 600 !important;
}

[class*="bg-green-50"] {
  background: linear-gradient(135deg, var(--kawaii-mint-light) 0%, var(--kawaii-mint) 100%) !important;
  color: #2D6A4F !important;
}

[class*="bg-red-50"] {
  background: linear-gradient(135deg, #FFE4E1 0%, #FFB7B2 100%) !important;
  color: #9B2335 !important;
}

[class*="bg-yellow-50"] {
  background: linear-gradient(135deg, var(--kawaii-yellow-light) 0%, var(--kawaii-yellow) 100%) !important;
  color: #8B6914 !important;
}

/* ========== 进度条覆盖 ========== */
[class*="progress"], [class*="progress-bar"] {
  height: 20px !important;
  border-radius: var(--kawaii-radius-full) !important;
  background: var(--kawaii-cream) !important;
  border: 2px solid var(--kawaii-brown-light) !important;
  overflow: hidden !important;
}

[class*="progress-bar"], [class*="bg-blue-600"] {
  background: linear-gradient(90deg, var(--kawaii-pink) 0%, var(--kawaii-pink-dark) 100%) !important;
  border-radius: var(--kawaii-radius-full) !important;
  font-weight: 600 !important;
}

/* ========== 统计卡片覆盖 ========== */
[class*="stat"], [class*="bg-gradient"] {
  background: linear-gradient(135deg, var(--kawaii-card) 0%, var(--kawaii-cream) 100%) !important;
  border: 2px solid var(--kawaii-brown-light) !important;
  border-radius: var(--kawaii-radius-md) !important;
  padding: 1.5rem !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

[class*="stat"]:hover {
  border-color: var(--kawaii-pink) !important;
  transform: translateY(-4px) !important;
}

/* ========== 模态框覆盖 ========== */
[class*="modal"], [class*="dialog"] {
  border-radius: var(--kawaii-radius-lg) !important;
  border: 3px solid var(--kawaii-pink-light) !important;
  box-shadow: var(--kawaii-shadow-hover) !important;
}

[class*="modal-header"], [class*="dialog-header"] {
  background: linear-gradient(135deg, var(--kawaii-pink-light) 0%, var(--kawaii-cream) 100%) !important;
  border-bottom: 2px dashed var(--kawaii-pink) !important;
  border-radius: var(--kawaii-radius-lg) var(--kawaii-radius-lg) 0 0 !important;
}

/* ========== 分页覆盖 ========== */
[class*="pagination"] a, [class*="page-link"] {
  border-radius: var(--kawaii-radius-full) !important;
  margin: 0 4px !important;
  border: 2px solid var(--kawaii-brown-light) !important;
  color: var(--kawaii-brown-dark) !important;
  font-weight: 600 !important;
}

[class*="pagination"] a:hover, [class*="page-link"]:hover {
  background: var(--kawaii-pink-light) !important;
  border-color: var(--kawaii-pink) !important;
  color: var(--kawaii-pink-dark) !important;
}

[class*="active"] [class*="page-link"] {
  background: linear-gradient(135deg, var(--kawaii-pink) 0%, var(--kawaii-pink-dark) 100%) !important;
  border-color: var(--kawaii-pink) !important;
  color: white !important;
}

/* ========== 文字颜色覆盖 ========== */
[class*="text-gray-500"], [class*="text-gray-600"], [class*="text-gray-700"] {
  color: var(--kawaii-text-light) !important;
}

[class*="text-gray-400"], [class*="text-gray-300"] {
  color: var(--kawaii-text-muted) !important;
}

[class*="text-warm-800"], [class*="text-warm-900"] {
  color: var(--kawaii-text) !important;
}

h1, h2, h3, h4, h5, h6, [class*="font-bold"], [class*="font-semibold"] {
  color: var(--kawaii-brown-dark) !important;
}

/* ========== 边框覆盖 ========== */
[class*="border-gray"], [class*="border-warm"] {
  border-color: var(--kawaii-brown-light) !important;
}

[class*="border-dashed"] {
  border-color: var(--kawaii-pink) !important;
}

/* ========== 装饰元素 ========== */
/* 浮动坚果装饰 */
.kawaii-nut {
  position: fixed;
  font-size: 1.5rem;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  animation: kawaii-float 6s ease-in-out infinite;
}

.kawaii-nut-1 { top: 10%; left: 5%; animation-delay: 0s; }
.kawaii-nut-2 { top: 30%; right: 8%; animation-delay: 2s; }
.kawaii-nut-3 { top: 60%; left: 3%; animation-delay: 4s; }
.kawaii-nut-4 { bottom: 20%; right: 5%; animation-delay: 1s; }

/* ========== 动画 ========== */
@keyframes kawaii-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes kawaii-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(3deg); }
  50% { transform: translateY(-5px) rotate(0deg); }
  75% { transform: translateY(-15px) rotate(-3deg); }
}

@keyframes kawaii-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

@keyframes kawaii-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 应用动画的类 */
.animate-bounce {
  animation: kawaii-bounce 2s ease-in-out infinite;
}

.animate-float {
  animation: kawaii-float 3s ease-in-out infinite;
}

.animate-wiggle {
  animation: kawaii-wiggle 0.5s ease-in-out;
}

.animate-pulse {
  animation: kawaii-pulse 2s ease-in-out infinite;
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--kawaii-cream);
  border-radius: var(--kawaii-radius-full);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--kawaii-pink), var(--kawaii-pink-dark));
  border-radius: var(--kawaii-radius-full);
  border: 3px solid var(--kawaii-cream);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--kawaii-pink-dark), var(--kawaii-pink));
}

/* ========== 加载动画 ========== */
.loading-hamster {
  display: inline-block;
  font-size: 2rem;
  animation: kawaii-bounce 1s ease-in-out infinite;
}

.loading-hamster::after {
  content: '🐹';
}

/* ========== 响应式调整 ========== */
@media (max-width: 768px) {
  :root {
    --kawaii-radius-md: 16px;
    --kawaii-radius-lg: 20px;
  }
  
  [class*="grid"] > div:hover, .gallery-item:hover {
    transform: translateY(-4px) rotate(0.5deg) !important;
  }
}

/* ========== 打印样式 ========== */
@media print {
  .kawaii-nut,
  .animate-bounce,
  .animate-float,
  .animate-wiggle,
  .animate-pulse {
    animation: none !important;
  }
}