/* ═══════ DeepAll Design System — 赛博朋克 × 东方神秘主义 ═══════ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@600;700&display=swap');

:root {
  /* ─── 基础色 ─── */
  --bg-primary:     #0D0B1A;
  --bg-secondary:   #141028;
  --bg-tertiary:    #1E1840;
  --bg-elevated:    #251F4A;

  /* ─── 品牌色 ─── */
  --gold:           #D4AF37;
  --gold-light:     #E8D48B;
  --gold-dark:      #9A7D23;
  --gold-glow:      rgba(212, 175, 55, 0.15);

  /* ─── 强调色 ─── */
  --cyan:           #00D4FF;
  --cyan-glow:      rgba(0, 212, 255, 0.15);

  /* ─── 语义色 ─── */
  --fortune-high:   #FF6B6B;
  --fortune-mid:    #FFB347;
  --fortune-low:    #4ECDC4;
  --fortune-cold:   #45B7D1;

  /* ─── 五行色 ─── */
  --wuxing-metal:   #C0C0C0;
  --wuxing-wood:    #4CAF50;
  --wuxing-water:   #2196F3;
  --wuxing-fire:    #FF5722;
  --wuxing-earth:   #FFB300;

  /* ─── 文字色 ─── */
  --text-primary:   #F5F5F5;
  --text-secondary: rgba(245, 245, 245, 0.7);
  --text-tertiary:  rgba(245, 245, 245, 0.4);
  --text-disabled:  rgba(245, 245, 245, 0.2);

  /* ─── 边框 ─── */
  --border-subtle:  rgba(212, 175, 55, 0.15);
  --border-medium:  rgba(212, 175, 55, 0.3);
  --border-strong:  rgba(212, 175, 55, 0.6);

  /* ─── 阴影 ─── */
  --shadow-glow:    0 0 20px rgba(212, 175, 55, 0.1);
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-elevated:0 8px 40px rgba(0, 0, 0, 0.6);

  /* ─── 字号 ─── */
  --text-hero:      3rem;
  --text-h1:        2rem;
  --text-h2:        1.5rem;
  --text-h3:        1.25rem;
  --text-body:      1rem;
  --text-sm:        0.875rem;
  --text-xs:        0.75rem;
  --text-score-xl:  3.5rem;
  --text-score-lg:  2rem;
  --text-score-md:  1.25rem;

  /* ─── 行高 ─── */
  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
}

/* ─── 全局基础 ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: var(--leading-normal);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-serif {
  font-family: 'Cinzel', 'Noto Serif SC', serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* ─── 卡片 ─── */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-glow);
}

.card-feature {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-feature:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--shadow-glow);
}

/* ─── 按钮 ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #D4AF37, #E8D48B);
  color: var(--bg-primary);
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.3);
  transform: scale(1.02);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--gold);
  font-weight: 500;
  padding: 10px 24px;
  border-radius: 9999px;
  border: 1px solid var(--border-medium);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--gold-glow);
}

/* ─── 输入控件 ─── */
.input-field {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 16px;
  color: var(--text-primary);
  font-size: 1rem;
  width: 100%;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

.input-field:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px var(--cyan-glow);
}

select.input-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23E8D48B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ─── 装饰线 ─── */
.divider-gold {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.divider-gold::before,
.divider-gold::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
}

/* ─── AI解读区 ─── */
.ai-reading-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: var(--leading-loose);
}

/* ─── 脉冲动画 ─── */
@keyframes pulse-gold {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

/* ─── 加载旋转 ─── */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}

/* ─── Tab ─── */
.tab-item {
  padding: 8px 16px;
  cursor: pointer;
  position: relative;
  color: var(--text-secondary);
  font-weight: 400;
  transition: color 0.2s;
}

.tab-item.active {
  color: var(--gold);
  font-weight: 600;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}

/* ─── 移动端响应 ─── */
@media (max-width: 640px) {
  :root {
    --text-hero: 2rem;
    --text-h1: 1.5rem;
    --text-h2: 1.25rem;
  }

  .card {
    padding: 16px;
  }
}

/* ─── 滚动条 ─── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 3px;
}