/* ============================================================
   shared-stars-theme.css — 全站统一样式
   黑色夜空背景 + 星星闪烁动画 + 金色框架边框
   ============================================================ */

/* ----- 1. 星空背景（body） ----- */
body {
  background: #0a0a0f !important;
  min-height: 100vh;
  position: relative;
}

/* 背景底纹微光 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(25,20,15,0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: -2;
}

/* ----- 2. 星星容器与闪烁动画 ----- */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: starTwinkle var(--dur, 3s) ease-in-out infinite alternate;
}
.star.gold {
  background: #f0d6a0;
  box-shadow: 0 0 4px rgba(200,170,120,0.3);
}
@keyframes starTwinkle {
  0%   { opacity: 0.1; transform: scale(0.6); }
  50%  { opacity: 0.6; transform: scale(1.0); }
  100% { opacity: 0.2; transform: scale(0.8); }
}

/* 大星星（偶尔闪耀更明显） */
.star.bright {
  background: #ffe8b0;
  box-shadow: 0 0 6px rgba(255,215,160,0.4);
  animation-duration: var(--dur, 4s);
}
.star.bright::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 200%; height: 200%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,215,160,0.15) 0%, transparent 70%);
  border-radius: 50%;
}

/* ----- 3. 金色框架毛玻璃卡片 ----- */
.gold-glass {
  background: rgba(18,16,20,0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(200,170,120,0.2) !important;
  border-radius: 20px !important;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,215,160,0.06),
    0 0 30px rgba(200,170,120,0.03) !important;
}

/* 金色渐变标题 */
.gold-title {
  background: linear-gradient(135deg, #f0d6a8 0%, #d4a85a 50%, #c9953a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 金色边框按钮交互 */
.gold-border {
  border: 1px solid rgba(200,170,120,0.2) !important;
  transition: all 0.3s ease !important;
}
.gold-border:hover {
  border-color: rgba(200,170,120,0.45) !important;
  box-shadow: 0 0 20px rgba(200,170,120,0.08) !important;
}

/* 金色分隔线 */
.gold-divider {
  border: none;
  border-top: 1px solid rgba(200,170,120,0.12);
}

/* 金色文本 */
.gold-text {
  color: #d4b888 !important;
}
.gold-text-dim {
  color: rgba(200,170,120,0.5) !important;
}