/* ============================================================
   theme.css · 典藏级宣纸精装 覆盖层
   ------------------------------------------------------------
   设计目标：大留白 · 衬线巨字 · 朱印点睛 · 手机优先
   实施约定：本文件只做「覆盖」，不改动 style.css / lesson.css，
             摘掉 index.html 里这一行 <link> 即可完整回退。
   断点：  ≤480 手机  ·  481-767 大手机  ·  768-1023 平板  ·  ≥1024 桌面
   ============================================================ */

/* ---------- 0. 设计令牌 ---------- */
:root{
  /* 宣纸层次：从最浅的高光到最深的压边 */
  --xuan-hi:#fffdf7;
  --xuan-1:#fbf7ed;
  --xuan-2:#f4ecdd;
  --xuan-3:#e9dcc6;

  /* 墨色层次 */
  --mo-1:#1c1814;
  --mo-2:#3a332b;
  --mo-3:#6b6259;

  /* 朱与金 */
  --zhu-deep:#7d201b;
  --zhu-bright:#b1382c;
  --jin:#b9812e;
  --jin-soft:#e6c88a;

  /* 精装书的物理感 */
  --emboss:inset 0 1px 0 rgba(255,255,255,.9);
  --deboss:inset 0 -1px 0 rgba(120,90,50,.10);

  /* 节律：统一的间距与圆角尺度 */
  --gap-xs:8px;
  --gap-sm:14px;
  --gap-md:22px;
  --gap-lg:34px;
  --gap-xl:54px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;

  /* 衬线字栈 */
  --serif-cn:"Noto Serif SC","Songti SC","SimSun",Georgia,serif;
}

/* ---------- 1. 全局：纸的质感与呼吸 ---------- */
body{
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(185,129,46,.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(159,47,36,.05), transparent 70%),
    linear-gradient(180deg, var(--xuan-hi) 0%, var(--xuan-1) 30%, var(--xuan-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 纸纹：极淡的纤维噪点，只在桌面加载，手机省性能 */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    opacity:.5;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  }
  /* 提层时必须排除 [hidden]（否则 #originwarn 会重新占位盖住菜单），
     也必须排除 .hd —— 它在 style.css 里是 position:sticky，
     被改成 relative 会让头部失去吸顶，并改变下拉菜单的层叠上下文。 */
  body>*:not([hidden]):not(.hd){position:relative;z-index:1}
}
/* [hidden] 必须真正不可见 —— 兜住任何把 display 提回 block 的规则 */
[hidden]{display:none !important}

/* ---------- 2. 主容器：更克制的宽度与更大的留白 ---------- */
.wrap{
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(16px,5vw,40px);
  gap:var(--gap-lg);
}
@media (min-width:1024px){
  .wrap{ margin-block:var(--gap-lg) var(--gap-xl); gap:var(--gap-xl); }
}

/* ---------- 3. 卡面：精装书的压凸边 ---------- */
.panel{
  border-radius:var(--r-lg);
  border:1px solid var(--xuan-3);
  background:linear-gradient(180deg, var(--xuan-hi), #fffcf5);
  box-shadow:
    var(--emboss),
    var(--deboss),
    0 1px 2px rgba(90,66,36,.04),
    0 12px 34px -14px rgba(90,66,36,.16);
}
@media (min-width:768px){
  .panel{ padding:clamp(20px,3vw,34px); }
}

/* ============================================================
   4. 头部 · 木匾金字（深色来自 lesson.css，这里只做精修）
   ============================================================ */
.hd{
  gap:var(--gap-sm) var(--gap-md);
  padding-block:clamp(12px,2.4vw,20px);
}
/* 匾额下沿的双线金边 */
.hd::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;
  background:linear-gradient(180deg, rgba(185,129,46,.55), rgba(185,129,46,0));
  pointer-events:none;
}
.hd h1{
  font-family:var(--serif-cn);
  font-weight:700;
  letter-spacing:.06em;
  font-size:clamp(19px,4.6vw,27px);
}
.eyebrow{
  font-size:clamp(9.5px,2.2vw,11px);
  letter-spacing:.22em;
}
/* 印章：更像一枚真的朱印 */
.seal{
  font-family:var(--serif-cn);
  border-radius:7px;
  background:linear-gradient(150deg, var(--zhu-bright), var(--zhu-deep) 70%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,232,220,.34),
    0 4px 14px rgba(125,32,27,.34);
  letter-spacing:0;
}

/* 导航胶囊
   注意：不能在这里写 overflow-x:auto —— CSS 规范规定 overflow-x 与
   overflow-y 不可一个是 auto、另一个是 visible，浏览器会把 visible
   强制算成 auto。那样纵向也成了滚动容器，会把 absolute 定位的
   .nav-drop-menu 裁在仅 40px 高的导航条内（菜单 382px，等于完全消失）。
   所以横滑只在窄屏开启，且窄屏下菜单已改为 position:fixed 不受裁剪。 */
.nav{
  gap:var(--gap-xs);
  overflow:visible;
  padding-bottom:2px;
}
@media (max-width:520px){
  .nav{
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
}
.nav::-webkit-scrollbar{ display:none }
.ntab{
  scroll-snap-align:start;
  font-family:var(--serif-cn);
  font-weight:600;
  letter-spacing:.08em;
  white-space:nowrap;
  min-height:40px;
  padding-inline:clamp(12px,3.4vw,18px);
}

/* 能力标签：手机隐藏（style.css 已做），桌面加金线 */
@media (min-width:981px){
  .hero-meta span{
    font-family:var(--serif-cn);
    letter-spacing:.12em;
    border-color:rgba(185,129,46,.34);
  }
}

/* ============================================================
   5. 网站首页 · Hero 引言
   ============================================================ */
.home-hero{
  border-radius:var(--r-lg);
  padding:clamp(26px,6vw,58px) clamp(18px,5vw,52px);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(180deg, var(--xuan-hi), var(--xuan-1));
  border:1px solid var(--xuan-3);
  box-shadow:var(--emboss), 0 14px 40px -18px rgba(90,66,36,.2);
}

/* 引言：这是全站的门面字，给足字号与行距 */
.home-hero-text{
  font-family:var(--serif-cn);
  font-weight:600;
  color:var(--mo-1);
  font-size:clamp(21px,5.6vw,40px);
  line-height:1.62;
  letter-spacing:.03em;
  margin:0;
  text-wrap:balance;
}
.home-hero-quote{ gap:clamp(4px,1.5vw,12px) }
.home-hero-mark{
  font-family:var(--serif-cn);
  color:var(--jin);
  opacity:.5;
  font-size:clamp(26px,6vw,52px);
  line-height:1;
}
.home-hero-source{
  font-family:var(--serif-cn);
  color:var(--mo-3);
  letter-spacing:.16em;
  font-size:clamp(11.5px,2.8vw,14px);
  margin-top:clamp(10px,2vw,18px);
}

/* 四个数字：手机 2×2，桌面一排四 —— 不再竖排吃掉整屏 */
.home-hero-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,2.4vw,18px);
  margin:clamp(20px,4vw,36px) 0 0;
  padding:0;
  list-style:none;
}
@media (min-width:768px){
  .home-hero-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
.home-hero-grid li{
  display:flex;flex-direction:column;gap:5px;
  padding:clamp(12px,2.6vw,20px);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,#fffefa,var(--xuan-1));
  border:1px solid var(--xuan-3);
  box-shadow:var(--emboss);
  /* 左上角一枚极小的金角，暗示"册页" */
  position:relative;overflow:hidden;
}
.home-hero-grid li::before{
  content:"";position:absolute;top:0;left:0;width:18px;height:18px;
  background:linear-gradient(135deg, rgba(185,129,46,.4), transparent 60%);
}
.home-hero-grid b{
  font-family:var(--serif-cn);
  color:var(--zhu-deep);
  font-size:clamp(17px,4.4vw,25px);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
}
.home-hero-grid span{
  color:var(--mo-3);
  font-size:clamp(11px,2.5vw,12.5px);
  line-height:1.6;
}

/* ============================================================
   6. 首页 · 五个关卡入口
   手机：紧凑两列；桌面：一排铺开
   ============================================================ */
.home-routes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,2.2vw,16px);
}
@media (min-width:768px){
  .home-routes{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (min-width:1100px){
  .home-routes{ grid-template-columns:repeat(5,minmax(0,1fr)) }
}
.route-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:clamp(14px,3vw,22px) clamp(12px,2.6vw,20px);
  min-height:0;
  border-radius:var(--r-md);
  border:1px solid var(--xuan-3);
  background:linear-gradient(180deg,#fffefa,var(--xuan-1));
  box-shadow:var(--emboss), 0 6px 18px -10px rgba(90,66,36,.16);
  cursor:pointer;
  text-align:left;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
}
/* 那道彩色竖条改成顶部一条细金线，更整体 */
.route-row::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg, transparent, var(--jin-soft), transparent);
  opacity:0;transition:opacity .18s;
}
.route-row{ position:relative;overflow:hidden }
.route-row:hover,.route-row:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(185,129,46,.5);
  box-shadow:var(--emboss), 0 14px 28px -12px rgba(90,66,36,.26);
  outline:none;
}
.route-row:hover::before,.route-row:focus-visible::before{ opacity:1 }
.route-row:active{ transform:translateY(-1px) }

