/* ============================================================
   Issue 02 · 影子里的 Lovart · 暗夜锋利风（补全样式）
   位置：作为 styles.css 的扩展，承载剩余样式
   作用域：所有规则都用 .theme-shadow 前缀
   ============================================================ */

/* ---- 真人照片（替换剪影后的样式） ---- */
.theme-shadow .portrait-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ---- 隐藏的剪影母题（背景装饰） ---- */
.theme-shadow .hidden-silhouette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}
.theme-shadow .hidden-silhouette svg {
  width: 100%;
  height: 100%;
}

/* ============================================================
   Callout 文字微调（暗色背景下确保可读性）
   ============================================================ */
.theme-shadow .callout p {
  font-family: 'Noto Serif SC', serif;
  color: var(--shadow-ink-soft);
  line-height: 1.85;
}
.theme-shadow .callout p strong {
  color: var(--shadow-ink);
  background: none;
  padding: 0;
  font-weight: 700;
}
.theme-shadow .callout-paradox p strong { color: #ffb0b0; }
.theme-shadow .callout-key p strong { color: var(--shadow-accent); }
.theme-shadow .callout-insight p strong { color: var(--shadow-gold); }

/* ============================================================
   时间线 · 暗色主题覆盖（修复白色背景框文字看不清）
   ============================================================ */
.theme-shadow .timeline-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(216, 210, 196, 0.2) !important;
}
.theme-shadow .timeline-item.highlight .timeline-card {
  background: rgba(214, 138, 79, 0.1) !important;
  border-color: rgba(214, 138, 79, 0.3) !important;
}
.theme-shadow .timeline-year {
  color: rgba(216, 210, 196, 0.7) !important;
}
.theme-shadow .timeline-org {
  color: var(--shadow-ink) !important;
}
.theme-shadow .timeline-desc {
  color: var(--shadow-ink-soft) !important;
}

/* ============================================================
   尾声 · 详细样式补全
   ============================================================ */
.theme-shadow .ending p strong {
  color: var(--shadow-ink);
  background: linear-gradient(180deg, transparent 65%, rgba(214, 138, 79, 0.25) 65%);
  padding: 0 3px;
  font-weight: 700;
}

.theme-shadow .ending-final {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px dashed var(--shadow-border);
}
.theme-shadow .ending-mantra {
  margin: 28px 0 !important;
  padding: 32px 28px;
  background: linear-gradient(135deg, rgba(214, 138, 79, 0.08), rgba(200, 69, 69, 0.05));
  border: 1px solid rgba(214, 138, 79, 0.3);
  border-radius: 14px;
  text-align: center !important;
  font-family: 'Noto Serif SC', serif;
  font-size: 18px !important;
  line-height: 2 !important;
  color: var(--shadow-ink) !important;
}
.theme-shadow .ending-mantra strong {
  color: var(--shadow-accent) !important;
  background: none !important;
  padding: 0 !important;
  font-weight: 700;
}
.theme-shadow .ending-mantra-shadow {
  /* 与 ending-mantra 同样，作为锚点类名预留 */
}
.theme-shadow .ending-conclusion {
  text-align: center !important;
  font-size: 18px !important;
  margin-top: 36px !important;
  font-style: italic;
  color: var(--shadow-ink-soft) !important;
  line-height: 1.85 !important;
}
.theme-shadow .ending-conclusion strong {
  color: var(--shadow-gold) !important;
  background: none !important;
  padding: 0 !important;
  font-style: normal;
  font-weight: 700;
}
.theme-shadow .ending-pulse {
  margin-top: 48px !important;
  padding: 32px 0 0;
  text-align: center !important;
  border-top: 1px dashed var(--shadow-border);
}
.theme-shadow .ending-final-line {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: 36px;
  color: var(--shadow-accent);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-bottom: 18px;
}
.theme-shadow .ending-sub-line {
  display: block;
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  color: var(--shadow-ink-light);
  font-style: italic;
  line-height: 1.7;
}

/* ============================================================
   金句卡片 · card-blood（血红色，呼应"反 AGI 共识"卡片）
   ============================================================ */
