/* ============================================================

   core.css · Our Smart Baby

   风格锚点 + 全站通用组件

   加载顺序：3/34

   ============================================================ */



/* 1. 全局重置 */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  font-size: 100%;

  -webkit-text-size-adjust: 100%;

  scroll-behavior: smooth;

}



body {

  font-family: var(--font-body);

  font-size: var(--text-base);

  line-height: var(--leading-relaxed);

  color: var(--color-text-primary);

  background-color: var(--color-bg);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  color: var(--color-primary-600);

  text-decoration: none;

  transition: color var(--duration-normal) var(--ease-out);

}



a:hover { color: var(--color-primary-700); }



ul, ol { list-style: none; }



button {

  font-family: inherit;

  cursor: pointer;

  border: none;

  background: none;

}



h1, h2, h3, h4, h5, h6 {

  font-family: var(--font-display);

  line-height: var(--leading-snug);

  color: var(--color-text-primary);

}



h1 { font-size: var(--text-4xl); font-weight: var(--font-bold); line-height: var(--leading-tight); }

h2 { font-size: var(--text-2xl); font-weight: var(--font-semibold); }

h3 { font-size: var(--text-xl); font-weight: var(--font-semibold); }

h4 { font-size: var(--text-lg); font-weight: var(--font-semibold); }



p { margin-bottom: var(--paragraph-spacing); }



/* 2. 布局容器 */

.container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--gutter);

}



.container-narrow { max-width: 800px; }

.container-wide { max-width: 1400px; }



main { min-height: 60vh; padding: var(--rhythm-loose) 0; }



/* 3. 导航栏 */

.site-header {

  position: sticky;

  top: 0;

  z-index: var(--z-sticky);

  background-color: var(--color-bg);

  border-bottom: 1px solid var(--color-border);

  backdrop-filter: blur(10px);

}



.nav-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 64px;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--gutter);

}



.nav-logo {

  font-family: var(--font-display);

  font-size: var(--text-xl);

  font-weight: var(--font-bold);

  color: var(--color-text-primary);

  display: flex;

  align-items: center;

  gap: var(--space-2);

}



.nav-links {

  display: flex;

  gap: var(--space-6);

  align-items: center;

}



.nav-links a {

  color: var(--color-text-secondary);

  font-size: var(--text-sm);

  font-weight: var(--font-medium);

}



.nav-links a:hover,

.nav-links a[aria-current="page"] {

  color: var(--color-primary-600);

}



.nav-toggle {

  display: none;

  width: 44px;

  height: 44px;

  align-items: center;

  justify-content: center;

}



.nav-toggle span {

  display: block;

  width: 24px;

  height: 2px;

  background: var(--color-text-primary);

  position: relative;

}



.nav-toggle span::before,

.nav-toggle span::after {

  content: '';

  position: absolute;

  width: 24px;

  height: 2px;

  background: var(--color-text-primary);

  left: 0;

}



.nav-toggle span::before { top: -8px; }

.nav-toggle span::after { bottom: -8px; }



/* 4. 页脚 */

.site-footer {

  background-color: var(--color-surface);

  border-top: 1px solid var(--color-border);

  padding: var(--section-padding) 0 var(--space-8);

  margin-top: var(--rhythm-breath);

}



.footer-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: var(--space-8);

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--gutter);

}



.footer-col h4 {

  font-size: var(--text-sm);

  font-weight: var(--font-semibold);

  margin-bottom: var(--space-3);

  color: var(--color-text-primary);

}



.footer-col a {

  display: block;

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  padding: var(--space-1) 0;

}



.footer-bottom {

  text-align: center;

  margin-top: var(--space-8);

  padding-top: var(--space-6);

  border-top: 1px solid var(--color-border);

  font-size: var(--text-xs);

  color: var(--color-text-tertiary);

}



/* 5. 按钮 */