/* 关卡的字：单字朱印 + 衬线标题 */
.route-ico{
  width:clamp(34px,8vw,44px);
  height:clamp(34px,8vw,44px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif-cn);
  font-size:clamp(16px,4vw,21px);
  font-weight:700;
  color:var(--zhu-deep);
  border-radius:8px;
  background:linear-gradient(150deg, #fbeee7, #f4ded3);
  box-shadow:inset 0 0 0 1px rgba(159,47,36,.16);
  flex:none;
}
.route-row strong{
  font-family:var(--serif-cn);
  font-size:clamp(14px,3.5vw,17px);
  font-weight:700;
  color:var(--mo-1);
  letter-spacing:.05em;
}
.route-row small{
  font-size:clamp(10.5px,2.4vw,12px);
  color:var(--mo-3);
  line-height:1.55;
}

/* ============================================================
   7. 首页 · 子午流注
   圆盘在手机上必须完整可见、标签不糊
   ============================================================ */
.home-ziwu{
  border-radius:var(--r-lg);
  padding:clamp(20px,4.5vw,40px);
  background:
    radial-gradient(ellipse 60% 60% at 50% 40%, rgba(255,255,255,.6), transparent 70%),
    linear-gradient(180deg, var(--xuan-hi), var(--xuan-1));
  border:1px solid var(--xuan-3);
  box-shadow:var(--emboss), 0 14px 40px -18px rgba(90,66,36,.2);
}
.ziwu-head h2{
  font-family:var(--serif-cn);
  font-size:clamp(18px,4.4vw,26px);
  font-weight:700;
  color:var(--zhu-deep);
  letter-spacing:.06em;
  margin:0;
}
.home-time{
  font-family:var(--serif-cn);
  color:var(--mo-3);
  font-size:clamp(11.5px,2.7vw,13.5px);
  letter-spacing:.08em;
}
.ziwu-phase{
  font-family:var(--serif-cn);
  font-size:clamp(15px,3.8vw,20px);
  font-weight:700;
  color:var(--mo-1);
  letter-spacing:.06em;
  margin:8px 0 2px;
}
.ziwu-summary{
  font-size:clamp(12px,2.9vw,14px);
  color:var(--mo-2);
  line-height:1.75;
  margin:0;
  max-width:52ch;
}
.ziwu-reset{
  font-family:var(--serif-cn);
  margin-top:12px;
  min-height:38px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(185,129,46,.45);
  background:linear-gradient(180deg,#fffdf6,var(--xuan-2));
  color:var(--zhu-deep);
  font-size:12.5px;font-weight:600;letter-spacing:.1em;
  cursor:pointer;
  box-shadow:var(--emboss);
  transition:border-color .16s, box-shadow .16s;
}
.ziwu-reset:hover,.ziwu-reset:focus-visible{
  border-color:var(--zhu);
  box-shadow:var(--emboss),0 0 0 3px rgba(159,47,36,.12);
  outline:none;
}

/* 圆盘：给它整幅画的地位，居中且留白
   ------------------------------------------------------------
   style.css:486 把 .home-ziwu 设为两栏 `1fr | minmax(300px,.4fr)`，
   1280px 下实测 740px 文字 + 300px 圆盘 —— 文字区大片留白，圆盘却挤成
   300px。更糟的是 .taiji-mark 是固定 210px（半径 105），而环带内圈半径
   仅 300×(148/720)=61.7px，太极完全盖住整条环带，12 个脏腑名（32px 字）
   全被压在下面读不出来。
   改为：单栏纵向排布，圆盘居中并给足尺寸；太极尺寸用容器查询单位随盘
   缩放，恒等于盘宽的 42%（半径正好落在内圈里，环带完整露出）。 */
.home-ziwu{
  display:block;
}
.ziwu-module{
  margin-top:clamp(18px,3.5vw,32px);
  /* 标签层旋转后外接盒比圆盘宽，只裁横向、纵向保留（地支牌在盘外沿之上） */
  overflow-x:clip;
}
.ziwu-wheel-frame{
  margin-inline:auto;
  width:min(100%, 620px);
  max-width:min(92vw, 620px);
  /* 容器查询锚点必须是圆盘本身 —— 挂在 .ziwu-module 上会让 cqw 取到
     整个区块宽度（1160px），太极算出 410px 反而更大。 */
  container-type:inline-size;
}
/* 太极随盘缩放。环带内圈半径 = 盘宽×148/720 ≈ 20.6%，
   取 38% 盘宽（半径 19%）留出约 1.6% 的安全间隙，环带完整露出。 */
.ziwu-wheel .taiji-mark{
  width:38cqw;
  height:38cqw;
  border-width:clamp(2px,0.6cqw,4px);
}
.taiji-mark::before{ border-radius:50% 50% 0 0 }
/* 标签层用 transform:rotate 定位，旋转后外接盒会比圆盘宽出一截
   （768px 视口下实测 792px），从而在 body 上撑出横向滚动条。
   注意：不能用 .ziwu-wheel{overflow:hidden} 来裁 —— 地支牌本身就
   设计在盘外沿（top 为负向偏移），裁切会让顶部两枚牌消失。
   改为在圆盘外层横向裁切，纵向保持可见。 */
.ziwu-module{ overflow-x:clip }
.wheel-note{
  text-align:center;
  color:var(--mo-3);
  font-size:clamp(11px,2.6vw,12.5px);
  line-height:1.7;
  margin-top:clamp(12px,2.5vw,18px);
  max-width:46ch;
  margin-inline:auto;
}

/* ---- 圆盘文字对比 ----
   扇区底色改为朱砂→古铜的昼夜明度渐变后，深色段（子丑寅卯 / 戌亥，
   即夜间时辰）上的深墨色脏腑名对比不足。这里按索引给夜段文字反白，
   昼段（辰巳午未申酉）保持墨色，两侧都拿到足够对比。 */
.ziwu-label-slot[data-index="0"] .ziwu-label-content,
.ziwu-label-slot[data-index="1"] .ziwu-label-content,
.ziwu-label-slot[data-index="2"] .ziwu-label-content,
.ziwu-label-slot[data-index="3"] .ziwu-label-content,
.ziwu-label-slot[data-index="10"] .ziwu-label-content,
.ziwu-label-slot[data-index="11"] .ziwu-label-content{
  color:#fdf7ec;
  text-shadow:0 1px 2px rgba(45,30,20,.5);
}
/* 选中态：夜段用暖金而非朱红，才在深底上看得见 */
.ziwu-label-slot[data-index="0"].is-selected .ziwu-label-content,
.ziwu-label-slot[data-index="1"].is-selected .ziwu-label-content,
.ziwu-label-slot[data-index="2"].is-selected .ziwu-label-content,
.ziwu-label-slot[data-index="3"].is-selected .ziwu-label-content,
.ziwu-label-slot[data-index="10"].is-selected .ziwu-label-content,
.ziwu-label-slot[data-index="11"].is-selected .ziwu-label-content{
  color:var(--jin-soft);
}

/* ---- 圆盘窄屏可读性 ----
   圆盘直径 ≤560px 时，脏腑名 / 时间段 / 建议胶囊三层文字会互相压叠。
   时间段与建议在圆盘下方的「当前关注」区已完整呈现，属重复信息，
   故窄屏只保留「地支 + 脏腑名 + 当前高亮」这三个真正需要一眼看到的层。
   断点取 900px：桌面版圆盘固定 560px 宽，只有 ≥900px 视口才有足够留白容纳三层。 */
@media (max-width:900px){
  .ziwu-label-content small{ display:none }
  .ziwu-advice{ display:none }
  /* 地支牌落在外圈内沿，脏腑名落在内侧环带，两层不重叠。
     top 不可小于约 7%，否则牌会移到圆盘边界之外。 */
  .ziwu-branch{
    top:7.5%;
    width:clamp(26px,4.6vw,40px);
    height:clamp(26px,4.6vw,40px);
    font-size:clamp(13px,2.6vw,20px);
  }
  /* 环带可用半径 75(太极边缘)~148(外圈)，地支牌约在 120，
     脏腑名放 ~96 落在两者之间的空档：top=(148-96)/296≈17.5% */
  .ziwu-label-content{
    width:clamp(48px,10vw,86px);
    top:17.5%;
    gap:0;
  }
  .ziwu-label-content strong{
    font-size:clamp(12.5px,2.7vw,22px);
    letter-spacing:.02em;
  }
  /* 昼段（浅底）加纸色描边提对比；夜段已反白，不叠描边 */
  .ziwu-label-slot:not([data-index="0"]):not([data-index="1"]):not([data-index="2"]):not([data-index="3"]):not([data-index="10"]):not([data-index="11"]) .ziwu-label-content strong{
    text-shadow:0 1px 0 rgba(255,253,247,.8), 0 0 3px rgba(255,253,247,.6);
  }
}
/* 极窄屏再收一档 */
@media (max-width:400px){
  .ziwu-branch{ top:7%;width:25px;height:25px;font-size:12.5px }
  .ziwu-label-content{ width:48px;top:18.5% }
  .ziwu-label-content strong{ font-size:12px }
}

/* 当前关注：横排小标签组，手机上换行不错位 */
.current-detail{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 12px;
  margin-top:clamp(16px,3vw,26px);
  padding-top:clamp(14px,2.6vw,20px);
  border-top:1px solid var(--xuan-3);
}
.detail-label{
  font-family:var(--serif-cn);
  color:var(--jin);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  flex:none;
}
.current-detail strong{
  font-family:var(--serif-cn);
  font-size:clamp(15px,3.6vw,19px);
  color:var(--zhu-deep);
  letter-spacing:.04em;
}
.current-detail span:not(.detail-label){
  font-size:clamp(11.5px,2.7vw,13px);
  color:var(--mo-2);
}

/* ============================================================
   8. 趣味学堂 · 书库
   ============================================================ */
.bs-head{
  gap:clamp(12px,3vw,22px);
  padding:clamp(20px,4.5vw,40px) clamp(18px,4vw,38px);
  border-radius:var(--r-lg);
  background:
    radial-gradient(ellipse 70% 100% at 0% 0%, rgba(255,255,255,.66), transparent 60%),
    linear-gradient(180deg, var(--xuan-hi), var(--xuan-1));
  border:1px solid var(--xuan-3);
  box-shadow:var(--emboss), 0 14px 40px -18px rgba(90,66,36,.2);
}
.bs-seal{
  font-family:var(--serif-cn);
  border-radius:9px;
  background:linear-gradient(150deg, var(--zhu-bright), var(--zhu-deep) 72%);
  box-shadow:
    inset 0 0 0 2px rgba(255,232,220,.3),
    0 6px 20px rgba(125,32,27,.32);
  letter-spacing:0;
}
.bs-eyebrow{
  font-family:var(--serif-cn);
  color:var(--jin);
  font-size:clamp(10px,2.4vw,11.5px);
  letter-spacing:.2em;
}
.bs-title{
  font-family:var(--serif-cn);
  font-size:clamp(24px,6.4vw,42px);
  font-weight:700;
  color:var(--mo-1);
  letter-spacing:.07em;
  line-height:1.25;
  margin:2px 0 0;
}
.bs-sub{
  font-size:clamp(12px,2.9vw,14.5px);
  color:var(--mo-3);
  line-height:1.75;
  max-width:46ch;
}
/* 主 CTA：朱底金边，手机上占满宽度好点 */
.bs-cta{
  font-family:var(--serif-cn);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;
  padding:0 clamp(20px,4vw,30px);
  border-radius:999px;
  background:linear-gradient(150deg, var(--zhu-bright), var(--zhu-deep));
  color:#fff5ef;
  font-size:clamp(13.5px,3.2vw,15.5px);
  font-weight:700;
  letter-spacing:.14em;
  text-decoration:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,232,220,.28),
    0 10px 26px -10px rgba(125,32,27,.5);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.bs-cta:hover,.bs-cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,232,220,.4),
    0 16px 32px -12px rgba(125,32,27,.56);
  outline:none;
}
@media (max-width:640px){
  .bs-cta{ width:100% }
}

