/* ============================================================
   晚风恋语 · 全站样式
   配色：玫瑰色系，主色 #C2415A（2026-10-15 江哥定稿，
         由手册 9.2 的 #DCA1A1 调深而来，色相 348° 全系联动重算）
   ------------------------------------------------------------ */

:root{
  /* 品牌色板 */
  --rose:        #C2415A;   /* 主色：玫瑰红（导航、主按钮、重点标题） */
  --rose-mist:   #D897A4;   /* 辅助：薄雾玫瑰（卡片描边、hover） */
  --cream:       #FFF8F0;   /* 辅助：奶油米白 */
  --warm-gray:   #EAE3E5;   /* 辅助：暖浅灰 */
  --rose-deep:   #A63248;   /* 强调：深玫瑰（链接、高亮、行动按钮） */
  --rose-soft:   #F8E7EA;   /* 派生：极浅玫瑰底 */

  /* 文字 */
  --ink:         #3A3235;   /* 深炭灰 · 正文 */
  --ink-2:       #6E6064;   /* 次级 */
  --ink-3:       #1A1719;   /* 辅助说明 · 黑（2026-10-16 江哥指定：原浅玫瑰灰 #A29296 全部改黑） */

  /* 界面 */
  --bg:          #FFFCFA;
  --bg-alt:      #FFF8F0;
  --card:        #FFFFFF;
  --line:        #F2E7E9;
  --line-2:      #E6D6DA;

  /* 圆角 / 阴影 */
  --r:           12px;
  --r-lg:        20px;
  --r-full:      999px;
  --sh:          0 1px 2px rgba(166,50,72,.05), 0 10px 26px -14px rgba(166,50,72,.22);
  --sh-hover:    0 2px 6px rgba(166,50,72,.08), 0 20px 44px -20px rgba(166,50,72,.34);

  /* 排版 */
  --serif: "Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,"SimSun",serif;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  --maxw: 1180px;
  --nav-h: 66px;
}

/* 夜间阅读模式（手册 14 章：支持夜间阅读） */
[data-theme="night"]{
  --bg:        #1D1819;
  --bg-alt:    #241C1E;
  --card:      #282022;
  --line:      #382B2E;
  --line-2:    #48383C;
  --ink:       #EFE5E7;
  --ink-2:     #BCA9AD;
  --ink-3:     #8F7F83;
  --rose:      #CA7384;
  --rose-mist: #B05C6E;
  --rose-deep: #E293A2;
  --rose-soft: #2C2125;
  --warm-gray: #302527;
  --cream:     #261D1F;
  --sh:        0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6);
  --sh-hover:  0 2px 6px rgba(0,0,0,.35), 0 20px 44px -20px rgba(0,0,0,.7);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.8;
  color:var(--ink);
  background:var(--bg);
  transition:background .3s ease, color .3s ease;
}

img{ max-width:100%; display:block; }
a{ color:var(--rose-deep); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--rose); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.4; margin:0; color:var(--ink); }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:820px; }

