/* ============================================================
   Vibe Coding 急诊室 · 样式表
   深色监护仪外壳 + 浅灰病灶预览区
   ============================================================

   ============ 配色分三层，改之前先认准自己在哪一层 ============

   ① 外壳（会跟随主题切换）
      --bg / --bg-2 / --bg-3 / --bg-4、--line、--line-2、--sheet-line、
      --text*、--chrome、--mask …
      深色是一套浅色是另一套，见下面 :root 与 html[data-theme="light"]。

   ② 病灶预览台（**两个主题共用，绝不跟主题走**）
      --preview-bg / --preview-fg / --preview-line 以及 .pv-* / .tx-* / .cs-* /
      .sb-* / .al-* / .ts-* / .mv-* 里那些浅色与彩色。
      理由：这些是「被展示的病历本身」——配色科的色板、阴影科的投影、动效科的
      舞台，全都是内容。跟着主题变色＝篡改演示结果。stage 内一律固定浅台。

   ③ 检查台内的控件（在①与②的交界处，最容易踩）
      .exam 是固定的浅灰台（②），可里头还摆着一些「外壳长相」的按钮
      （.pv-act、.mv-ctl-btn、.pv-grad 的 meta 条……）。它们要是直接用 --bg-2，
      浅色主题下就会变成「白按钮立在浅灰台上」——轮廓糊掉。
      所以单独给一组 --inset-*：深色=深底浅字，浅色=白底+中灰描边+淡投影，
      两套都保证与浅灰台有对比。

   ============ 本次改动（第 30 轮） ============
   原来 --bg:#0B0D10 太黑，卡片(#14171C)跟它亮度只差 0.0045（对比 1.08），
   卡片是「糊在黑里」的。现在底色抬到深灰 #17191E、卡片到 #262B33，
   阶差 0.0141 / 对比 1.24 ≈ 原来的 3 倍，再配 --card-sh 一层顶部微光，
   卡片才真正浮起来。浅色主题另配一套，见 html[data-theme="light"]。

   ============ 本次改动（第 31 轮） ============
   浮窗（.sheet）外框原来跟卡片共用 --line-2（深色 .18），在深色遮罩上像一道白描边，
   太抢眼。现在单开 --sheet-line：深色 rgba(255,255,255,.10)、浅色 rgba(16,24,40,.12)。
   注意浮窗「立得住」靠的是 --sheet-sh 投影 + 与遮罩的底差，不靠那圈线，
   所以弱化它不会让浮窗糊进背景里（深色仍留 1.33:1 的边线可见度）。

   同时删掉 .sheet-head::before 那道 3px 品牌绿粗线（它紧贴页头左缘，看着像「贴边」）。
   品牌色锚点改由 .sheet-tag 的字色承担：页头小字从 --text-3 换成 --mint，
   深色 7.64:1 / 浅色 5.47:1，页头仍有色彩落点，而左缘干净了。
   页头与正文的分界交给「--bg-2 页头面 vs --bg 正文面」的阶差 + border-bottom。

   ============ 本次改动（第 39 轮） ============
   深色下卡片一档偏亮。查下来「亮」不是来自 24 张卡片，而是 --bg-2 铺开的面太大：
   分诊台实测 145 个元素 / 925 万 px²，其中一大片是 .fbtn 筛选按钮（不只是卡片）。
   --bg-4 #3A4049 更过分 —— 比页面底高 0.0408，接近卡片的 3 倍，是全页最亮的一层。

   压一档：--bg-2 #262B33 → #21262D（卡片-底阶差 0.0141 → 0.0093，降 34%）、
   --bg-3 → #293037、--bg-4 → #333940（标签-底 0.0408 → 0.0303）。
   降完仍高于第 29 轮那个「卡片糊在黑里」的原始值 0.0045 两倍以上，卡片继续靠
   --line 边框 + --card-sh 顶边微光立住（这两项一个字没动，它们才是浮起的主因）。

   注意是「卡片往下压」而不是「整页往回黑」：--bg #17191E 保持不变，
   那是第 30 轮明确要的「灰一些、浅一些」。浅色主题不受影响。 */

:root{
  /* ---- 外壳 · 深色（默认） ---- */
  --bg:#17191E;          /* 页面底：深灰，不再是近黑 */
  --bg-2:#21262D;        /* 卡片面（第 39 轮：原 #262B33 铺开偏亮，压一档） */
  --bg-3:#293037;        /* hover / 焦点 */
  --bg-4:#333940;        /* 标签底（第 39 轮：原 #3A4049 是页面上最亮的一层） */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --line-soft:rgba(255,255,255,.055);   /* 比 --line 更淡，用于不强调整的分隔线（作者栏等） */
  --text:#E9EBEF;
  --text-2:#AAB3BE;
  --text-3:#8D97A4;
  --pill-fg:#A5AEBA;     /* 灰色胶囊标签的字，比 --text-3 亮一档才够看 */
  --mint:#2DD4BF;
  --mint-2:#5EEAD4;
  --mint-dim:rgba(45,212,191,.12);
  --mint-line:rgba(45,212,191,.35);
  --on-mint:#06231F;     /* 压在做底色的 --mint 上的字色 */
  --red:#FF7B7F;
  --red-dim:rgba(255,123,127,.10);
  --red-line:rgba(255,123,127,.35);
  --amber:#FBBF24;
  --amber-dim:rgba(251,191,36,.10);
  --amber-fg:#E5D5A8;    /* 误诊提示正文（琥珀底上的字） */
  --amber-line:rgba(251,191,36,.30);
  --purple:#A78BFA;
  --purple-dim:rgba(167,139,250,.12);   /* 难度「难」的底（与 --amber 的底同亮度量级） */
  --purple-line:rgba(167,139,250,.34);

  /* ---- 壳层（顶栏 / 浮条 / 遮罩 / 滚动条 / 投影） ---- */
  --chrome:rgba(23,25,30,.82);
  --chrome-2:rgba(23,25,30,.92);
  --mask:rgba(5,6,8,.72);
  --sb:rgba(255,255,255,.14);
  --sb-hover:rgba(255,255,255,.26);
  --sh-hero:0 10px 34px rgba(0,0,0,.28);
  --card-sh:inset 0 1px 0 rgba(255,255,255,.045);   /* 卡片顶边那道微光＝有厚度 */
  --sheet-sh:0 24px 60px rgba(0,0,0,.45);
  --sheet-line:rgba(255,255,255,.10);   /* 浮窗外框：原用 --line-2(.18)，深色下发白太抢眼 */
  --ecg-base:rgba(45,212,191,.16);
  --ecg-glow:0 0 7px rgba(45,212,191,.5);
  --magnet-line:rgba(255,255,255,.14);  /* hero 背景磁力线：刻意压得很淡，只做氛围 */

  /* ---- 检查台内控件（坐在浅灰台上，两套主题都要看得清轮廓） ---- */
  --inset-bg:#21262D;
  --inset-2:#293037;
  --inset-fg:#AAB3BE;
  --inset-line:rgba(255,255,255,.14);
  --inset-sh:none;

  /* ---- 病灶预览台：固定浅台，两个主题共用 ---- */
  --preview-bg:#E9EBEE;
  --preview-fg:#1F2937;
  --preview-line:#D3D7DD;

  --r:14px;
  --r-sm:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SF Mono","JetBrains Mono","Cascadia Code",Consolas,monospace;
  color-scheme:dark;     /* 让原生滚动条 / 表单控件跟着走 */
}

/* ---------- 外壳 · 浅色 ---------- */
html[data-theme="light"]{
  --bg:#F3F4F7;
  --bg-2:#FFFFFF;
  --bg-3:#F1F3F6;
  --bg-4:#E8EBEF;
  --line:rgba(16,24,40,.10);
  --line-2:rgba(16,24,40,.18);
  --line-soft:rgba(16,24,40,.06);   /* 比 --line 更淡，用于不强调整的分隔线（作者栏等） */
  --text:#1B1F27;
  --text-2:#4E5661;
  --text-3:#6E7783;
  --pill-fg:#5F6672;
  --mint:#0F766E;        /* #2DD4BF 在白底上只有 1.9:1，必须换深青 */
  --mint-2:#0D9488;
  --mint-dim:rgba(15,118,110,.09);
  --mint-line:rgba(15,118,110,.32);
  --on-mint:#FFFFFF;
  --red:#CE2329;
  --red-dim:rgba(206,35,41,.07);
  --red-line:rgba(206,35,41,.30);
  --amber:#93580A;       /* 原是 #A16207：在 #F3F4F7 上只有 4.48:1，12px 的难度胶囊
                            差一点点不到 4.5 —— 压深一档到 5.25:1。
                            顺带把「误诊提示」那行字也拉上去（同一个变量）。 */
  --amber-dim:rgba(180,83,9,.07);
  --amber-fg:#7A4A05;
  --amber-line:rgba(180,83,9,.26);
  --purple:#7C3AED;      /* #A78BFA 在白底上只有 2.2:1，换深紫 */
  --purple-dim:rgba(124,58,237,.08);
  --purple-line:rgba(124,58,237,.28);

  --chrome:rgba(255,255,255,.85);
  --chrome-2:rgba(255,255,255,.94);
  --mask:rgba(24,28,36,.42);
  --sb:rgba(16,24,40,.18);
  --sb-hover:rgba(16,24,40,.32);
  --sh-hero:0 8px 26px rgba(16,24,40,.10);
  --card-sh:0 1px 2px rgba(16,24,40,.06);
  --sheet-sh:0 24px 60px rgba(16,24,40,.18);
  --sheet-line:rgba(16,24,40,.12);
  --bar-sh:0 -8px 26px rgba(16,24,40,.10);
  --ecg-base:rgba(15,118,110,.22);
  --ecg-glow:0 0 7px rgba(15,118,110,.35);
  --magnet-line:rgba(16,24,40,.10);

  --inset-bg:#FFFFFF;
  --inset-2:#F1F3F6;
  --inset-fg:#4E5661;
  --inset-line:#8B95A1;
  --inset-sh:0 1px 2px rgba(16,24,40,.07);

  /* --preview-* 故意不覆盖：浅灰检查台是「病历本身」，两套主题长一样 */
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}

html{background:var(--bg)}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  /* 首屏 hero 用 100vw 通栏，而 vw 是含纵向滚动条宽度的 →
     经典滚动条下会比可用宽度多出约 15px。clip 只裁不生成滚动容器，
     不会把 sticky 顶栏变成相对 body 定位（hidden 就会）。 */
  overflow-x:clip;
  transition:background-color .22s ease,color .22s ease;
}

::selection{background:var(--mint);color:var(--on-mint)}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--sb-hover)}
html{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}

/* ---------- 顶栏 ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:var(--chrome);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:background-color .22s ease;
}
.nav{
  max-width:1200px;margin:0 auto;padding:0 28px;
  height:62px;display:flex;align-items:center;gap:28px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:600;letter-spacing:.2px;
  cursor:pointer;user-select:none;white-space:nowrap;
}
.logo svg{flex-shrink:0;color:var(--mint)}   /* 走 currentColor，浅色主题要换成深青 */
.logo .em{color:var(--mint)}
.badge{
  font-size:12px;font-weight:600;letter-spacing:.8px;
  color:var(--red);border:1px solid var(--red-line);
  background:var(--red-dim);border-radius:5px;
  padding:1px 6px;text-transform:uppercase;
}
nav{display:flex;gap:4px;align-items:center;margin-left:auto}
.nav-btn{
  background:none;border:none;color:var(--text-2);
  font-family:inherit;font-size:14px;cursor:pointer;
  padding:7px 14px;border-radius:9px;transition:.16s;
  display:flex;align-items:center;gap:6px;
}
.nav-btn:hover{color:var(--text);background:var(--bg-3)}
.nav-btn.on{color:var(--mint);background:var(--mint-dim)}

/* ---------- 主题切换（页头最右端） ----------
   只切 <html data-theme>，配色全在变量层。图标＝「当前是什么模式」：
   深色显示月亮、浅色显示太阳，看图标就知道自己在哪套里。 */
.theme-btn{
  flex:0 0 auto;width:34px;height:34px;padding:0;margin-left:8px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--text-2);
  border-radius:9px;cursor:pointer;transition:.16s;
  display:flex;align-items:center;justify-content:center;
}
.theme-btn:hover{color:var(--mint);border-color:var(--mint-line);background:var(--mint-dim)}
.theme-btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.theme-btn svg{display:block}
.tb-ico{display:none;align-items:center;justify-content:center}
html[data-theme="light"] .tb-sun{display:flex}
html:not([data-theme="light"]) .tb-moon{display:flex}

/* 搜索框共用的「清除」按钮（有关键词时才出现） */
.qclear{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;padding:0;
  background:var(--bg-4);border:1px solid var(--line);color:var(--text-3);
  cursor:pointer;display:none;align-items:center;justify-content:center;
  transition:.16s;
}
.qclear.on{display:flex}
.qclear:hover{color:var(--text);background:var(--line-2);border-color:var(--line-2)}