/* 今日信息带：手机竖排，平板起并列 */
.bs-band{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,2.8vw,22px);
}
@media (min-width:900px){
  .bs-band{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) }
}
.bs-ziwu,.bs-stats{
  border-radius:var(--r-lg);
  padding:clamp(16px,3.4vw,26px);
  background:linear-gradient(180deg, var(--xuan-hi), var(--xuan-1));
  border:1px solid var(--xuan-3);
  box-shadow:var(--emboss), 0 10px 28px -14px rgba(90,66,36,.18);
}
.bs-zw-head h3,.bs-stats-head h3{
  font-family:var(--serif-cn);
  font-size:clamp(15px,3.5vw,19px);
  font-weight:700;
  color:var(--zhu-deep);
  letter-spacing:.08em;
  margin:0;
  text-wrap:nowrap;
}
/* 极窄屏容不下整行标题时，允许缩字而不是断词 */
@media (max-width:400px){
  .bs-zw-head h3,.bs-stats-head h3{ font-size:15px;letter-spacing:.04em }
}
/* 标题与时间：窄屏上下堆叠，宽屏同一基线 */
.bs-zw-head{
  display:flex;
  flex-direction:column;
  gap:4px;
}
@media (min-width:560px){
  .bs-zw-head{
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
}
.bs-zw-time{
  font-size:clamp(11px,2.6vw,12.5px);
  color:var(--mo-3);
  letter-spacing:.05em;
  margin:5px 0 0;
  line-height:1.6;
}
/* mini 圆盘 + 明细：手机竖排居中，宽屏并列 */
.bs-zw-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px,2.8vw,20px);
  margin-top:clamp(14px,2.6vw,20px);
}
@media (min-width:520px){
  .bs-zw-row{ flex-direction:row;align-items:center }
}
.bs-zw-svg{
  width:clamp(150px,44vw,196px);
  height:auto;
  flex:none;
}
.bs-zw-detail{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
  min-width:0;
}
@media (min-width:520px){
  .bs-zw-detail{ grid-template-columns:1fr }
}
.bs-zw-item{
  display:flex;
  /* 窄格子里标签在上、值在下，避免挤成两行断字 */
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  padding:9px 11px;
  border-radius:var(--r-sm);
  background:var(--xuan-hi);
  border:1px solid var(--xuan-3);
  box-shadow:var(--emboss);
  min-width:0;
}
/* 一旦两列变一列（≥520px），格子变宽，可回到同一基线。
   此时标签与值同行，需要比窄屏更充裕的间距把两种字重分开。 */