/* ---------- 通用小件 ---------- */
.tag{
  display:inline-block; font-size:12px; line-height:1.6; padding:2px 10px;
  border-radius:var(--r-full); background:var(--rose-soft); color:var(--rose-deep);
  border:1px solid transparent; white-space:nowrap;
}
.tag-ghost{ background:transparent; border-color:var(--line-2); color:var(--ink-3); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:42px; padding:0 22px; border-radius:var(--r-full);
  font-size:15px; font-family:var(--sans); cursor:pointer;
  border:1px solid var(--rose); background:var(--rose); color:#fff;
  transition:all .22s ease;
}
.btn:hover{ background:var(--rose-deep); border-color:var(--rose-deep); color:#fff; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--rose-deep); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--rose-soft); color:var(--rose-deep); border-color:var(--rose); }
.btn-sm{ min-height:34px; padding:0 16px; font-size:13.5px; }
.btn-block{ width:100%; }

.meta{ font-size:13px; color:var(--ink-3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--line-2); }
.muted{ color:var(--ink-3); }
.center{ text-align:center; }

/* ============================================================
   顶栏
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:90;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; gap:20px; height:var(--nav-h); }

.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand svg{ width:30px; height:30px; flex:0 0 auto; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); letter-spacing:.06em; }
.brand-sub{ font-size:10.5px; color:var(--ink-3); letter-spacing:.14em; }

.nav{ display:flex; align-items:center; gap:2px; margin-left:8px; flex:1 1 auto; }
.nav a{
  position:relative; padding:8px 11px; border-radius:var(--r); font-size:14.5px; color:var(--ink-2);
  white-space:nowrap;
}
.nav a:hover{ background:var(--rose-soft); color:var(--rose-deep); }
.nav a.active{ color:var(--rose-deep); font-weight:600; }
.nav a.active::after{
  content:""; position:absolute; left:11px; right:11px; bottom:1px; height:2px;
  border-radius:2px; background:var(--rose);
}

.nav-more{ position:relative; }
.nav-more > button{
  padding:8px 11px; border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:14.5px; color:var(--ink-2); border-radius:var(--r); display:flex; align-items:center; gap:5px;
}
.nav-more > button:hover,
.nav-more > button.active{ background:var(--rose-soft); color:var(--rose-deep); }
.nav-more-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:230px; padding:8px;
  max-height:min(72vh, 540px); overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-hover);
  display:none; flex-direction:column; gap:2px; z-index:60;
}
.nav-more:hover .nav-more-menu,
.nav-more:focus-within .nav-more-menu{ display:flex; }
.nav-more-menu a{ display:block; padding:3px 12px; border-radius:var(--r); font-size:14px; color:var(--ink-2); }
.nav-more-menu a:hover{ background:var(--rose-soft); color:var(--rose-deep); }
.nav-more-menu a.active{ color:var(--rose-deep); font-weight:600; }
.nav-more-menu .nav-more-cap{
  margin:4px 6px 1px; font-size:14px; font-weight:600; letter-spacing:normal;
  color:var(--ink-3);
}
.nav-more-menu .nav-more-all{
  margin-top:3px; padding-top:6px; border-top:1px solid var(--line);
  color:var(--rose-deep) !important; font-weight:600;
}

.header-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.icon-btn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:transparent; border-radius:var(--r-full);
  cursor:pointer; color:var(--ink-2);
}
.icon-btn:hover{ background:var(--rose-soft); color:var(--rose-deep); }

.nav-toggle{ display:none; }

/* 移动端抽屉 */
/* 移动端抽屉（默认移出视口，避免产生横向滚动） */
.drawer{
  position:fixed; inset:0; z-index:120; background:var(--bg);
  transform:translateX(100%); visibility:hidden;
  transition:transform .28s ease, visibility .28s;
  display:flex; flex-direction:column; overscroll-behavior:contain;
}
.drawer.open{ transform:translateX(0); visibility:visible; }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--line);
}
.drawer-body{ padding:14px 14px 40px; overflow-y:auto; }
.drawer-body a{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 12px; border-radius:var(--r); font-size:16px; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.drawer-body a:hover{ background:var(--rose-soft); }
.drawer-body a.btn,
.drawer-body a.btn:hover{
  border-bottom:0; color:#fff; background:var(--rose); justify-content:center;
}
.drawer-body a.btn:hover{ background:var(--rose-deep); }

/* ============================================================
   首页 · 数据概览（手册 9.3 顶部）
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1000px 420px at 12% -10%, var(--rose-soft) 0%, transparent 62%),
    radial-gradient(760px 360px at 92% 6%, color-mix(in srgb, var(--rose-mist) 22%, transparent) 0%, transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
  padding:36px 0 20px;
}
/* 「双心连线」底纹（江哥 2026-10-16 指定）：首页 Hero 与内页页头右侧，透明度 9% */
.hero::after, .page-head::after{
  content:""; position:absolute; right:2.5%; top:50%; transform:translateY(-50%);
  width:min(46%, 600px); aspect-ratio:720/267;
  background:url("../img/flourish.png") right center / contain no-repeat;
  opacity:.09; pointer-events:none;
}
[data-theme="night"] .hero::after, [data-theme="night"] .page-head::after{ opacity:.12; }
.hero-inner{ max-width:760px; }
.hero h1{
  font-size:clamp(24px, 3.2vw, 34px); letter-spacing:.02em; margin-bottom:12px;
}
.hero h1 .em{ color:var(--rose-deep); }
.hero-lead{ font-size:16.5px; color:var(--ink-2); margin:0 0 18px; max-width:730px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.stat{ background:var(--card); padding:14px 18px; display:flex; align-items:baseline; gap:9px; min-width:0; }
.stat b{ font-family:var(--serif); font-size:26px; line-height:1.25; color:var(--rose-deep); flex:0 0 auto; }
.stat span{ font-size:13px; color:var(--ink-3); white-space:nowrap; }

/* ---------- 知识库式文章列表（目录页 / 栏目页） ---------- */
.cat-h2{
  font-size:21px; display:flex; align-items:center; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--line); margin:0 0 4px;
}
.cat-h2::before{ content:""; width:4px; height:1em; border-radius:2px; background:var(--rose); flex:0 0 auto; }

.catalog-group{ margin-bottom:40px; }
.catalog-group:last-child{ margin-bottom:0; }
.catalog-group > h3:not(.blk){
  font-size:18.5px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--line); margin:0 0 2px;
}
.catalog-group > h3:not(.blk) a{ color:var(--ink); }
.catalog-group > h3:not(.blk) a:hover{ color:var(--rose-deep); }
.catalog-group .bx{
  font-family:var(--sans); font-size:11px; font-weight:400; letter-spacing:.08em;
  color:#fff; background:var(--rose); padding:2px 9px; border-radius:var(--r-full); flex:0 0 auto;
}
.catalog-group .bx-t{ background:var(--rose-deep); }
.catalog-group .blk-bx{
  font-family:var(--sans); font-size:10.5px; font-weight:400; letter-spacing:.06em;
  color:var(--rose-deep); background:var(--rose-soft); padding:1px 8px;
  border-radius:var(--r-full); flex:0 0 auto;
}
.catalog-group .cnt{ margin-left:auto; font-family:var(--sans); font-size:12.5px; font-weight:400; color:var(--ink-3); }
.catalog-group > h3.blk,
.catalog-group h4.blk{
  font-size:15.5px; font-family:var(--sans); font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; border:0; padding:0;
  margin:30px 0 4px;
}
.catalog-group > h3.blk .cnt,
.catalog-group h4.blk .cnt{ margin-left:auto; font-size:12px; font-weight:400; color:var(--ink-3); }