.btn-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-2);

  padding: var(--space-4) var(--space-6);

  background-color: var(--color-accent-500);

  color: white;

  font-size: var(--text-base);

  font-weight: var(--font-semibold);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-md);

  transition: all var(--duration-normal) var(--ease-out);

  text-decoration: none;

  min-height: 48px;

}



.btn-cta:hover {

  background-color: var(--color-accent-600);

  color: white;

  transform: translateY(-1px);

  box-shadow: var(--shadow-lg);

}



.btn-cta:active { transform: scale(0.97); }



.btn-secondary {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-3) var(--space-5);

  background-color: transparent;

  color: var(--color-primary-600);

  font-size: var(--text-sm);

  font-weight: var(--font-medium);

  border: 1px solid var(--color-primary-300);

  border-radius: var(--radius-md);

  transition: all var(--duration-normal) var(--ease-out);

}



.btn-secondary:hover {

  background-color: var(--color-primary-50);

  border-color: var(--color-primary-500);

}



/* 6. 卡片 */

.card {

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: var(--card-padding);

  transition: box-shadow var(--duration-normal) var(--ease-out),

              border-color var(--duration-normal) var(--ease-out);

}



.card:hover {

  box-shadow: var(--shadow-md);

  border-color: var(--color-border-strong);

}



/* 7. 文章卡片 */

.article-card {

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  transition: all var(--duration-normal) var(--ease-out);

}



.article-card:hover {

  box-shadow: var(--shadow-md);

  border-color: var(--color-primary-200);

  transform: translateY(-2px);

}



.article-card a { display: block; color: inherit; }

.article-card img {

  aspect-ratio: 16 / 9;

  object-fit: cover;

  width: 100%;

}



.article-card-content { padding: var(--card-padding); }



.article-card h3 {

  font-size: var(--text-lg);

  font-weight: var(--font-semibold);

  margin-bottom: var(--space-2);

  line-height: var(--leading-snug);

}



.article-card .card-summary {

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  line-height: var(--leading-normal);

  margin-bottom: var(--space-3);

}



.article-card .card-meta {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  font-size: var(--text-xs);

  color: var(--color-text-tertiary);

  flex-wrap: wrap;

}



.card-score {

  font-weight: var(--font-semibold);

  color: var(--color-primary-600);

}



.under-review {

  background-color: var(--color-warning);

  color: white;

  padding: 2px 6px;

  border-radius: var(--radius-sm);

  font-size: var(--text-xs);

}



/* 8. FAQ折叠区 */

.faq-section { margin: var(--rhythm-loose) 0; }



.faq-section h2 {

  font-size: var(--text-2xl);

  margin-bottom: var(--space-6);

}



.faq-section details {

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  margin-bottom: var(--space-3);

  overflow: hidden;

}



.faq-section summary {

  padding: var(--space-4) var(--space-5);

  font-weight: var(--font-semibold);

  font-size: var(--text-base);

  cursor: pointer;

  background-color: var(--color-surface);

  list-style: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 44px;

}



.faq-section summary::-webkit-details-marker { display: none; }



.faq-section summary::after {

  content: '+';

  font-size: var(--text-xl);

  color: var(--color-primary-500);

  transition: transform var(--duration-normal) var(--ease-out);

}



.faq-section details[open] summary::after { transform: rotate(45deg); }



.faq-section details p {

  padding: var(--space-4) var(--space-5);

  color: var(--color-text-secondary);

  font-size: var(--text-sm);

  line-height: var(--leading-relaxed);

  border-top: 1px solid var(--color-border);

}



/* 9. 作者签名区 */

.author-signature {

  display: flex;

  gap: var(--space-4);

  align-items: flex-start;

  padding: var(--space-6);

  background-color: var(--color-surface);

  border-radius: var(--radius-lg);

  border: 1px solid var(--color-border);

  margin: var(--rhythm-loose) 0;

}



.author-avatar {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 28px;

  font-weight: var(--font-bold);

  color: white;

  flex-shrink: 0;

}