@media (min-width:520px){
  .bs-zw-item{
    flex-direction:row;
    align-items:baseline;
    gap:14px;
    padding:10px 14px;
  }
  /* 标签占固定宽度，让右侧的值形成一条对齐的竖线 */
  .bs-zw-label{ width:4.6em;flex:none }
}
.bs-zw-label{
  font-family:var(--serif-cn);
  font-size:10.5px;
  font-weight:700;
  color:var(--jin);
  letter-spacing:.14em;
  flex:none;
  white-space:nowrap;
}
.bs-zw-item strong{
  font-family:var(--serif-cn);
  font-size:clamp(13.5px,3.2vw,16px);
  color:var(--zhu-deep);
  letter-spacing:.03em;
  white-space:nowrap;
}
.bs-zw-item span:not(.bs-zw-label){
  font-size:clamp(11.5px,2.7vw,13px);
  color:var(--mo-2);
  line-height:1.5;
}

/* 本站规模：手机 2×2 */
.bs-stats-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,2.2vw,16px);
  margin-top:clamp(14px,2.6vw,20px);
}
.bs-stat{
  display:flex;flex-direction:column;gap:3px;
  padding:clamp(12px,2.6vw,18px);
  border-radius:var(--r-md);
  background:var(--xuan-hi);
  border:1px solid var(--xuan-3);
  box-shadow:var(--emboss);
  position:relative;overflow:hidden;
}
.bs-stat::before{
  content:"";position:absolute;top:0;left:0;width:16px;height:16px;
  background:linear-gradient(135deg, rgba(185,129,46,.36), transparent 60%);
}
.bs-stat b{
  font-family:var(--serif-cn);
  font-size:clamp(21px,5.6vw,32px);
  font-weight:700;
  color:var(--zhu-deep);
  line-height:1.1;
  letter-spacing:.01em;
}
.bs-stat small{
  font-family:var(--serif-cn);
  font-size:clamp(11.5px,2.7vw,13px);
  font-weight:700;
  color:var(--mo-1);
  letter-spacing:.1em;
}
.bs-stat span{
  font-size:clamp(10px,2.3vw,11.5px);
  color:var(--mo-3);
  line-height:1.55;
}