.art-list{ list-style:none; margin:0; padding:0; }
.art-list li{
  display:flex; align-items:baseline; gap:14px; padding:8px 2px;
  border-bottom:1px dashed var(--line-2); min-width:0;
}
.art-list li:last-child{ border-bottom:0; }
.art-list li .no{
  flex:0 0 30px; text-align:right; font-family:var(--serif); font-size:13.5px;
  color:var(--rose-mist); padding-top:1px;
}
.art-list li .t{ flex:1 1 auto; min-width:0; font-size:15px; line-height:1.6; }
.art-list li .t a{ color:var(--ink); }
.art-list li .t a:hover{ color:var(--rose-deep); }
.art-list li .rt{ flex:0 0 auto; font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.art-list li .dsc{ display:block; font-size:13px; color:var(--ink-2); line-height:1.7; margin-top:4px; }
.art-list li a.rt{ color:var(--rose-deep); font-weight:600; }
.art-list li a.rt:hover{ color:var(--rose); }
.grp-lead{ font-size:13.5px; color:var(--ink-2); line-height:1.7; margin:10px 0 2px; }
.art-list li .st{
  flex:0 0 auto; font-size:11.5px; color:var(--ink-3); white-space:nowrap;
  border:1px solid var(--line-2); padding:1px 9px; border-radius:var(--r-full);
}
.art-list li:hover{ background:var(--rose-soft); border-radius:8px; }

/* 首页「已上线」大列表：多一列来源栏目 */
.art-list-lg li{ padding:15px 4px; }
.art-list-lg li .t{ font-size:13.5px; line-height:1.1; }
.art-list li .t .src{
  display:inline-block; margin-left:10px; font-size:11.5px; color:var(--ink-3);
  border:1px solid var(--line-2); padding:1px 8px; border-radius:var(--r-full);
  vertical-align:1px; white-space:nowrap;
}

/* 页内锚点跳转预留：目标块滚到导航条下方，不被遮挡（2026-10-16 江哥反馈） */
.catalog-group, .blk{ scroll-margin-top:calc(var(--nav-h) + 20px); }

/* ---------- 抽屉里的三级目录树 ---------- */
.drawer .dgrp{ margin:6px 12px 0; }
.drawer .dgrp > summary,
.drawer .dsub > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.08em; color:var(--ink-3);
}
.drawer .dgrp > summary::-webkit-details-marker,
.drawer .dsub > summary::-webkit-details-marker{ display:none; }
.drawer .dgrp > summary::before,
.drawer .dsub > summary::before{
  content:""; width:6px; height:6px; flex:0 0 auto;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform .18s ease; margin-left:2px;
}
.drawer .dgrp[open] > summary::before,
.drawer .dsub[open] > summary::before{ transform:rotate(45deg); }
.drawer .dt-wrap{ margin:2px 0 4px 4px; border-left:1px solid var(--line-2); }
.drawer .dgrp > summary{ padding:9px 0; }
.drawer .dsub > summary{
  padding:8px 0 8px 10px; font-size:13.5px; letter-spacing:0; color:var(--ink-2);
}
.drawer .dsub > summary .dt-link{ flex:1 1 auto; min-width:0; color:var(--ink); font-size:14px; }
.drawer .dsub > summary .dt-link:hover{ color:var(--rose-deep); }
.drawer .dsub2 > summary{ font-size:12.5px; color:var(--ink-2); }
.drawer summary .n{
  flex:0 0 auto; font-family:var(--sans); font-size:11px; color:var(--ink-3);
  background:var(--rose-soft); padding:0 7px; border-radius:var(--r-full); line-height:19px;
}
.drawer .dt-list{ list-style:none; margin:0 0 4px; padding:0 0 4px 20px; }
.drawer .dt-list li{ padding:0; }
.drawer .dt-list li a,
.drawer .dt-list li > .muted{
  display:block; font-size:13.5px; line-height:1.65; color:var(--ink-2);
  padding:6px 8px; border-radius:8px; border-bottom:0;
}
.drawer .dt-list li a:hover{ background:var(--rose-soft); color:var(--rose-deep); }
.drawer .dt-list li > .muted{ color:var(--ink-3); }