.avatar-rachel-torres { background: linear-gradient(135deg, #E8874A, #C96A3D); }

.avatar-priya-kapoor { background: linear-gradient(135deg, #D4568A, #A03F6C); }

.avatar-jenna-walsh { background: linear-gradient(135deg, #6B9BB8, #4A7896); }



.author-info .author-name {

  font-weight: var(--font-semibold);

  font-size: var(--text-lg);

}



.author-info .author-bio {

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  margin-top: var(--space-1);

}



.author-info .author-conflict {

  font-size: var(--text-xs);

  color: var(--color-text-tertiary);

  margin-top: var(--space-2);

  padding-top: var(--space-2);

  border-top: 1px solid var(--color-border);

}



/* 10. 信任条 */

.trust-bar {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-4);

  padding: var(--space-3) 0;

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

}



.trust-bar span {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

}



/* 11. 动态存活证明 */

.page-alive {

  font-size: var(--text-sm);

  color: var(--color-text-tertiary);

  padding: var(--space-3) 0;

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

}



/* 12. 原创主题导语 */

.topic-intro {

  max-width: var(--reading-max-width);

  margin: var(--rhythm-loose) 0;

  font-size: var(--text-lg);

  line-height: var(--leading-relaxed);

  color: var(--color-text-secondary);

}



/* 13. 判断框架 */

.judgment-framework {

  border-left: 4px solid var(--color-primary-500);

  background-color: var(--color-primary-50);

  padding: var(--space-5) var(--space-6);

  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  margin: var(--rhythm-loose) 0;

}



.judgment-framework h2,

.judgment-framework h3 {

  font-size: var(--text-lg);

  margin-bottom: var(--space-3);

  color: var(--color-primary-700);

}



.judgment-framework p {

  font-size: var(--text-sm);

  line-height: var(--leading-relaxed);

}



/* 14. 意图分流漏斗 */

.intent-funnel {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

  margin: var(--rhythm-normal) 0;

}



.intent-funnel a {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-3) var(--space-5);

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-full);

  font-size: var(--text-sm);

  font-weight: var(--font-medium);

  color: var(--color-text-primary);

  transition: all var(--duration-normal) var(--ease-out);

}



.intent-funnel a:hover {

  border-color: var(--color-primary-400);

  background-color: var(--color-primary-50);

}



/* 15. 编辑精选区 */

.editor-picks { margin: var(--rhythm-breath) 0; }



.editor-picks h2 {

  font-size: var(--text-2xl);

  margin-bottom: var(--space-6);

}



.pick-card {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: var(--space-4) var(--space-5);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  margin-bottom: var(--space-3);

  background-color: var(--color-surface);

}



.pick-card a {

  font-weight: var(--font-medium);

  color: var(--color-text-primary);

}



.pick-score {

  font-weight: var(--font-semibold);

  color: var(--color-primary-600);

}



/* 16. 快速推荐区 */

.quick-recommend {

  padding: var(--space-5);

  background-color: var(--color-surface);

  border-radius: var(--radius-md);

  margin: var(--rhythm-loose) 0;

}



.quick-recommend h3 {

  font-size: var(--text-lg);

  margin-bottom: var(--space-3);

}



/* 17. 子分类导航 */

.subcategory-nav {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

  margin: var(--rhythm-loose) 0;

}



.subcategory-nav h3 {

  width: 100%;

  font-size: var(--text-lg);

  margin-bottom: var(--space-3);

}



.subcategory-nav a {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-3) var(--space-5);

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  font-size: var(--text-sm);

  color: var(--color-text-primary);

  transition: all var(--duration-normal) var(--ease-out);

}



.subcategory-nav a:hover {

  border-color: var(--color-primary-400);

}



/* 18. 四类内链视觉样式 */

.breadcrumb {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-2);

  font-size: var(--text-sm);

  color: var(--color-text-tertiary);

  margin-bottom: var(--rhythm-normal);

}



.breadcrumb a { color: var(--color-text-secondary); }

.breadcrumb a:hover { color: var(--color-primary-600); }



.link-advanced {

  border-bottom: 1px dashed var(--color-primary-400);

  color: var(--color-primary-600);

}



.link-advanced:hover { border-bottom-style: solid; }



.link-lateral::after {

  content: ' →';

  font-size: 0.9em;

  color: var(--color-primary-500);

}



.exploration-hook {

  display: block;

  padding: var(--space-4) var(--space-5);

  border: 1px solid transparent;

  border-radius: var(--radius-md);

  background:

    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,

    linear-gradient(135deg, var(--color-primary-400), var(--color-accent-400)) border-box;

  margin: var(--rhythm-loose) 0;

  position: relative;

  transition: all var(--duration-normal) var(--ease-out);

}



.exploration-hook::before {

  content: '🔒';

  position: absolute;

  left: var(--space-3);

  top: 50%;

  transform: translateY(-50%);

  font-size: var(--text-sm);

  opacity: 0.6;

}



.exploration-hook a {

  display: block;

  padding-left: var(--space-6);

  font-weight: var(--font-medium);

  color: var(--color-primary-700);

}



.exploration-hook::after {

  content: '→';

  position: absolute;

  right: var(--space-4);

  top: 50%;

  transform: translateY(-50%);

  color: var(--color-primary-500);

  transition: transform var(--duration-normal) var(--ease-out);

}



.exploration-hook:hover { box-shadow: var(--shadow-md); }

.exploration-hook:hover::after { transform: translateY(-50%) translateX(2px); }



/* 19. E-E-A-T 视觉化组件 */

.author-credential-card {

  display: flex;

  gap: var(--space-3);

  align-items: center;

  padding: var(--space-4);

  background-color: var(--color-surface);

  border-radius: var(--radius-md);

  margin: var(--rhythm-normal) 0;

}



.author-credential-card .author-avatar {

  width: 48px;

  height: 48px;

  font-size: 20px;

}



.testing-methodology {

  padding: var(--space-4);

  background-color: var(--color-neutral-50);

  border-radius: var(--radius-md);

  font-size: var(--text-sm);

  margin: var(--rhythm-normal) 0;

}



.conflict-of-interest {

  padding: var(--space-3) var(--space-4);

  background-color: hsl(40, 90%, 95%);

  border-left: 4px solid var(--color-warning);

  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

  font-size: var(--text-sm);

  margin: var(--rhythm-normal) 0;

}



.article-timestamps {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-4);

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  margin: var(--rhythm-normal) 0;

}