.quote-card.card-blood {
  background: linear-gradient(135deg, #2a1414 0%, #1a0808 100%);
  color: #ffe0e0;
  position: relative;
}
.quote-card.card-blood .card-mark {
  color: #ff6060;
  text-shadow: 0 0 16px rgba(255, 60, 60, 0.4);
}
.quote-card.card-blood .card-num,
.quote-card.card-blood .card-brand,
.quote-card.card-blood .card-source { color: rgba(255, 200, 200, 0.6); }
.quote-card.card-blood .card-tag {
  color: #ff8080;
  font-weight: 700;
}
.quote-card.card-blood .card-bg-pattern {
  background-image:
    linear-gradient(rgba(255, 100, 100, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 100, 100, 0.04) 1px, transparent 1px);
  background-size: 18px 18px;
}
.quote-card.card-blood .card-quote-en {
  color: #ffd0d0;
  font-style: italic;
}
.quote-card.card-blood .card-quote-cn {
  color: #ffeaea;
}
.quote-card.card-blood .card-context {
  color: rgba(255, 220, 220, 0.7);
  border-top-color: rgba(255, 100, 100, 0.3);
}

/* ============================================================
   金句卡片 · card-mint（薄荷绿，修复字体颜色和内容显示）
   ============================================================ */
.quote-card.card-mint {
  background: linear-gradient(135deg, #0a1a14 0%, #06100d 100%) !important;
  color: #d0ffe8 !important;
  position: relative;
}
.quote-card.card-mint .card-mark {
  color: #60ffb0 !important;
  text-shadow: 0 0 16px rgba(60, 255, 150, 0.4);
}
.quote-card.card-mint .card-num,
.quote-card.card-mint .card-brand,
.quote-card.card-mint .card-source { 
  color: rgba(150, 255, 200, 0.7) !important; 
}
.quote-card.card-mint .card-tag {
  color: #60ffb0 !important;
  font-weight: 700;
}
.quote-card.card-mint .card-bg-pattern {
  background-image:
    linear-gradient(rgba(60, 255, 150, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 255, 150, 0.04) 1px, transparent 1px);
  background-size: 18px 18px;
}
.quote-card.card-mint .card-quote-en {
  color: #d0ffe8 !important;
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 12px;
}
.quote-card.card-mint .card-quote-cn-small {
  color: #e8fff5 !important;
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 12px;
}
.quote-card.card-mint .card-quote-cn-small strong {
  background: rgba(60, 255, 150, 0.2);
  color: #d0ffe8 !important;
  padding: 1px 4px;
  font-weight: 600;
}
.quote-card.card-mint .card-context {
  color: rgba(180, 255, 220, 0.8) !important;
  border-top-color: rgba(60, 255, 150, 0.3);
  margin-top: 16px;
  padding-top: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.quote-card.card-mint .emphasis-mark {
  color: #60ffb0 !important;
  background: rgba(60, 255, 150, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ============================================================
   金句区域整体在暗夜主题下的覆盖
   ============================================================ */
.theme-shadow .quotes-section {
  background: linear-gradient(180deg, #14130f 0%, #1a1916 100%);
  border-top: 1px solid var(--shadow-border);
  border-bottom: 1px solid var(--shadow-border);
  margin: 60px -32px;
  padding: 60px 32px 80px;
  border-radius: 0;
}
.theme-shadow .quotes-section-marker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--shadow-accent);
  text-transform: uppercase;
  font-weight: 600;
}
.theme-shadow .quotes-section-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--shadow-ink);
  letter-spacing: -0.01em;
  margin: 14px 0 16px;
  line-height: 1.3;
}
.theme-shadow .quotes-section-deck {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  color: var(--shadow-ink-light);
  line-height: 1.85;
  margin-bottom: 24px;
}
.theme-shadow .quotes-controls {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--shadow-border);
}
.theme-shadow .ctrl-btn {
  color: var(--shadow-ink-soft);
}
.theme-shadow .ctrl-btn.active {
  background: var(--shadow-accent);
  color: #fff;
}
.theme-shadow .ctrl-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--shadow-ink);
}
.theme-shadow .quotes-section-tip {
  color: var(--shadow-ink-light);
  margin-top: 32px;
}