/* 抽屉里的小分组标题与小号项 */
.drawer-cap{
  margin:20px 12px 6px; font-size:11.5px; letter-spacing:.1em; color:var(--ink-3);
  text-transform:none;
}
.drawer-body a.sm{ font-size:14.5px; color:var(--ink-2); padding:11px 12px; }

/* ============================================================
   区块
   ============================================================ */
.section{ padding:28px 0; }
.section-alt{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:26px; flex-wrap:wrap;
}
.section-head h2{ font-size:23px; letter-spacing:.02em; }
.section-head p{ margin:6px 0 0; font-size:14px; color:var(--ink-3); }
.section-head .more{ font-size:14px; color:var(--rose-deep); white-space:nowrap; }

/* 栅格 */
.grid{ display:grid; gap:20px; }
.grid > *{ min-width:0; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- 知识总目录（手册 9.3 核心模块1） ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cat-card{
  display:flex; flex-direction:column; gap:12px; min-width:0;
  padding:22px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh); transition:all .24s ease;
}
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-hover); border-color:var(--rose-mist); }
.cat-top{ display:flex; align-items:center; gap:10px; color:inherit; }
.cat-top:hover h3{ color:var(--rose-deep); }
.cat-ico{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--rose-soft); color:var(--rose-deep);
}
.cat-card h3{ font-size:17px; }
.cat-card .cat-desc{ font-size:13.5px; color:var(--ink-2); margin:0; }
.cat-list{ list-style:none; margin:auto 0 0; padding:12px 0 0; border-top:1px dashed var(--line-2); display:flex; flex-direction:column; gap:8px; }
.cat-list li{ font-size:13.5px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; }
.cat-list li a{ color:var(--ink-2); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-list li a:hover{ color:var(--rose-deep); }
.cat-list li em{ font-style:normal; font-size:12px; color:var(--ink-3); flex:0 0 auto; }
.cat-badge{ font-size:11px; color:var(--rose-deep); background:var(--rose-soft); padding:1px 8px; border-radius:var(--r-full); }

/* ---------- 文章卡片（手册 9.3：标题 + 所属栏目 + 预估阅读时长） ---------- */
.card{
  display:flex; flex-direction:column; gap:10px;
  padding:22px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh); transition:all .24s ease; height:100%;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-hover); border-color:var(--rose-mist); }
.card h3{ font-size:17px; line-height:1.55; }
.card h3 a{ color:var(--ink); }
.card h3 a:hover{ color:var(--rose-deep); }
.card .excerpt{ font-size:14px; color:var(--ink-2); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* 列表式条目 */
.item{
  display:flex; gap:18px; align-items:flex-start; padding:22px 0;
  border-bottom:1px solid var(--line);
}
.item:last-child{ border-bottom:0; }
.item-main{ flex:1 1 auto; min-width:0; }
.item h3{ font-size:18px; margin-bottom:8px; }
.item h3 a{ color:var(--ink); } .item h3 a:hover{ color:var(--rose-deep); }
.item p{ margin:0 0 10px; font-size:14px; color:var(--ink-2); }
.item-idx{
  flex:0 0 auto; width:38px; font-family:var(--serif); font-size:20px;
  color:var(--rose-mist); text-align:center; line-height:1.6;
}

/* ---------- 前沿资讯（手册 9.3 核心模块3 / 5.6.1） ---------- */
.news-item{
  display:flex; gap:16px; padding:18px 0; border-bottom:1px dashed var(--line-2);
  align-items:flex-start;
}
.news-item:last-child{ border-bottom:0; }
.news-item time{ flex:0 0 92px; font-size:12.5px; color:var(--ink-3); padding-top:2px; }
.news-body h4{ font-size:15.5px; margin-bottom:5px; }
.news-body p{ margin:0; font-size:13.5px; color:var(--ink-2); }
.news-src{ font-size:12px; color:var(--ink-3); margin-top:6px; }

/* ---------- 工具卡（手册 9.3 核心模块4） ---------- */
.tool-card{
  display:flex; flex-direction:column; gap:12px; padding:24px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(160deg, var(--cream) 0%, var(--card) 58%);
  box-shadow:var(--sh); transition:all .24s ease;
}
.tool-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-hover); border-color:var(--rose-mist); }
.tool-ico{ width:44px; height:44px; border-radius:13px; background:var(--rose-soft); display:flex; align-items:center; justify-content:center; color:var(--rose-deep); }
.tool-card h3{ font-size:17px; }
.tool-card p{ font-size:13.5px; color:var(--ink-2); margin:0; flex:1 1 auto; }