.article-timestamps span {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

}



/* 时效三件套颜色编码 */

.ts-tested { color: var(--color-success); }

.ts-updated { color: var(--color-info); }

.ts-pricing { color: var(--color-accent-500); }



/* 20. L3页面专属样式 */

.l3-page {

  background-color: var(--color-l3-bg);

  border: 1px solid var(--color-l3-border);

  border-radius: var(--radius-lg);

  padding: var(--rhythm-breath) var(--space-6);

}



.l3-page h1 {

  border-left: 4px solid var(--color-l3-accent);

  padding-left: var(--space-4);

}



.l3-copyright {

  margin-top: var(--rhythm-breath);

  padding-top: var(--space-4);

  border-top: 1px solid var(--color-border);

  font-size: var(--text-xs);

  color: var(--color-text-tertiary);

  text-align: center;

}



/* 21. 评分徽章 */

.dpscore-badge {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-2) var(--space-4);

  background-color: var(--color-primary-50);

  color: var(--color-primary-700);

  border: 1px solid var(--color-primary-200);

  border-radius: var(--radius-full);

  font-weight: var(--font-semibold);

  font-size: var(--text-sm);

  margin: var(--rhythm-normal) 0;

}



/* 22. 联盟链接时间戳 */

.affiliate-timestamp {

  font-size: var(--text-xs);

  color: var(--color-text-tertiary);

  text-align: center;

  margin: var(--rhythm-loose) 0;

}



/* 23. 评论区块 */

.user-reviews-section { margin: var(--rhythm-breath) 0; }



