/* Styles are inline in HTML */


/* ========== 广告柔化 v2 ========== */
.affiliate-card, .affiliate-link-wrapper {
  background: var(--card-bg, #fdfcf9) !important;
  border: 1px solid var(--card-border, #e5e5e0) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.affiliate-card a.affiliate-link, .affiliate-link-wrapper a[href*="amazon"] {
  background: transparent !important;
  color: var(--link-color, #b45309) !important;
  border: 1px solid currentColor !important;
  font-weight: 500 !important;
  padding: 0.5em 1.25em !important;
  text-decoration: none;
  border-radius: 6px;
  display: inline-block;
  transition: background 0.15s, color 0.15s;
}
.affiliate-card a.affiliate-link:hover, .affiliate-link-wrapper a[href*="amazon"]:hover {
  background: var(--link-color, #b45309) !important;
  color: #fff !important;
}
.affiliate-section {
  background: transparent !important;
  border-top: 1px solid var(--card-border, #e5e5e0) !important;
  padding-top: 2em !important;
  margin-top: 3em !important;
}
.affiliate-section h2, .affiliate-section h3 {
  font-size: 1.15em !important;
  color: var(--muted-color, #666) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500 !important;
}

/* ========== Reading Progress Bar ========== */
#reading-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
  width: 0%; z-index: 9999;
  transition: width 0.1s ease-out;
}
@media (prefers-color-scheme: dark) {
  #reading-progress { background: linear-gradient(90deg, #fbbf24 0%, #fcd34d 100%); }
}

/* ========== Dark Mode ========== */
:root {
  --bg-color: #fdfcf9;
  --text-color: #1f2937;
  --card-bg: #ffffff;
  --card-border: #e5e5e0;
  --link-color: #b45309;
  --muted-color: #6b7280;
  --nav-bg: #ffffff;
  --code-bg: #f5f5f4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-color: #0f172a;
    --text-color: #e5e7eb;
    --card-bg: #1e293b;
    --card-border: #334155;
    --link-color: #fbbf24;
    --muted-color: #94a3b8;
    --nav-bg: #0f172a;
    --code-bg: #1e293b;
  }
}
[data-theme="dark"] {
  --bg-color: #0f172a;
  --text-color: #e5e7eb;
  --card-bg: #1e293b;
  --card-border: #334155;
  --link-color: #fbbf24;
  --muted-color: #94a3b8;
  --nav-bg: #0f172a;
  --code-bg: #1e293b;
}
body {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
  transition: background 0.2s, color 0.2s;
}
nav, header {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--card-border) !important;
}
a { color: var(--link-color); }
code, pre { background: var(--code-bg) !important; }
[data-theme="dark"] img:not([src*="logo"]) { opacity: 0.9; }

/* Dark mode toggle button */
#theme-toggle {
  background: transparent; border: 1px solid var(--card-border);
  border-radius: 999px; padding: 0.3em 0.8em;
  cursor: pointer; font-size: 0.9em;
  color: var(--text-color);
  margin-left: 0.5em;
}
#theme-toggle:hover { background: var(--card-bg); }


/* ========== Reading Comfort v1 (真人 UX) ========== */

/* 1. 排版节奏 - 舒适阅读宽度 65-72ch，行高 1.75 */
.container {
  max-width: 800px !important;
}
.container main, .container article, main {
  font-size: 17px;
  line-height: 1.75;
}
.container p, .container li, main p, main li, article p, article li {
  max-width: 68ch;
  color: var(--text-color, #1f2937);
}
.container p { margin: 0 0 1.25em 0; }
.container li { margin: 0 0 0.5em 0; }

/* 2. 首段 (第一个 <p> 或 .lead) 加强 - 更好导读 */
.container main > p:first-of-type,
.container article > p:first-of-type,
main > p:first-of-type, article > p:first-of-type, .lead {
  font-size: 1.13em;
  color: var(--text-color, #0f172a);
  line-height: 1.7;
  font-weight: 400;
}

/* 3. 标题呼吸 - 更清晰的视觉分层 */
.container h2, main h2, article h2 {
  margin-top: 2.5em !important;
  margin-bottom: 0.6em !important;
  padding-top: 0.3em;
  scroll-margin-top: 5em;
}
.container h3, main h3, article h3 {
  margin-top: 2em !important;
  margin-bottom: 0.4em !important;
  scroll-margin-top: 5em;
}
.container h4, main h4, article h4 {
  margin-top: 1.5em !important;
  scroll-margin-top: 5em;
}

/* 4. 链接 hover 动效（微交互） */
.container a:not(.pillar-card):not(.affiliate-link):not(.skip-to-content):not(#theme-toggle),
main a:not(.pillar-card):not(.affiliate-link):not(.skip-to-content):not(#theme-toggle),
article a:not(.pillar-card):not(.affiliate-link):not(.skip-to-content):not(#theme-toggle) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 0.2s ease;
}
.container a:hover, main a:hover, article a:hover {
  background-size: 100% 2px;
}

/* 5. 图片统一柔和呈现 */
.container img, main img, article img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin: 1em auto;
  display: block;
}
.pillar-card-thumb, .pillar-card-thumb-placeholder {
  margin: 0 0 0.6em 0 !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}

/* 6. Blockquote 视觉突出 */
.container blockquote, main blockquote, article blockquote {
  margin: 1.5em 0;
  padding: 0.75em 1.5em;
  border-left: 4px solid var(--link-color, #d97706);
  background: var(--card-bg, #f9fafb);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--muted-color, #4b5563);
}

/* 7. 代码块柔和 */
.container code, main code, article code {
  padding: 0.15em 0.4em;
  background: var(--code-bg, #f5f5f4);
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.container pre, main pre, article pre {
  background: var(--code-bg, #f5f5f4);
  padding: 1em 1.25em;
  border-radius: 8px;
  overflow-x: auto;
  line-height: 1.5;
}

/* 8. 表格 - 金融/健康类站有对比表 */
.container table, main table, article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
}
.container th, .container td, main th, main td, article th, article td {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--card-border, #e5e7eb);
  text-align: left;
}
.container th, main th, article th {
  background: var(--card-bg, #f9fafb);
  font-weight: 600;
  color: var(--text-color, #0f172a);
}
.container tr:hover td, main tr:hover td, article tr:hover td {
  background: var(--card-bg, #fafafa);
}

/* 9. 按钮/表单触屏目标最小 44px (WCAG 2.5.5) */
button, input[type="submit"], input[type="button"], .btn,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
  padding: 0.6em 1.25em;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
button:active, .btn:active {
  transform: translateY(1px);
}

/* 10. 回到顶部按钮 */
#back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--link-color, #d97706);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  z-index: 998;
  display: flex; align-items: center; justify-content: center;
}
#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#back-to-top:hover { transform: translateY(-2px) scale(1.05); }
#back-to-top:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 11. 图片懒加载淡入 */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded, img[loading="lazy"][complete] {
  opacity: 1;
}

/* 12. 焦点可见 (a11y - 键盘用户友好) */
*:focus-visible {
  outline: 2px solid var(--link-color, #d97706);
  outline-offset: 3px;
  border-radius: 3px;
}

/* 13. 响应式移动端 - 舒适阅读 */
@media (max-width: 700px) {
  .container {
    padding: 20px 16px !important;
  }
  .container main, main {
    font-size: 16.5px;
  }
  h1 { font-size: 1.7em !important; line-height: 1.3 !important; }
  h2 { font-size: 1.35em !important; }
  h3 { font-size: 1.15em !important; }
  #back-to-top { bottom: 16px; right: 16px; }
  #theme-toggle { padding: 0.4em 0.6em; }
}

/* 14. 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 15. 平滑滚动（锚点） */
html { scroll-behavior: smooth; scroll-padding-top: 4em; }

/* 16. 打印友好（金融/健康站用户会打印保存） */
@media print {
  nav, header, footer, aside.back-to-pillar, .pillar-toc, .pillar-grid,
  #back-to-top, #theme-toggle, #reading-progress, .affiliate-card,
  .affiliate-section, .affiliate-link-wrapper, .skip-to-content { display: none !important; }
  .container { max-width: 100% !important; box-shadow: none !important; }
  a { color: inherit !important; text-decoration: underline !important; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #666; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  img { max-width: 500px !important; }
  body { background: white !important; color: black !important; font-size: 12pt; }
}

/* 17. Dark mode 柔和优化 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-color: #0b1120;
    --text-color: #e2e8f0;
    --card-bg: #1a2233;
  }
  :root:not([data-theme="light"]) img { filter: brightness(0.92); }
  :root:not([data-theme="light"]) img.logo { filter: none; }
}
[data-theme="dark"] img { filter: brightness(0.92); }
[data-theme="dark"] img.logo { filter: none; }


/* Table responsive wrap */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5em 0;border-radius:8px}
.table-wrap table{margin:0}


/* Theme toggle + reading progress + anchor */
#theme-toggle{position:fixed;top:16px;right:16px;z-index:999;background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.15s,box-shadow 0.15s;display:flex;align-items:center;justify-content:center}
#theme-toggle:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
#reading-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--link-color,#d97706),var(--theme-accent,#ea580c));z-index:9999;width:0;transition:width 0.1s ease-out;pointer-events:none}
.copy-anchor:focus{opacity:1!important;outline:2px solid var(--link-color,#d97706);outline-offset:2px;border-radius:3px}

/* Site search button */
#site-search-btn{position:fixed;top:16px;right:66px;z-index:999;background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);border-radius:50%;width:40px;height:40px;font-size:16px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.15s,box-shadow 0.15s;display:flex;align-items:center;justify-content:center}
#site-search-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
@media (max-width:600px){#site-search-btn{top:12px;right:60px;width:36px;height:36px}}

/* ============ v2 (2026-07-10) UX polish ============ */
/* --- Callout dark-mode 友好 (FTC / YMYL disclaimer) --- */
:root { --callout-fg: #1a1a1a; }
:root[data-theme="dark"], html.dark { --callout-fg: #f1f5f9; }
:root[data-theme="dark"] aside[aria-label*="FTC"],
html.dark aside[aria-label*="FTC"] {
  background: #3a2f0f !important;
  border-color: #b45309 !important;
}
:root[data-theme="dark"] .ymyl-disclaimer,
html.dark .ymyl-disclaimer {
  background: linear-gradient(135deg, #0b3a6c30 0%, #14532d30 100%) !important;
}

/* --- 顶部阅读进度条 --- */
#reading-progress-v2 {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--accent-color, #0ea5e9);
  z-index: 9999; pointer-events: none; transition: width 0.08s linear;
}

/* --- 阅读时长徽章 (顶部 h1 下方) --- */
.read-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.88rem; color: var(--text-color, #475569); opacity: 0.75;
  margin: 0.4rem 0 1rem; font-weight: 500;
}
.read-meta .rm-sep { opacity: 0.35; }

/* --- h2 hover 复制锚点按钮 --- */
article h2, article h3 { position: relative; }
.h-anchor {
  opacity: 0; margin-left: 0.4em; font-size: 0.72em;
  color: var(--accent-color, #0ea5e9); text-decoration: none;
  transition: opacity 0.15s; user-select: none; cursor: pointer;
  padding: 0 6px; border-radius: 4px;
}
article h2:hover .h-anchor, article h3:hover .h-anchor { opacity: 0.75; }
.h-anchor:hover, .h-anchor:focus { opacity: 1 !important; background: var(--muted-bg, #f1f5f9); }
.h-anchor.copied { color: #10b981; opacity: 1; }
@media (hover: none) { .h-anchor { opacity: 0.4; } }

/* --- inline color 清理后兜底：确保 dark mode 下 strong/em 可读 --- */
:root[data-theme="dark"] article strong,
html.dark article strong,
:root[data-theme="dark"] article em,
html.dark article em { color: var(--text-color, #f1f5f9); }
/* ============ end v2 UX polish ============ */


/* --- .article-toc 折叠 TOC (v2 补) --- */
.article-toc {
  margin: 1.2rem 0 1.8rem;
  padding: 0.7rem 1rem;
  background: var(--muted-bg, #f8fafc);
  border-left: 3px solid var(--accent-color, #0ea5e9);
  border-radius: 6px;
  font-size: 0.94rem;
}
.article-toc summary {
  cursor: pointer; font-weight: 600;
  color: var(--text-color, #1e293b);
  padding: 0.25rem 0; user-select: none;
  list-style: none;
}
.article-toc summary::-webkit-details-marker { display: none; }
.article-toc summary::before {
  content: '▸'; display: inline-block; margin-right: 0.5em;
  transition: transform 0.15s; color: var(--accent-color, #0ea5e9);
}
.article-toc[open] summary::before { transform: rotate(90deg); }
.article-toc ol { margin: 0.6rem 0 0.2rem 1.3rem; padding: 0; }
.article-toc ol li { margin: 0.28rem 0; line-height: 1.55; }
.article-toc ol a {
  color: var(--text-color, #334155); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.15s;
}
.article-toc ol a:hover, .article-toc ol a:focus {
  color: var(--accent-color, #0ea5e9);
  border-bottom-color: var(--accent-color, #0ea5e9);
}
:root[data-theme="dark"] .article-toc,
html.dark .article-toc { background: rgba(148,163,184,0.08); }
/* --- end .article-toc --- */


/* --- Editorial Transparency Footer (v3, 2026-07-10) --- */
.editorial-transparency {
  margin: 2.5rem 0 1.5rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, rgba(14,165,233,0.06), rgba(34,197,94,0.06));
  border-left: 3px solid var(--accent-color, #0ea5e9);
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.62;
}
.editorial-transparency .et-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-color, #0f172a);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}
.editorial-transparency .et-body {
  color: var(--text-color, #334155);
  opacity: 0.92;
}
.editorial-transparency a {
  color: var(--accent-color, #0ea5e9);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.editorial-transparency a:hover, .editorial-transparency a:focus {
  border-bottom-color: var(--accent-color, #0ea5e9);
}
:root[data-theme="dark"] .editorial-transparency,
html.dark .editorial-transparency {
  background: linear-gradient(135deg, rgba(14,165,233,0.13), rgba(34,197,94,0.13));
}
/* --- end .editorial-transparency --- */


/* --- img CLS/响应式双保险 (v4, 2026-07-11) --- */
img { max-width: 100%; height: auto; }
/* hero/feature 保 aspect-ratio，即使 width/height 属性也不撑破容器 */
.hero img, .features img, .feature-img { max-width: 100%; height: auto; display: block; }
/* --- end --- */


/* --- CJ / affiliate CTA (v1, 2026-07-11) --- */
.cj-cta-v1 {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(14,165,233,0.08));
  border: 1px solid var(--accent-color, #0ea5e9);
  border-left-width: 4px;
  border-radius: 10px;
  font-size: 0.95rem;
}
.cj-cta-inner {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.cj-cta-icon {
  font-size: 2rem;
  flex: 0 0 auto;
  line-height: 1;
}
.cj-cta-body { flex: 1; min-width: 0; }
.cj-cta-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-color, #0f172a);
  margin-bottom: 0.3rem;
}
.cj-cta-desc {
  color: var(--text-color, #334155);
  opacity: 0.85;
  margin-bottom: 0.7rem;
  line-height: 1.55;
}
.cj-cta-btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: var(--accent-color, #0ea5e9);
  color: white !important;
  text-decoration: none !important;
  border-radius: 6px;
  font-weight: 600;
  min-height: 44px;  /* touch target */
  line-height: 1.9;
  transition: transform 0.12s, box-shadow 0.15s;
  border: none;
}
.cj-cta-btn:hover, .cj-cta-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14,165,233,0.35);
  color: white !important;
}
.cj-cta-disc {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--text-color, #64748b);
  opacity: 0.75;
  line-height: 1.45;
  font-style: italic;
}
:root[data-theme="dark"] .cj-cta-v1,
html.dark .cj-cta-v1 {
  background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(14,165,233,0.15));
}
@media (max-width: 600px) {
  .cj-cta-inner { flex-direction: column; align-items: flex-start; }
  .cj-cta-icon { font-size: 1.6rem; }
}
/* --- end .cj-cta-v1 --- */


/* --- Related Articles (v1, 2026-07-11) --- */
.related-articles-v1 {
  margin: 2.5rem 0 1.5rem;
  padding: 1.2rem 1.4rem;
  background: var(--muted-bg, #f8fafc);
  border-radius: 10px;
  border-left: 3px solid var(--accent-color, #0ea5e9);
}
.related-articles-v1 .ra-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-color, #0f172a);
  margin-bottom: 0.85rem;
  letter-spacing: 0.01em;
}
.related-articles-v1 .ra-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem;
}
.related-articles-v1 .ra-list li { margin: 0; }
.related-articles-v1 .ra-list a {
  display: block;
  padding: 0.75rem 0.9rem;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  color: var(--text-color, #0f172a);
  text-decoration: none !important;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  min-height: 60px;
  height: 100%;
}
.related-articles-v1 .ra-list a:hover, .related-articles-v1 .ra-list a:focus {
  transform: translateY(-2px);
  border-color: var(--accent-color, #0ea5e9);
  box-shadow: 0 4px 12px rgba(14,165,233,0.15);
}
.related-articles-v1 .ra-a-title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 0.3rem;
}
.related-articles-v1 .ra-a-desc {
  display: block;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-color, #64748b);
  opacity: 0.75;
}
:root[data-theme="dark"] .related-articles-v1,
html.dark .related-articles-v1 { background: rgba(148,163,184,0.08); }
:root[data-theme="dark"] .related-articles-v1 .ra-list a,
html.dark .related-articles-v1 .ra-list a { background: rgba(15,23,42,0.4); }
/* --- end --- */

/* --- note-prevnext 导航 (Editor Notes) --- */
.note-prevnext {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 0.8rem; margin: 2.5rem 0 1.5rem; padding: 1.2rem 0;
  border-top: 1px solid var(--muted-border, #e2e8f0);
}
.note-prevnext-link {
  flex: 1; min-width: 200px; padding: 0.8rem 1rem;
  background: var(--muted-bg, #f8fafc); border-radius: 8px;
  text-decoration: none; transition: background 0.15s, transform 0.15s;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.note-prevnext-link:hover { background: var(--hover-bg, #f1f5f9); transform: translateY(-1px); }
.note-prevnext-link:first-child { text-align: left; }
.note-prevnext-link:last-child { text-align: right; }
.note-prevnext-label { font-size: 0.8rem; color: var(--muted-text, #64748b); font-weight: 500; }
.note-prevnext-title { font-size: 0.9rem; color: var(--text-color, #1e293b); font-weight: 600; line-height: 1.3; }
:root[data-theme="dark"] .note-prevnext-link { background: rgba(148,163,184,0.08); }
:root[data-theme="dark"] .note-prevnext-link:hover { background: rgba(148,163,184,0.14); }