/* ============================================================
   内页
   ============================================================ */
.page-head{
  position:relative; overflow:hidden;
  padding:38px 0 30px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--rose-soft) 0%, transparent 100%);
}
.crumb{ font-size:13px; color:var(--ink-3); margin-bottom:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crumb a{ color:var(--ink-3); } .crumb a:hover{ color:var(--rose-deep); }
.page-head h1{ font-size:clamp(19px,2.9vw,28px); margin-bottom:10px; }
.page-head .lead{ font-size:15px; color:var(--ink-2); margin:0; max-width:720px; }

/* 页头内嵌版（2026-10-16 江哥指定）：目录提到最上面，标题排放进右列与正文对齐 */
.page-intro{
  position:relative; overflow:hidden;
  padding:20px 22px 22px; margin-bottom:30px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--rose-soft) 0%, transparent 100%);
}
.page-intro h1{ font-size:clamp(19px,2.9vw,28px); margin-bottom:10px; }
.page-intro .lead{ font-size:15px; color:var(--ink-2); margin:0; max-width:720px; }
.page-intro::after{
  content:""; position:absolute; right:2.5%; top:50%; transform:translateY(-50%);
  width:min(46%, 380px); aspect-ratio:720/267;
  background:url("../img/flourish.png") right center / contain no-repeat;
  opacity:.09; pointer-events:none;
}
[data-theme="night"] .page-intro::after{ opacity:.12; }
.article-intro h1{ font-size:clamp(19px,2.9vw,28px); }
.article-intro .meta{ margin-top:12px; }

.page-body{ padding:40px 0 64px; }