/* ============================================================
   参考资料 · 暗色覆盖（修复字体可读性和背景对比度）
   ============================================================ */
.theme-shadow .references {
  margin-top: 60px;
  padding: 48px 0 0;
  border-top: 1px dashed var(--shadow-border);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 32px;
}
.theme-shadow .references h3 {
  font-family: 'Noto Serif SC', serif;
  font-size: 22px;
  font-weight: 700;
  color: #f0ece2 !important;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.theme-shadow .references h3::before {
  content: '#';
  color: var(--shadow-accent);
  margin-right: 8px;
  font-weight: 800;
}
.theme-shadow .references ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.theme-shadow .references li {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(216, 210, 196, 0.25) !important;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s, background 0.2s;
}
.theme-shadow .references li:hover {
  border-color: rgba(214, 138, 79, 0.5) !important;
  background: rgba(214, 138, 79, 0.08) !important;
}
.theme-shadow .references a {
  font-family: 'Noto Serif SC', serif;
  font-size: 15px;
  color: #e8e4dc !important;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.55;
  transition: color 0.2s;
}
.theme-shadow .references a:hover {
  color: var(--shadow-accent) !important;
  text-decoration: underline;
  text-decoration-color: var(--shadow-accent);
  text-underline-offset: 4px;
}
.theme-shadow .ref-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #d8d2c6 !important;
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
}
.theme-shadow .ref-meta {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px dashed var(--shadow-border);
  text-align: center;
}
.theme-shadow .ref-meta p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #d8d2c6 !important;
  line-height: 1.8;
  margin: 0;
}

/* ============================================================
   模态框（金句卡片放大）· 暗色微调
   ============================================================ */
.theme-shadow .modal-overlay {
  background: rgba(8, 7, 5, 0.92);
}
.theme-shadow .modal-download-btn {
  background: var(--shadow-accent);
  box-shadow: 0 4px 20px rgba(214, 138, 79, 0.4);
}
.theme-shadow .modal-download-btn:hover {
  background: var(--shadow-blood);
  box-shadow: 0 6px 24px rgba(200, 69, 69, 0.5);
}

/* ============================================================
   响应式适配 · 平板（≤960px）
   ============================================================ */
