
  :root{
    --ink:#1a1a2e;
    --ink-2:#2d2d44;
    --paper:#faf9f6;
    --paper-2:#f3f0e9;
    --accent:#c8503e;
    --accent-2:#e07a5f;
    --gold:#d4a373;
    --teal:#2a6f6f;
    --teal-2:#3d8a8a;
    --gray:#6b6b7b;
    --gray-light:#a8a8b8;
    --line:rgba(26,26,46,.08);
    --card:#ffffff;
    --shadow:0 2px 12px rgba(26,26,46,.06);
    --shadow-lg:0 8px 32px rgba(26,26,46,.10);
    --radius:14px;
    /* 008-compatible aliases */
    --bg:#f5f1e8;
    --bg-soft:#ede7d8;
    --panel:#ffffff;
    --panel-2:#f9f6ef;
    --ink-dim:#6b6b7b;
    --ink-faint:#a8a8b8;
    --accent-3:#2a6f6f;
    --accent-dark:#a44132;
    --line-strong:rgba(0,0,0,.14);
    --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif;
    --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(214,57,96,.05), transparent 60%),
      radial-gradient(1000px 500px at -10% 30%, rgba(13,148,136,.04), transparent 60%),
      var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.85;
    font-size:17px;
    -webkit-font-smoothing:antialiased;
    padding:0 0 80px;
  }
  .wrap{
    max-width:860px;margin:24px auto 40px;padding:28px 36px 44px;
    background:var(--panel);
    border-radius:16px;
    box-shadow:0 2px 20px rgba(0,0,0,0.05);
    border:1px solid var(--line);
  }

  /* Hero */
  .hero{padding:54px 0 38px;border-bottom:1px solid var(--line)}
  .hero .kicker{
    display:inline-block;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--accent-3);border:1px solid rgba(42,111,111,.3);padding:5px 12px;border-radius:999px;margin-bottom:22px;
  }
  .hero h1{
    font-family:var(--serif);font-weight:800;font-size:clamp(30px,5.5vw,48px);
    line-height:1.18;letter-spacing:-.01em;
  }
  .hero h1 .em{color:var(--accent)}
  .hero .sub{
    margin-top:16px;color:var(--ink-dim);font-size:17px;font-family:var(--serif);
  }
  .meta{
    display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;
    font-size:13.5px;color:var(--ink-faint);
  }
  .meta b{color:var(--ink-dim);font-weight:600}
  .meta .tag{
    background:var(--panel);border:1px solid var(--line-strong);
    padding:4px 12px;border-radius:999px;color:var(--ink-dim);
  }
  .meta-tags{
    display:flex;flex-wrap:wrap;gap:8px;
    flex-basis:100%;margin-top:6px;
  }

  /* Sections */
  section{padding:42px 0;border-bottom:1px solid var(--line)}
  section:last-of-type{border-bottom:none}
  .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
  .sec-no{
    font-family:var(--serif);font-size:14px;font-weight:700;color:var(--accent);
    border:1px solid var(--accent);width:30px;height:30px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .sec-title{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:-.01em}

  p{margin:0 0 18px}
  p.lead{font-size:19px;color:var(--ink);font-family:var(--serif)}
  strong{color:var(--ink);font-weight:650}
  em.term{color:var(--accent-3);font-style:normal;font-weight:600;border-bottom:1px dashed rgba(42,111,111,.35)}
  a{color:var(--accent-3);text-decoration:none;border-bottom:1px solid rgba(42,111,111,.25)}
  a:hover{color:var(--accent);border-color:var(--accent)}

  /* Quote */
  .quote{
    margin:40px 0;padding:22px 26px;border-left:3px solid var(--accent);
    background:linear-gradient(90deg, rgba(200,80,62,.06), transparent 70%);
    border-radius:0 10px 10px 0;font-family:var(--serif);font-size:18px;color:var(--ink);
  }
  .quote .src{display:block;margin-top:10px;font-size:13px;color:var(--ink-faint);font-family:var(--sans)}
  .quote.compact{font-size:16.5px;padding:16px 22px}

  /* Footer */
  footer{padding:30px 0 0;text-align:center;color:var(--ink-faint);font-size:12.5px}
  footer .line{width:40px;height:2px;background:var(--accent);margin:0 auto 14px;border-radius:2px}

  /* Responsive */
  @media(max-width:620px){body{font-size:16px}.wrap{padding:20px 18px 28px;margin:16px auto 28px}}

  /* ===== Unique Components ===== */

  /* 推荐原因卡片 */
  .reason-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;margin-top:40px;
  }
  .reason-card{
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:28px 24px;
    box-shadow:var(--shadow);
    transition:transform .3s ease,box-shadow .3s ease;
  }
  .reason-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .reason-num{
    font-size:28px;font-weight:900;color:var(--accent);
    line-height:1;margin-bottom:16px;
  }
  .reason-card h3{font-size:17px;font-weight:700;margin-bottom:10px;color:var(--ink)}
  .reason-card p{font-size:14px;color:var(--gray);line-height:1.7;margin:0}

  /* 双系统对比 */
  .dual-system{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow-lg);margin:40px 0;
  }
  @media(max-width:640px){.dual-system{grid-template-columns:1fr}}
  .system-block{padding:36px 32px;position:relative}
  .system-1{
    background:linear-gradient(135deg,#fff5f0,#ffe8e0);
    border-right:1px solid var(--line);
  }
  .system-2{
    background:linear-gradient(135deg,#f0f7f7,#e0f0f0);
  }
  .system-badge{
    display:inline-block;padding:4px 14px;border-radius:999px;
    font-size:12px;font-weight:700;letter-spacing:.05em;margin-bottom:16px;
  }
  .system-1 .system-badge{background:var(--accent);color:#fff}
  .system-2 .system-badge{background:var(--teal);color:#fff}
  .system-block h3{font-size:22px;font-weight:800;margin-bottom:14px}
  .system-block .desc{font-size:14px;color:var(--gray);margin-bottom:20px;line-height:1.7}
  .system-traits{list-style:none;padding:0}
  .system-traits li{
    font-size:13px;color:var(--ink-2);padding:6px 0;
    padding-left:22px;position:relative;line-height:1.6;
  }
  .system-traits li::before{
    content:'';position:absolute;left:0;top:12px;
    width:8px;height:2px;border-radius:1px;
  }
  .system-1 .system-traits li::before{background:var(--accent)}
  .system-2 .system-traits li::before{background:var(--teal)}

  /* 认知偏差画廊 */
  .bias-gallery{margin-top:40px}
  .bias-item{
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;
    margin-bottom:20px;box-shadow:var(--shadow);
    transition:box-shadow .3s ease;
  }
  .bias-item:hover{box-shadow:var(--shadow-lg)}
  .bias-header{
    padding:20px 28px 16px;
    display:flex;align-items:flex-start;gap:16px;
    border-bottom:1px solid var(--line);
  }
  .bias-icon{
    width:44px;height:44px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;flex-shrink:0;
  }
  .bias-icon.red{background:#fff0ee;color:var(--accent)}
  .bias-icon.blue{background:#eef6f6;color:var(--teal)}
  .bias-icon.gold{background:#fdf6ed;color:var(--gold)}
  .bias-title h4{font-size:17px;font-weight:700;margin-bottom:4px}
  .bias-title .en{font-size:12px;color:var(--gray-light);letter-spacing:.02em}
  .bias-body{padding:20px 28px}
  .bias-body p{font-size:14px;color:var(--gray);line-height:1.8;margin:0 0 14px}
  .bias-body .example{
    margin-top:14px;padding:14px 18px;
    background:var(--paper-2);border-radius:10px;
    font-size:13px;color:var(--ink-2);line-height:1.7;
    border-left:3px solid var(--accent-2);
  }
  .bias-body .example strong{color:var(--ink)}

  /* 旁征博引区 */
  .cross-ref{
    background:var(--ink);color:var(--paper);
    border-radius:var(--radius);padding:40px 36px;margin:40px 0;
  }
  .cross-ref h3{
    font-size:18px;font-weight:700;margin-bottom:24px;
    color:var(--paper);
  }
  .cross-ref-item{
    display:flex;gap:16px;padding:20px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .cross-ref-item:last-child{border-bottom:none}
  .cross-ref-book{
    flex-shrink:0;width:100px;
    font-size:13px;font-weight:600;color:var(--gold);
    line-height:1.5;
  }
  .cross-ref-text{
    font-size:14px;color:rgba(250,249,246,.75);line-height:1.8;
  }
  .cross-ref-text strong{color:var(--paper)}

  /* 批判性分析区 */
  .critique-list{margin-top:40px}
  .critique-card{
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:28px 30px;
    margin-bottom:20px;box-shadow:var(--shadow);
    border-left:4px solid var(--accent);
  }
  .critique-card .tag{
    display:inline-block;font-size:11px;font-weight:700;
    padding:3px 12px;border-radius:999px;
    background:#fff0ee;color:var(--accent);
    margin-bottom:12px;letter-spacing:.05em;
  }
  .critique-card .tag.green{background:#eef6f6;color:var(--teal)}
  .critique-card h4{font-size:17px;font-weight:700;margin-bottom:12px;color:var(--ink)}
  .critique-card p{font-size:14px;color:var(--gray);line-height:1.8;margin-bottom:10px}
  .critique-card .verdict{
    margin-top:14px;padding:12px 16px;
    background:var(--paper-2);border-radius:8px;
    font-size:13px;color:var(--ink-2);line-height:1.7;
  }
  .critique-card .verdict strong{color:var(--accent)}

  /* 总评区 */
  .verdict-box{
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:36px 32px;
    box-shadow:var(--shadow-lg);
  }
  .verdict-score{
    display:flex;align-items:center;gap:8px;margin-bottom:20px;
  }
  .score-bar{
    display:flex;gap:4px;
  }
  .score-dot{
    width:14px;height:14px;border-radius:50%;
    background:var(--line);
  }
  .score-dot.active{background:var(--accent)}
  .score-label{font-size:13px;color:var(--gray);margin-left:8px}
  .verdict-box h3{font-size:20px;font-weight:800;margin-bottom:16px}
  .verdict-box p{font-size:15px;color:var(--gray);line-height:1.8;margin-bottom:14px}

  /* 读者指南 */
  .reading-guide{background:var(--ink);color:var(--paper);padding:36px;border-radius:16px;margin:40px 0;}
  .reading-guide .sec-title{color:var(--paper)}
  .reading-guide .sec-no{color:var(--gold);border-color:var(--gold)}
  .guide-tips{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:16px;margin-top:32px;
  }
  .guide-tip{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;padding:24px 20px;
    transition:background .3s ease;
  }
  .guide-tip:hover{background:rgba(255,255,255,.08)}
  .guide-tip .step{
    font-size:24px;font-weight:900;color:var(--gold);
    margin-bottom:10px;
  }
  .guide-tip h4{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--paper)}
  .guide-tip p{font-size:13px;color:rgba(250,249,246,.6);line-height:1.6;margin:0}

  /* Component responsive */
  @media(max-width:640px){
    .reason-card,.critique-card{padding:20px 18px}
    .system-block{padding:28px 20px}
    .cross-ref{padding:28px 20px}
    .cross-ref-item{flex-direction:column;gap:8px}
    .cross-ref-book{width:auto}
    .bias-header{padding:16px 20px 12px;flex-direction:column;gap:10px}
    .bias-body{padding:16px 20px}
    .bias-body .example{padding:12px 14px}
  }


  /* ===== Template Components: .vs / .crit / .takeaway ===== */
  .vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:40px 0}
  .vs .card{background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;padding:20px 20px 18px}
  .vs .card h4{font-size:15px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
  .vs .card .who{font-size:12.5px;color:var(--ink-faint);letter-spacing:.05em}
  .vs .card p{font-size:14.5px;margin:0;color:var(--ink-dim);line-height:1.7}
  .badge{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600}
  .crit{margin:32px 0;padding:22px 24px;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px}
  .crit .ch{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .crit .ch .n{font-size:12px;font-weight:700;color:#0a0810;background:var(--accent-2);padding:2px 9px;border-radius:999px}
  .crit h4{font-size:16px;font-weight:700;font-family:var(--sans)}
  .crit p{font-size:15px;margin:0;color:var(--ink-dim)}
  .crit .verdict{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-strong);font-size:13.5px;color:var(--ink-faint)}
  .crit .verdict b{color:var(--accent-3)}
  .takeaway{margin-top:40px;padding:26px 28px;border-radius:16px;background:linear-gradient(135deg, rgba(200,80,62,.06), rgba(224,122,95,.04));border:1px solid var(--line-strong)}
  .takeaway .lab{font-size:12px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
  .takeaway p{margin:0;font-family:var(--serif);font-size:18px;line-height:1.7}
  @media(max-width:620px){.vs{grid-template-columns:1fr}}

/* ===== 书籍信息卡片 ===== */
.book-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  margin: 40px auto;
  max-width: 680px;
  padding: 28px 32px;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  border: 1px solid var(--line);
}
.book-info .book-cover {
  width: 140px;
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
}
.book-cover img {
  width: 100%;
  display: block;
  box-shadow: 0 2px 10px rgba(45, 37, 23, 0.14);
  border: 1px solid rgba(45, 37, 23, 0.06);
  border-radius: 4px;
}
.book-info .details h3 {
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 20px;
  margin-bottom: 6px;
  color: var(--ink);
}
.book-info .details .author {
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 600;
}
.book-info .details .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.book-info .details .tag {
  font-size: 12px;
  padding: 3px 12px;
  background: var(--panel-2);
  color: var(--ink-dim);
  border-radius: 999px;
  border: 1px solid var(--line);
}
.book-info .details .stats {
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.7;
}
.book-info .details .stats strong {
  color: var(--accent);
}
@media (max-width: 600px) {
  .book-info {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 20px;
  }
  .book-info .book-cover {
    margin: 0 auto;
  }
}

/* ===== Buy Button & Ad Slot ===== */
.buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--accent, #B8860B);
  border: 1px solid var(--accent, #B8860B);
  border-radius: 16px;
  cursor: pointer;
  transition: all .3s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
}
.buy-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: #fff;
}
.buy-btn:active { transform: translateY(0); }
.buy-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.buy-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.book-info .details .buy-btn-group { margin-top: 14px; }
/* ===== Site Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(45,37,23,0.08);
}
.site-header-inner {
  max-width: 860px; margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; justify-content: space-between;
}
.site-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink) !important;
  text-decoration: none; border-bottom: none;
}
.logo-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700;
  font-family: var(--serif);
  flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-text > span:first-child { font-size: 1.12rem; font-weight: 700; color: #2D2517; }
.logo-sub { font-size: 0.7rem; color: var(--ink-faint); font-family: var(--sans); letter-spacing: 0.5px; }
.site-nav { display: flex; gap: 28px; }
.site-nav a {
  font-family: var(--sans);
  font-size: 0.88rem; color: var(--ink-dim);
  position: relative; text-decoration: none; border-bottom: none;
}
.site-nav a::after {
  content: ""; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--accent);
  transition: width 0.3s ease;
}
.site-nav a:hover { color: var(--accent-dark); }
.site-nav a:hover::after { width: 100%; }
@media (max-width: 600px) {
  .site-header-inner { padding: 0 16px; height: 54px; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 0.8rem; }
}
.sec-h3{font-family:var(--serif);font-size:19px;margin:32px 0 12px;color:var(--accent-3)}
/* ===== 页脚导航（原内联样式收敛） ===== */
.book-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.book-nav a{font-size:14px;color:var(--ink-dim);text-decoration:none;border-bottom:none}
.book-nav a:hover{color:var(--accent);border-bottom:none}

/* ===== 流动主题 flow-theme（通用块）=====
   用法：注入到页面原始 <style> 块末尾。
   依赖：页面有 .hero、section[id^="sec-"]。无需额外 CSS 变量。 */

/* Hero 流动波浪 */
.hero { position: relative; }
.hero-wave {
  margin-top: 28px; overflow: hidden; line-height: 0;
  position: relative; height: 34px;
}
.hero-wave .wave {
  position: absolute; left: 0; right: 0; height: 34px;
  background-repeat: repeat-x;
  background-size: 240px 34px;
}
.hero-wave .wave-a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34' viewBox='0 0 240 34'%3E%3Cpath d='M0 20 Q 30 6 60 20 T 120 20 T 180 20 T 240 20' fill='none' stroke='%23c8503e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: wave-drift 11s linear infinite;
}
.hero-wave .wave-b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34' viewBox='0 0 240 34'%3E%3Cpath d='M0 20 Q 60 30 120 20 T 240 20' fill='none' stroke='%23c8503e' stroke-width='1.2' stroke-dasharray='6 7' opacity='0.5'/%3E%3C/svg%3E");
  animation: wave-drift 17s linear infinite reverse;
  transform: translateY(4px);
}
@keyframes wave-drift { from { background-position: 0 0; } to { background-position: 240px 0; } }

/* 章节波形分隔（替换直线 border） */
section[id^="sec-"] { border-bottom: none; padding-bottom: 56px; position: relative; }
section[id^="sec-"]::after {
  content: ""; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: 86%; height: 14px; opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='14' viewBox='0 0 140 14'%3E%3Cpath d='M0 7 Q 17.5 0 35 7 T 70 7 T 105 7 T 140 7' fill='none' stroke='%23c8503e' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 140px 14px;
  pointer-events: none;
}
section[id^="sec-"]:last-of-type { border-bottom: none; padding-bottom: 42px; }
section[id^="sec-"]:last-of-type::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-wave .wave { animation: none; }
}
@media (max-width: 600px) {
  .hero-wave { height: 24px; margin-top: 22px; }
  .hero-wave .wave { height: 24px; background-size: 180px 24px; }
  section[id^="sec-"] { padding-bottom: 44px; }
  section[id^="sec-"]::after { bottom: 8px; width: 92%; }
}

/* ===== 可选块：心流通道图升级（仅当页面含 .flow-chart 时注入）===== */
/* .flow-chart { background: linear-gradient(180deg, #fdfcf8, #f6f2e8); }
.flow-cell.flow-zone {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #e8f4ec, #cde6d4);
}
.flow-cell.flow-zone::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14' viewBox='0 0 90 14'%3E%3Cpath d='M0 7 Q 11 1 22 7 T 44 7 T 66 7 T 88 7' fill='none' stroke='%232F8F5B' stroke-width='1.5' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 90px 14px;
  animation: wave-zone 7s linear infinite;
  pointer-events: none;
}
@keyframes wave-zone { from { background-position: 0 0; } to { background-position: 90px 0; } }
@media (prefers-reduced-motion: reduce) {
  .flow-cell.flow-zone::after { animation: none; }
} */