.user-reviews-section h3 {

  font-size: var(--text-xl);

  margin-bottom: var(--space-5);

}



.review-card {

  padding: var(--space-4);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  margin-bottom: var(--space-3);

}



.review-card .review-header {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  margin-bottom: var(--space-2);

}



.review-card .review-avatar {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background-color: var(--color-neutral-200);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: var(--font-semibold);

  color: var(--color-text-secondary);

}



.review-card .review-date {

  font-size: var(--text-xs);

  color: var(--color-text-tertiary);

}



/* 24. 相关内链区块 */

.related-links-section {

  margin: var(--rhythm-breath) 0;

  padding: var(--space-5);

  background-color: var(--color-surface);

  border-radius: var(--radius-lg);

}



.related-links-section h3 {

  font-size: var(--text-lg);

  margin-bottom: var(--space-4);

}



.related-link-card {

  padding: var(--space-3) 0;

  border-bottom: 1px solid var(--color-border);

}



.related-link-card:last-child { border-bottom: none; }



.related-link-card p {

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  margin-bottom: var(--space-2);

}



/* 25. 侧边栏 */

.sidebar-widget { margin-bottom: var(--rhythm-loose); }



.sidebar-widget h4 {

  font-size: var(--text-base);

  font-weight: var(--font-semibold);

  margin-bottom: var(--space-3);

}



.quick-pick-card {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: var(--space-3);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  margin-bottom: var(--space-2);

  font-size: var(--text-sm);

  color: var(--color-text-primary);

  transition: all var(--duration-normal) var(--ease-out);

}



.quick-pick-card:hover {

  border-color: var(--color-primary-400);

  background-color: var(--color-primary-50);

}



.quick-pick-score {

  font-weight: var(--font-semibold);

  color: var(--color-primary-600);

}



/* 26. 空状态 */

.empty-state {

  text-align: center;

  padding: var(--rhythm-breath) var(--space-6);

  color: var(--color-text-tertiary);

  font-size: var(--text-sm);

}



/* 27. 阅读辅助 */

.reading-progress {

  position: fixed;

  top: 0;

  left: 0;

  height: 3px;

  background-color: var(--color-primary-500);

  z-index: var(--z-fixed);

  width: 0%;

  transition: width 50ms linear;

}



.back-to-top {

  position: fixed;

  bottom: var(--space-6);

  right: var(--space-6);

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background-color: var(--color-primary-500);

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: var(--shadow-lg);

  opacity: 0;

  visibility: hidden;

  transition: all var(--duration-normal) var(--ease-out);

  z-index: var(--z-fixed);

}



.back-to-top.visible { opacity: 1; visibility: visible; }



/* 28. 移动端响应式（375px） */

@media (max-width: 768px) {

  .nav-links {

    display: none;

    position: fixed;

    top: 64px;

    left: 0;

    right: 0;

    background-color: var(--color-bg);

    flex-direction: column;

    padding: var(--space-4);

    border-bottom: 1px solid var(--color-border);

    z-index: var(--z-dropdown);

  }



  .nav-links.active { display: flex; }



  .nav-links a {

    display: block;

    padding: var(--space-3) 0;

    min-height: 48px;

    font-size: var(--text-base);

  }



  .nav-toggle { display: flex; }



  .btn-cta {

    width: 80%;

    min-height: 48px;

  }



  .author-signature {

    flex-direction: column;

    align-items: center;

    text-align: center;

  }



  .author-avatar {

    width: 48px;

    height: 48px;

    font-size: 22px;

  }



  .faq-section summary { padding: var(--space-4); }



  .back-to-top {

    width: 44px;

    height: 44px;

    bottom: var(--space-4);

    right: var(--space-4);

  }

}



/* 29. 容器查询 */

.card-container {

  container-type: inline-size;

  container-name: card;

}



@container card (max-width: 320px) {

  .card .card-summary { display: none; }

  .card h3 { font-size: var(--text-base); }

}



/* 30. 内联SVG favicon（占位，实际SVG将在HTML中注入） */