@media (max-width: 960px) {
  .theme-shadow .title-line:not(.title-eyebrow):not(.title-line-emphasis) {
    font-size: 32px;
  }
  .theme-shadow .title-line-emphasis {
    font-size: 64px;
  }
  .theme-shadow .board-shadow {
    padding: 40px 28px;
  }
  .theme-shadow .board-title { font-size: 32px; }
  .theme-shadow .role-comparison,
  .theme-shadow .contrast-box {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .theme-shadow .role-divider,
  .theme-shadow .contrast-vs {
    transform: rotate(90deg);
    margin: 4px auto;
  }
  .theme-shadow .rocks-comparison {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .theme-shadow .rcm-arrow { transform: rotate(90deg); margin: 0 auto; }
  .theme-shadow .metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .theme-shadow .rocks-title { font-size: 36px; }
  .theme-shadow .ending-title { font-size: 36px; }
}

/* ============================================================
   响应式适配 · 手机（≤640px）
   ============================================================ */
@media (max-width: 640px) {
  .theme-shadow .hero-shadow {
    padding: 100px 20px 60px;
  }
  .theme-shadow .title-eyebrow { font-size: 22px; }
  .theme-shadow .title-line:not(.title-eyebrow):not(.title-line-emphasis) {
    font-size: 26px;
  }
  .theme-shadow .title-line-emphasis {
    font-size: 48px;
    line-height: 1.1;
  }
  .theme-shadow .hero-deck {
    font-size: 16px;
    line-height: 1.85;
  }
  .theme-shadow .hero-portrait {
    max-width: 280px;
  }
  .theme-shadow .portrait-name-cn { font-size: 24px; }
  .theme-shadow .hero-meta {
    gap: 16px;
    padding: 18px 0;
  }
  .theme-shadow .hm-num { font-size: 28px; }
  .theme-shadow .hm-divider { display: none; }
  .theme-shadow .hm-item { flex: 1 1 30%; min-width: 80px; }

  .theme-shadow .article {
    padding: 40px 16px 60px;
  }
  .theme-shadow .board-shadow {
    padding: 32px 22px;
    margin-bottom: 18px;
  }
  .theme-shadow .marker-num { font-size: 44px; }
  .theme-shadow .marker-label { font-size: 12px; }
  .theme-shadow .board-title { font-size: 26px; line-height: 1.3; }
  .theme-shadow .board-shadow p { font-size: 15px; line-height: 1.85; }

  .theme-shadow .big-quote { padding: 22px 24px; }
  .theme-shadow .big-quote p { font-size: 18px; }
  .theme-shadow .big-quote-dark { padding: 24px; }
  .theme-shadow .big-quote-dark p { font-size: 21px; }
  .theme-shadow .big-quote-jin { padding: 24px; }
  .theme-shadow .big-quote-jin p { font-size: 18px; }

  .theme-shadow .emphasized-line { font-size: 22px; padding: 20px 16px; }
  .theme-shadow .hero-quote { padding: 32px 24px 28px; }
  .theme-shadow .hero-quote p { font-size: 22px; }
  .theme-shadow .hero-quote-cn { font-size: 16px !important; }
  .theme-shadow .hero-quote-mark { font-size: 80px; left: 16px; top: -8px; }

  .theme-shadow .callout { padding: 20px 22px; }
  .theme-shadow .callout p { font-size: 14px; }
  .theme-shadow .callout-quote-cn { font-size: 17px !important; }

  .theme-shadow .timeline-item {
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }
  .theme-shadow .timeline-year { font-size: 12px; }
  .theme-shadow .timeline-org { font-size: 14px; }
  .theme-shadow .timeline-desc { font-size: 13px; }

  .theme-shadow .method-grid-dark .method-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 18px;
    font-size: 13px;
  }
  .theme-shadow .method-grid-dark .method-cross,
  .theme-shadow .method-grid-dark .method-arrow {
    font-size: 18px;
  }

  .theme-shadow .role-name { font-size: 18px; }
  .theme-shadow .sub-section-title { font-size: 18px; }

  .theme-shadow .metric-bombshell-dark {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px;
    text-align: center;
  }
  .theme-shadow .metric-bombshell-dark .metric-num { font-size: 48px; }

  .theme-shadow .contrast-side { padding: 22px 18px; }
  .theme-shadow .contrast-quote { font-size: 18px; }

  .theme-shadow .insight-list li { padding: 16px 18px; font-size: 14px; }

  .theme-shadow .metrics-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .theme-shadow .mb-num { font-size: 24px; }

  .theme-shadow .shadow-rocks {
    margin: 24px -16px;
    padding: 60px 22px;
  }
  .theme-shadow .rocks-title { font-size: 28px; }
  .theme-shadow .rocks-body p { font-size: 15px; line-height: 1.85; }
  .theme-shadow .rocks-realization { padding: 22px 24px; }
  .theme-shadow .rocks-realization p { font-size: 14px; }
  .theme-shadow .rocks-emphasis { font-size: 22px !important; padding: 18px; }
  .theme-shadow .rmn-num { font-size: 44px; }
  .theme-shadow .rmn-warm .rmn-num { font-size: 38px; }

  .theme-shadow .ending {
    margin: 40px -16px 0;
    padding: 56px 22px 72px;
  }
  .theme-shadow .ending-title { font-size: 28px; }
  .theme-shadow .ending p { font-size: 15px; line-height: 1.85; }
  .theme-shadow .ending-mantra { padding: 22px 18px; font-size: 15px !important; }
  .theme-shadow .ending-final-line { font-size: 28px; }

  .theme-shadow .quotes-section {
    margin: 40px -16px;
    padding: 50px 22px 60px;
  }
  .theme-shadow .quotes-section-title { font-size: 24px; }

  .theme-shadow .references li { padding: 14px 16px; }
  .theme-shadow .references a { font-size: 14px; }
}