/* 章节标题：朱菱形 + 衬线 */
.bs-sec-head{ margin-bottom:clamp(14px,2.8vw,22px) }
.bs-sec-title{
  font-family:var(--serif-cn);
  font-size:clamp(19px,5vw,30px);
  font-weight:700;
  color:var(--mo-1);
  letter-spacing:.08em;
  margin:0;
}
.bs-sec-sub{
  font-size:clamp(11.5px,2.7vw,13.5px);
  color:var(--mo-3);
  letter-spacing:.04em;
  line-height:1.7;
  margin:6px 0 0;
}

/* 四本书：手机单列，平板双列 */
.bs-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,2.8vw,24px);
}
@media (min-width:760px){
  .bs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* 金句：留白撑起仪式感 */
.bs-quote,.home-hero-quote{ text-wrap:pretty }
.bs-quote{
  padding:clamp(26px,6vw,56px) clamp(18px,5vw,44px);
  text-align:center;
}
.bs-quote-mark{
  font-family:var(--serif-cn);
  color:var(--jin);
  opacity:.42;
  font-size:clamp(30px,8vw,60px);
  line-height:1;
  display:block;
  margin-bottom:-6px;
}
.bs-quote-text{
  font-family:var(--serif-cn);
  font-size:clamp(14px,3.6vw,21px);
  font-weight:500;
  color:var(--mo-2);
  line-height:2;
  letter-spacing:.05em;
  margin:0 auto;
  max-width:38ch;
}

/* 页脚 */
.bs-ft,.ft{
  text-align:center;
  color:var(--mo-3);
  font-size:clamp(10.5px,2.4vw,12px);
  line-height:1.9;
  padding-block:clamp(18px,3.5vw,30px);
}
.bs-ft-meta{ opacity:.72 }
.bs-ft code,.ft code{
  background:rgba(185,129,46,.12);
  color:#8a6420;
  padding:1.5px 6px;
  border-radius:5px;
  font-size:.94em;
}

/* ============================================================
   9. 六经全览 · 色彩统一
   原六色（红橙黄绿蓝紫）是彩虹式取色，与全站朱红+古铜金脱节。
   六经本有「病位由表入里」的次序，改用朱砂→古铜→墨褐的单色阶
   表达这个深浅关系：三阳（表）偏朱亮，三阴（里）偏墨沉。
   ============================================================ */
.channel-node{
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--xuan-hi),var(--xuan-1));
  border:1px solid var(--xuan-3);
  box-shadow:var(--emboss), 0 8px 22px -12px rgba(90,66,36,.18);
  padding:clamp(18px,3.4vw,26px) clamp(12px,2.6vw,18px);
}
.channel-node:hover{
  border-color:rgba(185,129,46,.5);
  box-shadow:var(--emboss), 0 16px 32px -14px rgba(90,66,36,.28);
}
.channel-node .chn-dot{
  width:clamp(44px,10vw,56px);
  height:clamp(44px,10vw,56px);
  font-size:clamp(18px,4.4vw,22px);
  box-shadow:inset 0 0 0 1px rgba(255,240,230,.28), 0 6px 16px rgba(90,60,40,.26);
}
/* 三阳：表 → 半表半里，朱砂由亮转沉 */
.channel-node.c-taiyang  .chn-dot{ background:linear-gradient(150deg,#b1382c,#8d2a20) }
.channel-node.c-yangming .chn-dot{ background:linear-gradient(150deg,#a85632,#833f22) }
.channel-node.c-shaoyang .chn-dot{ background:linear-gradient(150deg,#9c7434,#785321) }
/* 三阴：里，转入古铜与墨褐 */
.channel-node.c-taiyin   .chn-dot{ background:linear-gradient(150deg,#7d6a3a,#5c4c26) }
.channel-node.c-shaoyin  .chn-dot{ background:linear-gradient(150deg,#5f5540,#433b2a) }
.channel-node.c-jueyin   .chn-dot{ background:linear-gradient(150deg,#5a4436,#3d2c22) }

.channel-node .chn-name{
  font-family:var(--serif-cn);
  font-size:clamp(15px,3.6vw,18px);
  letter-spacing:.06em;
  color:var(--mo-1);
}
.channel-node .chn-gang{
  font-size:clamp(11px,2.5vw,12px);
  color:var(--mo-3);
  line-height:1.6;
}
/* 「已点亮」徽记：改用古铜金印，与全站一致 */
.channel-node.lit::after{
  background:linear-gradient(150deg,var(--jin-soft),var(--jin));
  color:#4a3417;
  font-family:var(--serif-cn);
  letter-spacing:.08em;
  box-shadow:0 2px 8px rgba(120,85,30,.28);
}
/* 六经卡网格：手机双列，桌面三列 */
.channel-map{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,2.4vw,18px);
}
@media (min-width:820px){
  .channel-map{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* ============================================================
   10. 各工具页通用：卡面 / 标题 / 列表
   舌象与脉象的颜色本身是诊断信息（淡红/绛红/黄苔/紫暗各对应证候），
   不做色系统一，只统一它们的容器、标题与间距。
   ============================================================ */

/* 页内主标题：朱线 + 衬线，替换原先较硬的 2px 实线 */
.ph{
  font-family:var(--serif-cn);
  font-size:clamp(17px,4vw,23px);
  font-weight:700;
  color:var(--zhu-deep);
  letter-spacing:.07em;
  border-bottom:1px solid rgba(159,47,36,.22);
  padding-bottom:10px;
  margin:2px 0 clamp(12px,2.4vw,18px);
}
/* 小节标题（舌象 / 脉象波形）：朱色竖条 */
.sh{
  font-family:var(--serif-cn);
  font-size:clamp(14px,3.2vw,17px);
  letter-spacing:.08em;
  color:var(--mo-1);
}

/* 提示条：宣纸底 + 细金线，替换原绿色块 */
.hint{
  border:1px solid rgba(185,129,46,.28);
  background:linear-gradient(180deg,#fffdf6,var(--xuan-1));
  border-radius:var(--r-md);
  color:var(--mo-2);
  font-size:clamp(12px,2.8vw,13.5px);
  line-height:1.8;
  box-shadow:var(--emboss);
}
.hint b{ color:var(--zhu-deep) }

/* 图鉴卡 / 检索项：统一压凸边与悬停 */
.acard,.ritem,.faq{
  border-radius:var(--r-md);
  border:1px solid var(--xuan-3);
  background:linear-gradient(180deg,var(--xuan-hi),var(--xuan-1));
  box-shadow:var(--emboss);
}
.acard{ padding:clamp(10px,2.2vw,14px) 8px }
.ritem:hover{
  border-color:rgba(185,129,46,.5);
  box-shadow:var(--emboss), 0 12px 26px -12px rgba(90,66,36,.24);
}
/* 图鉴网格：手机双列起，避免单列过长 */
.agrid{
  grid-template-columns:repeat(auto-fill,minmax(clamp(104px,28vw,150px),1fr));
  gap:clamp(9px,2.2vw,14px);
}

/* 标签／筹码：统一为宣纸底金边 */
.chip{
  font-family:var(--serif-cn);
  border-radius:999px;
  letter-spacing:.04em;
}

/* 下拉菜单的窄屏定位见本文件末尾「窄屏下拉菜单定位」一节 ——
   必须放在深色面板规则之后，否则 position:fixed 会被同特异性规则覆盖。 */

/* ---- 导航 hover 与下拉菜单：跟随 lesson.css 的木匾+古铜金语言 ----
   头部实际是深棕木匾（lesson.css 的 #2c2416 + --bronze #b8860b 家族），
   但两处样式此前与它脱节：
   1) .ntab:hover —— style.css 给近白底 rgba(255,253,248,.9)，lesson.css
      后加载只改了文字色为浅米白 #f3e9d2 却没管背景，浅字压白底 = 看不见。
   2) .nav-drop-menu —— 是浅色宣纸面板（#fdfaf3）配深墨字，挂在深色
      头部下方风格断裂。
   这里统一改为深木底 + 古铜金描边，与头部同族。 */

/* 1. 导航胶囊 hover：暖金微光底 + 古铜金字，不再是白底白字 */
.hd .ntab:hover,
.hd .ntab:focus-visible{
  background:linear-gradient(180deg, rgba(212,167,69,.20), rgba(184,134,11,.14));
  border-color:rgba(212,167,69,.55);
  color:#f5e7c3;
  box-shadow:0 2px 12px rgba(212,167,69,.22);
  outline:none;
}
/* 当前选中项保持 lesson.css 的古铜金实底＋深字，hover 时不被上面覆盖 */
.hd .ntab.on:hover,
.hd .ntab.on:focus-visible{
  background:linear-gradient(180deg,#d4a745,#b8860b);
  color:#2c2416;
  border-color:rgba(212,167,69,.7);
}

/* 2. 下拉菜单：深木面板，与头部同族 */
.nav-drop .nav-drop-menu{
  background:linear-gradient(180deg,#3a301d 0%,#2c2416 100%);
  border:1px solid rgba(212,167,69,.34);
  border-radius:var(--r-md);
  box-shadow:
    0 18px 44px -12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(212,167,69,.16);
  padding:8px;
}
/* 菜单项：常态浅米字，hover 暖金底 */
.nav-drop .ndmi{
  border-radius:var(--r-sm);
  color:#cdbf9f;
}
.nav-drop .ndmi:hover,
.nav-drop .ndmi:focus-visible{
  background:linear-gradient(180deg, rgba(212,167,69,.22), rgba(184,134,11,.15));
  outline:none;
}
.nav-drop .ndmi-txt strong{
  color:#f3e9d2;
  font-family:var(--serif-cn);
  letter-spacing:.08em;
}
.nav-drop .ndmi-txt small{ color:#a2917a }
.nav-drop .ndmi:hover .ndmi-txt strong{ color:#ffdf9e }
.nav-drop .ndmi:hover .ndmi-txt small{ color:#c3b193 }
/* 单字印：深底上改为古铜金描边＋暖金字，替换原本的浅底彩字 */
.nav-drop .ndmi-ico{
  background:linear-gradient(150deg, rgba(212,167,69,.20), rgba(184,134,11,.10));
  border:1px solid rgba(212,167,69,.42);
  color:#e6c88a;
  font-family:var(--serif-cn);
  box-shadow:inset 0 1px 0 rgba(255,232,180,.14);
}
.nav-drop .ndmi:hover .ndmi-ico{
  background:linear-gradient(150deg, rgba(212,167,69,.34), rgba(184,134,11,.18));
  border-color:rgba(212,167,69,.66);
  color:#ffdf9e;
}
/* 已选中的菜单项 */
.nav-drop .ndmi.is-on{
  background:linear-gradient(180deg, rgba(212,167,69,.26), rgba(184,134,11,.16));
}
.nav-drop .ndmi.is-on .ndmi-txt strong{ color:#ffdf9e }

/* ============================================================
   11. 通用：标题字、按钮、可及性
   ============================================================ */
.ph,.stage,.fname,.pmname{ font-family:var(--serif-cn) }
.fname{ letter-spacing:.04em }

/* 主行动按钮 */
#btn{
  font-family:var(--serif-cn);
  letter-spacing:.16em;
  font-weight:700;
  border-radius:var(--r-md);
  background:linear-gradient(150deg, var(--zhu-bright), var(--zhu-deep));
  box-shadow:
    inset 0 0 0 1px rgba(255,232,220,.26),
    0 14px 30px -12px rgba(125,32,27,.5);
}

/* 键盘焦点：全站统一一枚朱色光环 */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--zhu);
  outline-offset:2px;
  border-radius:6px;
}

/* 触摸目标：手机上所有可点元素不小于 44px */
@media (hover:none) and (pointer:coarse){
  .ntab,.ndmi,.sbtn,.bs-cta,.ziwu-reset,.route-row{ min-height:44px }
  /* 悬停态在触屏上不该粘住 */
  .route-row:hover{ transform:none;box-shadow:var(--emboss), 0 6px 18px -10px rgba(90,66,36,.16) }
}

/* 尊重降低动效偏好 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* 打印：去掉底纹与阴影，留干净的纸 */
@media print{
  body{background:#fff}
  body::before{display:none}
  .hd,.nav,.ft,.bs-ft{display:none}
  .panel,.home-hero,.home-ziwu,.bs-head{box-shadow:none;border-color:#ddd}
}

/* ============================================================
   窄屏下拉菜单定位
   必须置于文件末尾：需要覆盖上方深色面板规则里的 position/transform，
   两者特异性相同，靠源码顺序决胜。
   窄屏时 240px 最小宽 + translateX(-50%) 会让菜单右缘超出视口
   （375px 下实测 421px）导致展开后被裁；改为贴视口两边并用 fixed
   绕开 .nav 在窄屏的 overflow-x:auto 裁剪。
   ============================================================ */
@media (max-width:520px){
  .nav-drop .nav-drop-menu{
    position:fixed;
    left:8px;
    right:8px;
    /* 必须显式取消原有的 translateX(-50%)，否则 fixed 定位会被推偏 */
    transform:translateX(0) translateY(-6px);
    min-width:0;
    width:auto;
    max-width:none;
  }
  details.nav-drop[open] .nav-drop-menu{
    transform:translateX(0) translateY(0);
  }
}

/* =========================================================================
 * 12. 首页定位与主次修正
 * 解决三个实测问题：
 *   a) 站名 h1 (22.9px) 比区块标题 (24.9px) 还小 → 层级倒挂
 *   b) 主 CTA 是全区最小字号，主次不明
 *   c) .bs-eyebrow 金字 #b9812e on #f5f0e8 = 2.97:1，未过 WCAG AA
 * 仅覆盖，不改基础层。
 * ========================================================================= */

/* a) 让站名成为首屏最大字号；书库区块标题退到从属层级 */
.bs-title{
  font-size:clamp(26px,7vw,46px);
  letter-spacing:.04em;   /* 中文标题不需要大字距，收紧更像书名 */
}
.bs-sec-title{
  font-size:clamp(18px,4vw,26px);
}

/* 一句话定位说明：比副标题更实，承担"这是什么网站" */
.bs-sub{
  font-size:clamp(13px,3vw,15.5px);
  color:var(--mo-2);      /* 由 --mo-3 提亮一档，正文级可读性 */
  max-width:54ch;
  line-height:1.8;
}
.bs-sub b{ color:var(--mo-1);font-weight:700 }

/* 新手指路：紧跟定位说明，弱于正文但明显可读 */
.bs-start-hint{
  margin:10px 0 0;
  font-size:clamp(12.5px,2.9vw,14px);
  color:var(--mo-2);
  line-height:1.7;
}
.bs-start-hint b{
  color:var(--zhu-deep);
  font-weight:700;
}

/* b) 主 CTA 放大，确立唯一主行动 */
.bs-cta{
  font-size:clamp(15px,3.6vw,18px);
  min-height:52px;
  letter-spacing:.1em;
  cursor:pointer;
  border:none;
}

/* c) 眉标对比度：#8a6410 on #f5f0e8 ≈ 4.6:1，过 AA */
.bs-eyebrow{
  color:#8a6410;
  font-size:clamp(10.5px,2.4vw,12px);
  letter-spacing:.16em;
}

/* 子午流注自我说明：解释这是什么、宜/避怎么用 */
.bs-zw-explain{
  margin:8px 0 0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--mo-2);
  border-left:2px solid var(--jin);
  padding-left:9px;
}

/* 页脚免责声明：从"小字灰"提到可读级，医疗相关不该是最不显眼的字 */
.bs-ft-warn{
  font-size:13px;
  line-height:1.8;
  color:var(--mo-2);
  max-width:76ch;
  margin:0 auto;
}
.bs-ft-warn b{ color:var(--zhu-deep);font-weight:700 }

/* 手机端主 CTA 占满宽度：.bs-head 是 flex column 且 align-items:flex-start，
   子元素被压到内容宽度，故需在容器上放开对齐。 */
@media (max-width:640px){
  .bs-head{ align-items:stretch }
  .bs-cta{ width:100% }
}

/* ============================================================
   原书阅读器 · 版心宽度回收
   ------------------------------------------------------------
   原书是扫描件：宽度就是清晰度。默认版式里有四层宽度上限层层收缩，
   1440px 视口最后只剩 546px 画布（约 470px 横向空间闲置）：
     main.wrap  1240  →  #book-root.panel 1040(+34 padding)
       →  .book-wrap 1200(实得 970)  →  .book-pdf-wrap 576  →  canvas 546
   这里在「宽屏阅读」下逐层解除，并让目录列可收起。
   只写覆盖层，不动 lesson.css 的原始版式（关掉宽屏即回到原样）。
   ============================================================ */

/* 1) 解除 main.wrap / .panel 两层上限（仅原书 tab 生效） */
body.book-wide main.wrap{
  max-width:none;
  padding-inline:clamp(10px,1.6vw,20px);
}
body.book-wide .tabpanel[data-tab="book"] .panel,
body.book-wide #book-root.panel{
  max-width:none;
  padding:clamp(10px,1.4vw,18px);
}

/* 2) 解除 .book-wrap 上限，目录列略收窄，间距压缩 */
body.book-wide .book-wrap{
  max-width:none;
  padding:14px 10px 44px;
  grid-template-columns:248px minmax(0,1fr);
  gap:16px;
}
/* 3) 书页面板：内边距让给画布 */
body.book-wide .book-main{ padding:16px 16px 24px; }

/* 4) 目录收起：整列宽度归画布。
      注意选择器必须压过上面的 body.book-wide .book-wrap（0,2,1）——
      只写 .book-wrap.toc-collapsed（0,2,0）会输，结果目录虽然 display:none，
      栅格却仍是两列，.book-main 被留在 248px 的目录列里（实测画布只剩 190px）。 */
body .book-wrap.toc-collapsed,
body.book-wide .book-wrap.toc-collapsed{ grid-template-columns:minmax(0,1fr); }
.book-wrap.toc-collapsed > .book-toc{ display:none; }

/* 5) 画布容器：撑满可用宽度；画布自身按 JS 算出的像素宽居中。
      min-width:0 是关键 —— grid/flex 子项默认 min-width:auto，会被内部
      那张比容器宽的 canvas 顶开，于是放大时整页出现横向滚动条（实测溢出
      136px），而且下次「适应宽」量到的是被顶宽后的容器，越量越大。
      写 0 之后容器守住列宽，超出的画布在 .book-pdf-wrap 内部横向滚动。 */
.book-main, .book-pdf-wrap{ min-width:0; }
.book-pdf-wrap{ width:100%; max-width:100%; overflow:auto; overscroll-behavior-x:contain; }
body.book-wide .book-pdf-wrap{ padding:10px; }

/* 6) 缩放百分比读数 */
.bk-zoom-level{
  font-family:var(--serif-cn,inherit);
  font-size:12.5px;
  min-width:52px;
  text-align:center;
  color:var(--mo-2,#6b5b45);
  font-variant-numeric:tabular-nums;
}
/* 7) 工具条上「当前生效」的模式（适应宽/整页/宽屏/收目录）给金色实心态 */
.book-toolbar .bk-btn.on{
  color:#2c2416;
  background:linear-gradient(180deg,#e9c46a,#c9952f);
  border-color:#a9781f;
  font-weight:600;
}

/* 8) 手机：宽屏模式不该再叠加横向留白；目录本来就在上方堆叠 */
@media (max-width:860px){
  body.book-wide main.wrap{ padding-inline:8px; }
  body.book-wide .book-wrap{
    grid-template-columns:1fr;
    padding:10px 6px 34px;
  }
  body.book-wide #book-root.panel{ padding:8px; }
  body.book-wide .book-main{ padding:12px 8px 20px; }
  body.book-wide .book-pdf-wrap{ padding:6px; }
  /* 工具条按钮多了，窄屏允许换行且不挤压 */
  .book-toolbar{ gap:6px; }
  .book-toolbar .bk-btn.sm{ padding:5px 9px; font-size:12px; }
  .book-toolbar .bk-page-no{ min-width:74px; }
}

/* =========================================================================
 * 13. 医案检索不可用时的说明面板
 * 取代原先直接摔给用户的 HTTP 状态码（"检索服务返回 501…"）。
 * 定位为"说明"而非"报错"：用宣纸卡片 + 金色左边线，不用红色警告色，
 * 因为这不是用户操作出错，只是当前部署形态没带检索后端。
 * ========================================================================= */
.search-offline{
  margin-top:12px;
  padding:clamp(16px,3vw,22px) clamp(16px,3.4vw,24px);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,#fffefa,var(--xuan-1));
  border:1px solid var(--xuan-3);
  border-left:3px solid var(--jin);
  box-shadow:var(--emboss);
}
.search-offline .so-title{
  margin:0 0 8px;
  font-family:var(--serif-cn);
  font-size:clamp(15px,3.4vw,17px);
  font-weight:700;
  color:var(--mo-1);
  letter-spacing:.03em;
}
.search-offline .so-body{
  margin:0 0 10px;
  font-size:clamp(13px,2.9vw,14px);
  line-height:1.85;
  color:var(--mo-2);
}
.search-offline .so-how{
  margin:0;
  padding-top:10px;
  border-top:1px dashed var(--xuan-3);
  font-size:clamp(12.5px,2.8vw,13.5px);
  line-height:1.8;
  color:var(--mo-3);
}
.search-offline code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.94em;
  background:rgba(185,129,46,.12);
  color:#6f5210;
  padding:1px 6px;
  border-radius:5px;
}