/* ---------- 通用 ---------- */
main{max-width:1200px;margin:0 auto;padding:0 28px 100px}
.view{display:none}
.view.on{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.kicker{
  font-size:12px;font-weight:600;letter-spacing:1.4px;
  color:var(--mint);text-transform:uppercase;margin-bottom:14px;
}
.sec-title{
  font-size:13px;font-weight:600;color:var(--text-2);
  letter-spacing:.4px;margin:44px 0 16px;
  display:flex;align-items:center;gap:12px;
}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Hero ---------- */
/* 首屏通栏（第 38 轮）：hero 自己撑满视口宽度（突破 main 的 1200 容器），
   再用左右 padding 把内容压回原容器内容区（1144px）的边缘 —— 「背景通栏、内容不贴边」。
   max() 的兜底值 28px 就是 main 的左右 padding：视口窄于容器时不会把内容挤出去。
   ⚠️ 下游两个断点用简写重置过 padding，必须同步带上左右值，否则内容会静默贴到屏幕边。 */
.hero{padding:72px 0 8px;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:56px;
  width:100vw;margin-left:calc(50% - 50vw);
  padding-left:max(28px,calc((100vw - 1144px)/2));
  padding-right:max(28px,calc((100vw - 1144px)/2))}
.hero-left{flex:1 1 440px;min-width:0;position:relative;z-index:1}
.hero-right{flex:0 0 480px;max-width:52%;position:relative;z-index:1}
.hero h1{
  font-size:46px;font-weight:700;line-height:1.18;
  letter-spacing:-1px;margin-bottom:18px;
}
.hero h1 .hl{color:var(--mint)}
.hero p{font-size:16px;color:var(--text-2);max-width:600px;line-height:1.7}
.ecg{width:100%;max-width:420px;height:96px;opacity:.85;margin-top:28px;pointer-events:none}
.ecg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ecg path.base{stroke:var(--ecg-base);stroke-width:1.3}
.ecg path.pulse{
  stroke:var(--mint);stroke-width:1.8;
  stroke-dasharray:70 890;
  animation:scan 3.2s linear infinite;
  filter:drop-shadow(var(--ecg-glow));
}
@keyframes scan{
  0%{stroke-dashoffset:960}
  100%{stroke-dashoffset:0}
}
@media(prefers-reduced-motion:reduce){
  .ecg path.pulse{animation:none;stroke-dasharray:none;opacity:.5}
}

/* ---------- Hero 背景 · 磁力线网格（第 37 轮） ---------- */
/* 来源：React Bits 的 <MagnetLines />（React + CSS）。本站纯静态装不了包 →
   照它的原理原生重写（同「首页搜索框 · 边框流光」那条路）。
   结构：.hero 内一个绝对定位的装饰层 + N 个 <i>，JS 在 js/magnet.js。
   三层关系：装饰层 z-index:0，.hero-left/.hero-right 抬到 1 —— 网格只做背景，不参与命中。 */
.hero-magnet{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:grid;justify-items:center;align-items:center;
  /* 中间均匀、四边淡出。两个坑都在这里：
     ① 试过「暗角式」（中心淡、边缘强）—— 边缘反而变成整整齐齐的一圈硬边，视觉重心跑到四角上；
     ② 边缘若直接切在 hero 的 overflow:hidden 上，最外一行线会被裁出硬直边。
     现在做成「中间 52% 均匀 → 外侧渐隐到全透明」，四边自然收口，不叠第二层渐变。 */
  -webkit-mask-image:radial-gradient(116% 112% at 50% 50%,
    #000 0%,#000 52%,rgba(0,0,0,.5) 80%,transparent 100%);
  mask-image:radial-gradient(116% 112% at 50% 50%,
    #000 0%,#000 52%,rgba(0,0,0,.5) 80%,transparent 100%);
}
.hero-magnet i{
  display:block;width:2px;height:14px;border-radius:1px;
  background:var(--magnet-line);
  transform-origin:center;will-change:transform;
  transform:rotate(var(--rotate,-10deg));
}
@media(max-width:680px){
  .hero-magnet i{width:1.6px;height:12px}   /* 小屏线短一档，配 46px 格子 */
}
@media(prefers-reduced-motion:reduce){
  /* 这条动效是指针驱动的：系统开了「减少动态效果」就整条不跟随（JS 侧不挂监听），
     只留基准角的静态网格，同时撤掉 will-change。 */
  .hero-magnet i{will-change:auto}
}

/* ---------- 页面标题 ---------- */
/* 页面标题栏：左侧标题 + 说明，右侧页内搜索 */
.page-head{padding:54px 0 6px;display:flex;align-items:flex-start;gap:28px}
.page-head-txt{flex:1 1 auto;min-width:0}
.page-head h2{font-size:30px;font-weight:700;letter-spacing:-.5px;margin-bottom:10px}
.page-head p{font-size:15px;color:var(--text-2);max-width:620px;line-height:1.7}

.page-search{position:relative;display:flex;align-items:center;flex:0 0 280px;width:280px;margin-top:4px}
.page-search>svg{position:absolute;left:12px;color:var(--text-3);pointer-events:none}
.page-search input{
  width:100%;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;color:var(--text);font-family:inherit;font-size:13.5px;
  padding:10px 38px 10px 34px;outline:none;transition:.18s;
}
.page-search input::placeholder{color:var(--text-3)}
.page-search input:focus{border-color:var(--mint-line);background:var(--bg-3);box-shadow:0 0 0 3px var(--mint-dim)}

/* ---------- Hero 搜索 ---------- */
.hero-search{
  position:relative;display:flex;align-items:center;
  width:100%;
}
.hero-search>svg{position:absolute;left:18px;color:var(--text-3);pointer-events:none}
.hero-search input{
  width:100%;background:var(--bg-2);border:1px solid var(--line);
  border-radius:13px;color:var(--text);font-family:inherit;font-size:15px;
  padding:15px 48px 15px 46px;outline:none;transition:.18s;
  box-shadow:var(--sh-hero);
}
.hero-search .qclear{right:14px;width:26px;height:26px}
.hero-search input::placeholder{color:var(--text-3)}
.hero-search input:focus{border-color:var(--mint-line);background:var(--bg-3);
  box-shadow:var(--sh-hero),0 0 0 3px var(--mint-dim)}
/* 浅色下聚焦不改背景：--bg-3(#F1F3F6) 与页面底 --bg(#F3F4F7) 几乎同色，
   白框会「暗下去、不再突出」。保留白底（--bg-2=#FFF），薄荷描边 + 光晕 + 边框流光照旧。
   （深色下仍保留原有的聚焦提亮，不动。） */
html[data-theme="light"] .hero-search input:focus{background:var(--bg-2)}

/* ---------- 首页搜索框 · 边框流光 ----------
   参考 border-beam（libraries.dev）：conic-gradient 光束 + @property 驱动旋转，
   装饰层一律 pointer-events:none，不碰输入交互。全站只此一处（首页主入口）。
   调参：--beam-strength（0~1 强度）/ --beam-c1~c3（光束三色）/ --beam-speed（转一圈秒数） */
@property --beam-angle{syntax:'<angle>';inherits:false;initial-value:0deg}

.hero-search{
  --beam-strength:.7;
  --beam-c1:#2DD4BF;--beam-c2:#5EEAD4;--beam-c3:#A78BFA;
  --beam-a1:rgba(45,212,191,0);     /* 光束尾巴（透明） */
  --beam-a2:rgba(45,212,191,.12);   /* 起手 */
  --beam-a3:rgba(45,212,191,.55);   /* 亮头前一级 */
  --beam-a4:rgba(167,139,250,0);    /* 紫尾（透明） */
  --beam-speed:5.5s;
}
/* 浅色主题：输入框是白的，亮青在白底上几乎看不见，换成深青＋深紫 */
html[data-theme="light"] .hero-search{
  --beam-c1:#0D9488;--beam-c2:#14B8A6;--beam-c3:#7C3AED;
  --beam-a1:rgba(13,148,136,0);
  --beam-a2:rgba(13,148,136,.14);
  --beam-a3:rgba(13,148,136,.60);
  --beam-a4:rgba(124,58,237,0);
}
/* .beam 只当定位框：overflow:hidden 把光晕锁在输入框内侧。
   别去掉它——.hero 自身是 overflow:hidden，往外的光会被切成一道硬边。 */
.beam{
  position:absolute;inset:0;border-radius:13px;overflow:hidden;
  pointer-events:none;z-index:2;
}
.beam-ring,.beam-glow{
  position:absolute;inset:0;display:block;
  pointer-events:none;border-radius:inherit;
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  -webkit-mask-clip:content-box,border-box;
  -webkit-mask-composite:xor;
  mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  mask-clip:content-box,border-box;
  mask-composite:exclude;
  background:conic-gradient(from var(--beam-angle),
    var(--beam-a1)        0%,
    var(--beam-a1)       62%,
    var(--beam-a2)       74%,
    var(--beam-a3)       84%,
    var(--beam-c2)       92%,
    var(--beam-c3)       97%,
    var(--beam-a4)      100%);
  animation:beam-spin var(--beam-speed) linear infinite;
  transition:opacity .35s ease;
}
.beam-ring{padding:1.5px;opacity:calc(var(--beam-strength) * .8)}
.beam-glow{padding:1.5px;filter:blur(6px);opacity:calc(var(--beam-strength) * .4)}
.hero-search:hover .beam-ring{opacity:var(--beam-strength)}
.hero-search:hover .beam-glow{opacity:calc(var(--beam-strength) * .7)}
.hero-search:focus-within .beam-ring{opacity:1}
.hero-search:focus-within .beam-glow{opacity:calc(var(--beam-strength) * .95)}
.hero-search:focus-within .beam{animation:beam-breathe 3.4s ease-in-out infinite}

@keyframes beam-spin{0%{--beam-angle:0deg}100%{--beam-angle:360deg}}
@keyframes beam-breathe{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}
@media(prefers-reduced-motion:reduce){
  .beam-ring,.beam-glow,.hero-search:focus-within .beam{animation:none}
  .beam-ring{background:linear-gradient(120deg,var(--beam-c3),var(--beam-c1),var(--beam-c3));
    opacity:calc(var(--beam-strength) * .45)}
  .beam-glow{display:none}
}

.search-hint{
  font-size:12.5px;color:var(--text-3);margin:16px 0 0;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-start;
}
.search-hint b{color:var(--text-2);font-weight:400;margin-right:2px}
.tag-btn{
  background:var(--bg-3);border:1px solid var(--line);
  color:var(--text-2);font-family:inherit;font-size:12.5px;
  padding:4px 11px;border-radius:20px;cursor:pointer;transition:.16s;
}
.tag-btn:hover{color:var(--mint);border-color:var(--mint-line);background:var(--mint-dim)}

/* ---------- 症状挂号 ---------- */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.chip{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:16px 18px;cursor:pointer;
  transition:.18s;text-align:left;font-family:inherit;color:inherit;
  position:relative;overflow:hidden;box-shadow:var(--card-sh);
}
.chip:hover{border-color:var(--mint-line);background:var(--bg-3);transform:translateY(-2px)}
.chip:hover .chip-arrow{opacity:1;transform:translateX(0)}
.chip-sym{font-size:15px;font-weight:600;margin-bottom:5px}
.chip-say{font-size:12.5px;color:var(--text-3);line-height:1.5}
.chip-arrow{
  position:absolute;right:14px;top:16px;color:var(--mint);
  opacity:0;transform:translateX(-4px);transition:.18s;font-size:14px;
}

/* ---------- 科室 ---------- */
.depts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dept{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;cursor:pointer;
  transition:.18s;font-family:inherit;color:inherit;text-align:left;
  box-shadow:var(--card-sh);
}
.dept:hover{border-color:var(--mint-line);background:var(--bg-3)}
.dept-ico{color:var(--mint);margin-bottom:14px;display:block}
.dept-name{font-size:16px;font-weight:600;margin-bottom:6px}
.dept-desc{font-size:13px;color:var(--text-3);line-height:1.55}
.dept-n{font-size:12px;color:var(--mint);margin-top:12px;font-family:var(--mono)}

/* ---------- 药房筛选 ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 26px}
.fbtn{
  background:var(--bg-2);border:1px solid var(--line);
  color:var(--text-2);font-family:inherit;font-size:13.5px;
  padding:8px 17px;border-radius:9px;cursor:pointer;transition:.16s;
}
.fbtn:hover{color:var(--text);border-color:var(--line-2)}
.fbtn.on{background:var(--mint-dim);border-color:var(--mint-line);color:var(--mint);font-weight:500}

/* ---------- 诊断卡 ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dcard{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;cursor:pointer;
  transition:.18s;text-align:left;font-family:inherit;color:inherit;
  display:flex;flex-direction:column;gap:12px;min-width:0;
  box-shadow:var(--card-sh);
}
.dcard:hover{border-color:var(--mint-line);background:var(--bg-3);transform:translateY(-2px)}
.dcard:hover .dcard-go{color:var(--mint);gap:8px}
.dcard-top{display:flex;align-items:center;gap:9px}
.pill{
  font-size:12px;padding:2.5px 9px;border-radius:20px;
  background:var(--bg-4);color:var(--pill-fg);white-space:normal;overflow-wrap:anywhere;
}
.pill.sym{background:var(--red-dim);color:var(--red);border:1px solid var(--red-line);font-weight:500}
.dcard-chief{
  font-size:14.5px;line-height:1.6;color:var(--text);
  border-left:2px solid var(--line-2);padding-left:12px;
}
.dcard-foot{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.dcard-term{font-size:13.5px;color:var(--mint);font-weight:500}
.dcard-css{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:2px}
.dcard-go{
  font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:5px;
  transition:.18s;white-space:nowrap;
}

.empty{
  grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--text-3);
}
.empty b{display:block;font-size:17px;color:var(--text-2);margin-bottom:8px;font-weight:500}

/* ---------- 弹层 ---------- */
.mask{
  position:fixed;inset:0;background:var(--mask);
  backdrop-filter:blur(3px);z-index:200;
  display:none;overflow-y:auto;padding:40px 24px;
  scrollbar-width:thin;scrollbar-color:var(--sb) transparent;
}
.mask.on{display:block}
.sheet{
  max-width:880px;margin:0 auto;background:var(--bg);
  border:1px solid var(--sheet-line);border-radius:20px;
  overflow:hidden;animation:pop .26s cubic-bezier(.2,.9,.3,1);
  box-shadow:var(--sheet-sh);
}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

.sheet-head{
  padding:24px 32px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;gap:16px;
  background:var(--bg-2);position:relative;
}
/* 页头左侧原有一道 3px 品牌绿粗线，第 31 轮按龙御意见去掉：
   品牌色改由 .sheet-tag 的字色承担；
   页头与正文的边界交给「--bg-2 页头面 vs --bg 正文面」的阶差 + 下面这条 border-bottom。 */
.sheet-tag{
  font-size:12px;font-weight:600;letter-spacing:1.2px;
  color:var(--mint);text-transform:uppercase;margin-bottom:8px;
}
.sheet-title{font-size:22px;font-weight:600;line-height:1.35}
.sheet-title .nr{color:var(--red)}
.close{
  margin-left:auto;background:var(--bg-3);border:1px solid var(--line);
  color:var(--text-2);width:34px;height:34px;border-radius:9px;
  cursor:pointer;font-size:17px;line-height:1;transition:.16s;flex-shrink:0;
}
.close:hover{color:var(--text);background:var(--bg-4);border-color:var(--line-2)}

.sheet-body{padding:28px 32px 32px}
.block{margin-bottom:30px}
.block:last-child{margin-bottom:0}
.blabel{
  font-size:12px;font-weight:600;letter-spacing:1.3px;
  color:var(--text-3);text-transform:uppercase;margin-bottom:12px;
  display:flex;align-items:center;gap:9px;
}
.blabel::after{content:"";flex:1;height:1px;background:var(--line)}

/* 主诉 */
.chief-box{
  background:var(--bg-2);border:1px solid var(--line);
  border-left:2px solid var(--red);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:15px 20px;font-size:15px;line-height:1.65;color:var(--text);
  box-shadow:var(--card-sh);
}
.chief-box .sym{
  display:inline-block;margin-left:10px;font-size:12px;
  background:var(--red-dim);color:var(--red);border:1px solid var(--red-line);
  border-radius:20px;padding:1px 10px;vertical-align:2px;white-space:nowrap;
}

/* 诊断结论 */
.diag{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:12px;
}
.diag-term{font-size:24px;font-weight:600;color:var(--mint)}
.diag-en{font-size:13px;color:var(--text-3)}
.diag-css{
  font-family:var(--mono);font-size:12.5px;color:var(--text);
  background:var(--bg-3);border:1px solid var(--line);
  border-radius:6px;padding:3px 10px;
}
.diag-text{font-size:14.5px;color:var(--text-2);line-height:1.75}

/* 剂量 */
.dose{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dose-item{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 16px;transition:.16s;
  box-shadow:var(--card-sh);
}
.dose-item:hover{border-color:var(--line-2)}
.dose-row{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.dose-label{font-size:13px;color:var(--text-2)}
.dose-val{
  font-family:var(--mono);font-size:13px;color:var(--mint);
  font-weight:600;margin-left:auto;
}
.dose-desc{font-size:12.5px;color:var(--text-3);line-height:1.5}

/* 病灶检查区 */
.exam{
  background:var(--preview-bg);border-radius:var(--r);
  padding:26px;position:relative;
}
.exam-note{
  font-size:12px;letter-spacing:.6px;color:#5F6672;
  text-transform:uppercase;margin-bottom:16px;font-weight:600;
}
.pv-stage{
  display:flex;align-items:center;justify-content:center;
  min-height:150px;padding:8px;
  /* 横向收口：shape 科「溢出」那条默认是 spill 模式——文字不换行、故意顶破卡片边框，
     这是演示的本意，不该拦。但它会把整个弹层撑出横向滚动条（390 下实测 103px），
     手机上能左右滑，很难看。clip 只裁不产生滚动容器，溢出的观感还在。 */
  overflow-x:clip;
}
.pv-card{
  background:#fff;border:1px solid var(--preview-line);
  border-radius:10px;padding:18px;width:320px;
  color:var(--preview-fg);
  transition:all .18s cubic-bezier(.2,.9,.3,1);
}
.pv-card h4{font-size:14px;font-weight:600;margin-bottom:6px}
.pv-card p{font-size:12px;color:#5B6470;line-height:1.6}
.ov-box{
  width:66%;box-sizing:border-box;border:1.5px solid #C4CCD4;border-radius:9px;
  background:#fff;padding:12px 14px;
}
.ov-title{font-size:13px;font-weight:600;color:#3D4550;line-height:1.4}
.ov-card{
  width:340px;max-width:100%;box-sizing:border-box;margin:0 auto;
  background:#fff;border:1.5px solid #C4CCD4;border-radius:10px;
  padding:16px 18px;color:var(--preview-fg);
}
.ov-card-title{
  font-size:14px;font-weight:600;color:#3D4550;line-height:1.45;
  transition:all .2s cubic-bezier(.2,.9,.3,1);
}
.ov-card-body{
  font-size:12px;color:#5B6470;line-height:1.6;margin-top:8px;
}
.ov-btnrow{display:flex;gap:10px;margin-top:18px;justify-content:center}
.ov-note{
  text-align:center;font-size:12px;color:#5B6470;line-height:1.5;
  max-width:540px;margin:12px auto 0;
}
.pv-text{width:100%;max-width:640px;color:var(--preview-fg)}
.pv-text p{font-size:13.5px;color:#3D4550;transition:all .18s cubic-bezier(.2,.9,.3,1)}
.pv-text .blk{margin-bottom:14px;transition:all .18s}
.pv-btn{
  background:var(--mint);color:var(--on-mint);border:none;
  font-family:var(--font);font-size:13.5px;font-weight:600;
  padding:11px 26px;transition:all .18s cubic-bezier(.2,.9,.3,1);
  cursor:default;
}
/* 检查台内的行动按钮：走 --inset-*，别用 --bg-2 —— 浅色主题下 --bg-2 是白的，
   白按钮立在浅灰台上轮廓会糊掉。 */
.pv-act{
  background:var(--inset-bg);color:var(--inset-fg);border:1px solid var(--inset-line);
  font-family:var(--font);font-size:13px;font-weight:600;
  padding:9px 20px;border-radius:9px;transition:all .18s cubic-bezier(.2,.9,.3,1);
  cursor:pointer;box-shadow:var(--inset-sh);
}
.pv-act:hover{border-color:var(--mint-line);color:var(--text)}
.pv-act.on{background:var(--mint);color:var(--on-mint);border-color:var(--mint-line);box-shadow:0 0 0 3px var(--mint-dim)}
.pv-act.bad.on{background:#DC2626;color:#fff;border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.18)}
.pv-act.good.on{background:#15803D;color:#fff;border-color:#15803D;box-shadow:0 0 0 3px rgba(21,128,61,.22)}

/* 队伍不齐演示 */
.gap-row{display:flex;align-items:stretch;width:100%;gap:0}
.gap-card{
  box-shadow:none;text-align:left;
  transition:margin-right .25s cubic-bezier(.2,.9,.3,1);
}
.gap-ico{
  width:34px;height:34px;border-radius:9px;margin-bottom:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#7C3AED,#06B6D4);color:#fff;
}
.gap-card h4{font-size:14px;font-weight:600;color:#1F2937;margin-bottom:6px}
.gap-card p{font-size:12px;color:#5B6470;line-height:1.6}
.gap-btnrow{display:flex;gap:10px;margin-top:18px;justify-content:center}
.gap-note{
  text-align:center;font-size:12px;color:#5B6470;line-height:1.5;
  max-width:520px;margin:12px auto 0;
}
.pv-box{
  background:#fff;border:1px solid var(--preview-line);
  color:var(--preview-fg);width:100%;transition:all .18s;
}
.pv-mock{font-size:12px;color:#5F6672;text-align:center;padding:14px}

/* 对照模式 */
.pv-cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%}
.pv-cmp-col{display:flex;flex-direction:column;align-items:center;gap:11px}
.pv-cmp-lab{font-size:12.5px;font-weight:600;color:#3D4550}
.pv-cmp-desc{font-size:12px;color:#5F6672}
.pv-cmp-stage{
  background:#fff;border:1px solid var(--preview-line);border-radius:10px;
  width:100%;min-height:120px;display:flex;align-items:center;
  justify-content:center;padding:16px;overflow:hidden;position:relative;
}
.pv-cmp-stage .pv-card{width:100%;box-shadow:none}
.pv-cmp-stage .pv-stack-item{
  background:#fff;border:1px solid var(--preview-line);
  border-radius:8px;padding:9px 12px;font-size:12px;color:#3D4550;width:100%;
}
.pv-stack-wrap{display:flex;flex-direction:column;width:100%}

/* ---------- 文字科：用真组件做「指认」（拼装在 js/viz.js 的 TX_CARRIER） ----------
   症状「文字叫不出名 / 位置说不清 / 占位文字留疤」讲的是「怎么称呼界面上的元素」，
   只拿文字举例读者对不上号——载体换成真组件：说卡片标题就画一张卡片，说表单就画一个表单。
   左右两侧的组件完全一样，唯一变量是标注的说法（vague = 口语方位，exact = 区域/角色名）。
   编号用 <i> 进 DOM 流、不做绝对定位：行内元素的 top 百分比按包含块算会跑偏。 */
.tx-wrap{display:flex;flex-direction:column;gap:11px;width:100%;color:#1F2937}
/* 组件本体吃满剩余高度，两栏组件自动等高——不写死高度，因为「怎么算高」是内容说了算：
   表单那侧多两行 label，写死 min-height 就得追着它改，还会被字号变化打脸。 */
.tx-wrap> :first-child{flex:1}
.tx-no{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:15px;height:15px;border-radius:50%;margin-right:6px;
  background:#9CA3AF;color:#fff;font-size:9.5px;font-weight:700;
  font-style:normal;line-height:1;vertical-align:1px;
}
.tx-on{padding-left:6px;border-radius:6px;background:#F3F4F6;outline:1px dashed #B6BCC5}
.tone-exact .tx-no{background:#0D9488}
.tone-exact .tx-on{background:#E8FAF6;outline:1px solid #5EEAD4}

/* ---------- 交互科：可操作病灶检查框架（.er-*，主题/品牌色自适应） ----------
   每个例子 = 一个「底层页面」（带模拟列表）+ 一个可点组件；点按钮真的开
   弹窗 / 抽屉 / 气泡，下拉 / 单选 / 多选 / 开关 / 标签页 / 折叠都真能操作。
   配色只用品牌青(var(--mint)) + 品牌红(var(--red)) + 检查台中性灰，不引入其他色。
   浮层一律 absolute 铺满例子本身（.pv-cmp-stage 已 overflow:hidden），不逃出检查台。 */
.er-case{position:relative;width:100%;min-height:172px;display:flex}
.er-page{flex:1;display:flex;flex-direction:column;gap:8px;background:transparent;border:0;border-radius:0;padding:0}
.er-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.er-bar-t{font-size:12px;font-weight:600;color:#3D4550}
.er-bar-sub{font-size:11px;color:#5B6470}
.er-hint{font-size:11px;color:#5B6470;margin-top:1px}
.er-list{display:flex;flex-direction:column;gap:6px}
.er-li{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#fff;border:1px solid var(--preview-line);border-radius:7px;padding:7px 10px;
  font-size:12px;color:#1F2937}
.er-li .er-li-sub{font-size:11px;color:var(--mint);font-weight:600;white-space:nowrap}
.er-li.is-new{animation:er-pop .26s ease}
@keyframes er-pop{from{opacity:.25;transform:translateY(-5px)}to{opacity:1;transform:none}}
.er-trigger{align-self:flex-start;margin-top:2px;background:var(--mint);color:var(--on-mint);
  border:none;border-radius:7px;padding:7px 15px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit}
.er-trigger:hover{filter:brightness(1.06)}
.er-trigger.ghost{background:#fff;color:var(--mint);border:1px solid var(--mint-line)}
.er-trigger.danger{background:var(--red);color:#fff}
.er-trigger.danger:hover{filter:brightness(1.06)}

/* 浮层（弹窗 / 抽屉 / 气泡）共用 */
.er-panel{position:absolute;inset:0;display:none;z-index:5}
.er-panel.open{display:block}
.er-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.42);border-radius:10px;
  opacity:0;transition:opacity .2s}
.er-panel.open .er-backdrop{opacity:1}
.er-x{border:none;background:none;font-size:17px;line-height:1;color:#94A3B8;cursor:pointer;padding:0 2px}
.er-x:hover{color:#1F2937}

/* 弹窗：居中淡入 */
.er-modal .er-dialog{position:absolute;left:50%;top:50%;width:84%;max-width:250px;
  background:#fff;border-radius:11px;overflow:hidden;box-shadow:0 14px 34px rgba(15,23,42,.32);
  transform:translate(-50%,-50%) scale(.94);opacity:0;transition:.2s cubic-bezier(.2,.9,.3,1)}
.er-modal.open .er-dialog{transform:translate(-50%,-50%) scale(1);opacity:1}
.er-dialog-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border-bottom:1px solid var(--preview-line);font-size:12.5px;font-weight:600;color:#1F2937}
.er-dialog-b{padding:11px 12px;display:flex;flex-direction:column;gap:7px}
.er-dialog-b .er-li{border:none;background:var(--preview-bg);padding:6px 9px}
.er-dialog-f{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--preview-line)}

/* 抽屉：右侧滑出 */
.er-drawer .er-dialog{position:absolute;top:0;right:0;bottom:0;width:64%;min-width:150px;
  background:#fff;border-radius:10px 0 0 10px;box-shadow:-10px 0 24px rgba(15,23,42,.22);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.9,.3,1)}
.er-drawer.open .er-dialog{transform:translateX(0)}
.er-drawer .er-dialog-body{flex:1;overflow:auto;padding:11px 12px;display:flex;flex-direction:column;gap:7px}

/* 气泡卡片 */
.er-pop .er-bubble{position:absolute;left:12px;top:40px;max-width:172px;background:#1F2937;color:#fff;
  border-radius:9px;padding:9px 11px;font-size:11px;line-height:1.5;box-shadow:0 8px 20px rgba(15,23,42,.28);
  transform:translateY(-4px);opacity:0;transition:.18s;z-index:6}
.er-pop.open .er-bubble{transform:none;opacity:1}
.er-pop .er-bubble .er-link{display:inline-block;margin-top:6px;color:var(--mint-2);font-weight:600;
  text-decoration:underline;cursor:pointer}

/* 下拉菜单（自定义，真能开合） */
.er-drop{position:relative;width:100%}
.er-drop-btn{width:100%;text-align:left;background:#fff;border:1px solid var(--preview-line);
  border-radius:7px;padding:7px 10px;font-size:12px;color:#5B6470;cursor:pointer;font-family:inherit}
.er-drop-btn:hover{border-color:var(--mint-line)}
.er-drop-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:7;
  background:#fff;border:1px solid var(--preview-line);border-radius:8px;overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.16)}
.er-drop.open .er-drop-menu{display:block}
.er-drop-item{padding:8px 10px;font-size:12px;color:#1F2937;cursor:pointer}
.er-drop-item:hover{background:var(--mint-dim);color:var(--mint)}

/* 单选 / 多选 / 开关 */
.er-radios,.er-checks{display:flex;flex-wrap:wrap;gap:7px}
.er-radio,.er-check{display:inline-flex;align-items:center;gap:6px;background:#fff;
  border:1px solid var(--preview-line);border-radius:7px;padding:6px 11px;font-size:12px;color:#1F2937;cursor:pointer}
.er-radio.on,.er-check.on{border-color:var(--mint-line);background:var(--mint-dim);color:var(--mint);font-weight:600}
.er-radio .dot,.er-check .box{width:13px;height:13px;border-radius:50%;border:1.5px solid #94A3B8;flex:0 0 auto}
.er-radio.on .dot{background:var(--mint);border-color:var(--mint)}
.er-check .box{border-radius:4px}
.er-check.on .box{background:var(--mint);border-color:var(--mint)}
.er-check.on .box::after{content:"✓";color:var(--on-mint);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;height:100%}
.er-switch{width:38px;height:21px;border-radius:11px;background:#CBD5E1;position:relative;cursor:pointer;transition:background .18s;flex:0 0 auto}
.er-switch.on{background:var(--mint)}
.er-switch i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;
  transition:left .18s;box-shadow:0 1px 2px rgba(15,23,42,.3)}
.er-switch.on i{left:19px}
.er-check-lbl{font-size:12px;color:#1F2937}

/* 标签页 / 折叠 */
.er-tabs{display:flex;gap:4px;background:#fff;border:1px solid var(--preview-line);border-radius:8px;padding:3px}
.er-tab{font-size:11.5px;color:#5B6470;padding:5px 10px;border-radius:6px;cursor:pointer}
.er-tab.on{background:var(--mint-dim);color:var(--mint);font-weight:600}
.er-tabp{margin-top:9px;font-size:12px;color:#1F2937;line-height:1.65}
.er-acc{border:1px solid var(--preview-line);border-radius:8px;overflow:hidden;background:#fff}
.er-acc + .er-acc{margin-top:6px}
.er-acc-h{display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:12px;color:#1F2937;cursor:pointer;font-weight:500}
.er-acc-h .ar{color:#94A3B8;transition:transform .18s;font-size:10px}
.er-acc.on .er-acc-h .ar{transform:rotate(90deg);color:var(--mint)}
.er-acc-b{max-height:0;overflow:hidden;transition:max-height .22s ease;padding:0 10px;font-size:11.5px;color:#5B6470;line-height:1.55}
.er-acc.on .er-acc-b{max-height:130px;padding:0 10px 9px}

/* 卡片网格（替代彩虹缩略图，用品牌青做缩略底） */
.er-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.er-card{background:#fff;border:1px solid var(--preview-line);border-radius:8px;padding:8px;cursor:pointer;text-align:center;transition:transform .15s,border-color .15s}
.er-card:hover{transform:translateY(-2px);border-color:var(--mint-line)}
.er-card .thumb{height:34px;border-radius:6px;background:var(--mint-dim);margin-bottom:5px}
.er-card .nm{font-size:11px;color:#1F2937}
.er-card .pr{font-size:11px;color:var(--mint);font-weight:600}

/* 角标 / 警告条 / 空状态 / 结果页 / Toast / 跳走 */
.er-ico{width:20px;height:20px;vertical-align:middle;flex-shrink:0}
.er-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;background:#fff;border:1px solid var(--preview-line);font-size:18px;cursor:pointer}
.er-bell:hover{border-color:var(--mint-line)}
.er-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  background:var(--red);color:#fff;border-radius:9px;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.er-badge.hide{display:none}
.er-alert{display:flex;align-items:center;gap:7px;background:var(--mint-dim);border:1px solid var(--mint-line);
  border-radius:8px;padding:8px 10px;font-size:11.5px;color:var(--mint);font-weight:500}
.er-alert .er-alert-x{margin-left:auto;color:var(--mint);cursor:pointer;font-size:14px;line-height:1}
.er-alert.hide{display:none}
.er-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  flex:1;color:#94A3B8;font-size:12px;text-align:center;padding:8px}
.er-empty .ic{font-size:22px}
.er-empty .t{color:#5B6470;font-weight:600}
.er-empty .lk{color:var(--mint);font-weight:600;cursor:pointer}
.er-result{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;flex:1}
.er-result .ok{width:32px;height:32px;border-radius:50%;background:var(--mint);color:var(--on-mint);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.er-result .t{font-size:13px;font-weight:600;color:#1F2937}
.er-result .s{font-size:11px;color:#5B6470}
.er-jump{flex:1;display:flex;align-items:center;justify-content:center;font-size:12px;color:#94A3B8;text-align:center;line-height:1.6}
.er-toast{position:absolute;left:50%;bottom:12px;transform:translate(-50%,8px);
  background:#1F2937;color:#fff;font-size:11.5px;padding:7px 13px;border-radius:8px;
  opacity:0;pointer-events:none;transition:.2s;z-index:8;white-space:nowrap}
.er-toast.show{opacity:1;transform:translate(-50%,0)}
.er-skip{display:inline-block;background:var(--mint);color:var(--on-mint);border:none;border-radius:6px;
  padding:6px 12px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
.er-skip:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* 两栏等高：表单那侧多两行 label，组件天然比对面高 43px。
   stage 吃掉列内剩余高度、内容纵向撑满，再把说法列表 margin-top:auto 推到底——
   两边组件不等高是内容差异，但解读区必须落在同一条基线上。 */
.tx-stage{flex:1;align-items:stretch}

/* 载体 1 · 内容卡片（讲「卡片标题 / 卡片副标题」） */
.tx-card{width:100%;background:#fff;border:1px solid #D3D7DD;border-radius:10px;
  padding:13px 14px 11px}
.tx-thumb{width:32px;height:32px;border-radius:8px;margin-bottom:10px;
  background:linear-gradient(140deg,#C7D2FE,#99F6E4)}
.tx-t1{font-size:14px;font-weight:600;line-height:1.4;padding-top:3px;padding-bottom:3px}
.tx-t2{font-size:12px;color:#5F6672;line-height:1.45;padding-top:3px;padding-bottom:3px;margin-top:3px}
.tx-t3{font-size:12px;color:#4B5563;line-height:1.6;margin-top:6px}
.tx-foot{display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:9px;border-top:1px solid #EDEFF2;
  font-size:12px;color:#9CA3AF}
.tx-btn{font-size:12px;font-weight:600;color:#475569;background:#F1F5F9;
  border:1px solid #D3D7DD;border-radius:6px;padding:3px 10px}

/* 载体 2 · 整页框架（讲「顶栏 / 页头 / 页脚」这些区域） */
.tx-page{width:100%;background:#fff;border:1px solid #D3D7DD;border-radius:10px;overflow:hidden}
.tx-top{display:flex;align-items:center;gap:7px;padding:8px 11px;
  background:#F7F8FA;border-bottom:1px solid #EDEFF2;font-size:12px}
.tx-mark{width:11px;height:11px;border-radius:3px;background:#2DD4BF;flex:0 0 auto}
.tx-top b{font-weight:600}
.tx-nav{margin-left:auto;color:#9CA3AF;font-size:12px}
.tx-hd{padding:9px 11px 3px;font-size:13px;font-weight:700}
.tx-bd{display:flex;align-items:flex-start;gap:9px;padding:4px 11px 11px}
.tx-pc{flex:1;min-width:0;background:#FCFCFD;border:1px solid #EDEFF2;
  border-radius:7px;padding:8px 9px}
.tx-pc-h{font-size:12px;font-weight:600;margin-bottom:4px}
.tx-li{font-size:12px;color:#5F6672;line-height:1.55}
.tx-pbtn{flex:0 0 auto;font-size:12px;font-weight:600;color:#fff;background:#0D9488;
  border-radius:6px;padding:5px 12px}
/* 自带色块的元素（按钮）高亮时得留住自己的底色：.tx-on 的浅底会把按钮底冲掉，
   白字直接看不见（实测「保存」整块变白）。自带 padding 简写也会重置编号的位置。 */
.tx-pbtn.tx-on{padding-left:8px;padding-right:12px;background:#0D9488}
.tx-pfoot{display:flex;align-items:center;justify-content:space-between;
  padding:7px 11px;background:#F7F8FA;border-top:1px solid #EDEFF2;
  font-size:12px;color:#9CA3AF}
.tx-link{color:#0F766E}

/* 载体 3 · 表单（讲「字段名该放框外还是框里」） */
.tx-form{width:100%;background:#fff;border:1px solid #D3D7DD;border-radius:10px;
  padding:13px 14px;display:flex;flex-direction:column}
.tx-fh{font-size:13px;font-weight:600;padding-bottom:9px;margin-bottom:11px;
  border-bottom:1px solid #EDEFF2}
.tx-fr{margin-bottom:10px}
.tx-fl{font-size:12px;color:#4B5563;margin-bottom:4px}
.tx-fi{font-size:12px;color:#9CA3AF;background:#fff;border:1px solid #D1D5DB;
  border-radius:7px;padding:7px 10px}
.tx-ph{color:#B9BFC7}
.tx-fsub{display:flex;justify-content:flex-end;margin-top:auto;padding-top:13px}
.tx-fbtn{font-size:12px;font-weight:600;color:#fff;background:#0D9488;
  border-radius:7px;padding:6px 16px}

/* 说法列表：编号与组件上的编号一一对应 */
.tx-say{display:flex;flex-direction:column;gap:6px;
  border-top:1px dashed #E5E7EB;padding-top:10px;margin-top:auto}
.tx-say-i{display:flex;align-items:flex-start;font-size:12px;
  line-height:1.45;color:#4B5563}
.tx-say-i .tx-no{width:14px;height:14px;margin-top:1px}
.tone-exact .tx-say-i{color:#0F766E;font-weight:500}

/* 滚动条对照（shape 科「滚动条出戏症」）：一条自绘的滚动条。
   为什么自绘——Chrome / 内嵌预览默认是「覆盖式滚动条」，原生条静止时不显示，
   而且 ::-webkit-scrollbar 完全不生效（实测宽 0），照原样做两边看不出任何差别。
   现在轨道和滑块都是 DOM，跨浏览器长相一致；滑块跟随真实滚动位置，可以真的滚。 */
.sb-win{width:100%;height:100px;display:flex;background:#fff;
  border:1px solid #D3D7DD;border-radius:8px;overflow:hidden}
.sb-view{flex:1;min-width:0;overflow-y:auto;font-size:12px;color:#3D4550;line-height:1.6;
  scrollbar-width:none;-ms-overflow-style:none}
.sb-view::-webkit-scrollbar{display:none}
.sb-view>div{padding:9px 11px;border-bottom:1px solid #EDEFF2}
/* 默认：又粗又灰的方块滑块 + 灰底轨道 */
.sb-rail{position:relative;flex:0 0 14px;width:14px;background:#F1F1F1}
.sb-thumb{position:absolute;left:0;top:0;width:100%;height:40px;background:#C1C4C8}
/* 接管：6px 细条、圆角、轨道透明 */
.sb-win.thin .sb-rail{flex:0 0 6px;width:6px;background:transparent;margin-right:1px}
.sb-win.thin .sb-thumb{background:rgba(15,23,42,.22);border-radius:3px}

/* 滑块 */
.slider-row{
  margin-top:20px;display:flex;align-items:center;gap:16px;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:4px;
  background:var(--preview-line);border-radius:3px;outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--mint);cursor:pointer;border:3px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.25);
}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--mint);
  cursor:pointer;border:3px solid #fff;
}
.slider-val{
  font-family:var(--mono);font-size:13.5px;color:#1F2937;
  font-weight:600;min-width:74px;text-align:right;
}
.slider-reset{
  flex:0 0 auto;width:30px;height:30px;padding:0;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--preview-line);color:#5B6470;transition:.15s;
}
.slider-reset:hover:not(:disabled){border-color:#0F766E;color:#0F766E}
.slider-reset:disabled{opacity:.36;cursor:default}
.slider-marks{
  margin-top:11px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;
}
.sm-lab{font-size:12px;color:#5F6672;margin-right:2px}
.sm{
  font-family:var(--mono);font-size:12px;color:#5B6470;line-height:1.4;
  background:#fff;border:1px solid var(--preview-line);border-radius:6px;
  padding:3px 8px;cursor:pointer;transition:.15s;
}
.sm:hover{border-color:#0F766E;color:#0F766E}
.sm.on{background:#0F766E;border-color:#0F766E;color:#fff}
.slider-status{margin-left:auto;font-size:12px;color:#5F6672}
.slider-status.ok{color:#0F766E}
.slider-status.off{color:#B45309}
.pv-warn{
  font-size:12.5px;color:#B45309;background:#FEF3C7;
  border:1px solid #FDE68A;border-radius:8px;padding:10px 14px;
}

/* 处方 */
.rx-tabs{display:flex;gap:6px;margin-bottom:14px}
.rx-tab{
  background:var(--bg-2);border:1px solid var(--line);
  color:var(--text-3);font-family:inherit;font-size:13px;
  padding:7px 15px;border-radius:8px;cursor:pointer;transition:.16s;
}
.rx-tab:hover{color:var(--text-2)}
.rx-tab.on{background:var(--mint-dim);border-color:var(--mint-line);color:var(--mint);font-weight:500}
.rx-box{
  background:var(--bg-2);border:1px solid var(--line-2);
  border-left:2px solid var(--mint);border-radius:0 var(--r) var(--r) 0;
  padding:20px;display:flex;align-items:flex-start;gap:18px;
  box-shadow:var(--card-sh);
}
.rx-text{
  flex:1;font-size:15px;line-height:1.75;color:var(--text);
  font-family:var(--font);
}
.rx-copy{
  background:var(--mint);color:var(--on-mint);border:none;
  font-family:inherit;font-size:13px;font-weight:600;
  padding:10px 18px;border-radius:9px;cursor:pointer;
  transition:.16s;white-space:nowrap;flex-shrink:0;
  display:flex;align-items:center;gap:7px;
}
.rx-copy:hover{background:var(--mint-2);transform:translateY(-1px)}
.rx-copy.done{background:#15803D;color:#fff}
.rx-hint{font-size:12.5px;color:var(--text-3);margin-top:10px}

/* 误诊 */
.misread{
  background:var(--amber-dim);border:1px solid var(--amber-line);
  border-radius:var(--r-sm);padding:16px 20px;
  display:flex;gap:13px;
}
.misread svg{flex-shrink:0;margin-top:2px;color:var(--amber)}
.misread p{font-size:13.5px;line-height:1.7;color:var(--amber-fg)}
.misread b{color:var(--amber);font-weight:600}

/* 禁忌 */
.pit{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.pit:last-child{border-bottom:none}
.pit .dot{
  width:5px;height:5px;border-radius:50%;background:var(--red);
  flex-shrink:0;margin-top:9px;
}
.pit p{color:var(--text-2);line-height:1.65}

/* 关联 */
.rel{display:flex;gap:8px;flex-wrap:wrap}
.rel-btn{
  background:var(--bg-2);border:1px solid var(--line);
  color:var(--text-2);font-family:inherit;font-size:13px;
  padding:7px 15px;border-radius:8px;cursor:pointer;transition:.16s;
}
.rel-btn:hover{border-color:var(--mint-line);color:var(--mint);background:var(--mint-dim)}

/* ---------- 页脚 ---------- */
footer{
  border-top:1px solid var(--line);padding:32px 28px 48px;
  text-align:center;color:var(--text-3);font-size:12.5px;line-height:1.9;
}
footer b{color:var(--text-2);font-weight:500}
.foot-note{color:var(--text-3)}

/* ---------- 主题切换的过渡 ----------
   只在「按下切换按钮」的那 260ms 里挂上，平时不挂：
   挂常驻会把这些元素各自的 hover 动效（位移、透明度）一并盖掉。
   动效类演示（.mv-* / .beam）走的是 animation，不受这里影响。 */
html.theme-switching,html.theme-switching *{
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,
    box-shadow .22s ease,fill .22s ease,stroke .22s ease !important;
}
@media(prefers-reduced-motion:reduce){
  html.theme-switching,html.theme-switching *{transition:none!important}
}

/* ---------- 响应式 ---------- */
@media(max-width:1040px){
  .cards,.chips{grid-template-columns:repeat(2,1fr)}
  .depts{grid-template-columns:repeat(2,1fr)}
  .page-head{flex-direction:column;align-items:stretch;gap:16px}
  .page-search{flex:0 0 auto;width:100%;margin-top:0}
  .hero{flex-direction:column;align-items:stretch;gap:38px}
  .hero-left{flex:0 0 auto}
  .hero-right{flex:1 1 auto;max-width:none;width:100%}
  .ecg{width:100%;opacity:.5}
  .hero h1{font-size:36px}
}
@media(max-width:680px){
  .nav{padding:10px 18px;gap:10px;height:auto;flex-wrap:wrap}
  .logo{font-size:14px}
  .badge{display:none}
  nav{gap:2px}
  .nav-btn{padding:6px 10px;font-size:13px}
  .page-head{padding:34px 0 4px}
  .page-head h2{font-size:23px}
  .page-head p{font-size:14px}
  main{padding:0 18px 70px}
  .hero{padding:44px 18px 0;gap:22px}
  .hero-left{text-align:center}
  .hero h1{font-size:29px;letter-spacing:-.5px}
  .hero p{font-size:14.5px;margin:0 auto}
  .search-hint{justify-content:center}
  .ecg{display:none}
  .cards,.chips,.dose,.depts{grid-template-columns:1fr}
  .pv-cmp{grid-template-columns:1fr;gap:14px}
  .sheet-head,.sheet-body{padding-left:20px;padding-right:20px}
  .sheet-title{font-size:18px}
  .rx-box{flex-direction:column;gap:14px}
  .rx-copy{width:100%;justify-content:center}
  .mask{padding:16px 12px}
  .pv-stage{min-height:110px}
  .exam{padding:18px}
}
@media(max-width:400px){
  .nav{padding:9px 14px;gap:8px}
  .logo{font-size:13px;gap:8px}
  .nav-btn{padding:5px 8px;font-size:12.5px}
  .hero-search input{font-size:14px;padding:13px 44px 13px 42px}
  .page-search input{font-size:13px;padding:9px 36px 9px 32px}
  .page-search>svg{left:11px}
  .hero-search>svg{left:15px}
  .search-hint{gap:6px;font-size:12px}
  .tag-btn{padding:4px 9px;font-size:12px}
  main{padding:0 14px 56px}
  .hero{padding:32px 14px 0}
  .hero h1{font-size:25px;letter-spacing:-.4px}
  .hero p{font-size:13.5px;line-height:1.65}
  .sec-title{margin:32px 0 12px;font-size:12.5px}
  .chip{padding:14px 15px}
  .dept{padding:18px}
  .dcard{padding:16px}
  .filters{margin:18px 0 20px;gap:6px}
  .fbtn{padding:7px 13px;font-size:13px}
  .page-head{padding:26px 0 2px}
  .page-head h2{font-size:20px}
  .page-head p{font-size:13.5px}
  .mask{padding:12px 8px}
  .sheet-head,.sheet-body{padding-left:14px;padding-right:14px}
  .sheet-title{font-size:16.5px}
  .chief-box{padding:13px 15px;font-size:14px}
  .diag-term{font-size:20px}
  .rx-tabs{gap:4px}
  .rx-tab{padding:6px 10px;font-size:12px}
  .exam{padding:14px}
  .pv-stage{min-height:92px}
  .pv-cmp-stage{padding:12px}
  .slider-row{gap:10px}
  .slider-val{min-width:54px;font-size:12.5px}
  .slider-marks{gap:5px}
  .sm{padding:3px 6px;font-size:12px}
  .sm-lab,.slider-status{font-size:12px}
  .slider-status{margin-left:0;flex-basis:100%;text-align:right}
  footer{padding:26px 16px 40px}
}

/* ================= 色彩科 · 对照样板 ================= */

.pv-cmp-lab.bad{color:#DC2626}
.pv-cmp-lab.ok{color:#059669}
.pv-cmp-col.bad .pv-cmp-stage{border-color:#FCA5A5}
.pv-cmp-col.ok .pv-cmp-stage{border-color:#6EE7B7}

.cs-row{display:flex;gap:8px;width:100%;flex-wrap:wrap}
.cs-chip{flex:1;min-width:30px;height:42px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cs-text{width:100%;border-radius:8px;padding:16px 14px;font-size:13px;line-height:1.6;font-weight:500}
.cs-btns{display:flex;gap:8px;width:100%;flex-wrap:wrap}
.cs-btn{flex:1;min-width:54px;text-align:center;padding:9px 6px;border-radius:8px;font-size:12.5px;font-weight:600}
.cs-box{width:100%;border-radius:8px;min-height:70px;display:flex;align-items:center;justify-content:center;padding:10px}
.cs-word{font-size:15px;font-weight:700}
.cs-dot{position:absolute;right:14px;top:14px;width:14px;height:14px;border-radius:50%}
.cs-box{position:relative}
.cs-grad{width:100%;height:64px;border-radius:8px}
.cs-status{display:flex;gap:8px;width:100%}
.cs-pill{flex:1;text-align:center;padding:12px 4px;border-radius:8px;color:#fff;font-size:12px;font-weight:700;min-height:42px;display:flex;align-items:center;justify-content:center}

/* ================= 动效科 · 自动循环演示 ================= */

.mv-stage{min-height:140px}
.mv-track{position:relative;width:100%;height:64px;border-radius:8px;
  background:repeating-linear-gradient(90deg,#EEF1F4 0 11px,transparent 11px 22px)}
.mv-ball{position:absolute;top:21px;left:6%;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(140deg,#2DD4BF,#7C3AED);box-shadow:0 2px 6px rgba(15,23,42,.2)}
.mv-lin{animation:mv-go 1.7s linear infinite}
.mv-ease{animation:mv-go 1.7s ease-out infinite}
@keyframes mv-go{0%{left:6%}68%{left:86%}100%{left:86%}}

.mv-pop{width:78%;height:54px;border-radius:10px;background:linear-gradient(140deg,#2DD4BF,#7C3AED)}
.mv-pop-x{animation:mv-popx 1.9s steps(1,end) infinite}
.mv-pop-o{animation:mv-popo 1.9s ease-out infinite}
/* 同上：补 100% 帧，否则结尾也会自己淡回来闪一下 */
@keyframes mv-popx{0%{opacity:0;transform:translateY(8px)}9%{opacity:1;transform:translateY(0)}88%{opacity:1}92%,100%{opacity:0}}
@keyframes mv-popo{0%{opacity:0;transform:translateY(14px)}55%{opacity:1;transform:translateY(0)}88%{opacity:1}92%,100%{opacity:0}}

.mv-box{width:78%;height:54px;border-radius:10px;background:#2563EB}
.mv-tx-x{animation:mv-tx 1.9s steps(1,end) infinite}
.mv-tx-o{animation:mv-tx 1.9s ease infinite}
@keyframes mv-tx{0%{background:#2563EB}50%{background:#F59E0B}100%{background:#2563EB}}

.mv-btn-static{width:62%;text-align:center;padding:13px 0;border-radius:10px;background:#2563EB;color:#fff;font-size:13px;font-weight:600}
.mv-spin{width:46px;height:46px;border-radius:50%;border:4px solid #E2E8F0;position:relative}
.mv-ring{position:absolute;inset:-4px;border-radius:50%;border:4px solid transparent;border-top-color:#2DD4BF;animation:mv-spin 1s linear infinite}
@keyframes mv-spin{to{transform:rotate(360deg)}}

.mv-noise,.mv-calm{width:100%;height:60px;display:flex;gap:10px;align-items:center;justify-content:center}
.mv-noise span{width:30px;height:30px;border-radius:8px;background:#7C3AED;animation:mv-blink .5s steps(1,end) infinite}
.mv-noise span:nth-child(2){animation-delay:.16s;background:#2DD4BF}
.mv-noise span:nth-child(3){animation-delay:.32s;background:#F59E0B}
@keyframes mv-blink{0%,49%{opacity:1;transform:scale(1)}50%,100%{opacity:.15;transform:scale(.7)}}
.mv-calm span{width:34px;height:34px;border-radius:50%;background:#2DD4BF;animation:mv-pulse 2s ease-in-out infinite}
@keyframes mv-pulse{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

.mv-para{position:relative;width:100%;height:62px;border-radius:8px;overflow:hidden;
  background:linear-gradient(120deg,#DBEAFE,#EDE9FE)}
.mv-far,.mv-near{position:absolute;border-radius:6px}
.mv-far{left:14%;top:16px;width:54px;height:30px;background:#93C5FD}
.mv-near{left:46%;top:24px;width:46px;height:26px;background:#F59E0B}
.mv-para-x .mv-far{animation:mv-pax-f 2.4s ease-in-out infinite alternate}
.mv-para-x .mv-near{animation:mv-pax-nx 2.4s ease-in-out infinite alternate}
.mv-para-o .mv-far{animation:mv-pao-f 2.4s ease-in-out infinite alternate}
.mv-para-o .mv-near{animation:mv-pao-n 2.4s ease-in-out infinite alternate}
@keyframes mv-pax-f{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
@keyframes mv-pax-nx{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@keyframes mv-pao-f{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
@keyframes mv-pao-n{from{transform:translateX(-7px)}to{transform:translateX(7px)}}

/* 点击反馈：两侧都是真按钮，差别只在「按下有没有反馈」。
   以前 good 侧是 div + 循环动画，看着会缩但其实按不动——已改成真 :active。 */
.mv-tapwrap{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}
.mv-tap{width:62%;text-align:center;padding:13px 0;border-radius:10px;background:#2563EB;color:#fff;
  font-size:13px;font-weight:600;border:0;font-family:inherit;
  transition:transform .1s ease-out,filter .1s ease-out}
.mv-tap-hint{font-size:12px;color:#5F6672}
/* 两边都是按钮，手型必须一致——差别只在「按下有没有反馈」。
   左边不给手型，用户会以为那压根不是个按钮，对照就废了。 */
.mv-press-x{cursor:pointer}
.mv-press-o{cursor:pointer}
.mv-press-o:active{transform:scale(.97);filter:brightness(.9)}
.mv-press-o:focus-visible{outline:2px solid #2DD4BF;outline-offset:2px}

.mv-slide{width:62%;height:48px;border-radius:10px;background:linear-gradient(140deg,#2DD4BF,#7C3AED)}
.mv-slide-x{animation:mv-slidex 2.1s ease-in-out infinite}
.mv-slide-o{animation:mv-slideo 2.1s ease-in-out infinite}
@keyframes mv-slidex{0%{opacity:0;transform:translateX(58px)}30%,80%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(58px)}}
@keyframes mv-slideo{0%{opacity:0;transform:translateX(-58px)}30%,80%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-58px)}}

.mv-rev{width:62%;height:48px;border-radius:10px;background:linear-gradient(140deg,#0EA5E9,#2563EB)}
.mv-rev-x{animation:mv-revx 2.3s steps(1,end) infinite}
.mv-rev-o{animation:mv-revo 2.3s ease-out infinite}
/* 结尾必须显式写 100% 帧：不写的话浏览器会补一个「用元素自身样式收尾」的隐式
   100% 帧，透明度会在 96%→100% 自己淡回 1，再被下一轮啪地重置成 0——看到的
   就是「卡片消失时闪了一下」。四条都补上了。 */
@keyframes mv-revx{0%,74%{opacity:0;transform:translateY(10px)}76%{opacity:1;transform:translateY(-3px)}80%,90%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(10px)}}
@keyframes mv-revo{0%,54%{opacity:0;transform:translateY(22px)}76%,88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}

.mv-jank{position:absolute;top:46px;left:50%;margin-left:-24px;width:48px;height:48px;border-radius:10px;background:#DC2626}
.mv-jank-o{background:#059669}
.mv-jank-x{animation:mv-jankx 1.8s steps(5,end) infinite}
.mv-jank-o{animation:mv-janko 1.8s ease-in-out infinite alternate}
@keyframes mv-jankx{from{left:8%}to{left:80%}}
@keyframes mv-janko{from{transform:translateX(-70px)}to{transform:translateX(70px)}}

/* ---- 动效科新增：笔记同步的 6 个高级动效 ---- */
/* 3D 倾斜：good 侧真的跟鼠标走（JS 绑定 mousemove），鼠标移开缓慢回正。
   以前是 3.2s 循环关键帧——鼠标怎么动都没反应。 */
.mv3d-persp{display:flex;align-items:center;justify-content:center;width:100%;min-height:84px;perspective:520px}
.mv3d{width:96px;height:62px;border-radius:10px;background:linear-gradient(135deg,#7C3AED,#2DD4BF);
  position:relative;overflow:hidden;transform-style:preserve-3d;
  transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.mv3d-x{transform:rotateX(0deg) rotateY(0deg)}
.mv3d-o{cursor:crosshair}
.mv3d-sh{position:absolute;top:-40%;left:-60%;width:55%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:rotate(18deg);animation:mv-shine 3.2s ease-in-out infinite;pointer-events:none}
.mv3d-hint{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:12px;color:#5F6672}
@keyframes mv-shine{0%{left:-60%}55%,100%{left:120%}}

.mv-morph{width:78px;height:42px;border-radius:21px;background:linear-gradient(140deg,#2DD4BF,#2563EB);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.mv-morph-x{width:78px}
.mv-morph-o{animation:mv-morph 3.4s ease-in-out infinite}
@keyframes mv-morph{0%,15%{width:78px;height:42px;border-radius:21px}45%,65%{width:172px;height:64px;border-radius:12px}85%,100%{width:78px;height:42px;border-radius:21px}}

.mv-shared{width:64px;height:44px;border-radius:9px;background:linear-gradient(140deg,#0EA5E9,#7C3AED)}
.mv-shared-x{animation:mv-sharedx 3.2s steps(1,end) infinite}
.mv-shared-o{animation:mv-sharedo 3.2s ease-in-out infinite}
@keyframes mv-sharedx{0%,38%{transform:scale(1);opacity:1}40%{transform:scale(2);opacity:0}42%{opacity:1}44%,100%{transform:scale(2)}}
@keyframes mv-sharedo{0%,12%{transform:scale(1)}30%,70%{transform:scale(1.9)}85%,100%{transform:scale(1)}}

/* 磁吸吸附 + 滚动计数器：游标位置与码表数字都由 JS 每帧驱动。
   good 侧磁吸到锚点 + 平滑逼近；bad 侧直线跟手、数字硬跳（无过渡）。 */
.mv-mag{position:relative;width:100%;height:56px;cursor:crosshair}
.mv-line{position:absolute;top:30px;left:6%;right:24%;height:2px;background:#CBD5E1;border-radius:2px}
.mv-dot{position:absolute;top:26px;width:9px;height:9px;border-radius:50%;background:#94A3B8;
  margin-left:-4px;transition:background .18s,transform .18s}
.mv-dot.on{background:#7C3AED;transform:scale(1.5)}
/* 竖向对齐：轴线中心 31px（.mv-line 30+2/2）、圆点中心 30.5px。
   游标 top 18 时中心在 25.5 —— 比点和线高了 5px，看着「游标没落在点上」，
   已改成 23。码表同理：top 6 时卡片中心在 20，比轨道轴高 11px；
   而且 .mv-meter 用了 align-items:center，112px 高的数字带被塞进 28px 窗口里
   会各自居中，结果只露出两个数字的各一半 —— 改成 flex-start 后就整行显示了。 */
.mv-cursor{position:absolute;top:23px;left:8%;width:15px;height:15px;border-radius:50%;background:#2563EB;
  box-shadow:0 0 0 4px rgba(37,99,235,.18);margin-left:-7px}
.mv-meter{position:absolute;right:0;top:17px;width:44px;height:28px;border-radius:7px;
  background:#0F172A;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.mv-reel{display:flex;flex-direction:column;color:#2DD4BF;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mv-reel i{height:28px;line-height:28px;font-style:normal;text-align:center;font-size:12px;font-weight:700}
.mv-reel.smooth{transition:transform .26s cubic-bezier(.2,.9,.3,1)}

.mv-drawer-box{position:relative;width:100%;height:100%}
.mv-drawer{position:absolute;left:8%;right:8%;bottom:0;height:72px;border-radius:12px 12px 0 0;background:linear-gradient(140deg,#2DD4BF,#7C3AED)}
.mv-drawer-x{animation:mv-drawerx 3s ease-in-out infinite}
.mv-drawer-o{animation:mv-drawero 3s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes mv-drawerx{0%,20%{transform:translateY(72px)}40%,100%{transform:translateY(0)}}
@keyframes mv-drawero{0%,15%{transform:translateY(72px)}35%{transform:translateY(-10px)}50%{transform:translateY(4px)}62%{transform:translateY(-2px)}72%,100%{transform:translateY(0)}}

/* 流光描边：以前只有 border-color 在变色，并没有「旋转的描边」。
   现在用一块超出卡片的 conic-gradient 在父级里转，中间盖白块，露出的缝隙就是流动的光。 */
.mv-glow{position:relative;width:78px;height:54px;border-radius:12px;background:#fff;
  border:1px solid #E2E8F0;overflow:hidden}
.mv-glow-x{background:#fff}
.mv-glow-o{border-color:transparent;animation:mv-glow 3.6s linear infinite}
.mv-glow-ring{position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;
  background:conic-gradient(from 0deg,transparent 0 68%,#2DD4BF 80%,#7C3AED 92%,transparent 100%);
  animation:mv-rot 2.4s linear infinite;pointer-events:none}
.mv-glow-in{position:absolute;inset:1.5px;border-radius:10.5px;background:#fff}
@keyframes mv-rot{to{transform:rotate(360deg)}}
@keyframes mv-glow{0%{box-shadow:0 0 22px 2px rgba(45,212,191,.28)}
  50%{box-shadow:0 0 30px 5px rgba(245,158,11,.34)}
  100%{box-shadow:0 0 22px 2px rgba(45,212,191,.28)}}

/* ---- 动效科新增：笔记《5 个高级交互动效》的 5 条 ----
   来源：笔记同步助手 2026-09-20《5 个高级交互动效：用 VibeCoding 让 App 与
   小程序告别模板感》。全部是**能上手操作**的真交互：滚轮真滚、圆点真拖、
   封面真点。左右两侧画的是同一个组件，「好 / 坏」的差别定义在 js/viz.js 的
   bind* 里（live 参数走哪个分支），样式上只补一点观感差异。 */

/* 1 · 液态玻璃顶栏（bindLiquidGlass） */
.mv-lg{position:relative;width:100%;height:174px;border-radius:12px;overflow:hidden;
  border:1px solid #E2E8F0;background:#fff}
.mv-lg-scroll{position:absolute;inset:0;overflow-y:scroll;overscroll-behavior:contain;
  scrollbar-width:none}
.mv-lg-scroll::-webkit-scrollbar{display:none}
.mv-lg-cover{height:96px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:#7C8798;letter-spacing:1.5px;
  background:linear-gradient(135deg,#0F172A,#1E293B 55%,#312E81)}
.mv-lg-row{height:42px;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;border-bottom:1px solid #EDEFF2;font-size:12px;color:#334155;background:#fff}
.mv-lg-row span{color:#94A3B8;font-size:12px}
.mv-lg-bar{position:absolute;left:0;right:0;top:0;height:38px;z-index:2;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;
  font-size:12px;font-weight:700;color:#1F2937}
.mv-lg-nav{display:flex;gap:4px}
.mv-lg-nav i{width:13px;height:2px;border-radius:2px;background:currentColor;opacity:.6}
.mv-lg-sheen{position:absolute;top:-20%;left:10%;width:38px;height:140%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:rotate(16deg)}
/* 坏的一侧：一块白塑料板，没有高光、也不跟滚动发生任何关系 */
.mv-lg-x .mv-lg-bar{background:#FFFFFF;border-bottom:1px solid #E5E7EB}
.mv-lg-x .mv-lg-sheen{display:none}
/* 好的一侧：透 + 糊 + 内高光＝有厚度；滚到深色区自己变暗、文字反白 */
.mv-lg-o .mv-lg-bar{background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(10px) saturate(1.8);backdrop-filter:blur(10px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.35)}
.mv-lg-o .mv-lg-bar.on-dark{background:rgba(15,23,42,.44);color:#E8EDF4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.14)}
.mv-lg-o .mv-lg-bar.on-dark .mv-lg-nav i{opacity:.85}

/* 2 · 封面取色环境光晕（bindAmbient）
   色雾两层叠着：换封面时新色那层淡入、旧色淡出，得到「连续过渡、中间不跳色」。
   直接改一个渐变的色标是插不了值的——这就是要两层的原因。 */
.mv-amb{position:relative;width:100%;height:158px;border-radius:12px;overflow:hidden;
  background:#0B1120;display:flex;align-items:center;justify-content:center}
.mv-amb-glow{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;
  border-radius:50%;pointer-events:none;filter:blur(18px);opacity:.62;
  transition:opacity .55s linear;
  background:radial-gradient(circle,var(--c,#7C3AED) 0%,transparent 68%)}
.mv-amb-glow.b{opacity:0}
.mv-amb-cover{position:relative;z-index:1;width:118px;height:80px;border:0;border-radius:10px;
  background-color:#7C3AED;color:#fff;font-family:inherit;font-size:12px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.34);transition:background-color .55s linear}
.mv-amb-cover::after{content:"";position:absolute;inset:8px;border-radius:6px;
  border:1px dashed rgba(255,255,255,.4)}
.mv-amb-hint{position:absolute;left:0;right:0;bottom:7px;text-align:center;
  font-size:12px;color:#64748B}
/* 坏的一侧：光晕写死不动，封面颜色也是硬切（没有 transition） */
.mv-amb-x .mv-amb-cover{transition:none}

/* 3 · 景深分层滚动（bindDepth）：三层斜向错落叠着，位移系数/模糊/亮度全分层
   层的位置按「远层最宽最高、近层最小最靠下」摆，上下各错开 24px 左右——
   要是一层层盖死，滚动时那点速度差根本看不出来。 */
.mv-dep{position:relative;width:100%;height:176px;border-radius:12px;overflow:hidden;
  cursor:ns-resize;background:linear-gradient(180deg,#0B1120,#131C2E)}
.mv-dep-l{position:absolute;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:600;will-change:transform}
.mv-dep-far{width:86%;left:7%;top:26px;height:92px;background:#1E293B;color:#64748B;z-index:1}
.mv-dep-mid{width:68%;left:16%;top:50px;height:80px;background:#334155;color:#CBD5E1;z-index:2}
.mv-dep-near{width:50%;left:25%;top:76px;height:68px;color:#fff;z-index:3;
  background:linear-gradient(135deg,#2DD4BF,#2563EB);box-shadow:0 12px 26px rgba(0,0,0,.42)}
.mv-dep-hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;z-index:4;
  font-size:12px;color:#64748B}
/* 好的一侧：越远越糊、越暗 —— 速度和亮度一起分层，才有前后距离 */
.mv-dep-o .mv-dep-far{filter:blur(3.2px) brightness(.55)}
.mv-dep-o .mv-dep-mid{filter:blur(1.4px) brightness(.78)}
/* 坏的一侧不给 filter，三层一样清一样亮（系数全 1 由 JS 决定） */

/* 4 · 圆柱卷收列表（bindCylinder）：真滚动 + 按离中心多远做形变 */
.mv-cyl{position:relative;width:100%;height:168px;border-radius:12px;overflow:hidden;
  border:1px solid #E2E8F0;background:#fff}
.mv-cyl-scroll{position:absolute;inset:0;overflow-y:scroll;overscroll-behavior:contain;
  padding:10px 12px 40px;scrollbar-width:none}
.mv-cyl-scroll::-webkit-scrollbar{display:none}
.mv-cyl-i{height:42px;margin-bottom:8px;border-radius:9px;background:#F1F5F9;
  color:#475569;font-size:12px;font-weight:600;display:flex;align-items:center;
  padding-left:13px;will-change:transform}
.mv-cyl-o .mv-cyl-i.on{background:linear-gradient(135deg,#0D9488,#2563EB);color:#fff}

/* 5 · 液态粘连拖拽（bindGoo）：桥是用 SVG path 每帧重画的，不是贴图 */
.mv-goo{position:relative;width:100%;height:150px;border-radius:12px;overflow:hidden;
  touch-action:none;background:radial-gradient(circle at 26% 50%,#12233A,#0B1120 70%)}
.mv-goo-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mv-goo-bridge{fill:#0D9488;opacity:0;transition:opacity .12s linear}
/* 原位虚线圆与可拖圆点：left/top 必须与 js/viz.js 里 bindGoo 的 home 一致 */
.mv-goo-base{position:absolute;left:44px;top:75px;width:34px;height:34px;
  margin:-17px 0 0 -17px;border-radius:50%;background:rgba(13,148,136,.16);
  border:1px dashed rgba(45,212,191,.55)}
.mv-goo-dot{position:absolute;left:44px;top:75px;width:34px;height:34px;z-index:2;
  margin:-17px 0 0 -17px;border-radius:50%;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 34% 30%,#5EEAD4,#0D9488);
  box-shadow:0 6px 16px rgba(13,148,136,.4)}
.mv-goo-hint{position:absolute;left:0;right:0;bottom:7px;text-align:center;
  font-size:12px;color:#64748B;pointer-events:none}

/* ---- 动效科 · 播放控制条 ---- */
.mv-stage{position:relative}
.mv-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--inset-line)}
.mv-ctl-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:8px;
  border:1px solid var(--inset-line);background:var(--inset-bg);color:var(--inset-fg);font-family:inherit;
  font-size:12px;font-weight:600;cursor:pointer;transition:.16s;white-space:nowrap;
  box-shadow:var(--inset-sh)}
.mv-ctl-btn:hover{border-color:var(--mint-line);color:var(--text)}
.mv-ctl-btn.on{background:var(--mint);color:var(--on-mint);border-color:var(--mint-line)}
.mv-ctl-btn svg{flex:0 0 auto}
.mv-ctl-note{font-size:12px;color:#5F6672;flex:1 1 100%;line-height:1.5}
.mv-stage.mv-paused *{animation-play-state:paused!important}
/* JS 没接管时（理论上不会发生，整站内容都是 JS 渲染的）也要守规范 */
@media(prefers-reduced-motion:reduce){
  .mv-stage:not(.mv-live) *{animation-play-state:paused!important}
}

/* ---- 渐变词典可视化（整块长在浅灰台上，同样走 --inset-*） ---- */
.pv-grad{width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--inset-line)}
.pv-grad-box{height:150px;width:100%}
.pv-grad-meta{padding:12px 14px;background:var(--inset-bg);border-top:1px solid var(--inset-line)}
.pv-grad-name{font-size:14px;font-weight:600;color:var(--text)}
.pv-grad-en{font-size:12px;color:var(--mint);margin-left:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pv-grad-css{margin-top:7px;font-size:12px;color:var(--inset-fg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--inset-2);padding:7px 10px;border-radius:7px;white-space:pre-wrap;word-break:break-all;line-height:1.5}

/* ============================================================
   药房 · 处方卡（以处方为主体，其余内容降级为关联项）
   与分诊台刻意的反差：分诊台是「3 列 / 症状在上」，
   药房是「2 列 / 处方在上、字更大 / 能就地复制」
   ============================================================ */

/* 筛选行的小标签 + 第二行（剂型） */
.flab{
  font-size:12px;color:var(--text-3);letter-spacing:.6px;
  align-self:center;margin-right:2px;white-space:nowrap;
}
.filters.rxfilters{margin:-12px 0 26px}
.rxfb{
  background:var(--bg-2);border:1px solid var(--line);
  color:var(--text-2);font-family:inherit;font-size:13.5px;
  padding:8px 17px;border-radius:9px;cursor:pointer;transition:.16s;
}
.rxfb:hover{color:var(--text);border-color:var(--line-2)}
.rxfb.on{background:var(--mint-dim);border-color:var(--mint-line);color:var(--mint);font-weight:500}
.rxm-hint{
  font-size:12.5px;color:var(--text-3);align-self:center;
  margin-left:auto;white-space:nowrap;
}
@media(max-width:1040px){.rxm-hint{display:none}}

/* 处方卡列表：2 列，比分诊台的 3 列更宽，容得下整句话 */
.rx-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rxcard{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;
  cursor:pointer;transition:.18s;text-align:left;
  display:flex;flex-direction:column;min-width:0;
  box-shadow:var(--card-sh);
}
.rxcard:hover{border-color:var(--mint-line);background:var(--bg-3);transform:translateY(-2px)}
.rxcard:hover .rc-open{color:var(--mint);gap:8px}
.rxcard-top{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.rxno{
  font-family:var(--mono);font-size:12px;color:var(--text-3);
  letter-spacing:.5px;margin-right:2px;
}

/* 关联项：主诉（小字、退到灰） */
.rxcard-chief{
  font-size:12.5px;color:var(--text-3);line-height:1.55;
  padding-left:10px;border-left:1px solid var(--line-2);
  margin-bottom:13px;
}

/* ★ 主体：处方正文 */
.rxcard-text{
  font-size:14.5px;line-height:1.78;color:var(--text);
  background:var(--bg);border-left:2px solid var(--mint);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:14px 16px;margin-bottom:16px;
}

/* 关联项：诊断结论 + 动作 */
.rxcard-foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.rxcard-diag{min-width:0}
.rc-term{font-size:13px;color:var(--mint);font-weight:500}
.rc-css{
  font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rxcard-act{display:flex;align-items:center;gap:9px;flex-shrink:0}
.rc-copy{
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);
  font-family:inherit;font-size:12px;padding:6px 12px;border-radius:8px;
  cursor:pointer;transition:.16s;display:flex;align-items:center;gap:5px;
}
.rc-copy:hover{background:var(--mint-dim);border-color:var(--mint-line);color:var(--mint)}
.rc-copy.done{background:#15803D;border-color:#15803D;color:#fff}
.rc-open{
  font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:5px;
  transition:.18s;white-space:nowrap;
}

/* ================= 文字科 · 阶梯演示 ================= */

.ts-list{width:100%;display:flex;flex-direction:column}
.ts-row{display:flex;align-items:baseline;gap:11px;padding:8px 0;
  border-bottom:1px dashed var(--preview-line)}
.ts-row:last-child{border-bottom:0}
.ts-meta{flex:0 0 72px;text-align:right}
.ts-name{display:block;font-size:12px;font-weight:700;color:#3D4550;letter-spacing:.3px}
.ts-px{display:block;font-size:12px;color:#5F6672;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ts-text{color:#1F2937;font-weight:600;line-height:1.25;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ================= 对齐科 · 对齐切换演示 ================= */

.al-box{width:100%;min-height:134px;background:#fff;border:1px dashed var(--preview-line);
  border-radius:10px;padding:14px;display:flex;position:relative}
.al-inner{width:78%;color:#3D4550;font-size:12.5px;line-height:1.7;transition:.18s}
.al-inner .al-title{font-size:13.5px;font-weight:700;color:#1F2937;margin-bottom:5px}
.al-inner p{margin:0}
.al-badge{position:absolute;right:10px;bottom:8px;font-size:12px;color:#B6BDC6;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* 对照组件里的自定义片段（少数没法归类的场景走这个口子） */
.cmp-html{width:100%;min-width:0}
/* 防御：对照台是白底，若片段未自带颜色，默认给深色字，避免继承深色主题变量而看不见 */
.pv-cmp-stage .cmp-html{color:#1F2937}

/* 响应式 */
@media(max-width:1040px){
  .rx-list{grid-template-columns:1fr}
}
@media(max-width:680px){
  .rxcard{padding:17px}
  .rxcard-text{font-size:14px;padding:12px 14px}
  .rxcard-act{gap:7px}
  .rc-open{display:none}
}
@media(max-width:400px){
  .rxcard{padding:15px}
  .rxcard-text{font-size:13.5px;padding:11px 13px}
  .rc-copy{padding:6px 10px}
  .rxcard-foot{gap:8px}
}

/* ================= 新功能 · 病历本 / 感觉指认 / 搜索洞察 ================= */

/* 处方卡「加入病历本」 */
.rc-add{
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);
  font-family:inherit;font-size:12px;padding:6px 12px;border-radius:8px;
  cursor:pointer;transition:.16s;display:flex;align-items:center;gap:4px;white-space:nowrap;
}
.rc-add:hover{border-color:var(--mint-line);color:var(--mint)}
.rc-add.on{background:var(--mint-dim);border-color:var(--mint-line);color:var(--mint);font-weight:500}

/* 零结果候选 */
.sug{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.sug-btn{
  background:var(--bg-3);border:1px solid var(--line);color:var(--text-2);
  font-family:inherit;font-size:12.5px;padding:5px 13px;border-radius:20px;cursor:pointer;transition:.16s;
}
.sug-btn:hover{border-color:var(--mint-line);color:var(--mint);background:var(--mint-dim)}

/* 首页「凭感觉找」 */
.feelings{display:flex;flex-wrap:wrap;gap:8px}
.feel-btn{
  background:var(--bg-2);border:1px solid var(--line);color:var(--text-2);
  font-family:inherit;font-size:13.5px;padding:8px 18px;border-radius:20px;cursor:pointer;transition:.16s;
}
.feel-btn:hover{border-color:var(--mint-line);color:var(--mint);background:var(--mint-dim)}
.feel-results{margin-top:16px}
.feel-cap{font-size:13px;color:var(--text-2);margin-bottom:12px}
.feel-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.feel-item{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;cursor:pointer;text-align:left;font-family:inherit;color:inherit;
  display:flex;align-items:center;gap:10px;transition:.16s;
  box-shadow:var(--card-sh);
}
.feel-item:hover{border-color:var(--mint-line);background:var(--bg-3)}
.feel-chief{font-size:12.5px;color:var(--text-3);line-height:1.5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feel-none{color:var(--text-3);font-size:13px;padding:8px 0}

/* 病历本浮条 */
.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--chrome-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
  transform:translateY(120%);transition:transform .26s cubic-bezier(.2,.9,.3,1);
  padding:12px 18px;
  box-shadow:var(--bar-sh);
}
.cartbar.on{transform:none}
.cartbar-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:14px}
.cartbar-txt{font-size:13.5px;color:var(--text-2)}
.cartbar-txt b{color:var(--mint);font-size:15px}
.cartbar-btns{margin-left:auto;display:flex;gap:10px}
.cartbar-gen{
  background:var(--mint);color:var(--on-mint);border:none;font-family:inherit;font-size:13px;font-weight:600;
  padding:10px 18px;border-radius:9px;cursor:pointer;transition:.16s;white-space:nowrap;
}
.cartbar-gen:hover{background:var(--mint-2)}
.cartbar-clear{
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);
  font-family:inherit;font-size:13px;padding:10px 16px;border-radius:9px;cursor:pointer;transition:.16s;
}
.cartbar-clear:hover{color:var(--text);border-color:var(--line-2);background:var(--bg-4)}

/* 搜索洞察 */
.ins-stat{display:flex;flex-wrap:wrap;gap:10px}
.ins-stat span{
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 16px;font-size:13px;color:var(--text-2);
  box-shadow:var(--card-sh);
}
.ins-stat b{color:var(--mint);font-size:17px;margin-right:4px}
.ins-tip{font-size:13px;color:var(--text-3);line-height:1.7;margin-top:12px}
.ins-clear{
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);
  font-family:inherit;font-size:13px;padding:9px 16px;border-radius:9px;cursor:pointer;transition:.16s;
}
.ins-clear:hover{color:var(--red);border-color:var(--red-line)}

/* 页脚洞察入口 */
.foot-links{margin-top:10px}
.foot-link{
  background:none;border:1px solid var(--line);color:var(--text-3);
  font-family:inherit;font-size:12px;padding:5px 14px;border-radius:20px;cursor:pointer;transition:.16s;
}
.foot-link:hover{color:var(--mint);border-color:var(--mint-line)}

/* 页脚作者署名（footer 里最底下那一块） */
.foot-author{
  margin:22px auto 0;max-width:1200px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 16px;line-height:1.6;
}
.foot-author .foot-role{color:var(--text-3)}
.foot-author .foot-ip{
  color:var(--mint);border:1px solid var(--mint-line);border-radius:20px;
  padding:3px 12px;font-size:12px;white-space:nowrap;
}

/* 弹层焦点可见性 */
.sheet:focus{outline:none}
.sheet .close:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

@media(max-width:680px){
  .feel-list{grid-template-columns:1fr}
  .cartbar-txt{font-size:12.5px}
  .cartbar-gen{padding:9px 14px;font-size:12.5px}
  .cartbar-clear{padding:9px 12px;font-size:12.5px}
  .ins-stat span{padding:8px 12px;font-size:12px}
}

/* ================= 康复训练 =================
   分诊台／药房是「查」，这里是「练」：右边出题（三张处方挑一张），
   左边画布当场演出 AI 会怎么理解你这句话。
   配色归属：外壳（面板、选项、反馈框）跟主题；画布里的组件是「病历本身」，
   固定浅色，两个主题共用——所以 .rb-canvas 里一律写死浅色值，不要换成变量。 */

/* ---- 进度（page-head 右侧，与两页的搜索框同位） ---- */
.rb-progress{
  flex:0 0 218px;width:218px;margin-top:6px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--card-sh);
}
.rb-prog-top{display:flex;align-items:baseline;gap:5px}
.rb-prog-top b{font-size:27px;font-weight:700;color:var(--mint);line-height:1;letter-spacing:-.5px}
.rb-prog-top span{font-size:12.5px;color:var(--text-3)}
.rb-prog-top i{font-style:normal}
.rb-prog-lab{font-size:12px;font-weight:600;letter-spacing:1.2px;color:var(--text-3);text-transform:uppercase;margin-top:7px}
.rb-prog-bar{height:5px;border-radius:3px;background:var(--bg-4);margin-top:11px;overflow:hidden}
.rb-prog-bar i{
  display:block;height:100%;width:0;background:var(--mint);border-radius:3px;
  transition:width .36s cubic-bezier(.2,.9,.3,1);
}
.rb-prog-note{font-size:12px;color:var(--text-3);line-height:1.5;margin-top:10px}
/* 覆盖度：第二根细条 = 已出题 / 全站症状数（1:1 的靶子）。
   跟上面那根不是一回事——上面是「我练了多少」，这里是「题库铺到哪了」。 */
.rb-prog-cov{font-size:12px;color:var(--text-3);line-height:1.5;margin-top:12px}
.rb-prog-cov b{font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.rb-prog-bar.mini{height:3px;margin-top:7px}
.rb-prog-bar.mini i{background:var(--mint-2);opacity:.8}

/* ---- 左右：左画布 / 右出题 ---- */
.rb-wrap{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:18px;align-items:stretch;margin-top:28px;
}
/* 两栏等高：诊断卡那套老办法——面板吃满行高、画布吃满剩余高度，
   内容自然居中；写死 min-height 会被反馈区的长短打脸。 */
.rb-panel{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--card-sh);overflow:hidden;
  display:flex;flex-direction:column;
}
.rb-panel-head{
  display:flex;align-items:center;gap:12px;padding:13px 18px;
  border-bottom:1px solid var(--line);
}
.rb-panel-tag{font-size:13px;font-weight:600;letter-spacing:.8px;color:var(--text-2);text-transform:uppercase}
.rb-reset{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--text-3);
  font-family:inherit;font-size:12px;padding:5px 12px;border-radius:8px;cursor:pointer;transition:.16s;
}
.rb-reset:hover{color:var(--text);background:var(--bg-4);border-color:var(--line-2)}
.rb-reset svg{width:14px;height:14px;flex:0 0 auto}
.rb-reset:hover svg{animation:rb-spin .55s cubic-bezier(.2,.9,.3,1)}

/* ---- 画布（浅灰台，跟弹层里的 .exam 同源） ---- */
.rb-canvas{
  background:var(--preview-bg);flex:1;min-height:296px;padding:28px 24px;
  display:flex;align-items:center;justify-content:center;
  overflow-x:clip;      /* 同 .pv-stage：只收口，不生成滚动容器 */
}
.rb-foot{padding:13px 18px}
.rb-log{font-size:12.5px;line-height:1.7;color:var(--text-3)}
.rb-log b{color:var(--text-2);font-weight:600}
.rb-log code{
  font-family:var(--mono);font-size:12px;color:var(--text-2);
  background:var(--bg-3);border:1px solid var(--line);border-radius:5px;padding:1px 6px;
}
.rb-log.ok{color:var(--mint)}

/* 标位：闪两下就撤，不留框（理由见 js/rehab.js 的 mark/flash）。
   这里只管「线长什么样」，颜色一律 transparent——闪动由 JS 打 WAAPI 上去，
   不能让动画走元素自己的 animation 简写：处方里可能自带 animation
   （第 6 题那张「让它一直转」的错处方就是），内联样式会把类上的 CSS 动画整个抢掉，
   闪动就永远不跑，只剩一个擦不掉的框。颜色留 transparent，重渲染时也不会冒出静态框。
   仍然一律用 outline：box-shadow 会被「阴影科」那道题自己占用，别抢。 */
.rb-hit{outline:2px solid transparent;outline-offset:3px}
.rb-miss{outline:2px dashed transparent;outline-offset:3px}
.rb-should{outline:2px dashed transparent;outline-offset:3px}
@keyframes rb-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---- 画布里的真组件（固定浅色，两个主题共用） ---- */
.rb-card,.rb-article,.rb-acard,.rb-flat{
  background:#fff;border:1px solid #D3D7DD;border-radius:12px;
  padding:18px;width:100%;max-width:320px;color:#1F2937;box-sizing:border-box;
  transition:all .28s cubic-bezier(.2,.9,.3,1);
}
.rb-thumb{
  height:92px;border-radius:8px;margin-bottom:14px;position:relative;
  background:linear-gradient(135deg,#E7EAF0,#D5DBE3);
}
.rb-thumb::after{
  content:"商品图";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:1px;color:#95A1AF;
}
.rb-t{font-size:14px;font-weight:600;line-height:1.45;color:#1F2937}
.rb-sub{font-size:12px;color:#6B7480;line-height:1.6;margin-top:5px}
.rb-price{font-size:18px;font-weight:700;color:#B45309;margin-top:10px;letter-spacing:.3px}
.rb-btnrow{display:flex;gap:10px;margin-top:16px}
.rb-btn{
  font-family:inherit;font-size:12.5px;font-weight:600;padding:9px 16px;
  border-radius:3px;border:1px solid transparent;cursor:pointer;transition:all .22s;
}
.rb-btn.ghost{background:#fff;border-color:#CBD2DA;color:#3D4550}
.rb-btn.solid{background:#0F766E;border-color:#0F766E;color:#fff}
/* 「点击反馈」那道题的正确处方：必须真的能按，不是 GIF 式假动作 */
.rb-live{transition:background .15s,transform .15s,border-color .15s}
.rb-btn.solid.rb-live:hover{background:#0B5F59;border-color:#0B5F59}
.rb-btn.solid.rb-live:active{transform:scale(.97)}

.rb-list{display:flex;flex-direction:column;gap:0;width:100%;max-width:340px}
.rb-lcard{
  background:#fff;border:1px solid #D3D7DD;border-radius:10px;padding:14px 16px;
  display:flex;flex-direction:column;gap:4px;
  transition:all .28s cubic-bezier(.2,.9,.3,1);
}
.rb-lcard b{font-size:13px;font-weight:600;color:#1F2937}
.rb-lcard span{font-size:12px;color:#6B7480}

.rb-fh{font-size:12.5px;color:#6B7480}
.rb-num{font-size:34px;font-weight:700;color:#111827;line-height:1.1;margin:8px 0 4px;letter-spacing:-.5px}
.rb-fs{font-size:12px;color:#15803D}

.rb-h{font-size:15px;font-weight:600;color:#1F2937;line-height:1.4}
.rb-p{font-size:13.5px;color:#4B5563;line-height:1.65;margin-top:8px}
.rb-cap{font-size:12.5px;color:#7C8592;margin-top:10px}
.rb-acard{display:flex;flex-direction:column;gap:10px}
.rb-acard .rb-h{width:100%}
.rb-acard .rb-p{width:100%;margin-top:0;text-align:center}
.rb-acard .rb-btn{align-self:flex-end}

/* ---- 第 35 轮新增场景（07-18 题）· 一律固定浅色，理由同 .rb-canvas ---- */
/* 07 色彩科·对比度：说明文字浅到几乎看不见，正确项把它压深 */
.rb-note{font-size:12.5px;line-height:1.65;margin-top:6px;color:#CBD2DA}

/* 08 色彩科·颜色数量：一张卡五种色（颜色写在场景 html 里） */
.rb-cc-tag{display:inline-block;font-size:12px;font-weight:600;color:#fff;
  padding:3px 9px;border-radius:999px;margin-top:8px}
.rb-cc-price{font-size:20px;font-weight:700;line-height:1.2;margin-top:8px}

/* 09 色彩科·双通道：状态只有圆点有颜色，文字默认藏着 */
.rb-srow{display:flex;align-items:center;gap:9px;padding:9px 0;
  border-top:1px solid #EDF0F3;font-size:13px;color:#3D4550}
.rb-srow:first-of-type{border-top:0}
.rb-srow b{flex:1;font-weight:500}
.rb-sdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.rb-stag{display:none;font-size:12px;font-weight:600;color:#3D4550}
.rb-srow.rb-show .rb-stag{display:inline-flex}
.rb-skey{display:none;margin-top:11px;padding-top:10px;border-top:1px dashed #DCE1E7;
  font-size:12px;color:#6B7480;line-height:1.7}
.rb-card.rb-key-on .rb-skey{display:block}

/* 10 交互科·控件类型 + 17 文字科·占位文字：共用表单外壳 */
.rb-form{display:flex;flex-direction:column;gap:9px;width:100%;max-width:320px}
.rb-flabel{font-size:12.5px;font-weight:600;color:#3D4550}
.rb-off{display:none}
.rb-label-on .rb-off{display:block}
.rb-selwrap{display:block}
.rb-sel{font-family:inherit;font-size:13px;color:#3D4550;padding:10px 11px;
  border:1px solid #CBD2DA;border-radius:8px;background:#fff;width:100%;box-sizing:border-box}
.rb-radios{display:none;flex-direction:column;gap:8px}
.rb-radio{display:flex;align-items:center;gap:9px;font-size:13px;color:#3D4550;
  border:1px solid #CBD2DA;border-radius:8px;padding:9px 11px;background:#fff}
.rb-radio i{width:14px;height:14px;border-radius:50%;border:2px solid #0F766E;
  flex:0 0 auto;position:relative}
.rb-radio i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#0F766E}
.rb-radio-sel{border-color:#0F766E;background:#F0FDFA}
.rb-radio-on .rb-selwrap{display:none}
.rb-radio-on .rb-radios{display:flex}
.rb-inp{font-family:inherit;font-size:13px;color:#1F2937;padding:11px;
  border:1px solid #CBD2DA;border-radius:8px;background:#fff;width:100%;box-sizing:border-box}
.rb-inp::placeholder{color:var(--ph,#B4BCC6)}
.rb-hint{font-size:12px;color:#7C8592;line-height:1.6}

/* 11 交互科·二次确认强度：全屏弹窗 ↔ 就地气泡 */
.rb-panel2{position:relative;width:100%;max-width:340px;min-height:200px;
  background:#fff;border:1px solid #D3D7DD;border-radius:12px;padding:16px;box-sizing:border-box}
.rb-mrow{display:flex;flex-direction:column;gap:5px}
.rb-mrow b{font-size:13px;font-weight:600;color:#1F2937}
.rb-mrow span{font-size:12px;color:#6B7480;line-height:1.65}
.rb-confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:rgba(15,23,42,.34)}
.rb-modal{background:#fff;border-radius:10px;padding:16px 18px;width:80%;
  box-shadow:0 16px 40px rgba(15,23,42,.24);box-sizing:border-box}
.rb-mtitle{font-size:13px;font-weight:600;color:#1F2937;line-height:1.55}
.rb-mbtns{display:flex;gap:9px;justify-content:flex-end;margin-top:14px}
.rb-btn.danger{background:#fff;border-color:#E4A3A3;color:#B91C1C}
.rb-popconf{display:none;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#0F766E}
.rb-light-on .rb-confirm{position:static;inset:auto;background:transparent;
  justify-content:flex-end;margin-top:14px}
.rb-light-on .rb-modal{display:none}
.rb-light-on .rb-popconf{display:inline-flex}

/* 12 交互科·空状态：默认整片空白 */
.rb-empty{width:100%;max-width:340px;min-height:200px;background:#fff;
  border:1px solid #D3D7DD;border-radius:12px;padding:16px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center}
.rb-ebare{width:100%;height:120px}
.rb-efull,.rb-emin{display:none}
.rb-efull{flex-direction:column;align-items:center;gap:9px;text-align:center}
.rb-eico{width:42px;height:42px;border-radius:10px;background:#EEF1F4;border:1px dashed #C9D0D8}
.rb-efull b{font-size:13.5px;font-weight:600;color:#1F2937}
.rb-efull span{font-size:12px;color:#6B7480;line-height:1.65}
.rb-efull .rb-btn{margin-top:3px}
.rb-emin{font-size:12.5px;color:#9AA3AE}
.rb-full-on .rb-ebare,.rb-min-on .rb-ebare{display:none}
.rb-full-on .rb-efull{display:flex}
.rb-min-on .rb-emin{display:block}

/* 13 风格科·风格命名：故意做「土」——直角、灰边、紧留白、零阴影 */
.rb-plain{background:#fff;border:1px solid #C9CFD6;border-radius:0;padding:12px;
  width:100%;max-width:320px;box-sizing:border-box}
.rb-plain-t{font-size:14px;font-weight:400;color:#333;line-height:1.4}
.rb-plain-n{font-size:12.5px;color:#555;line-height:1.5;margin-top:6px}
.rb-plain-b{margin-top:10px;font-family:inherit;font-size:12.5px;padding:7px 14px;
  border:1px solid #C9CFD6;border-radius:0;background:#EFEFEF;color:#333;cursor:pointer}

/* 14 动效科·只动 transform：上浮默认走 margin（会推挤下方卡片）。
   三个变体一律走类名、**不用内联**：内联的优先级高过样式表里的 :hover，
   一旦内联写了 margin-top，hover 规则就永远进不来，病灶演示会当场失效
   （这正是本轮踩到的坑）。hover 规则用「两个类 + :hover」把优先级提到 (0,3,0)。 */
.rb-hoverable{margin-top:6px;transition:margin .3s ease}
.rb-hoverable:hover{margin-top:0}
.rb-hoverable.rb-jank-more{margin-top:16px}
.rb-hoverable.rb-jank-more:hover{margin-top:0}
.rb-hoverable.rb-jank-slow{transition:margin 1.2s ease}
.rb-hoverable.rb-jank-slow:hover{margin-top:0}
.rb-hoverable.rb-jank-ok{transition:transform .2s ease-out}
.rb-hoverable.rb-jank-ok:hover{margin-top:6px;transform:translateY(-6px)}

/* 15 动效科·动效克制：一直在闪 */
@keyframes rb-blink{0%,49%{opacity:1}50%,100%{opacity:.18}}
.rb-blink{animation:rb-blink .5s steps(1,end) infinite}
.rb-flash-price{font-size:20px;font-weight:700;color:#B45309;margin-top:8px}

/* 16 文字科·关键数字：默认跟正文差不多大 */
.rb-bn{font-size:19px;font-weight:600;color:#1F2937;line-height:1.25;margin:8px 0 4px}
.rb-bnu{font-size:13px;font-weight:600;color:#6B7480;margin-left:2px}

/* 18 阴影科·悬浮反馈：默认 hover 毫无反应 */
.rb-lift-ok{transition:box-shadow .18s ease-out,transform .18s ease-out}
.rb-lift-ok:hover{box-shadow:0 12px 26px rgba(15,23,42,.14);transform:translateY(-3px)}
.rb-border-hover:hover{border-color:#0F766E;border-width:2px}

/* ---- 第 39 轮新增载体（形状 / 阴影 / 对齐三科）· 一律固定浅色，理由同 .rb-canvas ----
   这批载体 HTML 是「没病」的正确状态，病灶由题目数据的 bad 注入。
   所以同一块界面能重复用：.rb-sdstage 承载 4 道阴影题、.rb-prose 承载 2 道对齐题。 */

/* 顶部横幅（单边圆角：方向感本身就是语言） */
.rb-banner{
  width:100%;max-width:340px;box-sizing:border-box;
  background:#ECFDF5;border:1px solid #A7F3D0;border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:5px;
  transition:border-radius .28s cubic-bezier(.2,.9,.3,1);
}
.rb-bt{font-size:13px;font-weight:600;color:#065F46}
.rb-bd{font-size:12.5px;color:#047857;line-height:1.6}

/* 三行列表项（分隔线：空间紧张时用线分开，而不是加距离） */
.rb-rows{
  width:100%;max-width:340px;box-sizing:border-box;
  background:#fff;border:1px solid #D3D7DD;border-radius:12px;padding:6px 16px;
  display:flex;flex-direction:column;
}
.rb-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 0;transition:border-color .28s ease,padding .28s ease;
}
.rb-row span{font-size:13px;color:#3D4550}
.rb-row b{font-size:12.5px;font-weight:600;color:#0F766E}

/* 浮层 + 背后有内容（毛玻璃：整体透明 ≠ 背景模糊） */
.rb-gstage{
  position:relative;width:100%;max-width:340px;height:186px;box-sizing:border-box;
  border-radius:12px;overflow:hidden;background:#F8FAFC;border:1px solid #D3D7DD;
}
.rb-gband{
  position:absolute;left:0;right:0;top:0;height:104px;
  background:linear-gradient(118deg,#5EEAD4,#38BDF8 52%,#818CF8);
}
.rb-gtitle{position:absolute;left:18px;top:24px;font-size:19px;font-weight:700;color:#0F172A;letter-spacing:-.2px}
.rb-gpanel{
  position:absolute;left:18px;right:18px;top:60px;box-sizing:border-box;
  border-radius:12px;border:1px solid rgba(255,255,255,.55);padding:12px 14px;
  display:flex;flex-direction:column;gap:3px;
  transition:background .28s ease,backdrop-filter .28s ease;
}
.rb-gpt{font-size:13px;font-weight:600;color:#0F172A}
.rb-gps{font-size:12.5px;color:#334155}

/* 滚动区 + 自绘滚动条（不靠原生滚动条：本机 Chrome 是覆盖式的，原生条画不出来） */
.rb-swrap{
  width:100%;max-width:340px;height:172px;box-sizing:border-box;
  background:#fff;border:1px solid #D3D7DD;border-radius:12px;
  display:flex;overflow:hidden;
}
.rb-sbody{flex:1;min-width:0;padding:10px 0 10px 14px;overflow:hidden}
.rb-sline{font-size:12.5px;color:#3D4550;line-height:1.6;padding:8px 0;border-bottom:1px solid #F1F3F6}
.rb-sline:last-child{border-bottom:0}
.rb-strack{
  flex:0 0 16px;background:#F1F3F6;box-sizing:border-box;padding:2px;
  display:flex;justify-content:flex-end;
  transition:background .28s ease;
}
.rb-sthumb{
  display:block;width:12px;height:58px;border-radius:6px;background:#B9C0C9;
  transition:width .28s ease,background .28s ease;
}

/* 图文卡（宽高比：图被压扁 = 比例被破坏，不是尺寸不对）。
   里面那个圆用 SVG + preserveAspectRatio="none" 画——容器比例一变，圆就变椭圆，
   「变形」这件事才真的看得见（普通 div 是定尺寸盒子，压不扁）。 */
.rb-photo{
  width:100%;aspect-ratio:16/9;border-radius:8px;margin-bottom:14px;overflow:hidden;
  background:linear-gradient(135deg,#BAE6FD,#38BDF8);
  transition:aspect-ratio .28s ease;
}
.rb-photo svg{display:block;width:100%;height:100%}

/* 阴影展示台：偏移 / 模糊 / 扩散 / 颜色四个参数都在这张卡上分头出题 */
.rb-sdstage{
  width:100%;max-width:340px;box-sizing:border-box;padding:38px 26px;border-radius:12px;
  background:#EEF1F5;display:flex;align-items:center;justify-content:center;
}
.rb-sdcard{
  width:100%;max-width:232px;box-sizing:border-box;background:#fff;border-radius:12px;
  padding:18px;display:flex;flex-direction:column;gap:4px;
  transition:box-shadow .28s ease;
}
.rb-sdt{font-size:12.5px;font-weight:600;color:#1F2937}
.rb-sds{font-size:12px;color:#6B7480}

/* 下拉菜单压在下层列表上（层级叠放：z-index 有前提条件） */
.rb-ddwrap{
  position:relative;width:100%;max-width:340px;box-sizing:border-box;
  background:#fff;border:1px solid #D3D7DD;border-radius:12px;padding:14px 16px;
}
.rb-ddbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rb-ddbar span{font-size:12.5px;color:#6B7480}
.rb-ddbtn{padding:4px 11px;font-size:12px}
.rb-ddmenu{
  position:absolute;right:16px;top:46px;width:114px;box-sizing:border-box;
  background:#fff;border:1px solid #D3D7DD;border-radius:8px;padding:4px;
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.rb-dditem{font-size:12.5px;color:#3D4550;padding:6px 9px;border-radius:6px}
.rb-dditem:first-child{background:#F1F3F6}
.rb-ddlist{position:relative;margin-top:15px;background:#fff}
.rb-ddrow{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid #F1F3F6}
.rb-ddrow:last-child{border-bottom:0}
.rb-ddrow b{font-size:12.5px;font-weight:600;color:#1F2937}
.rb-ddrow span{font-size:12px;color:#6B7480}

/* 等高卡片行（垂直居中：容器比内容高时内容贴不贴顶） */
.rb-eqrow{display:flex;gap:10px;width:100%;max-width:340px;align-items:stretch}
.rb-eqcard{
  flex:1;min-width:0;min-height:120px;box-sizing:border-box;background:#fff;
  border:1px solid #D3D7DD;border-radius:10px;padding:14px;
  display:flex;flex-direction:column;gap:4px;
  transition:justify-content .3s ease;
}
.rb-eqcard b{font-size:12.5px;font-weight:600;color:#1F2937}
.rb-eqcard span{font-size:12px;color:#6B7480}

/* 长文两段（两端对齐的「河流」/ 段首引号的视觉缩进） */
.rb-prose{
  width:100%;max-width:340px;box-sizing:border-box;background:#fff;
  border:1px solid #D3D7DD;border-radius:12px;padding:16px 18px;
}
.rb-prose p{
  margin:0 0 10px;font-size:13px;line-height:1.85;color:#3D4550;
  transition:text-align .28s ease;
}
.rb-prose p:last-child{margin-bottom:0}
.rb-quote{display:inline-block;transition:margin .28s ease}

/* 轨道 + 内容块（靠固定数值凑的居中，一改就歪） */
.rb-track{
  width:100%;max-width:340px;box-sizing:border-box;
  background:#F8FAFC;border:1px dashed #D3D7DD;border-radius:10px;padding:14px;
}
.rb-cbox{
  width:132px;box-sizing:border-box;padding:16px 0;text-align:center;
  border-radius:8px;background:#fff;border:1px solid #D3D7DD;
  font-size:12.5px;color:#3D4550;transition:margin .3s ease;
}

/* 图标 + 文字行（默认基线对齐，图标看着就是歪的） */
.rb-iline{display:block;font-size:13px;color:#3D4550;line-height:2.05}
.rb-iline + .rb-iline{margin-top:2px}

/* 三行数值表（数字左对齐，位数不同就比不出大小） */
.rb-tbl{
  width:100%;max-width:340px;box-sizing:border-box;background:#fff;
  border:1px solid #D3D7DD;border-radius:12px;padding:6px 16px;
  transition:font-variant-numeric .28s ease;
}
.rb-trow{
  display:flex;align-items:center;gap:14px;padding:9px 0;
  border-bottom:1px solid #F1F3F6;font-size:12.5px;color:#3D4550;
}
.rb-trow:last-child{border-bottom:0}
.rb-trow > span:first-child{flex:0 0 76px}
.rb-trow > span:last-child{flex:1}
.rb-thead{color:#8A9199;font-size:12px}

/* 三行表单（标签宽度自适应时，输入框起点会飘） */
.rb-frow{display:flex;align-items:center;gap:10px}
.rb-frow + .rb-frow{margin-top:9px}
.rb-flab{font-size:12.5px;color:#5B6470;white-space:nowrap}
.rb-finp{
  flex:1;min-width:0;height:30px;box-sizing:border-box;
  border:1px solid #D3D7DD;border-radius:6px;background:#fff;
  transition:flex-basis .28s ease,text-align .28s ease;
}

/* 图标列表三行（图标跟着自己宽度飘，文字起点不齐） */
.rb-irow{display:block;font-size:13px;color:#3D4550;line-height:2}
.rb-irow + .rb-irow{margin-top:2px}
.rb-iico{display:inline-flex;vertical-align:middle;margin-right:5px}
/* 正确处方：图标单独一列固定宽、居中，文字从同一个起点开始排 */
.rb-irow-fix{display:flex;align-items:center;gap:9px}
.rb-irow-fix .rb-iico{flex:0 0 16px;justify-content:center;margin-right:0}

/* 键盘聚焦描边（focus-ring 那道题，只能靠类名——伪类写不出内联样式）。
   .rb-focus-demo 自己不画任何东西，只表示「这个按钮此刻正被键盘聚焦着」：
   画布是死的，没法真的让人按 Tab，所以题目用这个类把「聚焦」这个状态摆出来，
   「有没有描边」这件事才看得出来。.rb-focus-ok 才是有描边的那一半——
   两个类同时挂上，描边才出现。别把 demo 类当成样式来源。 */
.rb-focus-ok:focus-visible,
.rb-focus-ok.rb-focus-demo{outline:2px solid #0F766E;outline-offset:2px}

/* ---- 出题区 ---- */
.rb-qhead{display:flex;align-items:center;gap:10px;padding:17px 20px 0}
.rb-qno{font-size:12px;font-weight:600;color:var(--mint);letter-spacing:.5px}
/* 难度胶囊：跟分组区题号点底下那道短横同一套色，两处对得上 */
.rb-lev{
  font-size:12px;font-weight:600;padding:2.5px 9px;border-radius:20px;
  border:1px solid transparent;white-space:nowrap;
}
.rb-lev.lv-easy{color:var(--mint);background:var(--mint-dim);border-color:var(--mint-line)}
.rb-lev.lv-mid{color:var(--amber);background:var(--amber-dim);border-color:var(--amber-line)}
.rb-lev.lv-hard{color:var(--purple);background:var(--purple-dim);border-color:var(--purple-line)}
.rb-ask{padding:12px 20px 0;font-size:16px;font-weight:500;line-height:1.62;color:var(--text)}
.rb-optlab{
  padding:20px 20px 10px;font-size:12px;font-weight:600;
  letter-spacing:1.2px;color:var(--text-3);text-transform:uppercase;
}
.rb-opts{padding:0 20px;display:flex;flex-direction:column;gap:9px}
.rb-opt{
  display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text);font-family:inherit;font-size:13.5px;line-height:1.62;
  padding:13px 15px;cursor:pointer;transition:.16s;
}
.rb-opt:hover{border-color:var(--mint-line);background:var(--bg-4)}
.rb-opt-k{
  flex:0 0 20px;width:20px;height:20px;border-radius:6px;margin-top:1px;
  background:var(--bg-4);color:var(--text-3);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.rb-opt:disabled{cursor:default}
.rb-opt.dim{opacity:.45}
.rb-opt.dim:hover{background:var(--bg-3);border-color:var(--line)}
.rb-opt.ok{border-color:var(--mint-line);background:var(--mint-dim)}
.rb-opt.ok .rb-opt-k{background:var(--mint);color:var(--on-mint)}
.rb-opt.ok:disabled:hover{border-color:var(--mint-line);background:var(--mint-dim)}
.rb-opt.bad{border-color:var(--red-line);background:var(--red-dim)}
.rb-opt.bad .rb-opt-k{background:var(--red);color:var(--bg)}
.rb-opt.bad:disabled:hover{border-color:var(--red-line);background:var(--red-dim)}

.rb-fb{padding:18px 20px 0}
.rb-idle{font-size:13px;color:var(--text-3);line-height:1.65}
.rb-verdict{border-radius:var(--r-sm);padding:14px 16px;border:1px solid var(--line);background:var(--bg-3)}
.rb-verdict.ok{border-color:var(--mint-line);background:var(--mint-dim)}
.rb-verdict.bad{border-color:var(--red-line);background:var(--red-dim)}
.rb-vhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;font-weight:700;margin-bottom:8px}
.rb-verdict.ok .rb-vhead{color:var(--mint)}
.rb-verdict.bad .rb-vhead{color:var(--red)}
.rb-vmiss{
  font-size:12px;font-weight:500;color:var(--text-3);
  background:var(--bg-4);border-radius:20px;padding:2px 10px;
}
.rb-verdict p{font-size:13px;color:var(--text-2);line-height:1.72}

/* 考点：判词卡底部的一行脚注，作答前哪儿都没有。
   原来的「复制这句话 / 翻诊断单」两个按钮已去掉——那张卡现在纯是解释。 */
.rb-vterm{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:12px;color:var(--text-3);line-height:1.62;
}
.rb-vterm code{
  font-family:var(--mono);font-size:12px;color:var(--text-2);
  background:var(--bg-4);border:1px solid var(--line);border-radius:5px;padding:1px 6px;margin-left:7px;
}

.rb-acts{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:18px 20px 20px}
.rb-nav{
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);
  font-family:inherit;font-size:13px;padding:9px 17px;border-radius:9px;cursor:pointer;transition:.16s;
  white-space:nowrap;
}
.rb-nav:hover:not(:disabled){color:var(--text);background:var(--bg-4)}
.rb-nav:disabled{opacity:.4;cursor:default}
.rb-nav.primary{background:var(--mint);border-color:transparent;color:var(--on-mint);font-weight:600}
.rb-nav.primary:hover:not(:disabled){background:var(--mint-2);color:var(--on-mint)}
.rb-nit{margin:0 auto}
.rb-retry{
  background:var(--red-dim);border:1px solid var(--red-line);color:var(--red);
  font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:9px;cursor:pointer;transition:.16s;
}
.rb-retry:hover{background:var(--red);border-color:var(--red);color:var(--bg)}
.rb-hint{font-size:12px;color:var(--text-3);white-space:nowrap}

/* ============================================================
   题号导航（第 39 轮）：难度筛选条 + 排序 + 按科室分组
   ------------------------------------------------------------
   为什么一级分组是科室、难度只做「筛选 + 排序」：
     难度是坡，一条筛选条就能只练易题；科室是归属，用户带着「我这块不行」来的。
     分诊台、药房本来就是科室制，三页同一套语言。
   这一整块属于【外壳】，跟主题走——它里面没有任何「被展示的病历」，
   跟 .rb-canvas 那个固定浅台不是一回事，别把 --preview-* 用到这里。
   难度色：易＝mint / 中＝amber / 难＝purple（三个色两套主题都有对应值，
   浅色主题用的是加深版，见 html[data-theme="light"]）。
   ============================================================ */

.rb-navwrap{margin-top:26px}

/* ---- 筛选条 ---- */
.rb-navbar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 15px;box-shadow:var(--card-sh);
}
.rb-nav-lab{
  font-size:12px;font-weight:600;letter-spacing:1.2px;
  color:var(--text-3);text-transform:uppercase;margin-right:2px;
}
.rb-fbtn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--text-2);
  font-family:inherit;font-size:12.5px;padding:6px 12px;border-radius:20px;
  cursor:pointer;transition:.16s;
}
.rb-fbtn i{font-style:normal;font-size:12px;font-family:var(--mono);color:var(--text-3)}
.rb-fbtn:hover{border-color:var(--line-2);color:var(--text)}
.rb-fbtn.on{font-weight:600}
.rb-fbtn.on i{color:inherit;opacity:.82}
/* 选中态用「难度自己的颜色」——扫一眼就知道现在筛在哪一档 */
.rb-fbtn.lv-easy.on{background:var(--mint-dim);border-color:var(--mint-line);color:var(--mint)}
.rb-fbtn.lv-mid.on{background:var(--amber-dim);border-color:var(--amber-line);color:var(--amber)}
.rb-fbtn.lv-hard.on{background:var(--purple-dim);border-color:var(--purple-line);color:var(--purple)}
.rb-nav-sp{margin-left:auto}
.rb-sort{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--text-3);
  font-family:inherit;font-size:12.5px;padding:6px 12px;border-radius:9px;
  cursor:pointer;transition:.16s;
}
.rb-sort:hover{color:var(--text);border-color:var(--line-2)}
.rb-sort.on{background:var(--mint-dim);border-color:var(--mint-line);color:var(--mint);font-weight:600}
.rb-sort svg{flex:0 0 auto}
.rb-nav-note{font-size:12px;font-family:var(--mono);color:var(--text-3)}

/* ---- 科目分组 ---- */
.rb-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.rb-grp{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px 15px;box-shadow:var(--card-sh);transition:.16s;
}
.rb-grp.out{opacity:.62}                 /* 被难度筛选挡掉：淡出但仍占位，布局不乱跳。
                                            .62 是下限——再淡「科室名 + 待补几道」就读不动了，
                                            而被挡掉的题号点在这里不再二次变淡（见 js 注释）。 */
.rb-grp.out:hover{opacity:.82}
.rb-grp-head{
  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  background:none;border:0;padding:0;font-family:inherit;color:inherit;cursor:pointer;
}
.rb-grp.pend .rb-grp-head,.rb-grp.out .rb-grp-head{cursor:default}
.rb-grp-ico{flex:0 0 auto;display:flex;color:var(--mint);margin-top:1px}
.rb-grp.pend .rb-grp-ico,.rb-grp.out .rb-grp-ico{color:var(--text-3)}
.rb-grp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rb-grp-txt b{font-size:14px;font-weight:600;color:var(--text);transition:.16s}
.rb-grp-txt i{font-style:normal;font-size:12px;color:var(--text-3);line-height:1.45}
.rb-grp:not(.pend):not(.out) .rb-grp-head:hover .rb-grp-txt b{color:var(--mint)}
.rb-grp-n{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  font-size:12px;font-family:var(--mono);color:var(--text-3);white-space:nowrap;
}
.rb-grp-cnt{white-space:nowrap}
.rb-grp-n b{font-size:13px;color:var(--mint)}
.rb-grp-n em{
  font-style:normal;font-size:12px;font-family:var(--font);
  background:var(--bg-4);color:var(--text-3);border-radius:20px;padding:1px 7px;
}
.rb-grp-n em.ok{background:var(--mint-dim);color:var(--mint)}
.rb-grp-bar{height:4px;border-radius:2px;background:var(--bg-4);margin:11px 0 10px;overflow:hidden}
.rb-grp-bar i{
  display:block;height:100%;width:0;background:var(--mint);border-radius:2px;
  transition:width .36s cubic-bezier(.2,.9,.3,1);
}
.rb-grp-pend{
  font-size:12px;color:var(--text-3);margin-top:11px;padding-top:9px;
  border-top:1px dashed var(--line);
}
.rb-gdots{display:flex;flex-wrap:wrap;gap:6px}

/* ---- 题号点（沿用第 31 轮的模样，多了难度下划线） ---- */
.rb-dot{
  position:relative;
  width:30px;height:30px;border-radius:9px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);color:var(--text-3);
  font-family:inherit;font-size:12.5px;transition:.16s;
  display:flex;align-items:center;justify-content:center;
}
/* 底部一道 2px 短横＝难度标记：在「地图」上直接看出哪几道是易题。
   宽度 11px 而不是满宽——30px 方块的两侧各有 9px 圆角，满宽会啃到弧上。 */
.rb-dot::after{
  content:'';position:absolute;left:50%;bottom:2.5px;transform:translateX(-50%);
  width:11px;height:2px;border-radius:1px;
}
.rb-dot.lv-easy::after{background:var(--mint)}
.rb-dot.lv-mid::after{background:var(--amber)}
.rb-dot.lv-hard::after{background:var(--purple)}
.rb-dot:hover{border-color:var(--mint-line);color:var(--text)}
.rb-dot.on{border-color:var(--mint-line);background:var(--mint-dim);color:var(--mint);font-weight:600}
.rb-dot.done{background:var(--mint);border-color:var(--mint);color:var(--on-mint);font-weight:600}
.rb-dot.done.on{box-shadow:0 0 0 3px var(--mint-dim)}
/* 做对的题：难度横线让位给「已完成」状态（压在 mint 底上本来也看不见） */
.rb-dot.done::after{background:var(--on-mint);opacity:.45}
.rb-dot.off{opacity:.3}
.rb-dot.off:hover{border-color:var(--line);color:var(--text-3)}
.rb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 响应式：≤1040 上下堆叠（先画布后出题），画布仍在上 ---- */
@media(max-width:1040px){
  .rb-wrap{grid-template-columns:1fr;gap:14px;margin-top:22px}
  .rb-progress{flex:0 0 auto;width:auto;margin-top:0}
  .rb-canvas{min-height:236px}
  .rb-groups{grid-template-columns:repeat(2,1fr)}   /* 与 .depts 同一节奏：1040 转两列 */
}
@media(max-width:680px){
  .rb-canvas{padding:20px 16px;min-height:196px}
  .rb-qhead,.rb-ask,.rb-optlab,.rb-opts,.rb-fb,.rb-acts{padding-left:16px;padding-right:16px}
  .rb-ask{font-size:15px}
  .rb-acts{padding-top:16px}
  .rb-navwrap{margin-top:20px}
  .rb-navbar{gap:7px;padding:11px 13px}
  .rb-nav-sp{display:none}                          /* 排序按钮跟着一排流，别被顶到右边悬空 */
  .rb-groups{grid-template-columns:1fr}
  .rb-gdots{gap:6px}
  .rb-dot{width:28px;height:28px;font-size:12px}
  .rb-dot::after{width:10px;bottom:2px}
}
@media(max-width:400px){
  .rb-canvas{padding:16px 12px}
  .rb-card,.rb-article,.rb-acard,.rb-flat{padding:15px}
  .rb-opt{padding:11px 12px;font-size:13px}
  .rb-acts{flex-wrap:wrap;gap:9px}
  .rb-nav{padding:8px 13px;font-size:12.5px}
  .rb-nit{margin:0;order:3;width:100%;text-align:center}
  .rb-grp{padding:12px 13px 13px}
  .rb-fbtn{padding:5px 10px}
  .rb-sort{padding:5px 10px}
}