/* 两栏：侧边目录 + 正文 */
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 258px; gap:44px; align-items:start; }
@media (min-width:1081px){
  /* 类目栏放左边（2026-10-16 江哥指定）；≤1080px 单列时保持正文在前、类目栏在后 */
  .layout{ grid-template-columns:258px minmax(0,1fr); }
  .layout > .side{ order:-1; }
}
.side{ position:sticky; top:calc(var(--nav-h) + 22px); display:flex; flex-direction:column; gap:20px;
  max-height:calc(100vh - var(--nav-h) - 44px); overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.side::-webkit-scrollbar{ width:6px; }
.side::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
.side-in{ display:flex; flex-direction:column; gap:20px; min-width:0; }

/* 首页左栏目录往下延伸（2026-10-16 江哥指定）：
   目录面板拉满整列高度、与右栏长列表齐平；面板内目录固定跟随滚动，随时可用 */
@media (min-width:1081px){
  .layout-home{ align-items:stretch; }
  .layout-home > .side{ position:static; max-height:none; overflow:visible;
    padding:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
  .layout-home > .side .side-in{ position:sticky; top:calc(var(--nav-h) + 38px);
    max-height:calc(100vh - var(--nav-h) - 70px); overflow-y:auto; overflow-x:hidden;
    scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
  .layout-home > .side .side-in::-webkit-scrollbar{ width:6px; }
  .layout-home > .side .side-in::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
  .layout-home > .side .side-dir-box{ background:transparent; border:0; border-radius:0; padding:2px 2px 0; }
}
.side-box{ padding:20px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
.side-box h4{ font-size:14px; margin-bottom:12px; letter-spacing:.04em; color:var(--ink-2); }
.side-box ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.side-box li a{ display:block; padding:7px 10px; border-radius:9px; font-size:13.5px; color:var(--ink-2); }
.side-box li a:hover{ background:var(--rose-soft); color:var(--rose-deep); }
.side-box li a.active{ background:var(--rose-soft); color:var(--rose-deep); font-weight:600; }

/* ---------- 左侧目录栏：图标小标 + 二级目录（参考知岁本源） ---------- */
.side-box h4 .h4-mk{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-right:8px; border-radius:6px;
  background:var(--rose-soft); color:var(--rose-deep); vertical-align:-4px;
}
.side-box h4 .h4-mk svg{ width:13px; height:13px; }

.side-dir{ gap:1px; }
.side-dir > li > a{
  display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:9px;
}
.side-dir .mk,
.side-tp > summary .mk{
  flex:0 0 auto; width:25px; height:25px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; background:var(--rose-soft); color:var(--rose-deep);
  transition:background .16s ease, color .16s ease;
}
.side-dir .mk svg,
.side-tp > summary .mk svg{ width:14px; height:14px; }
.side-dir > li > a .nm,
.side-tp > summary .nm{ flex:1 1 auto; min-width:0; }
.side-dir > li > a:hover .mk{ background:var(--rose); color:#fff; }
.side-dir > li > a.active .mk{ background:var(--rose); color:#fff; }

.side-tp{ border-top:1px dashed var(--line-2); }
.side-tp:first-of-type{ border-top:0; }
.side-tp > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:7px 8px; border-radius:9px; font-size:13.5px; color:var(--ink-2);
}
.side-tp > summary::-webkit-details-marker{ display:none; }
.side-tp > summary::after{
  content:""; flex:0 0 auto; width:5px; height:5px; margin-left:2px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .18s ease; opacity:.7;
}
.side-tp[open] > summary::after{ transform:rotate(-135deg); }
.side-tp > summary:hover{ background:var(--rose-soft); color:var(--rose-deep); }
.side-tp > summary:hover .mk{ background:var(--rose); color:#fff; }
.side-tp.active > summary{ color:var(--rose-deep); font-weight:600; }
.side-tp.active > summary .mk{ background:var(--rose); color:#fff; }
.side-tp > summary .n{
  flex:0 0 auto; font-family:var(--sans); font-size:11px; font-weight:400; color:var(--ink-3);
  background:var(--rose-soft); padding:0 7px; border-radius:var(--r-full); line-height:18px;
}

.side-sub{
  margin:1px 0 5px 12px; padding-left:12px; border-left:1px solid var(--line-2); gap:0;
}
.side-sub li a{
  display:flex; align-items:flex-start; gap:8px; padding:5px 8px; border-radius:8px;
  font-size:13px; line-height:1.6; color:var(--ink-2);
}
.side-sub li a::before{
  content:""; flex:0 0 auto; width:5px; height:5px; margin-top:7px; border-radius:50%;
  background:var(--rose-mist); transition:background .16s ease;
}
.side-sub li a:hover::before{ background:var(--rose); }

.side-more{ display:none; }

/* 一级栏目 + 独家体系合并在同一个框里，中间用分隔线（2026-10-16 江哥指定） */
.side-dir-box .side-div{ height:1px; background:var(--line); margin:14px 0 2px; }
.side-dir-box .side-dir{ margin-bottom:14px; }

/* 正文排版（手册 9.5：沉浸式阅读） */
.prose{ font-size:15.5px; line-height:2.05; color:var(--ink);
  text-align:justify; letter-spacing:.012em; counter-reset:sec; }
.prose > * + *{ margin-top:20px; }
.prose h2{
  counter-increment:sec;
  font-family:var(--serif); font-size:20px; margin-top:52px;
  padding:4px 14px 4px 54px; position:relative; letter-spacing:.03em; line-height:1.4;
  color:var(--rose-deep);
  background:linear-gradient(90deg, var(--rose-soft) 0%, rgba(248,231,234,0) 100%);
  border-radius:10px;
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.prose h2::before{
  content:counter(sec,decimal-leading-zero);
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); color:var(--rose-deep);
  font-size:13.5px; font-weight:600; letter-spacing:.05em;
}
.prose h3{ font-size:18px; margin-top:32px; color:var(--rose-deep); }
.prose p{ margin:0; text-indent:2em; }
.prose p + p{ margin-top:10px; }
.prose blockquote p{ text-indent:0; }
.prose strong{ color:var(--rose-deep); font-weight:600; }
.prose ul,.prose ol{ padding-left:1.3em; margin:0; }
.prose li{ margin:8px 0; }
.prose li::marker{ color:var(--rose); }
.prose blockquote{
  margin:26px 0; padding:18px 22px; background:var(--rose-soft);
  border-left:3px solid var(--rose); border-radius:0 var(--r) var(--r) 0;
  font-family:var(--serif); font-size:16.5px; color:var(--ink-2);
}
.prose blockquote p{ margin:0; }
.prose hr{ border:0; border-top:1px dashed var(--line-2); margin:38px 0; }

/* 正文结尾返回按钮（2026-10-16 江哥指定） */
.art-back{ display:flex; justify-content:center; margin-top:36px; text-indent:0; }
.prose code{ font-family:ui-monospace,Consolas,monospace; font-size:14px; background:var(--rose-soft); padding:2px 6px; border-radius:6px; }

/* 提示框 */
.notice{
  padding:16px 20px; border-radius:var(--r); font-size:14px; line-height:1.8;
  background:var(--cream); border:1px solid var(--line-2); color:var(--ink-2);
}
.notice-rose{ background:var(--rose-soft); border-color:var(--rose-mist); }
.notice h4{ font-size:14.5px; margin-bottom:6px; color:var(--rose-deep); }
.notice p{ margin:0; }
.notice + .notice{ margin-top:12px; }

/* 免责声明条 */
.legal-note{
  margin-top:40px; padding:18px 20px; border-radius:var(--r);
  background:var(--bg-alt); border:1px dashed var(--line-2);
  font-size:13px; color:var(--ink-3); line-height:1.85;
}

/* ============================================================
   表单 / 交互
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-size:13.5px; color:var(--ink-2); }
.input,.textarea,.select{
  width:100%; padding:12px 14px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r);
  transition:border-color .2s, box-shadow .2s;
}
.input:focus,.textarea:focus,.select:focus{
  outline:0; border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-soft);
}
.textarea{ min-height:120px; resize:vertical; line-height:1.8; }

.auth-card{
  max-width:420px; margin:0 auto; padding:36px 32px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh);
}
.auth-card h1{ font-size:23px; text-align:center; margin-bottom:8px; }
.auth-card .sub{ text-align:center; font-size:13.5px; color:var(--ink-3); margin:0 0 26px; }
.tabs{ display:flex; gap:4px; padding:4px; background:var(--bg-alt); border-radius:var(--r); margin-bottom:22px; }
.tabs button{
  flex:1; padding:9px; border:0; background:transparent; border-radius:9px; cursor:pointer;
  font:inherit; font-size:14px; color:var(--ink-2);
}
.tabs button.on{ background:var(--card); color:var(--rose-deep); font-weight:600; box-shadow:var(--sh); }
.code-row{ display:flex; gap:10px; }
.code-row .input{ flex:1 1 auto; }
.code-row .btn{ flex:0 0 auto; min-width:112px; padding:0 14px; }

/* 自测清单 */
.quiz-item{
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  margin-bottom:10px; cursor:pointer; transition:all .2s;
}
.quiz-item:hover{ border-color:var(--rose-mist); background:var(--rose-soft); }
.quiz-item input{ margin-top:6px; width:18px; height:18px; accent-color:var(--rose-deep); flex:0 0 auto; }
.quiz-item .qt{ font-size:15px; }
.quiz-item .qh{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:4px; }
.quiz-result{
  margin-top:24px; padding:24px; border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--rose-soft),var(--card));
  border:1px solid var(--rose-mist);
}
.quiz-result .score{ font-family:var(--serif); font-size:40px; color:var(--rose-deep); line-height:1.1; }
.quiz-result h3{ font-size:18px; margin:8px 0 10px; }
.quiz-result p{ margin:0 0 10px; font-size:14.5px; color:var(--ink-2); }
.quiz-result ul{ margin:0; padding-left:1.2em; font-size:14.5px; color:var(--ink-2); }

/* 复盘表 */
.review-block{ padding:20px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); margin-bottom:14px; }
.review-block label{ display:block; font-size:14.5px; margin-bottom:10px; color:var(--ink); }
.review-block .hint{ font-size:12.5px; color:var(--ink-3); margin:0 0 10px; }

/* 工具条 */
.toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:22px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding:6px 15px; border-radius:var(--r-full); border:1px solid var(--line-2);
  background:var(--card); font-size:13.5px; color:var(--ink-2); cursor:pointer;
  font-family:var(--sans); transition:all .2s;
}
.chip:hover{ border-color:var(--rose); color:var(--rose-deep); }
.chip.on{ background:var(--rose); border-color:var(--rose); color:#fff; }

/* 空状态 */
.empty{ padding:70px 20px; text-align:center; color:var(--ink-3); }
.empty svg{ margin:0 auto 16px; opacity:.55; }

/* 分页 */
.pager{ display:flex; gap:8px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.pager a,.pager span{
  min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px; border-radius:10px; border:1px solid var(--line-2); font-size:14px; color:var(--ink-2);
  background:var(--card);
}
.pager a:hover{ border-color:var(--rose); color:var(--rose-deep); }
.pager .on{ background:var(--rose); border-color:var(--rose); color:#fff; }

/* 文章页头 */
.article-head{ padding:36px 0 26px; border-bottom:1px solid var(--line); }
.article-head h1{ font-size:clamp(21px,3.2vw,31px); line-height:1.42; margin:14px 0 14px; }
.article-head .meta{ font-size:13.5px; }

/* 目录（文章内锚点） */
.toc a{ display:block; padding:6px 10px; font-size:13.5px; color:var(--ink-2); border-left:2px solid var(--line); }
.toc a:hover{ color:var(--rose-deep); border-left-color:var(--rose); background:var(--rose-soft); }
/* 文章页左栏也统一带小标：本页目录 */
.side-box .toc a{
  display:flex; align-items:center; gap:9px; border-left:0; border-radius:9px;
}
.side-box .toc a::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:2px;
  background:var(--rose-mist); transition:background .16s ease;
}
.side-box .toc a:hover::before{ background:var(--rose); }
/* 文章页左栏也统一带小标：同栏目文章 / 全站目录等普通列表 */
.side-box ul:not(.side-dir):not(.side-sub) > li > a,
.side-box ul:not(.side-dir):not(.side-sub) > li > span{
  display:flex; align-items:flex-start; gap:9px; line-height:1.6;
}
.side-box ul:not(.side-dir):not(.side-sub) > li > a::before,
.side-box ul:not(.side-dir):not(.side-sub) > li > span::before{
  content:""; flex:0 0 auto; width:5px; height:5px; margin-top:8px; border-radius:50%;
  background:var(--rose-mist); transition:background .16s ease;
}
.side-box ul:not(.side-dir):not(.side-sub) > li > a:hover::before{ background:var(--rose); }

/* 阅读进度 */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--rose-deep); z-index:200; transition:width .1s linear; }

/* ============================================================
   页脚
   ============================================================ */
.site-footer{
  margin-top:0; padding:52px 0 26px; background:var(--bg-alt); border-top:1px solid var(--line);
}
.footer-grid{ display:grid; gap:36px; }
.footer-brand p{ font-size:13.5px; color:var(--ink-3); margin:14px 0 0; max-width:280px; line-height:1.85; }
.footer-col h5{ font-size:13.5px; margin:0 0 14px; color:var(--ink); letter-spacing:.06em; font-family:var(--sans); }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-col a{ font-size:13.5px; color:var(--ink-3); }
.footer-col a:hover{ color:var(--rose-deep); }
.footer-bottom{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-3);
}
.footer-bottom .links{ display:flex; gap:16px; flex-wrap:wrap; }

/* 页脚目录：品牌区右侧，行排两行（2026-10-16 江哥指定） */
.footer-grid{ display:grid; grid-template-columns:minmax(220px,1fr) 3fr; gap:20px 32px; }
.footer-dir{ display:flex; flex-direction:column; gap:14px; align-self:center; }
.footer-dir .footer-line{ margin:0; font-size:13px; line-height:1.8; text-align:justify; }
.footer-dir strong{ display:block; color:var(--ink); font-weight:600; margin:0 0 2px; font-family:var(--sans); }
.footer-dir a{ color:var(--ink-3); }
.footer-dir a:hover{ color:var(--rose-deep); }
.footer-dir .sep{ margin:0 6px; color:var(--line-2); }

/* ============================================================
   移动端底部功能栏（手册 14 章）
   ============================================================ */
.tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:5px 0; font-size:10.5px; color:var(--ink-3);
}
.tabbar a.active{ color:var(--rose-deep); }
.tabbar svg{ width:21px; height:21px; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1080px){
  .nav a, .nav-more > button{ padding:8px 8px; font-size:14px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  /* 单列用 minmax(0,1fr)：写 1fr 等价 minmax(auto,1fr)，轨道最小宽度会被内容的
     min-content 顶住，极窄屏（≤300px）下会撑破容器。与桌面断点的写法保持一致。 */
  .layout{ grid-template-columns:minmax(0,1fr); gap:34px; }
  /* 单列时侧栏落到正文下方：不再从固定高度内滚，二级目录收起来并给一个全站目录入口，
     避免每页底部多出近 1900px 的目录；手机端完整目录在抽屉里 */
  .side{ position:static; max-height:none; overflow:visible; }
  .side-sub, .side-box ul.side-sub{ display:none; }
  /* 首页窄屏：右栏本身就是完整列表目录，侧栏目录就别再重复一份了 */
  .layout-home > .side{ display:none; }
  .side-tp > summary::after{ display:none; }
  .side-tp > summary{ cursor:default; }
  .side-more{
    display:block; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
    font-size:13px; color:var(--rose-deep); font-weight:600;
  }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:980px){
  /* 页头在 861–950 区间放不下 6 个栏目（2026-10-16 实测溢出 32px），提前收进抽屉 */
  .nav,.header-actions .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .site-header .wrap{ justify-content:space-between; }
}
@media (max-width:860px){
  .grid-3{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .hero{ padding:44px 0 34px; }
  .section{ padding:38px 0; }
  .wrap{ padding:0 18px; }
  .item-idx{ display:none; }
  .tabbar{ display:flex; }
  body{ padding-bottom:64px; }
}
@media (max-width:600px){
  .cat-grid,.grid-2,.grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .news-item{ flex-direction:column; gap:6px; }
  .news-item time{ flex:0 0 auto; }
  .auth-card{ padding:28px 20px; }
  .prose{ font-size:15px; }
}
@media (max-width:430px){
  /* 窄屏页头收口（2026-10-16）：页头自然宽度 355px（左内边距 18 + 品牌 141 + 间距 20
     + 按钮组 176），在 320px 机型上溢出 50px，最右「打开菜单」按钮整个跑到屏幕外。
     这里逐项压缩到约 283px：只隐藏装饰性的英文副标，四个功能按钮全部保留。 */
  .site-header .wrap{ padding:0 12px; gap:8px; }
  .site-header .brand{ gap:8px; }
  .site-header .brand-name{ font-size:17px; }
  .site-header .brand-sub{ display:none; }
  .header-actions{ gap:3px; }
  .site-header .header-actions .icon-btn{ width:36px; height:36px; }
}

@media print{
  .site-header,.site-footer,.tabbar,.side{ display:none; }
  body{ padding:0; }
}