:root{
  --bg1:#1a0a10;
  --bg2:#2a1520;
  --glass: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.12);
  --soft: #d4a5a5;  /* 暖灰色 */
  --border: rgba(255,255,255,.12);
  --text-primary: #f8cfcf;  /* 暖粉色文字，比之前更深 */
  --text-secondary: #e0aeae; /* 暖灰色文字，比之前更深 */
  --accent: #ff6b6b; /* 暖红色强调色 */
  --accent-hover: #ff5252; /* 暖红色悬停 */
  --success: #6bff8f; /* 暖绿色 */
  --warning: #ffd93d; /* 暖黄色 */
  --warm-gradient-1: #ff9a9e;
  --warm-gradient-2: #fecfef;
}
body.bg-gradient{
  min-height:100vh;
  background: radial-gradient(1200px 600px at 10% 10%, #ff758c 0%, transparent 60%),
              radial-gradient(1200px 600px at 90% 20%, #ff9a9e 0%, transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--text-primary);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.glass-nav{
  background: rgba(42, 21, 32, .25);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.15);
}
.glass{
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 182, 193, 0.05));
  border:1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(255, 107, 107, 0.25);
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}
.glass:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(255, 107, 107, 0.35);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 182, 193, 0.08));
}
.alert-glass{
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 182, 193, 0.08));
  border:1px solid var(--border);
  color: var(--text-primary);
  border-left: 4px solid var(--accent);
}
.text-soft{ color: var(--text-secondary); }
.text-accent{ color: var(--text-accent); }
.border-soft{ border-color: var(--border) !important; }
.bg-accent{ background: linear-gradient(45deg, var(--accent), #ff8e8e); }
.pill{
  background: linear-gradient(45deg, var(--accent), #ff8e8e);
  border:1px solid var(--accent);
  border-radius:999px;
  padding: .3rem .75rem !important;
  color: white;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
}
.tag{
  border:1px solid var(--border);
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.08), rgba(255, 182, 193, 0.05));
  border-radius:999px;
  padding:.35rem .75rem;
  font-size:.85rem;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.tag:hover {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.15), rgba(255, 182, 193, 0.1));
  transform: scale(1.05);
  border-color: var(--accent);
}
.hero-card{ 
  position:relative; 
  overflow:hidden; 
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 138, 138, 0.05));
}
.orb{
  width:64px;height:64px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), #ff8e8e);
  border:1px solid var(--accent);
  box-shadow: 0 0 30px rgba(255, 107, 107, 0.4);
  animation: pulse 3s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 30px rgba(255, 107, 107, 0.4); }
  50% { box-shadow: 0 0 50px rgba(255, 107, 107, 0.6); transform: scale(1.05); }
  100% { box-shadow: 0 0 30px rgba(255, 107, 107, 0.4); }
}
.mini{
  border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 182, 193, 0.03));
  border-radius: 16px;
  padding: 12px;
  height:100%;
  transition: all 0.3s ease;
}
.mini:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 182, 193, 0.08));
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
}

/* 商店页面专用样式 */
.inv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 182, 193, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.inv-row:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 182, 193, 0.1));
  transform: translateX(5px);
  border-color: rgba(255, 107, 107, 0.3);
}

/* 使用按钮样式 - 确保始终可见 */
.btn-use-item {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  border: none;
  color: white;
  font-weight: 500;
  padding: 6px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
}

.btn-use-item:hover {
  background: linear-gradient(135deg, #ff5252, #ff6b6b);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.btn-use-item:active {
  transform: translateY(0);
}

/* 购买按钮样式 */
.btn-buy-item {
  background: linear-gradient(135deg, #4ecdc4, #88d8c0);
  border: none;
  color: white;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(78, 205, 196, 0.3);
}

.btn-buy-item:hover {
  background: linear-gradient(135deg, #3db8af, #4ecdc4);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4);
}

/* 库存物品动画效果 */
.animated-item {
  animation: fadeInSlide 0.5s ease-out;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 商品卡片优化 */
.mini-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 182, 193, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 20px;
  height: 100%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.mini-card:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 182, 193, 0.1));
  box-shadow: 0 15px 35px rgba(255, 107, 107, 0.3);
  border-color: rgba(255, 107, 107, 0.3);
}