/* ===== 佑贝本草 · 视觉升级 v2 ===== */

/* -- 全局背景：中式纹理 + 渐变 -- */
.page-container {
  background: 
    radial-gradient(ellipse at 20% 10%, hsl(39, 45%, 42% / 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 25%, hsl(14, 35%, 50% / 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, hsl(30, 20%, 95% / 0.5) 0%, transparent 60%),
    linear-gradient(175deg, #fefcf6 0%, #faf7ef 30%, #f5f0e4 70%, #f8f4ea 100%) !important;
}

/* -- 页面底部装饰云纹 -- */
.page-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(39, 45%, 42% / 0.25), hsl(39, 50%, 52% / 0.12), transparent);
  z-index: 100;
  pointer-events: none;
}

.page-container::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(39, 45%, 42% / 0.15), hsl(39, 50%, 52% / 0.08), transparent);
  z-index: 100;
  pointer-events: none;
}

/* -- 主标题金色渐变 -- */
h1 {
  background: linear-gradient(135deg, hsl(39, 45%, 28%) 0%, hsl(39, 45%, 42%) 40%, hsl(39, 48%, 50%) 70%, hsl(39, 45%, 38%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.2em !important;
}

/* -- 副标题柔化 -- */
h2 {
  color: hsl(30, 12%, 38%) !important;
  letter-spacing: 0.1em !important;
  font-weight: 400 !important;
}

/* -- 卡片：玻璃质感升级 -- */
.card-gold, .card-elegant {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(145deg, rgba(255,255,255,0.82) 0%, rgba(253,250,243,0.88) 100%) !important;
  border: 1px solid hsl(39, 45%, 42% / 0.1) !important;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.card-gold:hover, .card-elegant:hover {
  transform: translateY(-5px) !important;
  box-shadow: 
    0 16px 48px hsl(39, 45%, 42% / 0.1),
    0 6px 16px hsl(30, 15%, 40% / 0.08) !important;
  border-color: hsl(39, 45%, 42% / 0.2) !important;
}

/* -- 按钮涟漪效果 -- */
.btn-premium {
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-premium::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-premium:active::after {
  width: 300px;
  height: 300px;
}

.btn-premium:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 
    0 8px 25px hsl(39, 45%, 30% / 0.3),
    0 4px 12px hsl(39, 45%, 42% / 0.2),
    inset 0 1px hsl(39, 50%, 70% / 0.3) !important;
}

/* -- 通用按钮增强 -- */
button[class*="bg-white"] {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  border: 1.5px solid hsl(39, 45%, 42% / 0.08) !important;
}

button[class*="bg-white"]:hover {
  border-color: hsl(39, 45%, 42% / 0.25) !important;
  background: linear-gradient(135deg, hsl(39, 45%, 42% / 0.05), hsl(39, 50%, 52% / 0.02)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px hsl(39, 45%, 42% / 0.1) !important;
}

/* -- 珠子展示区增强 -- */
.bead-showcase {
  filter: drop-shadow(0 12px 32px hsl(39, 45%, 42% / 0.15));
}

.main-bead {
  animation: mainBeadPulse 3s ease-in-out infinite;
}

@keyframes mainBeadPulse {
  0%, 100% { 
    box-shadow: 0 4px 20px hsl(39, 50%, 52% / 0.3), inset -2px -2px 6px #0003, inset 2px 2px 6px #fff6; 
  }
  50% { 
    box-shadow: 0 8px 36px hsl(39, 50%, 52% / 0.5), 0 0 60px hsl(39, 45%, 42% / 0.2), inset -2px -2px 6px #00000026, inset 2px 2px 6px #fff6; 
  }
}

.bead-glow {
  animation: glowPulse 3s ease-in-out infinite !important;
}

@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.18); opacity: 1; }
}

/* -- 图片增强 -- */
.img-gold {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.img-gold:hover {
  transform: translateY(-4px) scale(1.03) !important;
}

/* -- 输入框聚焦增强 -- */
input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, 
textarea:focus, select:focus {
  border-color: hsl(39, 45%, 42% / 0.5) !important;
  box-shadow: 0 0 0 3px hsl(39, 45%, 42% / 0.08), 0 2px 8px hsl(39, 45%, 42% / 0.06) !important;
}

/* -- 选中卡片增强 -- */
.card-select.selected {
  background: linear-gradient(135deg, hsl(39, 45%, 42% / 0.1), hsl(39, 50%, 52% / 0.06)) !important;
  border-color: hsl(39, 45%, 42% / 0.5) !important;
  box-shadow: 0 0 0 3px hsl(39, 45%, 42% / 0.15), 0 8px 24px hsl(39, 45%, 42% / 0.12) !important;
}

/* -- 动画曲线优化 -- */
.animate-fade-in, .animate-fade-in-up {
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* -- 滚动条美化 -- */
#app-frame::-webkit-scrollbar { width: 4px; }
#app-frame::-webkit-scrollbar-track { background: transparent; }
#app-frame::-webkit-scrollbar-thumb {
  background: hsl(39, 45%, 42% / 0.15);
  border-radius: 999px;
}
#app-frame::-webkit-scrollbar-thumb:hover {
  background: hsl(39, 45%, 42% / 0.3);
}

/* -- 全局平滑滚动 -- */
#app-frame {
  scroll-behavior: smooth;
}

/* -- 色块材质感 -- */
div[class*="bg-amber-500"], div[class*="bg-red-500"],
div[class*="bg-green-500"], div[class*="bg-emerald-500"],
div[class*="bg-blue-500"], div[class*="bg-purple-500"],
div[class*="bg-yellow-500"] {
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

/* -- 分隔线增强 -- */
[class*="border-b"] {
  border-color: hsl(39, 45%, 42% / 0.08) !important;
}

/* -- Ghost 按钮增强 -- */
.btn-ghost:hover {
  background: linear-gradient(135deg, hsl(39,45%,42% / 0.12), hsl(39,50%,52% / 0.06)) !important;
  border-color: hsl(39, 45%, 42% / 0.4) !important;
}

/* -- 浮动装饰粒子增强 -- */
.animate-float {
  animation-duration: 4.5s !important;
  box-shadow: 0 0 8px hsl(39, 45%, 42% / 0.2) !important;
}

/* -- 装饰元素样式 -- */
.ybdjk-ornament-top,
.ybdjk-ornament-bottom {
  pointer-events: none;
  z-index: 5;
}

.ybdjk-corner {
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 12px hsl(39, 45%, 42% / 0.3);
}