/* ============================================================
   岐伯 · 中医数字分身  —  视觉系统
   东方雅致 · 青绿 / 宣纸（Light）
   ============================================================ */

:root{
  /* 底色 */
  --paper: #F6F4EC;
  --paper-2: #FBFAF5;
  --paper-3: #EFEDE3;
  --line: #DFDACB;
  --line-soft: #E9E4D7;

  /* 墨色 */
  --ink: #1F2B26;
  --ink-2: #3C4A44;
  --ink-3: #6B7A73;
  --ink-4: #93A09A;

  /* 青绿主色 */
  --jade: #3E7C63;
  --jade-deep: #2C5C49;
  --jade-soft: #7FB69A;
  --jade-mist: #E3EFE8;
  --jade-mist-2: #EFF6F1;

  /* 点缀 */
  --gold: #C8952F;
  --gold-soft: #E0B45C;
  --clay: #B4703F;
  --seal: #A63D34;

  /* 尺度 */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --rail-w: 232px;

  --shadow-1: 0 1px 2px rgba(31,43,38,.04), 0 4px 16px rgba(31,43,38,.045);
  --shadow-2: 0 2px 6px rgba(31,43,38,.05), 0 18px 48px rgba(31,43,38,.08);

  --serif: 'Songti SC', 'STSong', 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', Georgia, serif;
  --sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body{
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- 纸纹 ---------- */
.paper-grain{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at 15% 8%, rgba(127,182,154,.14), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(200,149,47,.09), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.ambient-glow{
  position: fixed; width: 720px; height: 720px; right: -240px; top: -280px;
  background: radial-gradient(circle, rgba(127,182,154,.22), transparent 65%);
  filter: blur(20px); pointer-events: none; z-index: 0;
}

/* ============================================================
   侧边导航
   ============================================================ */
.rail{
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w);
  z-index: 60;
  display: flex; flex-direction: column;
  padding: 26px 16px 20px;
  background: linear-gradient(180deg, #F1EFE4 0%, #ECEAE0 100%);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
/* 侧栏在哪些屏里露出来。以前漏了 视频工坊／我的报告／舌象 三屏：
   进去之后侧栏整条留在屏幕外，等于把导航弄丢了，也回不去首页。 */
body[data-screen="twin"] .rail,
body[data-screen="assess"] .rail,
body[data-screen="meridian"] .rail,
body[data-screen="chat"] .rail,
body[data-screen="timeline"] .rail,
body[data-screen="care"] .rail,
body[data-screen="studio"] .rail,
body[data-screen="reports"] .rail,
body[data-screen="tongue"] .rail{ transform: translateX(0); }

.rail-brand{ display: flex; gap: 11px; align-items: center; padding: 0 6px 22px; }
.brand-mark{ width: 38px; height: 38px; color: var(--jade); flex: none; }
.rail-brand-text strong{
  display: block; font-family: var(--serif); font-size: 19px; letter-spacing: .16em;
  color: var(--ink); font-weight: 600;
}
.rail-brand-text span{ display: block; font-size: 10.5px; letter-spacing: .14em; color: var(--ink-4); margin-top: -1px; }

.rail-nav{ display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.rail-item{
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2);
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .04em;
  cursor: pointer; text-align: left; position: relative;
  transition: background .2s, color .2s;
}
.rail-item .rail-ico{
  color: var(--ink-4); width: 18px; display: grid; place-items: center;
  transition: color .2s;
}
.rail-item .rail-ico svg{ width: 17px; height: 17px; display: block; }
.rail-item:hover{ background: rgba(62,124,99,.07); color: var(--ink); }
.rail-item.is-active{ background: var(--paper-2); color: var(--jade-deep); box-shadow: var(--shadow-1); }
.rail-item.is-active .rail-ico{ color: var(--jade); }
.rail-item.is-active::before{
  content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; background: var(--jade); border-radius: 0 2px 2px 0;
}

.rail-foot{ margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.rail-user{ display: flex; gap: 10px; align-items: center; }
.avatar{
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--jade-mist); color: var(--jade-deep);
  font-family: var(--serif); font-size: 15px;
  border: 1px solid rgba(62,124,99,.22);
  /* 这颗从 <div> 改成了 <button>（未登录时它是登录入口），所以要把按钮默认样式抹平，
     否则浏览器给的 padding/字体/底色会让它看起来不像原来那颗圆。 */
  margin: 0; padding: 0; appearance: none; -webkit-appearance: none;
  font-family: var(--serif); line-height: 1; cursor: pointer;
  transition: .18s;
}
.avatar:hover{ border-color: var(--jade); background: rgba(62,124,99,.15); }
.avatar svg{ width: 18px; height: 18px; display: block; }
.avatar.is-who{ background: var(--jade); color: #fff; border-color: var(--jade); }
.rail-user-meta strong{ display: block; font-size: 13px; color: var(--ink); font-weight: 600; }
.rail-user-meta span{ display: block; font-size: 11px; color: var(--ink-4); }
.rail-reset{
  margin-top: 12px; width: 100%; padding: 7px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: transparent; color: var(--ink-3);
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .08em; cursor: pointer;
  transition: .2s;
}
.rail-reset:hover{ border-color: var(--jade-soft); color: var(--jade-deep); background: var(--jade-mist-2); }

/* ============================================================
   舞台 / 屏
   ============================================================ */
.stage{
  position: relative; z-index: 1;
  min-height: 100vh;
  transition: padding .5s cubic-bezier(.2,.8,.2,1);
}
body[data-screen="twin"] .stage,
body[data-screen="assess"] .stage,
body[data-screen="meridian"] .stage,
body[data-screen="chat"] .stage,
body[data-screen="timeline"] .stage,
body[data-screen="care"] .stage,
body[data-screen="studio"] .stage,
body[data-screen="reports"] .stage,
body[data-screen="tongue"] .stage{ padding-left: var(--rail-w); }

.screen{
  display: none; min-height: 100vh;
  animation: screenIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.screen.is-active{ display: block; }
@keyframes screenIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}

/* ============================================================
   落地页
   ============================================================ */
.landing{
  max-width: 1180px; margin: 0 auto;
  padding: 92px 56px 40px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px;
  align-items: center;
}
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--jade-deep); margin-bottom: 26px;
}
.eyebrow .dot{
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,149,47,.16);
}
.hero-title{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 4.3vw, 54px); line-height: 1.26;
  letter-spacing: .02em; color: var(--ink);
}
.hero-title .line{ display: block; }
.hero-title em{
  font-style: normal; color: var(--jade); position: relative;
}
.hero-title em::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: .1em; height: .34em;
  background: linear-gradient(90deg, rgba(200,149,47,.22), rgba(200,149,47,.04));
  z-index: -1; border-radius: 2px;
}
.hero-sub{
  margin-top: 22px; max-width: 490px;
  font-size: 14.5px; line-height: 2; color: var(--ink-3);
}
.hero-actions{ display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-meta{
  /* 条目从 4 个加到 6 个（客户 2026-11-04：首页要「丰富」，那就放能对得上账的真实条目数）。
     左栏只有 1.15fr ≈ 590px，六个不折行会顶出容器，所以改成 wrap。 */
  display: flex; flex-wrap: wrap; gap: 16px 26px; margin-top: 46px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.hero-meta div{ display: flex; flex-direction: column; }
.hero-meta strong{
  font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--jade-deep);
  line-height: 1.2;
}
.hero-meta span{ font-size: 11px; color: var(--ink-4); letter-spacing: .1em; margin-top: 2px; }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border-radius: 999px;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .06em;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .18s, box-shadow .22s, background .22s, border-color .22s;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: linear-gradient(135deg, var(--jade) 0%, var(--jade-deep) 100%);
  color: #F7FBF8; box-shadow: 0 6px 20px rgba(44,92,73,.22);
}
.btn-primary:hover{ box-shadow: 0 10px 28px rgba(44,92,73,.28); transform: translateY(-1px); }
.btn-ghost{
  background: transparent; color: var(--ink-2); border-color: var(--line);
}
.btn-ghost:hover{ border-color: var(--jade-soft); color: var(--jade-deep); background: var(--jade-mist-2); }
.btn-block{ width: 100%; }

/* 分身轨道 */
.landing-visual{ display: grid; place-items: center; }
.twin-orbit{
  position: relative; width: 440px; height: 520px; display: grid; place-items: center;
}
.orbit-ring{
  position: absolute; inset: 0; margin: auto;      /* 精确居中于人物 */
  aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(62,124,99,.16);
}
.r1{ width: 96%; animation: spin 46s linear infinite; border-style: dashed; }
.r2{ width: 86%; border-color: rgba(200,149,47,.22); animation: spin 34s linear infinite reverse; }
.r3{ width: 70%; border-color: rgba(62,124,99,.22); }
@keyframes spin{ to{ transform: rotate(360deg); } }
.orbit-figure{
  /* height:auto 这条别删：index.html 上写了 width="983" height="1367"（防首屏跳动），
     那是表现层提示，优先级低于作者样式但高于默认值。CSS 只钉了 width（88%／max-width 340），
     没写 height，浏览器就按那个 1367 的表现层提示取用高度 → 实测渲染框 340×1367，
     纵横比 0.2487 对原图 0.7191，人被竖直拉长约 2.9 倍（客户 2026-11-04 指认「人体被拉伸变形了」）。
     补上 height:auto 让宽度决定高度，比例才跟着原图走。 */
  display: block; width: 88%; max-width: 340px; height: auto;
  mix-blend-mode: multiply;   /* 米宣底融入纸色背景 */
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 62%, transparent 82%);
          mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 62%, transparent 82%);
  animation: float 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}
.body-svg{ width: 100%; height: 100%; overflow: visible; }
.meridian-lines path{
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: draw 3.2s ease forwards;
}
.meridian-lines path:nth-child(2){ animation-delay: .25s; }
.meridian-lines path:nth-child(3){ animation-delay: .5s; }
.meridian-lines path:nth-child(4){ animation-delay: .75s; }
.meridian-lines path:nth-child(5){ animation-delay: 1s; }
@keyframes draw{ to{ stroke-dashoffset: 0; } }
.meridian-nodes circle{ animation: pulse 2.6s ease-in-out infinite; }
.meridian-nodes circle:nth-child(2){ animation-delay: .4s; }
.meridian-nodes circle:nth-child(3){ animation-delay: .8s; }
.meridian-nodes circle:nth-child(4){ animation-delay: 1.2s; }
.meridian-nodes circle:nth-child(5){ animation-delay: 1.6s; }
.meridian-nodes circle:nth-child(6){ animation-delay: 2s; }
@keyframes pulse{ 0%,100%{ opacity: .5; r: 2.6; } 50%{ opacity: 1; r: 4; } }

.orbit-tag{
  position: absolute; font-family: var(--serif); font-size: 12px;
  letter-spacing: .18em; color: var(--jade-deep);
  padding: 4px 11px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  animation: float 6s ease-in-out infinite;   /* 漂浮动画 */
  z-index: 2;
}
.t1{ top: 9%;  left: -2%;  animation-duration: 6.4s; }
.t2{ top: 17%; right: -6%; animation-duration: 7.4s; animation-delay: .8s; }
.t3{ top: 45%; left: -11%; animation-duration: 5.6s; animation-delay: .4s; }
.t4{ top: 56%; right: -3%; animation-duration: 6.9s; animation-delay: 1.2s; }

/* ============================================================
   落地页 · 用法流（四步）
   以前这里是三张纯文字的 .lcard，客户 2026-11-04 说「全部占位符，不像正规网站」。
   四步做成按钮：编号压在左上角，竖向连一条线（::before 只在第一格之后出现），
   窄屏收成两列时把连线去掉，否则斜着拉出去很难看。
   ============================================================ */
.flow-sec{ max-width: 1180px; margin: 0 auto; padding: 0 56px 56px; }
.flow-head{ margin-bottom: 20px; }
.flow-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.fstep{
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  text-align: left; font-family: var(--sans); color: var(--ink);
  background: linear-gradient(180deg, var(--paper-2), #F7F5EE);
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 18px 18px 15px; cursor: pointer; position: relative;
  transition: transform .22s, box-shadow .24s, border-color .24s;
}
.fstep:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--jade-soft); }
.fstep:focus-visible{ outline: 2px solid var(--jade); outline-offset: 2px; }
.fs-no{
  font-family: var(--serif); font-size: 11px; letter-spacing: .14em; color: var(--gold);
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px;
}
.fs-no::after{
  content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, rgba(200,149,47,.55), transparent);
}
.fs-t{ font-family: var(--serif); font-size: 15.5px; font-weight: 600; letter-spacing: .02em; }
.fs-d{ font-size: 12px; line-height: 1.8; color: var(--ink-3); }
.fs-m{ margin-top: auto; padding-top: 10px; font-size: 10.5px; letter-spacing: .06em; color: var(--jade-deep); }

/* ============================================================
   落地页 · 会员专区
   左边那张卡是 JS 注入的真实状态，所以这里只给容器和两种态的皮；
   不出现价格与「立即开通」——收款通道没接完（客户 2026-11-04 这条要的是「丰富」，
   不是「先假装能买」）。
   ============================================================ */
.member-sec{
  max-width: 1180px; margin: 0 auto; padding: 4px 56px 44px;
}
.ms-head{ margin-bottom: 20px; }
.ms-sub{ margin-top: 8px; max-width: 660px; font-size: 12.5px; line-height: 1.9; color: var(--ink-3); }
.ms-grid{ display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: stretch; }
.ms-card{
  border-radius: var(--r-lg); padding: 22px 22px 20px;
  background: linear-gradient(160deg, #21402F, #2C5C49 58%, #35685B);
  color: #EDF3EE; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: var(--shadow-2);
}
.ms-card::after{
  content: ''; position: absolute; right: -38px; top: -38px; width: 150px; height: 150px;
  border-radius: 50%; border: 1px solid rgba(224,180,92,.34);
  box-shadow: 0 0 0 12px rgba(224,180,92,.08);
}
.ms-tag{
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(224,180,92,.92);
}
.ms-name{ font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: .02em; line-height: 1.4; }
.ms-mail{ font-size: 12px; color: rgba(237,243,238,.72); word-break: break-all; }
.ms-rows{ display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ms-row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 12px; padding: 7px 0; border-top: 1px solid rgba(237,243,238,.14);
}
.ms-row i{ font-style: normal; color: rgba(237,243,238,.62); letter-spacing: .04em; }
.ms-row b{ font-family: var(--serif); font-weight: 600; font-size: 13.5px; }
.ms-acts{ margin-top: auto; padding-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.ms-btn{
  appearance: none; font: inherit; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; font-size: 12.5px; letter-spacing: .05em;
  border: 1px solid rgba(224,180,92,.6); background: rgba(224,180,92,.16); color: #F6EACB;
  transition: .18s;
}
.ms-btn:hover{ background: rgba(224,180,92,.3); }
.ms-btn.is-quiet{ border-color: rgba(237,243,238,.28); background: transparent; color: rgba(237,243,238,.8); }
.ms-btn.is-quiet:hover{ border-color: rgba(237,243,238,.55); background: rgba(237,243,238,.08); }
.ms-fine{ font-size: 10.5px; line-height: 1.75; color: rgba(237,243,238,.55); margin-top: 8px; }
.ms-perks{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.perk{
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; font-family: var(--sans); color: var(--ink); cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 15px 15px 13px;
  transition: transform .2s, box-shadow .22s, border-color .22s;
}
.perk:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--jade-soft); }
.perk:focus-visible{ outline: 2px solid var(--jade); outline-offset: 2px; }
.pk-ico{
  width: 28px; height: 28px; border-radius: 8px; margin-bottom: 4px;
  display: grid; place-items: center;
  background: var(--jade-mist); color: var(--jade-deep);
}
.pk-ico svg{ width: 16px; height: 16px; }
.pk-t{ font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.pk-d{ font-size: 11.5px; line-height: 1.75; color: var(--ink-3); }
.pk-m{ margin-top: auto; padding-top: 8px; font-size: 10px; letter-spacing: .06em; color: var(--ink-4); }
.ms-note{
  margin-top: 14px; font-size: 11.5px; line-height: 1.85; color: var(--ink-4);
  padding-left: 12px; border-left: 2px solid var(--jade-mist);
}
/* 平板宽度（901–1180）：四步条与会员权益都改成 2×2。
   实测过 1000px 时基线规则会把 .fstep 压到 209px、.perk 压到 173px——
   横向不溢出，但每格只剩两三行字的宽度，读起来像挤在一起；
   旁边 .trust-grid 在这条带宽里本来就是 2 列，这样也统一。 */
@media (max-width: 1180px){
  .flow-grid{ grid-template-columns: repeat(2, 1fr); }
  .ms-perks{ grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   落地页 · 直达区
   按钮复用侧栏的 showScreen()，所以这里只管排版，不管行为。
   卡片高度交给 grid 默认的 stretch + .qc-m 的 margin-top:auto，
   这样「约 6 分钟」那一行永远贴在底边，不会被长短说明顶歪。
   ============================================================ */
.quick-nav{ max-width: 1180px; margin: 0 auto; padding: 6px 56px 54px; }
.qn-head{ margin-bottom: 20px; }
.qn-title{
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  letter-spacing: .02em; color: var(--ink);
}
.qn-sub{ margin-top: 8px; max-width: 660px; font-size: 12.5px; line-height: 1.9; color: var(--ink-3); }
.qn-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.qcard{
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  text-align: left; font-family: var(--sans); color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 18px 18px 15px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .22s, box-shadow .24s, border-color .24s;
}
.qcard:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--jade-soft); }
.qcard:focus-visible{ outline: 2px solid var(--jade); outline-offset: 2px; }
.qc-ico{
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 5px;
  display: grid; place-items: center;
  background: var(--jade-mist); color: var(--jade-deep);
}
.qc-ico svg{ width: 19px; height: 19px; }
.qc-t{ font-family: var(--serif); font-size: 15.5px; font-weight: 600; letter-spacing: .02em; }
.qc-d{ font-size: 12px; line-height: 1.75; color: var(--ink-3); }
.qc-m{ margin-top: auto; padding-top: 10px; font-size: 10.5px; letter-spacing: .08em; color: var(--jade-deep); }
/* 付费课预告：金色态，和「已能用」的青绿态一眼分开；徽章压在右上角不占行高 */
.qcard.is-soon{ background: linear-gradient(180deg, #FCF7EA, var(--paper-2)); border-color: rgba(200,149,47,.38); }
.qcard.is-soon:hover{ border-color: var(--gold-soft); }
.qcard.is-soon .qc-ico{ background: rgba(200,149,47,.16); color: #8A6420; }
.qcard.is-soon .qc-m{ color: #8A6420; }
.qc-badge{
  position: absolute; top: 0; right: 0;
  padding: 4px 10px; border-radius: 0 var(--r-md) 0 10px;
  font-size: 10px; letter-spacing: .06em; color: #6E4F14;
  background: linear-gradient(135deg, rgba(224,180,92,.5), rgba(200,149,47,.34));
}

/* ============================================================
   落地页 · 信任区
   只写能核对的东西：执照信息、题表版本、guard 的四类红线、
   模型去向按 /api/status 的实际读数。不写没有依据的用户数。
   ============================================================ */
.trust-sec{ max-width: 1180px; margin: 0 auto; padding: 4px 56px 34px; }
.trust-head{ margin-bottom: 22px; }
.th-eyebrow{ font-size: 11px; letter-spacing: .28em; color: var(--gold); text-transform: uppercase; }
.th-title{ margin-top: 9px; font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); }
.trust-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tcard{
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 24px 26px 22px;
}
.tcard h3{
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--serif); font-size: 16.5px; font-weight: 600;
  color: var(--ink); margin-bottom: 11px;
}
.tc-n{ font-family: var(--serif); font-size: 11px; letter-spacing: .12em; color: var(--gold); }
.tcard p{ font-size: 12.5px; line-height: 1.95; color: var(--ink-3); margin-bottom: 9px; }
.tcard p:last-child{ margin-bottom: 0; }
.tcard b{ color: var(--ink-2); font-weight: 600; }
.tcard a{ color: var(--jade-deep); text-decoration: underline; text-underline-offset: 2px; }
.tc-note{ font-size: 11.5px !important; color: var(--ink-4) !important; line-height: 1.8 !important; }
.tc-more{ margin-top: 4px; }
.tc-more summary{
  cursor: pointer; list-style: none; font-size: 12px; color: var(--jade-deep);
  letter-spacing: .04em; padding: 4px 0;
}
.tc-more summary::-webkit-details-marker{ display: none; }
.tc-more summary::before{ content: '＋ '; color: var(--gold); }
.tc-more[open] summary::before{ content: '－ '; }
.tc-dl{
  margin-top: 10px; display: grid; grid-template-columns: 116px 1fr;
  gap: 5px 14px; font-size: 12px; line-height: 1.7;
}
.tc-dl dt{ color: var(--ink-4); }
.tc-dl dd{ color: var(--ink-2); word-break: break-all; }
@media (max-width: 900px){
  .quick-nav{ padding: 6px 28px 44px; }
  .qn-grid{ grid-template-columns: repeat(2, 1fr); }
  .flow-sec{ padding: 0 28px 44px; }
  .flow-grid{ grid-template-columns: repeat(2, 1fr); }
  .member-sec{ padding: 4px 28px 34px; }
  .ms-grid{ grid-template-columns: 1fr; }
  .ms-card{ min-width: 0; }
  .ms-perks{ grid-template-columns: repeat(2, 1fr); }
  .trust-sec{ padding: 4px 28px 30px; }
  .trust-grid{ grid-template-columns: 1fr; }
  .th-title{ font-size: 20px; }
}
@media (max-width: 560px){
  .qn-grid{ grid-template-columns: 1fr; }
  .flow-grid{ grid-template-columns: 1fr; }
  .ms-perks{ grid-template-columns: 1fr; }
  .tc-dl{ grid-template-columns: 1fr; gap: 2px 0; }
  .tc-dl dt{ margin-top: 6px; }
}

/* ============================================================
   通用面板
   ============================================================ */
.panel{
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.panel-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px 14px;
}
.panel-head h3{
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  letter-spacing: .06em; color: var(--ink);
  white-space: nowrap;      /* 右侧按钮一多，「选题」两个字会被压成竖排一行一个字 */
}
.panel-note{ font-size: 11px; color: var(--ink-4); letter-spacing: .04em; }
.ph-right{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.import-btn{
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper-2); font-family: var(--sans); font-size: 11px;
  color: var(--ink-2); cursor: pointer; letter-spacing: .06em; transition: .2s;
  white-space: nowrap;
}
.import-btn:hover{ border-color: var(--jade-soft); color: var(--jade-deep); background: var(--jade-mist-2); }
.import-btn.is-active{
  background: linear-gradient(135deg, var(--jade), var(--jade-deep));
  border-color: var(--jade-deep); color: #fff;
}
.import-btn.chk input{
  vertical-align: -2px; margin-right: 5px; accent-color: var(--jade);
}
.g-tabs{
  display: flex; gap: 2px; background: var(--paper-3);
  padding: 3px; border-radius: 999px; flex: none;
}
.g-btn{
  border: 0; background: transparent; padding: 5px 15px;
  border-radius: 999px; font-family: var(--sans); font-size: 12px;
  letter-spacing: .1em; color: var(--ink-3); cursor: pointer; transition: .2s;
}
.g-btn:hover{ color: var(--jade-deep); }
.g-btn.is-active{
  background: var(--jade); color: #fff;
  box-shadow: 0 2px 8px rgba(44,92,73,.25);
}
.p-label{
  font-size: 10.5px; letter-spacing: .2em; color: var(--ink-4);
  text-transform: uppercase; margin-bottom: 2px;
}
.sec-title{
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink);
}
.sec-desc{ font-size: 13px; color: var(--ink-3); margin-top: 8px; max-width: 560px; line-height: 1.9; }

/* ============================================================
   测评
   ============================================================ */
.assess-wrap{
  max-width: 880px; margin: 0 auto; padding: 56px 48px 90px;
}
.assess-progress{
  display: flex; align-items: center; gap: 0; margin-bottom: 40px;
}
.ap-step{
  display: flex; align-items: center; gap: 8px; flex: none;
  font-size: 12px; color: var(--ink-4); letter-spacing: .06em;
  transition: color .3s;
}
.ap-step i{
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal;
  font-size: 11px; border: 1px solid var(--line);
  background: var(--paper-2); color: var(--ink-4);
  transition: .3s;
}
.ap-step.is-active{ color: var(--ink); }
.ap-step.is-active i{ background: var(--jade); border-color: var(--jade); color: #fff; }
.ap-step.is-done i{ border-color: var(--jade-soft); color: var(--jade); }
.ap-step.is-done{ color: var(--jade-deep); }
.ap-line{ flex: 1; height: 1px; background: var(--line); margin: 0 10px; }

.assess-panel{ position: relative; }
.astep{ display: none; }
.astep.is-active{ display: block; animation: screenIn .4s both; }
.astep-foot{
  display: flex; align-items: center; gap: 12px; margin-top: 32px;
  padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.astep-foot .btn-primary{ margin-left: auto; }
.quiz-count{ font-size: 12px; color: var(--ink-4); margin-left: auto; }
.quiz-count + .btn-primary{ margin-left: 0; }

.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.field{ display: flex; flex-direction: column; gap: 7px; }
.field span{ font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; }
.field input, .field select{
  padding: 10px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus{
  border-color: var(--jade-soft); box-shadow: 0 0 0 3px rgba(127,182,154,.14);
}

/* 舌象 */
.tongue-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-top: 26px;
}
.tongue-card{
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); padding: 12px 12px 14px;
  cursor: pointer; transition: .22s; text-align: center;
}
.tongue-card:hover{ border-color: var(--jade-soft); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.tongue-card.is-sel{
  border-color: var(--jade); background: var(--jade-mist-2);
  box-shadow: 0 0 0 3px rgba(127,182,154,.14);
}
.tongue-art{ width: 72px; height: 62px; margin: 0 auto 8px; }
.tongue-card strong{ display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.tongue-card small{ display: block; font-size: 10.5px; color: var(--ink-4); margin-top: 3px; line-height: 1.5; }

/* ============================================================
   舌象取景框（FE-FRAME）
   框是覆盖在预览图上的 CSS 定位层，不写进图片像素；
   百分比定位 → 自动适配任意图片尺寸，固定居中、不可拖动。
   ============================================================ */
.tg-frame-mask{
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(18,26,22,.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s ease-out;
}
.tg-frame-mask.is-show{ opacity: 1; }
.tg-frame-panel{
  width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  padding: 20px 22px 18px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--paper-2);
  box-shadow: var(--shadow-2);
  transform: translateY(6px); transition: transform .18s ease-out;
}
.tg-frame-mask.is-show .tg-frame-panel{ transform: translateY(0); }
.tg-frame-head h4{
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--ink); letter-spacing: .06em; line-height: 1.4;
}
.tg-frame-head p{ margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.tg-frame-photo{
  display: flex; align-items: center; justify-content: center;
  margin-top: 14px; padding: 10px; border-radius: 14px; background: #19211d;
}
.tg-frame-stage{
  position: relative; display: inline-block;
  max-width: 100%; max-height: 52vh; overflow: hidden;
  border-radius: 10px; background: #000; line-height: 0;
}
.tg-frame-stage img{
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 52vh;
}
.tg-frame-box{
  position: absolute; pointer-events: none;
  border: 2px solid rgba(255,255,255,.96); border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(10,18,14,.48),
              inset 0 0 26px rgba(127,182,154,.32),
              0 0 18px rgba(127,182,154,.45);
}
.tg-frame-box::after{
  content: ''; position: absolute; inset: 7px;
  border: 1px dashed rgba(255,255,255,.5); border-radius: 50%;
}
.tg-frame-tip{
  margin-top: 10px; text-align: center;
  font-size: 12px; color: var(--ink-4); line-height: 1.6;
}
.tg-frame-actions{
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin-top: 16px;
}
.tg-frame-actions .btn{ padding: 10px 20px; font-size: 13px; }

@media (max-width: 560px){
  .tg-frame-mask{ padding: 12px; }
  .tg-frame-panel{ padding: 16px 16px 14px; }
  .tg-frame-stage, .tg-frame-stage img{ max-height: 46vh; }
  .tg-frame-actions{ flex-direction: column-reverse; align-items: stretch; }
  .tg-frame-actions .btn{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .tg-frame-mask, .tg-frame-panel{ transition: none; }
}

/* 舌象结果卡（FE-FRAME：分项置信 / note / retake_hint） */
.tg-result-card{ margin-top: 0; }
.tg-r-head{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tg-row{
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0; font-size: 13px;
  border-bottom: 1px dashed var(--line-soft);
}
.tg-row:last-of-type{ border-bottom: 0; }
.tg-row-label{ flex: 0 0 92px; color: var(--ink-2); white-space: nowrap; }
.tg-row-value{ flex: 1; font-weight: 600; color: var(--ink); }
.tg-row-conf{
  flex: 0 0 auto; font-style: normal; font-size: 11px;
  color: var(--ink-4); letter-spacing: .02em;
}
.tg-row-note{
  margin: -1px 0 4px 78px; font-size: 11px;
  color: #8A6D3B; line-height: 1.55;
}
.tg-hint{
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid rgba(200,149,47,.28); border-radius: 10px;
  background: rgba(200,149,47,.09);
}
.tg-hint-body{ flex: 1; min-width: 0; font-size: 12.5px; color: #8A6D3B; line-height: 1.65; }
.tg-hint-body b{ color: #7A5A22; }
.tg-hint-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.tg-hint-tags span{
  font-size: 10.5px; padding: 1px 8px; border-radius: 999px;
  background: rgba(200,149,47,.14); color: #8A6D3B;
}
.tg-mini-btn{ flex: 0 0 auto; padding: 7px 14px; font-size: 12px; }
@media (max-width: 560px){
  .tg-hint{ flex-direction: column; }
  .tg-mini-btn{ align-self: flex-end; }
  .tg-row-label{ flex-basis: 82px; font-size: 12px; }
  .tg-row-note{ margin-left: 82px; }
}

/* 问诊 */
.quiz-wrap{ margin-top: 26px; display: flex; flex-direction: column; gap: 26px; }
.qgroup-title{
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-size: 13.5px; letter-spacing: .14em;
  color: var(--jade-deep); padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.qgroup-title em{ font-style: normal; font-size: 13px; color: var(--gold); }
.qitem{ margin-bottom: 18px; }
.qitem:last-child{ margin-bottom: 0; }
.q-text{ font-size: 13.5px; color: var(--ink); margin-bottom: 10px; line-height: 1.7; }
.q-text b{ font-family: var(--serif); color: var(--ink-4); margin-right: 6px; font-weight: 500; }
.q-opts{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-opt{
  text-align: left; padding: 10px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper-2);
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-2);
  cursor: pointer; transition: .18s; line-height: 1.6;
}
.q-opt:hover{ border-color: var(--jade-soft); background: var(--jade-mist-2); }
.q-opt.is-sel{
  border-color: var(--jade); background: var(--jade-mist);
  color: var(--jade-deep); font-weight: 500;
}

/* ============================================================
   分身总览
   ============================================================ */
.twin-layout{
  display: grid; grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.25fr);
  gap: 18px; padding: 30px 32px 0;
}
.twin-hero{ padding: 22px 24px 20px; display: flex; flex-direction: column; }
.th-head{ display: flex; align-items: flex-start; justify-content: space-between; }
.th-name{ font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: .06em; }
.th-badge{
  padding: 5px 13px; border-radius: 999px;
  background: var(--jade-mist); color: var(--jade-deep);
  font-size: 11.5px; letter-spacing: .12em; border: 1px solid rgba(62,124,99,.16);
}
.twin-figure{
  position: relative; flex: 1; min-height: 340px; margin: 6px 0 0;
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 50% 42%, rgba(127,182,154,.16), transparent 58%),
    linear-gradient(180deg, rgba(239,237,227,.5), rgba(251,250,245,0));
  overflow: hidden;
}
.twin-figure canvas{ display: block; width: 100%; height: 100%; }

/* —— 2D 分身画像（体质驱动） —— */
.tw-fig{
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.tw-fig svg{ height: 96%; width: auto; display: block; }
.tw-mer{
  fill: none; stroke-linecap: round;
  stroke-dasharray: 5 8;
  animation: twflow 3s linear infinite;
}
@keyframes twflow{ to{ stroke-dashoffset: -52; } }
.tw-node{
  cursor: pointer;
  transform-box: fill-box; transform-origin: center;
  animation: twpulse 2.6s ease-in-out infinite;
}
.tw-node:hover{ fill: #E0B45C; }
@keyframes twpulse{ 0%,100%{ opacity: .5; } 50%{ opacity: 1; } }
.tw-zone{ animation: twbreathe 5s ease-in-out infinite; }
@keyframes twbreathe{ 0%,100%{ opacity: .14; } 50%{ opacity: .32; } }
.tw-zlabel{
  font-family: var(--serif); font-size: 12px; letter-spacing: .2em;
  fill: #2C5C49;
}
.tf-caption{
  position: absolute; left: 0; right: 0; bottom: 8px; text-align: center;
  font-size: 11px; color: var(--ink-4); letter-spacing: .06em;
}
.tf-legend{
  position: absolute; top: 10px; right: 12px; display: flex; flex-direction: column; gap: 5px;
  font-size: 10.5px; color: var(--ink-4);
}
.tf-legend span{ display: flex; align-items: center; gap: 6px; }
.lg-dot{ width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.th-vitals{
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.vital{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vital-ring{
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--jade) calc(var(--p, 60) * 1%), var(--paper-3) 0);
}
.vital-ring::after{
  content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--paper-2);
}
.vital-ring span{
  position: relative; z-index: 1; font-family: var(--serif);
  font-size: 16px; color: var(--jade-deep);
}
.vital p{ font-size: 10.5px; color: var(--ink-4); letter-spacing: .06em; }

.twin-side{ display: flex; flex-direction: column; gap: 18px; }

/* 体质卡 */
.constitution-card{ padding: 24px 26px 26px; position: relative; overflow: hidden; }
.constitution-card::before{
  content: ''; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px;
  border-radius: 50%; background: var(--c-glow, rgba(127,182,154,.16));
  filter: blur(6px); pointer-events: none;
}
.cc-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cc-name{
  font-family: var(--serif); font-size: 34px; font-weight: 500; letter-spacing: .1em;
  color: var(--c, var(--jade-deep)); line-height: 1.2;
}
.cc-alias{ font-size: 11.5px; color: var(--ink-4); letter-spacing: .18em; margin-top: 4px; }
.cc-score{ text-align: right; }
.cc-score strong{
  font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--c, var(--jade-deep));
  line-height: 1;
}
.cc-score span{ display: block; font-size: 10px; color: var(--ink-4); letter-spacing: .12em; margin-top: 3px; }
.cc-slogan{
  font-family: var(--serif); font-size: 14px; letter-spacing: .1em;
  color: var(--ink-2); margin-top: 14px; padding-left: 12px;
  border-left: 2px solid var(--c, var(--jade)); line-height: 1.8;
}
.cc-summary{ font-size: 12.5px; line-height: 2; color: var(--ink-3); margin-top: 16px; }
.cc-traits{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.trait{
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: var(--paper-3); color: var(--ink-2); letter-spacing: .04em;
}
.cc-bar{
  margin-top: 18px; height: 4px; border-radius: 2px; background: var(--paper-3);
  overflow: hidden;
}
.cc-bar i{
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--c, var(--jade)), var(--c2, var(--jade-soft)));
  width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1);
}

/* 证型卡 */
.pattern-card{ padding: 22px 26px 24px; flex: 1; }
.pc-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pc-tag{
  font-size: 10.5px; letter-spacing: .16em; color: var(--gold);
  padding: 2px 9px; border-radius: 3px; background: rgba(200,149,47,.1);
  border: 1px solid rgba(200,149,47,.2);
}
.pc-name{ font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: .06em; }
.pc-organ{ font-size: 11.5px; color: var(--ink-4); margin-left: auto; }
.pc-core{ font-size: 12.5px; color: var(--ink-2); line-height: 1.9; font-family: var(--serif); letter-spacing: .04em; }
.pc-signs{ display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.pc-signs li{
  list-style: none; font-size: 12px; color: var(--ink-3); display: flex; align-items: flex-start; gap: 8px;
}
.pc-signs li::before{
  content: '·'; color: var(--jade); font-size: 16px; line-height: 1.2; flex: none;
}
.pc-warn{
  margin-top: 16px; padding: 10px 13px; border-radius: var(--r-sm);
  background: rgba(166,61,52,.045); border: 1px solid rgba(166,61,52,.14);
  font-size: 11.5px; color: #8C3C34; line-height: 1.8;
}
.pc-warn strong{ font-weight: 600; }

/* 底部两栏 */
.twin-bottom{
  display: grid; grid-template-columns: minmax(340px, .85fr) 1.15fr;
  gap: 18px; padding: 18px 32px 34px;
}
.chart-box{ height: 320px; padding: 0 12px 12px; position: relative; }
.chart-box canvas{ display: block; width: 100% !important; height: 100% !important; }

.advice-panel{ padding-bottom: 22px; }
.advice-tabs{ display: flex; gap: 2px; background: var(--paper-3); padding: 3px; border-radius: 999px; }
.advice-tabs button{
  border: 0; background: transparent; padding: 5px 13px; border-radius: 999px;
  font-family: var(--sans); font-size: 11.5px; color: var(--ink-3);
  cursor: pointer; letter-spacing: .06em; transition: .2s;
}
.advice-tabs button.is-active{ background: var(--paper-2); color: var(--jade-deep); box-shadow: var(--shadow-1); }
.advice-body{
  padding: 6px 26px 0; font-size: 13px; line-height: 2.1; color: var(--ink-2);
  min-height: 150px; animation: fadeSwap .35s both;
}
@keyframes fadeSwap{ from{ opacity: 0; transform: translateY(4px);} to{ opacity:1; transform:none;} }
.advice-herb{
  margin: 16px 26px 0; padding: 14px 16px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(200,149,47,.06), rgba(127,182,154,.06));
  border: 1px solid var(--line-soft);
  display: flex; gap: 14px; align-items: flex-start;
}
.ah-mark{
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--serif); font-size: 17px;
  background: var(--paper-2); color: var(--clay); border: 1px solid var(--line);
}
.ah-body strong{ font-family: var(--serif); font-size: 14px; letter-spacing: .08em; }
.ah-body .ah-nature{ font-size: 10.5px; color: var(--ink-4); margin-left: 8px; letter-spacing: .08em; }
.ah-body p{ font-size: 11.5px; color: var(--ink-3); line-height: 1.85; margin-top: 3px; }

/* ============================================================
   经络图谱
   ============================================================ */
.mer-layout{
  /* 第二列从死值 380px 改成 auto：说明栏收起时那一列只剩 36px 的竖标签，
     宽度交给 .mer-side 里的 .mer-detail（flex-basis 380px）自己说。 */
  display: grid; grid-template-columns: 1fr auto; gap: 18px;
  padding: 30px 32px 34px; min-height: 100vh;
}
.mer-main{ display: flex; flex-direction: column; }
.mer-canvas-wrap{
  flex: 1; position: relative;
  /* 窄屏断点下画布排在卡片上方，540px 会把身体压成一小块：按视口给高度 */
  min-height: clamp(560px, 76vh, 860px);
}
/* 画布一律定位在 wrap 内、不参与文档流。
   留在流内的话，canvas 的 CSS height:100% 在父高不定时会退回"按画布缓冲区属性"显示，
   于是画布变高 → wrap 变高 → ResizeObserver 把缓冲区也跟着变大 → 再也缩不回去；
   绝对定位后尺寸只由 wrap 决定，缩放窗口、断点换列都能正常回落。 */
.mer-canvas-wrap canvas{ position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  /* 平板（客户 2026-11-03 要一指转／双指捏合／双指平移）：这一行是前提，不是装饰。
     不写它，浏览器把双指当成页面缩放／滚动自己吞掉，JS 只收到一根手指，
     app.js 里再怎么加 pointer 代码都是「手机上转不动」。
     只给 canvas 加、不给 .mer-canvas-wrap 加：图层面板／部位条也在这层里，
     整个 wrap 禁掉手势就没法用手指滚那串复选框了。 */
  touch-action: none; }
.mer-hover{
  position: absolute; pointer-events: none; padding: 6px 11px;
  background: var(--ink); color: var(--paper-2); border-radius: var(--r-sm);
  font-size: 11px; letter-spacing: .06em; opacity: 0; transform: translate(-50%, -140%);
  transition: opacity .18s; z-index: 5;
  /* 中英对照后穴名行长了一截：不再 nowrap，限宽换行，边界由 JS 夹住 */
  max-width: min(340px, 84%); white-space: normal; line-height: 1.55; text-align: left;
}
/* —— 穴位名标签层（3D 画布上的 DOM 覆盖，位置由 app.js updateLabels 投影算出）——
   没做成 3D 贴图文字：那要么预烤 362 张纹理、换语种重烤，要么一放大就糊。
   覆盖层的字永远是屏幕原生清晰度，几何与穴位坐标一个都不动。 */
.acu-labels{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4; }
.acu-lb{
  /* 客户口径（2026-11-02）：不要白色底图——一块块白底把身体糊住了。
     只留字，靠淡色描边在皮肤/肌肉上都读得清；下面一根 8px 细线把名字钉回那颗穴。 */
  position:absolute; left:0; top:0;
  font-family:var(--sans); line-height:1.25; white-space:nowrap; color:var(--ink);
  /* 用户：「现在穴位的名字不清晰了」。皮肤／肌肉本身是有颜色的贴图，
     字压在 above 上，靠的只能是字外面那圈白。原来只有两层光晕、最远 6px，
     压在小腿肚的深色肌肉上就糊了。改成 4 层、贴字那两层拉满＝一条真正的白描边。 */
  text-shadow:0 0 1.5px rgba(255,255,255,1), 0 0 3.5px rgba(255,255,255,.98),
              0 0 8px rgba(255,255,255,.86), 0 0 15px rgba(255,255,255,.5);
}
/* 字号只有一个来源：app.js 每帧把实际像素写在 --fs 上（语种定基准、放大定倍率——
   英文比中文小一档，因为拉丁字排布估宽按 0.56 em/字符，同字号下能宽出四倍）。
   排布算矩形用的是同一个数，样式表和 JS 不会各写一份然后打架。
   客户口径（2026-11-02）：一张标签只留一行，所以这里没有副行的样式了。
   引线那截仍按 --lsc 长，不然字大了、钉回穴位的那根线还留在原位。 */
.acu-lb b{ display:block; font-size:var(--fs, 12.5px); font-weight:600; letter-spacing:.02em; color:var(--ink); }
/* 名字原来直接涂成这条经的颜色——三焦经的浅蓝、胆经的浅绿压在皮肤上就是「看不清」。
   颜色线索不能丢（一屏里「这个名字归哪条线」靠它），所以取「这条经的颜色」压深后的版本；
   纯经色仍留给下面那根引线。浏览器不认 color-mix 时退回 --ink，字不会消失。 */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .acu-lb b{ color: color-mix(in srgb, var(--lc, var(--ink)) 34%, #1F2B26); }
}
.acu-lb::after{
  content:''; position:absolute; left:50%; bottom:calc(-9px * var(--lsc, 1));
  width:1.5px; height:calc(8px * var(--lsc, 1));
  background:var(--lc, rgba(38,54,48,.34));
}
.acu-lb.is-sel b{ color:var(--jade-deep); }
.acu-lb.is-sel::after{ background:var(--jade-deep); }
/* 解剖结构名（肌肉／骨骼／内脏……跟着图层开关走那一套）。
   和穴名共用同一张标签、同一套防叠字排布，只在样子上分两层：
   穴名是「这条经的一颗点」、结构名是「这块形状叫什么」，读者得能一眼分开它们。
   放在 @supports 之后＝同权重、后面那条生效，不用 !important。
   字体稍轻、颜色是固定墨绿（app.js 写 --lc:#33564A），不属于任何一条经，
   给它涂经色会被读成「这条经络的名字」。 */
.acu-lb.is-st b{ color:#2F4A3F; font-weight:500; letter-spacing:.03em; }
.acu-lb.is-st::after{ background:rgba(47,74,63,.5); width:1px; height:calc(6px * var(--lsc, 1)); bottom:calc(-7px * var(--lsc, 1)); }
/* 循行方向那一句：纲 + 首尾穴，和 3D 里箭头/光点同向 */
.kd-dir{ font-size:11.5px; line-height:1.7; color:var(--ink-3); margin-top:7px; }
.kd-dir b{ color:var(--jade-deep); font-weight:600; }
.model-layers{
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: none; flex-direction: column; gap: 5px;
  /* 必须定宽：面板是绝对定位、宽度按内容收缩，注脚那句长说明的 max-content
     是一整行，会把面板撑到画布那么宽（实测 820px），身体直接被盖住。 */
  width: 216px;
  background: rgba(251, 250, 245, .94); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
  /* 原来只写 72%：立方体换掉那三行按钮之后这块高了 86px（112 的方块＋读数＋缩放键＝176），
     画布矮到 700px 出头时展开的清单会压到立方体顶上。这里加一条硬闸：
     永远给左下角那 176＋12＋10 留出位子，矮屏就自己滚动（overflow:auto 本来就有）。 */
  max-height: min(72%, calc(100% - 210px)); overflow: auto;
  box-shadow: var(--shadow-1);
}
/* 部位聚焦：原来横在画布底部一整排，把画面压掉一截。
   改成贴在画布右侧的竖排工具条，画面能用的宽度与高度都回来了。 */
.focus-bar{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  width: 98px; max-height: 94%; overflow: auto;
  background: rgba(251, 250, 245, .94); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; box-shadow: var(--shadow-1);
}
.focus-bar .fb-label{
  font-size: 10px; color: var(--ink-4); letter-spacing: .12em;
  text-align: center; margin-bottom: 2px;
}
.focus-bar button{
  font: inherit; font-size: 10.5px; line-height: 1.15; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  border-radius: 8px; padding: 5px 6px; white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s;
}
.focus-bar button:hover{ border-color: var(--ink-4); }
.focus-bar button.is-active{ background: var(--ink); border-color: var(--ink); color: var(--paper-2); }
.focus-bar .fb-sep{ height: 1px; background: var(--line-soft); margin: 3px 0; }
.focus-bar .fb-hint{ font-size: 9.5px; color: var(--ink-4); text-align: center; line-height: 1.5; margin-top: 2px; }
/* —— 部位条的收起态（客户 2026-11-04：「右侧也做一个收起来的设计」）——
   照左边图层面板那套读法：收起＝36px 竖标签，点开＝原来 98px 那一列。
   注意这里两条选择器都要比上面 `.focus-bar button` 更具体（多带一个类），
   否则那颗 10.5px／5px 6px 的通用按钮样式会把竖标签做成一枚小方块。 */
/* 展开态那块清单：原来 10 颗按钮直接是 .focus-bar 的子元素，靠它那条
   flex-direction:column 竖排；现在套了一层 .fb-body，**这层必须自己接上同一套竖排**，
   否则按钮退回 inline-block 流式排，两个短名（全身／头颈、盆部／上肢）会挤到同一行上
   互相盖住（实测过：11 颗只占 9 格）。 */
.fb-body{ display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.focus-bar .fb-top{ display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.focus-bar .fb-top .fb-label{ text-align: left; flex: 1 1 auto; margin-bottom: 0; white-space: nowrap; }
/* 收起钮照右侧说明栏那颗用「›」：定宽 22px，标题那四个字才不会被挤到折行。 */
.focus-bar button.fb-fold{
  flex: none; width: 22px; padding: 2px 0; text-align: center;
  font-size: 12px; line-height: 1.2; border-radius: 7px; color: var(--ink-3);
}
.focus-bar button.fb-fold:hover{ color: var(--ink); }
.fb-rail{ display: none; }
.focus-bar.is-collapsed{ width: 36px; padding: 10px 5px; }
.focus-bar.is-collapsed .fb-body{ display: none; }
.focus-bar.is-collapsed .fb-rail{
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font: inherit; color: var(--ink-2); background: transparent;
  border: 0; border-radius: 0; padding: 2px 0; cursor: pointer;
}
.fb-rail .fr-ic{ font-size: 11px; line-height: 1; color: var(--jade); }
.fb-rail .fr-tx{
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
}
.fb-rail .fr-n{
  writing-mode: vertical-rl; font-size: 9.5px; color: var(--ink-4); letter-spacing: .02em;
}
.fb-rail:hover .fr-tx, .fb-rail:hover .fr-ic{ color: var(--jade-deep); }
/* 视角方向盘（画布左下角）：拖动旋转的第二条路。三组分开摆——
   转体 / 俯仰 / 推拉，视线一扫就知道哪颗按钮管什么，不用读字。 */
.view-ctl{
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(251, 250, 245, .94); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; box-shadow: var(--shadow-1);
}
.view-ctl .vc-grp{ display: flex; gap: 4px; }
/* —— 视角立方体（客户 2026-11-04：「这个改为立方体的那种显示，在立方体的上下左右前后面写上标注，
   四个棱线就是透视图」）——
   照 CAD 那种正面态：中央方格＝前，四个梯形＝上／下／左／右，最外一圈＝后，
   方格那四条边＝前与相邻面之间 45° 的透视位。整块 112px 见方，比原来三行按钮宽不出多少，
   但六个绝对视角＋四个斜位都在这一格里；缩放与复位还是底下那三个键。
   文字一律 pointer-events:none——不然点「前」那个字会落在 text 节点上，底下那格收不到点击。
   当前那一格描玉色，读数写在立方体下面那一行（自由拖动时它也跟着报水平角）。 */
.vc-cube{ width: 112px; height: 112px; }
.vc-cube svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.vc-r{
  fill: #fdfcf7; stroke: var(--line); stroke-width: .8; cursor: pointer;
  transition: fill .14s, stroke .14s;
}
.vc-r:hover{ fill: var(--jade-mist-2); stroke: var(--jade-soft); }
.vc-edge{ fill: #ebe8dc; }
.vc-face.is-on, .vc-edge.is-on{ fill: var(--jade-mist); stroke: var(--jade); }
.vc-t{
  font-size: 11px; fill: var(--ink-2); letter-spacing: .04em;
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
.vc-big{ font-size: 15px; font-weight: 600; fill: var(--ink); }
.vc-sm{ font-size: 7px; fill: var(--ink-3); }
.vc-cap{
  font-size: 10px; line-height: 1.2; letter-spacing: .05em; color: var(--ink-3);
  text-align: center; margin-top: -2px;
}
.view-ctl button{
  font: inherit; font-size: 11px; line-height: 1; cursor: pointer;
  min-width: 26px; height: 24px; padding: 0 6px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  border-radius: 7px; transition: background .16s, color .16s, border-color .16s;
}
.view-ctl button:hover{ background: var(--jade-mist-2); border-color: var(--jade-soft); color: var(--jade-deep); }
.view-ctl button:active{ background: var(--jade-mist); }
/* 图层面板是 top-left、max-height 72%，方向盘在 bottom-left，两者不抢位；
   窄屏下面板可能盖住身体，这里让方向盘先让位（拖动仍然可用）。 */
@media (max-width: 860px){ .view-ctl{ display: none; } }
/* 放大视图：右侧知识栏让位给画面，一屏全是身体（Esc 退出） */
.mer-big .mer-layout{ grid-template-columns: 1fr; min-height: 0; height: 100vh; }
.mer-big .mer-detail{ display: none; }
.mer-big .mer-main{ min-height: 0; }
/* 放大视图里导航收成图标条、留白也收掉：画面这块屏是主角，
   知识栏已经让位了，不该再让 232px 的导航和 32px 的边距占着。
   合计比原来多出约 200px 宽、20px 高 —— 身体在画布里的占比直接上去。 */
.mer-big{ --rail-w: 72px; }
.mer-big .rail{ align-items: center; padding: 26px 8px 20px; }
.mer-big .rail-brand-text, .mer-big .rail-item span:not(.rail-ico),
.mer-big .rail-user-meta, .mer-big .rail-reset{ display: none; }
.mer-big .rail-item{ justify-content: center; }
.mer-big .mer-layout{ padding: 12px 16px 14px; gap: 0; }
@media (max-width: 860px){ .focus-bar .fb-hint{ display: none; } }
.layer-item{
  display: flex; gap: 7px; align-items: center;
  font-size: 11px; color: var(--ink-2); cursor: pointer;
  letter-spacing: .03em; white-space: nowrap;
}
.layer-item input{ accent-color: var(--jade); }
/* —— 「标注文字」那一组（客户 2026-11-04：骨头标注妨碍穴位文字，要单独成一行、默认关）——
   上面 25 行切的是身上有没有这一层组织，这一行切的是字。所以给它一条分隔线＋小标题，
   行尾再挂一枚「文字」小牌，收在竖标签里点开也不会被读成多开了一层。 */
.layer-sub{
  font-size: 10px; letter-spacing: .16em; color: var(--ink-4);
  margin: 9px 0 1px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.layer-item.is-text{ color: var(--ink-3); }
.layer-item.is-text::after{
  content: '文字'; flex: 0 0 auto; margin-left: auto;
  font-size: 9.5px; letter-spacing: .06em; color: var(--ink-4);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 4px;
}
/* 面板里那两颗「全显／全隐」以前一点样式都没有，就是浏览器默认按钮，
   和下面新加的「载入」摆一起会像两套东西。这里统一成面板自己的小按钮。 */
.layer-btns{ display: flex; gap: 6px; margin-bottom: 2px; }
.layer-btns button, .layer-load{
  font: inherit; font-size: 10.5px; line-height: 1.2; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-3);
  border-radius: 7px; padding: 3px 8px; letter-spacing: .04em;
  transition: background .16s, color .16s, border-color .16s;
}
.layer-btns button:hover, .layer-load:hover{ border-color: var(--ink-4); color: var(--ink); }
.layer-btns button:active, .layer-load:active{ background: var(--jade-mist); }
.layer-load:disabled{ cursor: default; opacity: .6; }
/* 分批后载还没到货的图层：行要出现（客户得知道有这一层），开关先灰着。
   名字要允许折行——面板是定宽 216px，「表情肌（头颈）（待载入 9.0 MB）」不折会顶出去。 */
.layer-pending{ white-space: normal; opacity: .78; }
.layer-pending span{ flex: 1 1 auto; }
.layer-load{ margin-left: auto; flex: 0 0 auto; }
.layer-note{
  font-size: 10px; line-height: 1.5; color: var(--ink-4);
  white-space: normal; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.08); letter-spacing: .02em;
}
.layer-head{
  font-size: 10px; letter-spacing: .16em; color: var(--ink-4);
  margin-bottom: 2px;
}
/* 图层面板的收起态（客户 2026-11-03：「这个太占地方了，你把它缩小点，就是左边的小小一列，
   点开就是可以选择隐藏的图层」）。收起时整块只有 36px 宽——竖排「图层」两个字加一个
   「开了几层／共几层」的数；点开还是原来那块定宽 216px 的清单，勾选逻辑没动。
   定宽那条闸（见上面 .model-layers 的注释）在展开态继续生效。 */
.model-layers.is-collapsed{ width: 36px; padding: 10px 5px; align-items: stretch; }
.model-layers.is-collapsed .layer-body{ display: none; }
.layer-rail{ display: none; }
.model-layers.is-collapsed .layer-rail{
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font: inherit; color: var(--ink-2); background: transparent;
  border: 0; padding: 2px 0; cursor: pointer;
}
.layer-rail .lr-ic{ font-size: 11px; line-height: 1; color: var(--jade); }
.layer-rail .lr-tx{
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
}
.layer-rail .lr-n{
  writing-mode: vertical-rl; font-size: 9.5px; color: var(--ink-4); letter-spacing: .06em;
}
.layer-rail:hover .lr-tx, .layer-rail:hover .lr-ic{ color: var(--jade-deep); }
.layer-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.layer-fold{
  font: inherit; font-size: 10px; line-height: 1.2; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-3);
  border-radius: 7px; padding: 2px 7px; letter-spacing: .04em;
}
.layer-fold:hover{ border-color: var(--ink-4); color: var(--ink); }
.layer-fold:active{ background: var(--jade-mist); }
.mer-detail{ padding: 22px 24px; overflow: auto; }
/* —— 右侧说明栏的收起闸（客户 2026-11-04：「两边的侧栏需要有一个图标点一下能收起来的」）——
   整列宽度还是原来那 380px：展开时 = 26px 的收起按钮 + 8px 间距 + 346px 说明栏，
   所以画布那一侧一点没被挤走；收起时整列只剩 36px，和左边那块图层清单的竖标签同宽同读法。
   （左边 2026-11-03 已经做过一次，见 .model-layers.is-collapsed。） */
.mer-side{ display: flex; align-items: stretch; gap: 8px; width: 380px; min-width: 0; }
.mer-side .mer-detail{ flex: 1 1 auto; min-width: 0; }
.mer-side.is-collapsed{ width: 36px; }
.mer-side.is-collapsed .mer-detail{ display: none; }
.side-fold{
  flex: none; align-self: flex-start; width: 26px; margin-top: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 9px 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper-2); color: var(--ink-3);
  font: inherit; cursor: pointer; transition: .18s;
}
.side-fold:hover{ border-color: var(--jade); color: var(--jade-deep); background: var(--jade-mist-2); }
.side-fold .sf-ic{ font-size: 15px; line-height: 1; }
.side-fold .sf-tx{ display: none; }
.mer-side.is-collapsed .side-fold{
  width: 36px; margin-top: 0; padding: 14px 0; flex-direction: column; gap: 9px;
}
.mer-side.is-collapsed .side-fold .sf-ic{ transform: rotate(180deg); }
.mer-side.is-collapsed .side-fold .sf-tx{
  display: block; writing-mode: vertical-rl; text-orientation: upright;
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
}
/* 放大视图本来就把说明栏整块让位了，那颗收起按钮跟着一起消失，别留个孤零零的竖条 */
.mer-big .mer-side{ display: none; }
/* 单栏（窄窗口）说明栏排在画面下面，收起它反而看不到内容，按钮先不出现。
   实测踩过的坑：只把 .side-fold 藏起来不够——state.detailPanelOpen 可能是 false
   （宽窗口收起来过、再把窗口拖窄），那 36px 的 is-collapsed 宽度会把说明栏压成 50px 一条，
   所以下面这两条 override 都要有。 */
@media (max-width: 1180px){
  .side-fold{ display: none; }
  .mer-side{ width: auto; }
  .mer-side.is-collapsed{ width: auto; }
  .mer-side.is-collapsed .mer-detail{ display: block; }
}
/* 双栏（宽窗口）时把两栏都钳在一屏高：
   否则选中 67 穴的膀胱经时，右侧明细把整页撑到两三千像素，
   左侧画布也跟着拉到那么高，身体在中间小成一个点。
   钳住后明细自己滚动，画布保持在一屏内；窄窗口（单栏）不加这个限制。 */
@media (min-width: 1181px){
  .mer-layout{ min-height: 0; height: 100vh; }
  .mer-main{ min-height: 0; }
  .mer-detail{ max-height: 100%; }
}
.md-wuxing{ display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.wx-pill{
  font-family: var(--serif); font-size: 11.5px; padding: 3px 12px; border-radius: 999px;
  letter-spacing: .14em; border: 1px solid var(--line); color: var(--ink-3); cursor: pointer; transition: .2s;
}
.wx-pill.is-active{ color: #fff; border-color: transparent; }
.md-title{
  font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: .08em;
  margin-bottom: 4px;
}
.md-sub{ font-size: 11.5px; color: var(--ink-4); letter-spacing: .1em; margin-bottom: 18px; }
.md-block{ margin-bottom: 18px; }
.md-block h5{
  font-size: 10.5px; letter-spacing: .18em; color: var(--ink-4);
  text-transform: uppercase; margin-bottom: 7px; font-weight: 500;
}
.md-block p{ font-size: 12.5px; line-height: 1.95; color: var(--ink-2); }
.md-points{ display: flex; flex-wrap: wrap; gap: 6px; }
.md-points span{
  font-size: 11.5px; padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--paper-3); color: var(--ink-2);
}
.aptag i{
  font-style: normal; font-size: 8.5px; color: var(--seal);
  margin-left: 3px; vertical-align: super; letter-spacing: .04em;
}
.aptag em{
  font-style: normal; font-size: 9.5px; color: var(--ink-4);
  margin-left: 5px; letter-spacing: .02em;
}
.md-note{ font-size: 11px !important; line-height: 1.7 !important; color: var(--ink-4) !important; margin-top: 8px; }
.md-link{
  display: block; width: 100%; text-align: left; padding: 11px 14px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--paper); font-family: var(--sans); font-size: 12px;
  color: var(--ink-2); cursor: pointer; transition: .2s; margin-top: 4px;
}
.md-link:hover{ border-color: var(--jade-soft); background: var(--jade-mist-2); }

/* ---------- 经络知识层（meridian_knowledge.js）：三语切换 / 出处徽标 / 穴位卡 ---------- */
.md-alt{ font-size: 11px; color: var(--ink-4); letter-spacing: .04em; margin: 1px 0 7px; }
.k-tabs{
  display: flex; gap: 6px; margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.k-tabs button{
  font-family: var(--sans); font-size: 11px; letter-spacing: .1em;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper-2); color: var(--ink-3); cursor: pointer; transition: .18s;
}
.k-tabs button:hover{ color: var(--jade-deep); border-color: var(--jade-soft); }
.k-tabs button.is-active{ background: var(--jade); border-color: var(--jade); color: #fff; }
/* 十四经切换条（原来只能靠点 3D 线条换经，太小太难命中） */
.k-mers{ display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.k-mer{
  font-family: var(--serif); font-size: 11px; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper-2); color: var(--ink-3); cursor: pointer; transition: .16s;
}
.k-mer:hover{ border-color: var(--jade-soft); color: var(--jade-deep); }
.k-mer.is-active{ background: var(--jade-mist); font-weight: 500; }
/* 字段级出处：已核 / 待复核，鼠标停在上面看复核人、日期、引用源与语种口径 */
.prov{
  font-style: normal; font-size: 9px; letter-spacing: .06em; font-weight: 400;
  padding: 1px 6px; margin-left: 7px; border-radius: 999px;
  vertical-align: 1px; cursor: help; border: 1px solid;
}
.prov-ok{ color: var(--jade-deep); border-color: #bcd8c8; background: var(--jade-mist-2); }
.prov-warn{ color: var(--clay); border-color: #e6cdb2; background: #f8efe4; }
.md-points button.aptag{
  font-family: var(--sans); cursor: pointer; border: 1px solid transparent;
  background: var(--paper-3); color: var(--ink-2); transition: .15s;
}
.md-points button.aptag:hover{ border-color: var(--jade-soft); background: var(--jade-mist-2); color: var(--ink); }
.md-points button.aptag.is-active{ border-color: var(--jade); background: var(--jade-mist); color: var(--jade-deep); }
.kpc{
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-2); padding: 13px 14px 12px;
}
.kpc-head{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft);
}
.kpc-name{ font-family: var(--serif); font-size: 19px; color: var(--ink); letter-spacing: .06em; }
.kpc-alt{ font-size: 11.5px; color: var(--ink-3); }
.kpc-code{ margin-left: auto; font-size: 10px; color: var(--ink-4); letter-spacing: .08em; }
.kpc-row{ margin-bottom: 9px; }
.kpc-row h6{
  font-size: 10px; letter-spacing: .16em; color: var(--ink-4);
  margin-bottom: 3px; font-weight: 500; text-transform: none;
}
.kpc-row p{ font-size: 12px; line-height: 1.85; color: var(--ink-2); }
.kpc-cue{ color: var(--jade-deep) !important; }
.kpc-clusters{ display: flex; flex-wrap: wrap; gap: 5px; }
.kpc-cls{
  font-size: 10.5px; padding: 2px 9px; border-radius: 999px;
  background: var(--jade-mist); color: var(--jade-deep); cursor: help;
}
/* 书证块（台版《经穴大全》本机 OCR 的事实字段）。刻意做成「卡片里的附注」：
   左边一条虚线、字号比正文小一档、节段用等宽体——一眼就能和本站审过的临床字段分开。 */
.kpc-book{
  margin: 11px 0 0 !important; padding: 8px 10px;
  border-left: 2px dashed var(--line); background: #FBF8F2;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.kpc-bk-list{ list-style: none; margin: 0; padding: 0; }
.kpc-bk-list li{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px;
  font-size: 11.5px; line-height: 1.8; color: var(--ink-2);
}
.kpc-bk-list b{ font-weight: 600; color: var(--ink); }
.kpc-bk-list em{
  font-style: normal; font-size: 10px; letter-spacing: .04em;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color: var(--jade-deep); background: var(--jade-mist);
  border-radius: 999px; padding: 1px 7px;
}
.kpc-bk-m{ font-style: normal; color: var(--ink-3); }
.kpc-bk-sup{ font-size: 10px; letter-spacing: .1em; color: var(--ink-4); }
.kpc-bk-al i{
  font-style: normal; font-size: 10px; letter-spacing: .12em;
  color: var(--ink-4); margin-right: 6px;
}
.kpc-bk-pg{ font-size: 10.5px !important; color: var(--ink-4) !important; }
.kpc-bk-gate{
  font-size: 10.5px !important; line-height: 1.7 !important;
  color: var(--ink-4) !important; margin-top: 5px !important;
}
.kd-src-book{ margin-bottom: 2px !important; }
.kpc-safety{
  font-size: 10.5px !important; line-height: 1.7 !important; color: var(--clay) !important;
  background: #f8efe4; border-radius: var(--r-sm); padding: 7px 9px; margin: 8px 0 0 !important;
}
.kpc-locate{
  margin-top: 10px; width: 100%; text-align: left; font-family: var(--sans);
  font-size: 11.5px; padding: 8px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  cursor: pointer; transition: .18s;
}
.kpc-locate:hover{ border-color: var(--jade-soft); background: var(--jade-mist-2); color: var(--jade-deep); }
/* 经外奇穴（2026-11-03 补进来的那一组）：卡片底部放的不是「在模型上定位」按钮而是一句
   为什么没有点位的说明——占位与字号按 .kpc-locate 那一档，别让少了按钮的卡片塌一块。 */
.kpc-nodot{
  font-size: 10.5px !important; line-height: 1.75 !important; color: var(--ink-4) !important;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; margin: 10px 0 0 !important;
}
/* 异说与别名：本站把主说写进定位，其余原样列出、不判定谁为准，所以颜色压在主定位下一档 */
.kpc-var{ color: var(--ink-3) !important; }
.kd-src{ margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 10px; }
.kd-src summary{ font-size: 11px; letter-spacing: .12em; color: var(--ink-3); cursor: pointer; list-style: none; }
.kd-src summary::-webkit-details-marker{ display: none; }
.kd-src summary::before{ content: '＋ '; color: var(--ink-4); }
.kd-src[open] summary::before{ content: '－ '; }
.kd-src p{ font-size: 10.5px; line-height: 1.8; color: var(--ink-3); margin: 8px 0 0; }
.kd-src code{ font-size: 10px; background: var(--paper-3); padding: 1px 5px; border-radius: 4px; }
.kd-src-warn{ color: var(--clay) !important; }
.kd-src-list{ margin: 8px 0 0; padding-left: 16px; }
.kd-src-list li{ font-size: 10.5px; line-height: 1.75; color: var(--ink-3); }
.kd-src-count{ font-size: 10.5px; color: var(--ink-4) !important; }
.kd-src-link{ display: inline-block; margin-top: 6px; font-size: 10.5px; color: var(--jade); word-break: break-all; }
.mer-hover small{
  display: block; margin-top: 3px; font-size: 10px; line-height: 1.5;
  color: #C9D6CE; white-space: normal; max-width: 300px;
}

/* ============================================================
   对话
   ============================================================ */
.chat-layout{
  display: grid; grid-template-columns: 1fr 300px; gap: 18px;
  padding: 24px 32px 24px; height: 100vh;
}
.chat-main{ display: flex; flex-direction: column; overflow: hidden; }
.chat-head{ border-bottom: 1px solid var(--line-soft); }
.chat-id{ display: flex; align-items: center; gap: 12px; }
.chat-avatar{
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--jade-mist), var(--paper-3));
  color: var(--jade-deep); font-family: var(--serif); font-size: 16px;
  border: 1px solid rgba(62,124,99,.2);
}
.chat-id h3{ font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.chat-id span{ display: block; font-size: 10.5px; color: var(--ink-4); margin-top: 1px; }
.icon-btn{
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink-3); cursor: pointer; font-size: 13px;
  display: grid; place-items: center; transition: .2s;
}
.icon-btn:hover{ border-color: var(--jade-soft); color: var(--jade-deep); }

.chat-scroll{
  flex: 1; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 18px;
  scroll-behavior: smooth;
}
.msg{ display: flex; gap: 11px; max-width: 86%; animation: msgIn .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes msgIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
.msg-av{
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--serif); font-size: 12px;
  background: var(--jade-mist); color: var(--jade-deep); border: 1px solid rgba(62,124,99,.16);
  margin-top: 2px;
}
.msg-body{
  font-size: 13px; line-height: 2; color: var(--ink-2);
  padding: 12px 16px; border-radius: 3px 12px 12px 12px;
  background: var(--paper); border: 1px solid var(--line-soft);
}
.msg-body p + p{ margin-top: 9px; }
.msg-body strong{ color: var(--ink); font-weight: 600; }
.msg-body em{ font-style: normal; color: var(--jade-deep); background: rgba(127,182,154,.16); padding: 0 3px; border-radius: 2px; }
.msg-trace{
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line);
  font-size: 10.5px; color: var(--ink-4); letter-spacing: .04em; line-height: 1.8;
}
.msg.user{ flex-direction: row-reverse; align-self: flex-end; }
.msg.user .msg-av{ background: var(--paper-3); color: var(--ink-3); border-color: var(--line); }
.msg.user .msg-body{
  background: var(--jade-deep); color: #EAF3EE; border-color: transparent;
  border-radius: 12px 3px 12px 12px;
}
.msg.user .msg-body strong{ color: #fff; }

/* 对话内嵌 CTA */
.msg-cta{
  display: inline-block; margin-top: 10px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid rgba(62,124,99,.38); background: var(--paper-2);
  color: var(--jade-deep); font-family: var(--sans); font-size: 12px;
  letter-spacing: .06em; cursor: pointer; transition: .2s;
}
.msg-cta:hover{ background: var(--jade); border-color: var(--jade); color: #fff; }

.typing{ display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i{
  width: 5px; height: 5px; border-radius: 50%; background: var(--jade-soft);
  animation: typing 1.2s infinite;
}
.typing i:nth-child(2){ animation-delay: .18s; }
.typing i:nth-child(3){ animation-delay: .36s; }
@keyframes typing{ 0%,60%,100%{ opacity: .3; transform: translateY(0);} 30%{ opacity: 1; transform: translateY(-3px);} }

.chat-suggest{
  display: flex; gap: 7px; padding: 0 26px 10px; flex-wrap: wrap;
}
.sug{
  font-family: var(--sans); font-size: 11.5px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2);
  cursor: pointer; transition: .2s;
}
.sug:hover{ border-color: var(--jade-soft); background: var(--jade-mist-2); color: var(--jade-deep); }

.chat-input{
  display: flex; gap: 10px; padding: 14px 22px 18px;
  border-top: 1px solid var(--line-soft);
}
.chat-input input{
  flex: 1; padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--sans); font-size: 13px; color: var(--ink); outline: none;
  transition: .2s;
}
.chat-input input:focus{ border-color: var(--jade-soft); box-shadow: 0 0 0 3px rgba(127,182,154,.12); }
.send-btn{
  width: 42px; height: 42px; border-radius: 50%; border: 0; flex: none;
  background: linear-gradient(135deg, var(--jade) 0%, var(--jade-deep) 100%);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: transform .2s, box-shadow .2s;
}
.send-btn:hover{ transform: scale(1.05); box-shadow: 0 6px 18px rgba(44,92,73,.26); }

.chat-side{ padding: 20px 20px; overflow-y: auto; }
.chat-side h4{
  font-size: 10.5px; letter-spacing: .18em; color: var(--ink-4);
  text-transform: uppercase; font-weight: 500; margin-bottom: 10px;
}
.memory-list{ list-style: none; display: flex; flex-direction: column; gap: 8px; }
.memory-list li{
  font-size: 11.5px; line-height: 1.8; color: var(--ink-2);
  padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--paper); border-left: 2px solid var(--jade-soft);
}
.memory-list li span{ display: block; font-size: 10px; color: var(--ink-4); margin-top: 3px; }
.side-divider{ height: 1px; background: var(--line-soft); margin: 20px 0 16px; }
.boundary-list{ list-style: none; display: flex; flex-direction: column; gap: 7px; }
.boundary-list li{
  font-size: 11px; line-height: 1.75; color: var(--ink-4); padding-left: 12px; position: relative;
}
.boundary-list li::before{
  content: ''; position: absolute; left: 0; top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--line);
}

/* ============================================================
   视频工坊：选题 → 脚本 → 成片
   ============================================================ */
.st-layout{
  display: grid; grid-template-columns: 306px minmax(0, 1fr) 300px; gap: 16px;
  padding: 24px 28px 34px; align-items: start;
}
.st-pick, .st-work, .st-proj{ padding-bottom: 16px; }
.st-pick{ display: flex; flex-direction: column; max-height: calc(100vh - 130px); }
.st-tools{ padding: 0 16px 12px; }
.st-search{
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; font-size: 12.5px; color: var(--ink); outline: none;
}
.st-search:focus{ border-color: var(--jade-soft); box-shadow: 0 0 0 3px rgba(62,124,99,.08); }
.st-cats{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.st-cats button{
  border: 1px solid var(--line-soft); background: transparent; color: var(--ink-3);
  font-size: 11px; padding: 3px 9px; border-radius: 999px; cursor: pointer; transition: .2s;
}
.st-cats button:hover{ border-color: var(--jade-soft); color: var(--jade); }
.st-cats button.on{ background: var(--jade); border-color: var(--jade); color: #fff; }
.st-list{ overflow-y: auto; padding: 0 10px 6px; flex: 1; }
.st-item{
  padding: 11px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent;
  transition: .18s; margin-bottom: 2px;
}
.st-item:hover{ background: var(--jade-mist-2); }
.st-item.on{ background: var(--jade-mist); border-color: #C4DCCE; }
.st-item-top{ display: flex; gap: 8px; align-items: baseline; }
.st-item-top b{ font-size: 12.5px; color: var(--ink); font-weight: 600; line-height: 1.5; flex: 1; }
.st-item-cat{
  font-size: 10px; color: var(--jade); background: #fff; border: 1px solid #D7E7DD;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap; flex: none;
}
.st-item p{ font-size: 11px; color: var(--ink-4); line-height: 1.7; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-item-flag{ display: inline-block; margin-top: 5px; font-size: 10px; color: #B0442E; }

/* —— 选题来源切换：知识库 / 站外热点 —— */
.st-src-tabs{ display: flex; gap: 6px; padding: 0 16px 10px; }
.st-src-tabs button{
  flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid var(--line-soft);
  background: #fff; color: var(--ink-3); font-size: 12px; cursor: pointer; transition: .18s;
}
.st-src-tabs button:hover{ border-color: var(--jade-soft); color: var(--jade); }
.st-src-tabs button.on{ background: var(--jade); border-color: var(--jade); color: #fff; font-weight: 600; }

/* —— 热点卡 —— */
.st-hot-item{
  padding: 10px 11px; border-radius: 10px; cursor: pointer; border: 1px solid transparent;
  transition: .18s; margin-bottom: 2px;
}
.st-hot-item:hover{ background: var(--jade-mist-2); }
.st-hot-item.on{ background: var(--jade-mist); border-color: #C4DCCE; }
.st-hot-hd{ display: flex; gap: 6px; align-items: baseline; }
.st-hot-word{ font-size: 12.5px; color: var(--ink); font-weight: 600; line-height: 1.5; flex: 1; }
.st-hot-rank{ font-size: 10px; color: var(--ink-4); flex: none; }
.st-hot-meta{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; align-items: center; }
.st-hot-src{ font-size: 10px; color: var(--ink-4); border: 1px solid var(--line-soft); border-radius: 4px; padding: 0 5px; }
.st-hot-cpt{
  font-size: 10px; color: var(--jade); background: #fff; border: 1px solid #D7E7DD;
  padding: 0 5px; border-radius: 4px;
}
.st-hot-num{ font-size: 10px; color: #B4813A; }
.st-hot-more{ padding: 8px 12px 12px; font-size: 11px; color: var(--ink-4); text-align: center; }
.st-hot-none{ padding: 26px 16px; text-align: center; color: var(--ink-4); font-size: 12px; line-height: 1.9; }

/* —— 热点详情（右栏） —— */
.st-hot-detail{ padding: 20px 22px 28px; }
.st-hot-detail h3{ font-family: var(--serif); font-size: 19px; color: var(--ink); line-height: 1.45; }
.st-hot-detail .st-hot-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.st-hot-detail .st-hot-tags span{
  font-size: 11px; color: var(--ink-3); background: #fff; border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 2px 9px;
}
.st-hot-why{ margin-top: 14px; }
.st-hot-why div{ font-size: 12.5px; color: var(--ink-2); line-height: 1.85; padding: 6px 0; }
.st-hot-why div + div{ border-top: 1px dashed #D8E6DD; }
.st-hot-why b{ color: var(--jade); margin-right: 6px; }
.st-hot-note{
  margin-top: 14px; padding: 12px 14px; background: var(--jade-mist-2); border-left: 3px solid var(--jade-soft);
  border-radius: 0 8px 8px 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.85;
}
.st-hot-sec{ margin-top: 20px; }
.st-hot-sec > h5{
  font-size: 12px; color: var(--ink-3); font-weight: 600; letter-spacing: .04em; margin-bottom: 10px;
}
.st-hot-ent{
  display: flex; gap: 8px; align-items: baseline; padding: 9px 12px; border: 1px solid var(--line-soft);
  border-radius: 9px; margin-bottom: 6px; cursor: pointer; background: #fff; transition: .18s;
}
.st-hot-ent:hover{ border-color: var(--jade-soft); background: var(--jade-mist-2); }
.st-hot-ent b{ font-size: 12.5px; color: var(--ink); font-weight: 600; flex: 1; line-height: 1.5; }
.st-hot-ent i{ font-style: normal; font-size: 10px; color: var(--jade); flex: none; }
.st-angle{
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  background: #fff; cursor: pointer; transition: .18s;
}
.st-angle:hover{ border-color: var(--jade-soft); box-shadow: 0 2px 10px rgba(62,124,99,.07); }
.st-angle-top{ display: flex; gap: 8px; align-items: baseline; }
.st-angle-name{
  font-size: 11px; color: #fff; background: var(--jade); border-radius: 4px; padding: 1px 7px; flex: none;
}
.st-angle-top b{ font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.5; flex: 1; }
.st-angle-why{ font-size: 11.5px; color: var(--ink-4); line-height: 1.75; margin-top: 6px; }
.st-angle-ref{ font-size: 11px; color: var(--jade); margin-top: 6px; }
.st-angle-go{ font-size: 11px; color: var(--ink-4); margin-top: 8px; text-align: right; }

/* 追热点时，条目页顶部的借势提示 */
.st-hotbar{
  margin: 0 22px; padding: 10px 14px; border-radius: 9px; background: #FFF7EC;
  border: 1px solid #F2DFC2; font-size: 12px; color: #8A5A1E; line-height: 1.7;
  display: flex; gap: 10px; align-items: center;
}
.st-hotbar b{ color: #B4641E; }
.st-hotbar .st-hotbar-x{
  margin-left: auto; cursor: pointer; color: #B4641E; font-size: 11px; flex: none;
  border: 1px solid #E8CFA8; border-radius: 6px; padding: 2px 8px; background: #fff;
}

.st-empty{ text-align: center; padding: 90px 30px; color: var(--ink-4); }
.st-empty-ico{ font-size: 30px; margin-bottom: 12px; }
.st-empty h4{ font-family: var(--serif); font-size: 16px; color: var(--ink-2); margin-bottom: 8px; }
.st-empty p{ font-size: 12.5px; line-height: 2; }

.st-entry{ padding: 18px 22px 4px; border-bottom: 1px dashed var(--line-soft); }
.st-entry-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.st-entry-head h3{ font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.st-tag{ font-size: 10.5px; color: var(--jade); background: var(--jade-mist); padding: 2px 8px; border-radius: 5px; flex: none; }
.st-safety{
  margin: 10px 0 12px; padding: 10px 13px; border-radius: 9px;
  background: #FBF1EE; border-left: 3px solid #C07A63;
  font-size: 11.5px; line-height: 1.9; color: #8C4A36;
}
.st-safety b{ color: #8C4A36; }
.st-body{
  font-size: 12.5px; line-height: 2; color: var(--ink-2); white-space: pre-wrap;
  max-height: 168px; overflow-y: auto; padding-right: 6px;
}
.st-src{ font-size: 10.5px; color: var(--ink-4); margin: 8px 0 12px; }

.st-ctrl{
  display: flex; align-items: center; gap: 14px; padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.st-dur{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-4); }
.st-dur button{
  border: 1px solid var(--line); background: #fff; color: var(--ink-3); cursor: pointer;
  font-size: 11.5px; padding: 5px 11px; border-radius: 7px; transition: .18s;
}
.st-dur button.on{ background: var(--jade); border-color: var(--jade); color: #fff; }
.st-ctrl .btn{ margin-left: auto; }
.st-ctrl .btn + .btn{ margin-left: 8px; }

/* 精修模式：工具循环的过程必须看得见，否则用户只看到一个转圈的按钮 */
.st-agent{
  padding: 12px 22px 6px; border-bottom: 1px solid var(--line-soft); background: #FCFCFA;
}
.st-agent-head{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-4);
}
.st-agent-head b{ font-size: 12px; color: var(--jade); letter-spacing: .04em; }
.st-agent-head .import-btn{ margin-left: auto; }
.st-agent-rows{
  margin-top: 9px; display: flex; flex-direction: column; gap: 5px;
  max-height: 208px; overflow-y: auto; padding-right: 4px;
}
.st-agent-row{
  font-size: 11.5px; line-height: 1.75; color: var(--ink-3);
  border-left: 2px solid var(--line); padding-left: 10px;
}
.st-agent-row .t{
  display: inline-block; min-width: 15px; color: var(--jade); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-right: 6px;
}
.st-agent-row .a{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--ink-2); background: var(--jade-mist-2); border-radius: 5px;
  padding: 1px 6px; margin-right: 7px;
}
.st-agent-row .obs{
  display: block; margin-top: 3px; color: var(--ink-4); font-size: 10.5px;
  white-space: pre-wrap; word-break: break-all;
}
.st-agent-row.rejected{ border-left-color: #C97B5A; background: #FBF1EE; }
.st-agent-row.rejected .obs{ color: #8C4A36; }
.st-agent-note{
  margin-top: 9px; font-size: 11px; line-height: 1.8; color: #8C4A36;
  background: #FBF1EE; border-radius: 8px; padding: 9px 12px;
}

.st-script{ padding: 18px 22px 8px; }
.st-sec{ margin-bottom: 20px; }
.st-sec h5{
  font-size: 10.5px; letter-spacing: .16em; color: var(--ink-4); text-transform: uppercase;
  margin-bottom: 9px; font-weight: 500;
}
.st-hook{
  font-family: var(--serif); font-size: 15px; line-height: 1.9; color: var(--ink);
  background: var(--jade-mist-2); border-left: 3px solid var(--jade-soft);
  padding: 12px 15px; border-radius: 0 8px 8px 0;
}
.st-script-body{
  font-size: 13px; line-height: 2.1; color: var(--ink-2); white-space: pre-wrap;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 16px 18px;
}
.st-shots{ display: flex; flex-direction: column; gap: 8px; }
.st-shot{ display: flex; gap: 12px; font-size: 12px; line-height: 1.8; color: var(--ink-2); }
.st-shot-t{
  flex: 0 0 66px; font-variant-numeric: tabular-nums; color: var(--jade); font-weight: 600; font-size: 11.5px;
}
.st-remind{
  font-size: 12px; line-height: 1.9; color: #8C4A36; background: #FBF1EE;
  border-radius: 9px; padding: 11px 14px;
}
.st-act{ display: flex; gap: 10px; align-items: center; padding: 0 22px 14px; flex-wrap: wrap; }
.st-meta{ font-size: 10.5px; color: var(--ink-4); }

/* 成片路径：Hypit（变体） / OpenMontage（长片） */
.st-engine-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 10px; }
.st-engine{
  border: 1px solid var(--line-soft); border-radius: 11px; padding: 12px 14px;
  background: #fff; cursor: pointer; transition: border-color .16s, background .16s;
}
.st-engine:hover{ border-color: var(--jade-soft); background: var(--jade-mist-2); }
.st-engine.on{ border-color: var(--jade-soft); background: var(--jade-mist); }
.st-engine-top{ display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.st-engine-top b{ font-family: var(--serif); font-size: 13.5px; color: var(--ink); }
.st-rec{
  font-size: 10px; color: #fff; background: var(--jade); border-radius: 999px; padding: 1px 7px;
}
.st-pick-mark{
  font-size: 10px; color: #8A6A2A; background: #FBF3E3; border-radius: 999px; padding: 1px 7px;
}
.st-engine-tag{ font-size: 10px; color: var(--ink-4); }
.st-engine p{ font-size: 11.5px; line-height: 1.85; color: var(--ink-3); margin-top: 6px; }
.st-engine-out{ display: inline-block; margin-top: 7px; font-size: 10.5px; color: var(--jade); }
.st-engine-note{ font-size: 10.5px; color: var(--ink-4); line-height: 1.8; margin-top: 9px; }
/* 批量变体 */
.st-hook-tag{ font-size: 10px; color: var(--jade); background: var(--jade-mist); border-radius: 999px; padding: 1px 8px; margin-left: 8px; letter-spacing: 0; }
.st-var-ctrl{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.st-var-label{ font-size: 11.5px; color: var(--ink-4); }
.st-var-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-var{
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 11px; background: #fff;
  cursor: pointer; transition: border-color .16s, background .16s;
}
.st-var:hover{ border-color: var(--jade-soft); background: var(--jade-mist-2); }
.st-var.on{ border-color: var(--jade-soft); background: var(--jade-mist); box-shadow: inset 2px 0 0 var(--jade); }
.st-var-top{ display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.st-var-angle{ font-size: 10px; color: #4C6B5C; background: #EDF3EE; border-radius: 4px; padding: 1px 6px; }
.st-var-idx{ font-size: 10px; color: var(--ink-4); margin-left: auto; }
.st-var b{ display: block; font-size: 12.5px; line-height: 1.65; color: var(--ink); font-weight: 500; }
.st-var-why{ display: block; font-size: 10.5px; line-height: 1.7; color: var(--ink-4); margin-top: 3px; }
.st-var-empty{ font-size: 11.5px; line-height: 1.9; color: var(--ink-4); padding: 14px 16px; border: 1px dashed var(--line-soft); border-radius: 10px; }
.st-var-foot{ grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.st-var-foot .st-meta{ flex: 1; font-size: 10.5px; color: var(--ink-4); }

/* 数字人 · 配音与底片 */
.st-av-body{ margin-top: 2px; }
.st-av-tools{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft);
}
.st-av-tools .st-meta{ flex: 1; font-size: 10.5px; color: var(--ink-4); line-height: 1.6; }
.st-av-meta{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 8px;
}
.st-av-meta b{ font-size: 12.5px; font-weight: 500; color: var(--ink); }
.st-av-audio{ width: 100%; height: 34px; margin-bottom: 9px; }
.st-av-warn{
  font-size: 11px; line-height: 1.7; color: #8A6A2A; background: #FBF3E3;
  border-radius: 8px; padding: 7px 10px; margin-bottom: 7px;
}
.st-av-list{
  border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; background: #fff;
}
.st-av-line{
  display: grid; grid-template-columns: 88px 150px 108px 1fr; gap: 10px; align-items: center;
  padding: 7px 11px; font-size: 11.5px; border-bottom: 1px solid var(--line-soft);
}
.st-av-line:last-child{ border-bottom: 0; }
.st-av-line:nth-child(even){ background: #FBFAF7; }
.st-av-t{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--ink-4); }
.st-av-shot{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: #4C6B5C; }
.st-av-fr{ font-size: 10.5px; color: var(--ink-4); }
.st-av-txt{ color: var(--ink-2); line-height: 1.6; }

@media (max-width: 1180px){
  .st-av-line{ grid-template-columns: 78px 1fr; row-gap: 3px; }
  .st-av-fr, .st-av-txt{ grid-column: 1 / -1; }
}

@media (max-width: 1180px){ .st-var-list{ grid-template-columns: 1fr; } }

.st-handoff{ margin-top: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: #FBFAF7; overflow: hidden; }
.st-handoff-head{
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft); font-size: 11px; color: var(--ink-3);
}
.st-handoff-head span{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-handoff-body{
  margin: 0; padding: 12px 14px; max-height: 260px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.75;
  color: var(--ink-2); white-space: pre-wrap; word-break: break-all;
}
.st-eng-badge{ font-size: 10px; color: #4C6B5C; background: #EDF3EE; border-radius: 999px; padding: 1px 7px; }

@media (max-width: 1180px){ .st-engine-grid{ grid-template-columns: 1fr; } }

.st-flows{ display: flex; gap: 12px; padding: 0 18px 12px; font-size: 10.5px; color: var(--ink-4); flex-wrap: wrap; }
.st-flows span{ display: flex; align-items: center; gap: 5px; }
.st-dot{ width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.st-dot.s1{ background: #C8952F; }
.st-dot.s2{ background: #4E7F9E; }
.st-dot.s3{ background: #3E7C63; }
.st-projlist{ padding: 0 12px; max-height: calc(100vh - 250px); overflow-y: auto; }
.st-proj-card{
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 11px 12px; margin-bottom: 8px;
  background: #fff;
}
.st-proj-card b{ font-size: 12px; color: var(--ink); line-height: 1.6; display: block; }
.st-proj-sub{ font-size: 10.5px; color: var(--ink-4); margin-top: 3px; display: flex; gap: 8px; align-items: center; }
.st-badge{ font-size: 10px; padding: 1px 7px; border-radius: 999px; }
.st-badge.s1{ background: #FBF3E3; color: #A87A26; }
.st-badge.s2{ background: #EAF1F5; color: #3F6C88; }
.st-badge.s3{ background: var(--jade-mist); color: var(--jade); }
.st-proj-act{ display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.st-proj-act button{
  border: 1px solid var(--line); background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: 10.5px; padding: 3px 9px; border-radius: 6px; transition: .18s;
}
.st-proj-act button:hover{ border-color: var(--jade-soft); color: var(--jade); }
.st-note-input{
  width: 100%; margin-top: 7px; border: 1px solid var(--line-soft); border-radius: 7px;
  padding: 5px 8px; font-size: 11px; color: var(--ink-2); background: var(--paper-2); outline: none;
}
.st-hint{ font-size: 11.5px; line-height: 1.9; color: var(--ink-4); padding: 16px 18px; }
.st-hint b{ color: var(--jade); cursor: pointer; }

@media (max-width: 1440px){
  .st-layout{ grid-template-columns: 280px minmax(0, 1fr); }
  .st-proj{ grid-column: 1 / -1; }
  .st-projlist{ max-height: 320px; }
}

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position: fixed; left: 50%; bottom: 36px; transform: translate(-50%, 20px);
  padding: 11px 22px; border-radius: 999px;
  background: var(--ink); color: var(--paper-2);
  font-size: 12.5px; letter-spacing: .06em;
  opacity: 0; pointer-events: none; transition: .35s; z-index: 200;
  box-shadow: var(--shadow-2);
}
.toast.is-show{ opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1180px){
  .twin-layout{ grid-template-columns: 1fr; }
  .twin-bottom{ grid-template-columns: 1fr; }
  .mer-layout{ grid-template-columns: 1fr; }
  .mer-detail{ max-height: none; }
  .tl-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .landing{ grid-template-columns: 1fr; padding: 64px 28px 28px; gap: 26px; }
  .flow-sec{ padding: 0 28px 44px; }
  .landing-visual{ order: -1; }
  .twin-orbit{ width: 300px; height: 396px; }
  .chat-layout{ grid-template-columns: 1fr; height: auto; }
  .chat-side{ display: none; }
  .chat-scroll{ min-height: 50vh; }
  .assess-wrap{ padding: 36px 22px 70px; }
  .form-grid, .q-opts{ grid-template-columns: 1fr; }
  .assess-progress{ gap: 0; }
  .ap-step span{ display: none; }
  :root{ --rail-w: 72px; }
  .rail-brand-text, .rail-item span:not(.rail-ico), .rail-user-meta, .rail-reset{ display: none; }
  .rail-item{ justify-content: center; }
  .rail{ align-items: center; }
}

/* 图层面板空槽位提示 */
.layer-empty{
  font-size: 11px; color: var(--ink-4); line-height: 1.8;
  padding: 10px 12px; letter-spacing: .04em;
}

/* ================= 师承故事 · 季老师 ================= */
.story-sec{ max-width: 1180px; margin: 0 auto; padding: 24px 56px 96px; }
.story-grid{
  display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg, 18px); padding: 46px 50px;
}
.story-visual{ display: grid; place-items: center; }
.teacher-avatar{
  width: 100%; border-radius: var(--r-md, 14px);
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 70%, transparent 98%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 70%, transparent 98%);
}
.story-eyebrow{ font-size: 11px; letter-spacing: .3em; color: var(--gold); }
.story-name{
  font-family: var(--serif); font-size: 30px; color: var(--ink);
  margin: 10px 0 6px;
}
.story-name em{
  font-style: normal; font-size: 14px; color: var(--jade-deep);
  margin-left: 10px; letter-spacing: .12em;
}
.story-quote{
  font-family: var(--serif); font-size: 17px; color: var(--gold);
  letter-spacing: .08em; margin-bottom: 10px;
}
.story-intro{ font-size: 13.5px; line-height: 2; color: var(--ink-2); }
.story-timeline{
  margin-top: 20px; padding-left: 6px;
  border-left: 1px solid var(--line);
  display: grid; gap: 2px;
}
.tl-item{ display: flex; gap: 16px; padding: 9px 0 9px 16px; position: relative; }
.tl-item::before{
  content: ''; position: absolute; left: -3.5px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jade); box-shadow: 0 0 0 3px var(--paper-2);
}
.tl-phase{
  flex: 0 0 44px; font-family: var(--serif); font-size: 12.5px;
  color: var(--jade-deep); letter-spacing: .2em; padding-top: 2px;
}
.tl-txt h5{ font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.tl-txt p{ font-size: 12px; line-height: 1.8; color: var(--ink-3); }
.story-phil{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-top: 24px;
}
.ph-card{
  background: var(--paper-3, rgba(62,124,99,.05));
  border: 1px solid var(--line-soft); border-radius: var(--r-sm, 10px);
  padding: 14px 16px;
}
.ph-card h5{
  font-family: var(--serif); font-size: 13.5px; color: var(--jade-deep);
  margin-bottom: 4px; letter-spacing: .1em;
}
.ph-card p{ font-size: 11.5px; line-height: 1.8; color: var(--ink-3); }

/* 分身总览 · 调理师小卡 */
.teacher-mini{ display: flex; gap: 16px; align-items: center; padding: 16px 18px; }
.tm-av img{
  width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.tm-role{ font-size: 10.5px; letter-spacing: .18em; color: var(--gold); margin-bottom: 2px; }
.tm-name{ font-family: var(--serif); font-size: 19px; color: var(--ink); }
.tm-motto{ font-size: 11.5px; color: var(--ink-3); margin-top: 3px; letter-spacing: .04em; }

@media (max-width: 900px){
  .story-grid{ grid-template-columns: 1fr; padding: 30px 24px; }
  .story-visual{ max-width: 260px; margin: 0 auto; }
}

/* 法针老师 IP 补充：身份标签 / 使命横幅 */
.story-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.story-tags span{
  font-size: 11px; letter-spacing: .06em; color: var(--jade-deep);
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(62,124,99,.28); background: rgba(62,124,99,.05);
}
.story-mission{
  margin-top: 18px; padding: 12px 16px;
  border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm, 10px) var(--r-sm, 10px) 0;
  background: rgba(200,149,47,.07);
  font-family: var(--serif); font-size: 13px; color: var(--ink-2);
  letter-spacing: .05em; line-height: 1.9;
}

/* 总览卡头 · 迷你体质雷达 */
.th-id{ display: flex; align-items: center; gap: 14px; }
.th-id canvas{ display: block; }
.th-id .p-label{ margin: 0; }

/* 先天禀赋：表单预览 + 体质卡区块 */
.innate-preview{
  margin-top: 14px; padding: 12px 16px;
  background: rgba(200,149,47,.07); border: 1px dashed rgba(200,149,47,.4);
  border-radius: var(--r-sm, 10px); font-size: 12px; color: var(--ink-2);
}
.innate-preview strong{ font-family: var(--serif); color: var(--gold); font-size: 12.5px; }
.innate-preview p{ margin-top: 5px; line-height: 1.8; }
.innate-preview .ip-gz{ color: var(--ink-3); font-size: 11px; }
.cc-innate{
  margin-top: 14px; padding: 11px 14px;
  background: rgba(200,149,47,.06); border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm, 10px) var(--r-sm, 10px) 0;
}
.cc-innate h5{
  font-family: var(--serif); font-size: 12.5px; color: var(--gold);
  letter-spacing: .12em; margin-bottom: 4px;
}
.cc-innate p{ font-size: 12px; line-height: 1.8; color: var(--ink-2); }
.cc-innate .cc-gz{ font-size: 11px; color: var(--ink-3); margin-top: 3px; }

/* hidden 属性优先于 .field 的 display 设置 */
.field[hidden]{ display: none !important; }

/* ================= 舌象上传（T1-F） ================= */
.upload-zone{
  margin: 14px 0 4px; padding: 20px 22px;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 14px);
}
.uz-head{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.uz-head h3{ font-family: var(--serif); font-size: 16px; color: var(--ink); }
.uz-guide{
  list-style: none; margin: 12px 0 0; padding: 12px 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px;
  background: var(--paper-3, rgba(62,124,99,.04)); border-radius: var(--r-sm, 10px);
}
.uz-guide li{ font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.uz-guide b{ color: var(--jade-deep); }
.uz-divider{
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0 12px; color: var(--ink-4); font-size: 11.5px; letter-spacing: .14em;
}
.uz-divider::before, .uz-divider::after{ content: ''; flex: 1; height: 1px; background: var(--line); }
.uz-result{ margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: var(--paper-1, #fff); }
.uz-loading{ font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.uz-thumb img{ width: 130px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.uz-fail{ font-size: 13.5px; color: #A4443B; font-weight: 600; }
.uz-hint{ font-size: 12px; color: var(--ink-3); margin: 6px 0 12px; }
.uz-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.uz-chip{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--paper-3, rgba(62,124,99,.05)); color: var(--ink-2);
  border: 1px solid var(--line-soft);
}
.uz-chip i{ font-style: normal; color: var(--ink-4); font-size: 10.5px; }
.uz-chip b{ font-weight: 600; color: var(--jade-deep); }
.uz-chip-ref{
  font-size: 9.5px; line-height: 1.4; padding: 0 4px; border-radius: 4px;
  color: #A4762F; background: rgba(200,149,47,.12);
}
.uz-warn{ margin-top: 10px; font-size: 12px; color: #A4762F; }
.uz-disc{ margin-top: 8px; font-size: 11px; color: var(--ink-4); }
.uz-actions{ display: flex; gap: 10px; margin-top: 12px; }
@media (max-width: 700px){ .uz-guide{ grid-template-columns: 1fr; } }

/* ================= 5S 综合自检报告（FE2） ================= */
.composite-report{ width: 100%; }
.cr-grid{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
.cr-radar{ display: grid; place-items: center; }
.cr-block{ margin-bottom: 14px; }
.cr-block h5{
  font-family: var(--serif); font-size: 13px; color: var(--jade-deep);
  letter-spacing: .1em; margin-bottom: 6px;
}
.cr-notes{ margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.9; color: var(--ink-2); }
@media (max-width: 900px){ .cr-grid{ grid-template-columns: 1fr; } }

/* ================= FE-ALL P1/P2/P3 ================= */
.report-item{
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-sm, 10px);
  margin-bottom: 8px; cursor: pointer; background: var(--paper-2);
  transition: border-color .2s, transform .15s;
}
.report-item:hover{ border-color: var(--jade-soft); transform: translateY(-1px); }
.cr-completeness{
  font-size: 12.5px; color: var(--ink-2); padding: 8px 14px; margin-bottom: 12px;
  background: rgba(200,149,47,.08); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
}
.cr-hook{
  font-size: 12.5px; color: var(--ink-2); margin: 10px 0 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* 对话内舌象卡（P3）：系统卡，不用人设头像 */
.msg.sys{ width: 100%; text-align: left; margin: 10px 0; }
.tcard{
  border: 1px solid var(--line); border-radius: var(--r-sm, 10px);
  background: var(--paper-2); padding: 12px 16px; font-size: 13px; color: var(--ink-2);
}
.tcard .tc-state{ display: none; }
.tcard[data-state="reading"] .tc-state[data-show="reading"],
.tcard[data-state="analyzing"] .tc-state[data-show="analyzing"],
.tcard[data-state="success"] .tc-state[data-show="done"],
.tcard[data-state="low"] .tc-state[data-show="done"],
.tcard[data-state="fail"] .tc-state[data-show="done"]{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tcard[data-state="success"] .tc-state[data-show="done"],
.tcard[data-state="low"] .tc-state[data-show="done"],
.tcard[data-state="fail"] .tc-state[data-show="done"]{ display: block; }
.tc-label{ color: var(--ink-2); }
.tc-bar{ flex: 1; max-width: 240px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tc-bar i{ display: block; height: 100%; background: var(--jade); transition: width .2s; }
.tc-pct{ color: var(--jade-deep); font-size: 12px; min-width: 34px; }
.tc-warn{ margin-top: 8px; font-size: 12px; color: #A4762F; }
.tc-retake{
  margin-left: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(164,118,47,.45); background: transparent;
  font-family: var(--sans); font-size: 11.5px; color: #8A6D3B;
  cursor: pointer; transition: background .18s, border-color .18s;
}
.tc-retake:hover{ background: rgba(200,149,47,.12); border-color: #A4762F; }
.tc-desc{ margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.tc-foot{ margin-top: 10px; font-size: 10.5px; color: var(--ink-4); border-top: 1px dashed var(--line); padding-top: 7px; }
.tcard[data-state="low"] .uz-chip{ opacity: .55; }

/* 独立功能屏的页面包装（我的报告/舌象直达等） */
.page-wrap{ max-width: 960px; margin: 0 auto; padding: 56px 48px 90px; }
.reports-empty{
  text-align: center; padding: 46px 20px 40px;
  display: grid; justify-items: center; gap: 8px;
}
.reports-empty .re-ico{
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px;
  background: rgba(62,124,99,.08); color: var(--jade-deep); margin-bottom: 6px;
}
.reports-empty p{ font-family: var(--serif); font-size: 16px; color: var(--ink); margin: 0; }
.reports-empty span{ font-size: 12.5px; color: var(--ink-3); max-width: 380px; line-height: 1.8; }
.reports-empty .btn{ margin-top: 10px; }

/* 舌象上传区重设计（uz-hero + 图标引导网格） */
.uz-hero{
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 4px 2px 16px; border-bottom: 1px dashed var(--line); margin-bottom: 16px;
}
.uz-hero h3{ font-family: var(--serif); font-size: 17px; color: var(--ink); margin: 0 0 4px; }
.uz-hero p{ font-size: 12.5px; color: var(--ink-3); margin: 0; line-height: 1.8; max-width: 420px; }
.uz-guide-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.uz-tip{
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--paper-3, rgba(62,124,99,.04)); border-radius: var(--r-sm, 10px);
  padding: 10px 12px;
}
.uzt-ico{
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  background: #fff; border: 1px solid var(--line-soft);
}
.uz-tip b{ display: block; font-size: 12.5px; color: var(--jade-deep); }
.uz-tip div span{ display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin-top: 1px; }
.uz-footer{
  margin-top: 18px; padding: 11px 16px; text-align: center;
  background: rgba(62,124,99,.05); border-radius: var(--r-sm, 10px);
  font-size: 13px; color: var(--ink-2);
}
.uz-footer a{ color: var(--jade-deep); font-weight: 600; margin-left: 4px; }
.uz-footer a:hover{ text-decoration: underline; }
@media (max-width: 700px){ .uz-guide-grid{ grid-template-columns: 1fr; } .uz-hero{ flex-direction: column; align-items: flex-start; } }

/* ================= FE-ADJ 三层报告 ================= */
.rp-verdict{ font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.rp-verdict b{ font-family: var(--serif); font-size: 19px; color: var(--ink); }
.rp-verdict span{ color: var(--jade-deep); font-size: 12.5px; margin-left: 8px; }
.rp-l3{
  background: rgba(62,124,99,.06); border: 1px solid rgba(62,124,99,.2);
  border-radius: var(--r-md, 12px); padding: 16px 18px; margin-bottom: 14px;
}
.l3-summary{ font-family: var(--serif); font-size: 14.5px; line-height: 1.9; color: var(--ink); margin: 0 0 10px; }
.l3-actions{ margin: 0; padding-left: 20px; font-size: 13px; line-height: 2; color: var(--ink-2); }
.l3-disclaimer{ font-size: 11px; color: var(--ink-4); margin: 12px 0 0; border-top: 1px dashed var(--line); padding-top: 8px; }
.rp-conflict{
  background: rgba(164,68,59,.06); border: 1px solid rgba(164,68,59,.3);
  border-radius: var(--r-md, 12px); padding: 14px 18px; margin-bottom: 14px;
  font-size: 13px; color: #8C3B32;
}
.rp-conflict b{ display: block; margin-bottom: 4px; }
.rp-conflict p{ margin: 2px 0 0; }
.rp-l2{ display: grid; gap: 8px; margin-bottom: 14px; }
.l2-item{ border: 1px solid var(--line-soft); border-radius: var(--r-sm, 10px); overflow: hidden; background: var(--paper-1, #fff); }
.l2-item.l2-muted{ opacity: .82; }
.l2-head{
  width: 100%; text-align: left; padding: 10px 14px; border: 0; background: transparent;
  font-family: var(--serif); font-size: 13.5px; color: var(--jade-deep); cursor: pointer;
}
.l2-head:hover{ background: rgba(62,124,99,.04); }
.l2-body{ padding: 0 14px 12px; font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.l2-item.is-folded .l2-body{ display: none; }
.rp-l1{ border: 1px solid var(--line-soft); border-radius: var(--r-sm, 10px); padding: 12px 14px; }
.rp-l1-body{ margin-top: 12px; }
.rp-l1-body h6{ font-size: 12.5px; color: var(--jade-deep); margin: 12px 0 6px; letter-spacing: .08em; }
.l1-row{
  display: flex; justify-content: space-between; font-size: 12.5px;
  padding: 4px 0; border-bottom: 1px dashed var(--line);
}
.l1-row b{ font-weight: 600; }
.l1-row i{ font-style: normal; color: var(--ink-4); font-size: 11px; }
.l1-missing{ font-size: 12.5px; color: var(--ink-3); margin: 4px 0; }
.l1-radar-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.l1-radar-grid > div{ display: grid; place-items: center; }
.rp-retake{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px dashed var(--gold); background: rgba(200,149,47,.06);
  border-radius: var(--r-sm, 10px); padding: 12px 16px; margin-top: 12px;
}
.rp-retake b{ font-size: 13px; color: var(--ink); display: block; }
.rp-retake span{ font-size: 12px; color: var(--ink-3); }
@media (max-width: 900px){ .l1-radar-grid{ grid-template-columns: 1fr; } .rp-retake{ flex-direction: column; align-items: flex-start; } }

/* ================= FE-ADJ 报告区 · 全宽三层布局（10-24 重设计） ================= */
.composite-report{ margin: 4px 32px 20px; }
.rp-head{
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.rp-verdict{ font-size: 15px; color: var(--ink-2); display: flex; align-items: baseline; gap: 10px; }
.rp-verdict b{ font-family: var(--serif); font-size: 26px; color: var(--ink); letter-spacing: .02em; }
.rp-verdict span{ color: var(--jade-deep); font-size: 13px; }
.rp-completeness{
  font-size: 12px; color: #7A6420; letter-spacing: .02em;
  background: rgba(200,149,47,.1); border: 1px solid rgba(200,149,47,.3);
  padding: 6px 14px; border-radius: 999px;
}
.rp-top{ display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.rp-l3{
  background: linear-gradient(180deg, rgba(62,124,99,.09), rgba(62,124,99,.04));
  border: 1px solid rgba(62,124,99,.22); border-radius: var(--r-md, 12px);
  padding: 20px 22px;
}
.rp-l3 .l3-summary{ font-family: var(--serif); font-size: 15.5px; line-height: 1.95; color: var(--ink); margin: 0 0 12px; }
.rp-l3 .l3-actions{ margin: 0; padding: 0; list-style: none; counter-reset: act; display: grid; gap: 8px; }
.rp-l3 .l3-actions li{
  counter-increment: act; position: relative; padding-left: 30px;
  font-size: 13.5px; line-height: 1.8; color: var(--ink-2);
}
.rp-l3 .l3-actions li::before{
  content: counter(act); position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: var(--jade-deep); color: #fff;
}
.rp-l3 .l3-disclaimer{ font-size: 11px; color: var(--ink-4); margin: 14px 0 0; border-top: 1px dashed var(--line); padding-top: 9px; }
.rp-radar-card{
  border: 1px solid var(--line-soft); border-radius: var(--r-md, 12px);
  padding: 14px 16px; display: grid; place-items: center; align-content: center;
  background: var(--paper-1, #fff);
}
.rp-radar-card h5{ font-family: var(--serif); font-size: 13px; color: var(--jade-deep); letter-spacing: .12em; margin: 0 0 4px; }
.rp-radar-card .rp-radar-note{ font-size: 10.5px; color: var(--ink-4); margin: 2px 0 0; }
.rp-l2grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.rp-l2grid .l2-item{ border: 1px solid var(--line-soft); border-radius: var(--r-sm, 10px); overflow: hidden; background: var(--paper-1, #fff); }
.rp-l2grid .l2-item.l2-muted{ opacity: .82; }
.rp-l2grid .l2-head{
  width: 100%; text-align: left; padding: 10px 14px; border: 0; background: transparent;
  font-family: var(--serif); font-size: 13.5px; color: var(--jade-deep); cursor: pointer;
  border-bottom: 1px dashed var(--line);
}
.rp-l2grid .l2-head:hover{ background: rgba(62,124,99,.04); }
.rp-l2grid .l2-body{ padding: 10px 14px 12px; font-size: 12.5px; line-height: 1.9; color: var(--ink-2); }
.rp-l2grid .l2-item.is-folded .l2-body{ display: none; }
.rp-l1{ border: 1px solid var(--line-soft); border-radius: var(--r-sm, 10px); padding: 12px 14px; }
.rp-l1-body{ margin-top: 12px; }
.rp-l1-body h6{ font-size: 12.5px; color: var(--jade-deep); margin: 12px 0 6px; letter-spacing: .08em; }
.l1-radar-grid{ display: grid; grid-template-columns: 1fr; place-items: center; margin-bottom: 14px; }
.rp-retake{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px dashed var(--gold); background: rgba(200,149,47,.06);
  border-radius: var(--r-sm, 10px); padding: 12px 16px; margin-bottom: 16px;
}
.rp-retake b{ font-size: 13.5px; color: var(--ink); display: block; }
.rp-retake span{ font-size: 12px; color: var(--ink-3); }
@media (max-width: 980px){
  .composite-report{ margin: 4px 18px 16px; }
  .rp-top{ grid-template-columns: 1fr; }
  .rp-l2grid{ grid-template-columns: 1fr; }
  .rp-retake{ flex-direction: column; align-items: flex-start; }
}

/* ================= 详版解读（九轴卡/症状云/先天详解） ================= */
.axis-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.axis-card{
  background: var(--paper-1, #fff); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm, 10px); padding: 14px 16px;
}
.ac-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ac-head b{ font-family: var(--serif); font-size: 15px; color: var(--ink); }
.ac-score{ font-size: 12px; color: var(--ink-3); }
.ac-bar{ height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.ac-bar i{ display: block; height: 100%; border-radius: 3px; }
.ac-summary{ font-size: 12.5px; line-height: 1.85; color: var(--ink-2); margin: 0 0 6px; }
.ac-traits, .ac-risks, .ac-diet{ font-size: 11.5px; line-height: 1.8; color: var(--ink-3); margin: 3px 0; }
.ac-traits b, .ac-risks b, .ac-diet b{ color: var(--jade-deep); }
.sym-cloud{ display: flex; flex-wrap: wrap; gap: 7px; }
.sym-chip{
  font-size: 12px; padding: 4px 11px; border-radius: 999px;
  background: rgba(62,124,99,.06); color: var(--ink-2); border: 1px solid var(--line-soft);
}
.sym-chip.sym-hab{ background: rgba(200,149,47,.06); }
.innate-detail .l1-row b i{ font-weight: 400; }
@media (max-width: 900px){ .axis-cards{ grid-template-columns: 1fr; } }

/* 体质画像卡：雷达替换 2D 木偶人 */
.twin-figure{ height: 380px; display: grid; place-items: center; }
.twin-figure canvas{ display: block; }

/* 详版体质雷达与主雷达统一（canvas 由 drawRadar 绘制） */
#repTzRadarWrap{ max-width: 460px; margin: 0 auto; }

/* 分项总结/汇总分析 结构 */
.rp-sectitle{
  font-family: var(--serif); font-size: 15px; color: var(--jade-deep);
  letter-spacing: .14em; margin: 22px 0 12px; padding-left: 10px;
  border-left: 3px solid var(--jade);
}
.rt-list{ display: grid; gap: 6px; }
.rt-row{ display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; line-height: 1.8; }
.rt-row i.rt-dot{ flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; position: relative; top: -1px; }
.rt-row b{ flex: 0 0 34px; font-family: var(--serif); font-size: 13px; color: var(--ink); }
.rt-row span{ color: var(--ink-2); }
.rp-l3-title{
  font-family: var(--serif); font-size: 14px; color: var(--jade-deep);
  letter-spacing: .12em; margin: 0 0 10px;
}
.chk-none{ border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 8px; }
.chk-none span{ color: var(--jade-deep); font-weight: 600; }

/* 雷达图综合解读（轴间关联叙事） */
.radar-narrative{
  background: linear-gradient(180deg, rgba(62,124,99,.07), rgba(62,124,99,.02));
  border: 1px solid rgba(62,124,99,.2); border-radius: var(--r-md, 12px);
  padding: 14px 18px; margin-bottom: 14px;
}
.rn-p{ font-size: 13px; line-height: 1.95; color: var(--ink-2); margin: 0 0 9px; }
.rn-p:last-child{ margin-bottom: 0; }

/* 知识库依据区块 */
.rp-kb{
  margin-top: 14px; border: 1px dashed var(--line); border-radius: var(--r-sm, 10px);
  padding: 12px 16px; background: rgba(62,124,99,.03);
}
.rp-kb-title{
  font-family: var(--serif); font-size: 13px; color: var(--jade-deep);
  letter-spacing: .1em; margin: 0 0 8px;
}
.kb-row{ padding: 7px 0; border-bottom: 1px dashed var(--line); }
.kb-row:last-of-type{ border-bottom: 0; }
.kb-row b{ display: block; font-size: 12.5px; color: var(--ink); margin-bottom: 2px; }
.kb-row span{ font-size: 11.5px; line-height: 1.8; color: var(--ink-3); }
/* 知识库配图（书稿插图，来自 /api/kb/fig/{fid}）。
   contain 而不是 cover：穴位图、舌象对照图被裁掉一块就失去意义，宁可留白。 */
.kb-figs{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.kb-fig{ margin: 0; width: 136px; }
.kb-fig img{
  display: block; width: 136px; height: 104px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 6px; background: #F7F5EE; cursor: zoom-in;
}
.kb-fig figcaption{ font-size: 10.5px; line-height: 1.6; color: var(--ink-3); margin-top: 4px; }

/* ===== 报告页排版 v2：统一骨架（2026-10-25） ===== */
.composite-report{ max-width: 900px; margin: 0 auto; }
.rp-sectitle{
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: #3B3D38;
  margin: 28px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft, #EFEAD9);
}
.rp-sectitle i{
  font-style: normal; font-family: Georgia, serif; font-size: 12px;
  color: #8B968F; border: 1px solid var(--line, #E3DDCB); border-radius: 50%;
  width: 26px; height: 26px; display: grid; place-items: center; background: #F5F2EA;
}
.rp-fortune-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.rp-fortune-grid .fcard svg{ max-width: 100%; height: auto; }
.rp-l1 .rp-l1-body[hidden]{ display: none; }
.rp-retake{ margin: 20px 0 6px; }
@media (max-width: 900px){
  .rp-fortune-grid{ grid-template-columns: 1fr; }
}
.l1-radar-grid{ grid-template-columns: 1fr; }
#repTzRadarWrap{ width: 100%; max-width: 460px; height: 340px; margin: 0 auto; }
.rp-charts{ display: grid; grid-template-columns: 1fr; gap: 14px; }
.chart-card{ background: #FDFCF8; border: 1px solid #E8E3D5; border-radius: 14px; padding: 18px 22px; }
.chart-head{ display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chart-head b{ font-size: 15px; color: #3B3D38; }
.chart-head span{ font-size: 12px; color: #8B968F; }
.chart-note{ font-size: 13px; color: #4A5B54; background: #F4F8F3; border-left: 3px solid #3E7C63; border-radius: 6px; padding: 8px 14px; line-height: 1.8; margin-top: 4px; }

/* ===== 双报告 Tab + 健康风险对照卡 ===== */
.rp-tabs{ display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #EFEAD9; }
.rp-tab{ border: 1px solid #E3DDCB; background: #F5F2EA; color: #51665C; border-radius: 10px 10px 0 0;
  padding: 10px 22px; font-size: 14.5px; font-weight: 600; cursor: pointer; border-bottom: none; }
.rp-tab.is-on{ background: #3E7C63; color: #fff; border-color: #3E7C63; }
.risk-card{ background: #FDFCF8; border: 1px solid #E8E3D5; border-radius: 14px; padding: 16px 22px; margin-bottom: 14px; }
.risk-card.risk-major{ border-left: 5px solid var(--rc, #B0442E); }
.risk-card.risk-calm{ border-left: 5px solid #3E7C63; }
.risk-head{ display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px dashed #EFEAD9; }
.risk-head b{ font-size: 15.5px; color: #3B3D38; }
.risk-head b i{ font-style: normal; font-size: 12px; color: #8B968F; font-weight: 400; margin-left: 10px; }
.risk-head span{ font-size: 12.5px; color: #8B968F; }
/* 体质得分条：放在每张体质卡页头（与 01 得分排行同色系，直观对应） */
.risk-score{ display: inline-flex; align-items: center; gap: 9px; }
.risk-score .rs-track{ display: inline-block; width: 116px; height: 9px; background: #EFEAD9; border-radius: 5px; overflow: hidden; }
.risk-score .rs-track em{ display: block; height: 100%; border-radius: 5px; transition: width .5s ease; }
.risk-score .rs-num{ font-style: normal; font-size: 15px; font-weight: 700; font-family: Georgia, 'Microsoft YaHei', serif; }
.risk-score .rs-num u{ text-decoration: none; font-size: 10.5px; font-weight: 400; color: #8B968F; margin-left: 1px; }
.risk-score .rs-lvl{ font-style: normal; font-size: 12px; color: #8B968F; }
.risk-body{ display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; }
@media (max-width: 760px){ .risk-body{ grid-template-columns: 1fr; } }
.risk-col h6{ margin: 0 0 8px; font-size: 12.5px; color: #8B968F; font-weight: 600; letter-spacing: 1px; }
.risk-col ul{ margin: 0; padding-left: 18px; }
.risk-col li{ font-size: 13.5px; color: #33352F; line-height: 2.05; }
.risk-col ul.risk-hl li{ color: #7A3B2E; }
.risk-list{ margin: 0; padding: 0; list-style: none; }
.risk-list li{ padding: 7px 0; border-bottom: 1px dashed #F0EBDD; font-size: 13.5px; line-height: 1.9; }
.risk-list li:last-child{ border-bottom: none; }
.risk-list li b{ display: inline-block; min-width: 190px; padding-right: 12px; color: #3B3D38; }
.risk-list li span{ color: #51665C; }
.risk-calm-txt{ margin: 4px 0 0; font-size: 13.5px; color: #4A5B54; line-height: 1.9; }

/* ===== 生活习惯危机清单 ===== */
.crisis-card{ background: #FDFCF8; border: 1px solid #E8E3D5; border-radius: 14px; padding: 16px 22px; margin-bottom: 14px; }
.crisis-card.crisis-top{ border-left: 5px solid #B0442E; }
.crisis-head{ display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.crisis-head b{ font-size: 15.5px; color: #7A3B2E; }
.crisis-head span{ font-size: 12.5px; color: #8B968F; }
.crisis-title{ font-size: 13px; font-weight: 700; color: #B0442E; margin: 12px 0 6px; letter-spacing: .5px; }
.crisis-list{ margin: 0; padding: 0; list-style: none; counter-reset: ck; }
.crisis-list li{ display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #F0EBDD; font-size: 13.5px; color: #33352F; line-height: 1.95; }
.crisis-list li:last-child{ border-bottom: none; }
.crisis-list li em{ font-style: normal; flex: 0 0 20px; height: 20px; border-radius: 50%; background: #F9E7E3; color: #B0442E; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 20px; margin-top: 3px; }
.crisis-bar{ display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; }
.cb-track{ flex: 1; height: 14px; background: #F2EEE2; border-radius: 999px; overflow: hidden; }
.cb-fill{ height: 100%; border-radius: 999px; transition: width .4s; }
.cb-val{ font-size: 20px; font-weight: 700; font-family: Georgia, serif; white-space: nowrap; }
.cb-val i{ font-style: normal; font-size: 11.5px; color: #8B968F; margin-left: 2px; font-family: 'Microsoft YaHei', sans-serif; }
.crisis-list.crisis-2col{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
@media (max-width: 760px){ .crisis-list.crisis-2col{ grid-template-columns: 1fr; } }

/* ===== 报告页设计语言对齐《后台参考》（2026-10-25 第二轮） ===== */
/* 章节胶囊头：各分区专属色（--sc 主色 / --scbg 渐变底），彩圈编号，替代旧的数字圆点+底线 */
.composite-report .rp-sectitle{
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px; margin: 28px 0 18px;
  border: none; border-left: 6px solid var(--sc, #3E7C63);
  border-radius: 12px; font-size: 16.5px; font-weight: 700; color: #33352F;
  background: linear-gradient(90deg, var(--scbg, #E7F0E8), #FDFCF8 88%);
  letter-spacing: .5px;
}
.composite-report .rp-sectitle i{
  font-style: normal; font-family: Georgia, serif; font-size: 14px; font-weight: 700;
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--sc, #3E7C63); background: #FDFCF8;
  border: 2px solid var(--sc, #3E7C63); border-radius: 50%;
  flex: 0 0 32px; letter-spacing: 0;
}
/* 卡片标题统一衬线居中感 */
.rp-radar-card h5, .chart-head b, .risk-head b, .crisis-head b, .fct{
  font-family: Georgia, 'Microsoft YaHei', serif;
}
.rp-radar-card h5{ text-align: center; font-size: 15px; letter-spacing: .08em; }
.rp-radar-card{ text-align: center; }
/* Tab：参考风格胶囊组 */
.composite-report .rp-tabs{ gap: 12px; border-bottom: none; margin-bottom: 24px; }
.composite-report .rp-tab{
  border-radius: 999px; border: 1.5px solid #E3DDCB; background: #F5F2EA;
  padding: 10px 26px; font-size: 14.5px; letter-spacing: .5px;
  transition: all .18s;
}
.composite-report .rp-tab.is-on{
  background: linear-gradient(135deg, #4E8A6E, #3E7C63); color: #fff;
  border-color: #3E7C63; box-shadow: 0 3px 10px rgba(62,124,99,.25);
}
/* 结论头与完整度徽章 */
.rp-verdict b, .rp-verdict strong{ font-family: Georgia, 'Microsoft YaHei', serif; }
/* 风险卡/危机卡标题配色统一到体质色 */
.risk-head b{ font-size: 16.5px; }
.crisis-head b{ font-size: 16px; }
/* 汇总分析（L3）白卡化 */
#rpL3{ background: #FDFCF8; border: 1px solid #E8E3D5; border-radius: 14px; padding: 18px 24px; }
/* 详细解读按钮居中 */
.rp-l1{ text-align: center; }
.rp-l1 .btn-ghost{ border-radius: 999px; }

/* ===== 方案表卡片 ===== */
.innate-card{ display: grid; grid-template-columns: 170px 1fr; gap: 0; background: #FDFCF8; border: 1px solid #E8E3D5; border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.ic-left{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; padding: 22px 12px; }
.ic-gz{ font-size: 13px; opacity: .92; letter-spacing: 2px; }
.ic-char{ font-size: 58px; font-weight: 700; font-family: Georgia, 'KaiTi', serif; line-height: 1.15; text-shadow: 0 2px 8px rgba(0,0,0,.18); }
.ic-tag{ font-size: 12px; background: rgba(255,255,255,.22); border-radius: 999px; padding: 3px 12px; }
.ic-right{ padding: 16px 22px; }
.ic-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ic-table td{ padding: 6px 8px; border-bottom: 1px dashed #EFEAD9; line-height: 1.7; }
.ic-table td:first-child{ width: 96px; color: #8B968F; }
.ic-lean{ margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.ic-lean span{ background: #F4F8F3; border: 1px solid #D8E5DA; color: #3E7C63; border-radius: 999px; padding: 3px 12px; font-size: 12px; }
.ic-note{ font-size: 12.5px; color: #8B968F; line-height: 1.85; margin: 10px 0 0; }
.plan-group{ margin-bottom: 16px; }
.pg-head{ display: flex; justify-content: space-between; align-items: baseline; padding: 10px 16px; background: #EAF1EC; border-radius: 10px; margin-bottom: 10px; }
.pg-head b{ font-family: Georgia, 'Microsoft YaHei', serif; font-size: 15.5px; color: #3B3D38; }
.pg-head span{ font-size: 12px; color: #8B968F; }
.pg-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px){ .pg-grid{ grid-template-columns: 1fr; } }
.pg-card{ background: #FDFCF8; border: 1px solid #E8E3D5; border-radius: 12px; padding: 14px 16px; }
.pg-card h6{ margin: 0 0 8px; font-size: 13.5px; color: #3E7C63; }
.pg-card p{ margin: 0; font-size: 13px; line-height: 2; color: #33352F; text-align: justify; }
.gongfa-card{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; background: #FDFCF8; border: 1px solid #E8E3D5; border-radius: 14px; padding: 18px 22px; }
@media (max-width: 860px){ .gongfa-card{ grid-template-columns: 1fr; } }
.gf-video video{ width: 100%; border-radius: 12px; border: 1px solid #E3DDCB; background: #000; display: block; }
/* 打印 / 另存 PDF 时视频无法播放，改用演示截图占位，避免出现黑框 */
.gf-poster{ display: none; width: 100%; border-radius: 12px; border: 1px solid #E3DDCB; }
@media print{
  .gf-video video{ display: none; }
  .gf-poster{ display: block; }
  .gf-vn::after{ content: "（视频请在网页端观看）"; color: #8B968F; }
}
.gf-vn{ font-size: 12.5px; color: #8B968F; margin: 8px 0 0; line-height: 1.7; }
.gf-steps h6{ margin: 0 0 10px; font-size: 13.5px; color: #C8952F; letter-spacing: .5px; }
.gf-steps ol{ margin: 0; padding-left: 20px; }
.gf-steps li{ font-size: 13.5px; line-height: 2.1; color: #33352F; }
.gf-steps li b{ color: #C8952F; }
.gf-fit{ font-size: 12.5px; color: #51665C; background: #F4F8F3; border-left: 3px solid #3E7C63; border-radius: 6px; padding: 8px 14px; line-height: 1.9; margin: 12px 0 0; }
.fives-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fives-table th, .fives-table td{ padding: 9px 12px; border-bottom: 1px solid #EFEAD9; text-align: left; line-height: 1.8; }
.fives-table th{ color: #8B968F; font-weight: 600; font-size: 12.5px; }
.fives-table td b{ color: #4E7F9E; }
.ic-lean-t{ font-style: normal; font-size: 12px; color: #8B968F; align-self: center; }
.ic-lean span em{ font-style: normal; font-size: 11px; color: #B0442E; margin-left: 4px; }

/* ===== 七维方案卡（吃喝拉撒睡动养） ===== */
.habit-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 860px){ .habit-grid{ grid-template-columns: 1fr; } }
.habit-card{ display: flex; gap: 14px; background: #FDFCF8; border: 1px solid #E8E3D5; border-radius: 12px; padding: 14px 16px; }
.hc-zi{ flex: 0 0 44px; height: 44px; border-radius: 12px; background: linear-gradient(160deg, #3E7C63, #2F6350); color: #fff; font-size: 24px; font-weight: 700; font-family: 'KaiTi', serif; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(62,124,99,.25); }
.hc-body{ flex: 1; min-width: 0; }
.hc-title{ display: block; font-size: 14px; color: #3B3D38; margin-bottom: 6px; font-family: Georgia, 'Microsoft YaHei', serif; }
.hc-why{ margin: 0 0 6px; font-size: 12.5px; color: #33352F; line-height: 1.85; text-align: justify; }
.hc-how{ margin: 0; font-size: 12px; color: #51665C; line-height: 1.8; background: #F4F8F3; border-left: 3px solid #3E7C63; border-radius: 5px; padding: 5px 10px; text-align: justify; }

/* ===== 报告模式下整页对齐（辨证卡/雷达面板与报告面板同宽居中） ===== */
body.report-on #screen-twin .twin-layout{ grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; padding: 24px 0 0; }
body.report-on #screen-twin .twin-bottom{ max-width: 900px; margin: 0 auto; padding: 0 0 20px; }
body.report-on #screen-twin .twin-bottom .advice-panel{ display: none; }
body.report-on #screen-twin .composite-report{ max-width: 900px; margin: 0 auto; padding: 24px 26px; }

/* ===== RAG 个性化方案卡 ===== */
.rag-card{ background: linear-gradient(135deg,#FDF8EC,#FDFCF8); border: 1.5px solid #E3C88A; border-radius: 14px; padding: 16px 20px; margin-bottom: 14px; }
.rag-head{ font-size: 13px; font-weight: 700; color: #B08A3E; letter-spacing: 1px; margin-bottom: 8px; }
.rag-body{ font-size: 13.5px; color: #33352F; line-height: 2.05; text-align: justify; }
.rag-basis{ margin-top: 10px; font-size: 12px; color: #8B968F; background: #FAF6EA; border-radius: 8px; padding: 6px 12px; }
.rag-cites{ margin-top: 14px; background: #FAF8F1; border: 1px solid #EFEAD9; border-radius: 10px; padding: 12px 16px; font-size: 12px; color: #51665C; line-height: 1.9; }
.rag-cites b{ display: block; color: #8B968F; font-size: 11.5px; margin-bottom: 6px; letter-spacing: 1px; }
.rag-cites span{ display: inline-block; background: #fff; border: 1px solid #E8E3D5; border-radius: 999px; padding: 2px 12px; margin: 2px 4px 2px 0; }
.muted-t{ font-size:11.5px; color:#8B968F; text-align:center; margin:6px 0 0; line-height:1.7; }
.muted-t{ font-size:11.5px; color:#8B968F; text-align:center; margin:6px 0 0; line-height:1.7; }

/* —— 穴位 3D 子应用（acu3d，tcm-3d 静态包懒加载） —— */
body[data-screen="acu3d"] .rail{ transform: translateX(0); }
.acu3d-wrap{
  display: flex; flex-direction: column; height: 100vh;
  padding-left: var(--rail-w); box-sizing: border-box;
}
.acu3d-bar{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.acu3d-bar strong{ font-size: 14px; }
.acu3d-bar span{ font-size: 12px; color: var(--ink-3, #888); }
.acu3d-bar .sp{ flex: 1; }
.acu3d-frame{ flex: 1; width: 100%; border: 0; background: #101418; }
@media (max-width: 900px){
  .acu3d-wrap{ padding-left: 0; }
}

/* —— 养生新知（care）：节气图文栏目，稿件与公众号同源 —— */
.care-head{ padding: 0 0 22px; }
.care-head h2{
  font-size: 26px; color: var(--ink); letter-spacing: 1.5px;
  margin: 0 0 8px; font-weight: 600;
}
.care-head p{ font-size: 13.5px; color: var(--ink-3); margin: 0; }

.care-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; padding-bottom: 40px;
}
.care-card{
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; padding: 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.care-card:hover{
  transform: translateY(-3px); border-color: var(--jade-soft);
  box-shadow: 0 14px 30px rgba(31,43,38,.10);
}
.care-card-img{ aspect-ratio: 2.33 / 1; overflow: hidden; background: var(--paper-3); }
.care-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.care-card-body{ padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.care-tag{
  font-size: 11.5px; color: var(--jade-deep); background: var(--jade-mist);
  padding: 3px 10px; border-radius: 20px; align-self: flex-start; letter-spacing: .3px;
}
.care-card-body h3{ font-size: 16.5px; line-height: 1.55; color: var(--ink); margin: 0; font-weight: 600; }
.care-card-body p{ font-size: 13px; line-height: 1.75; color: var(--ink-3); margin: 0; }
.care-meta{ margin-top: auto; padding-top: 6px; font-size: 11.5px; color: var(--ink-4); }

.care-article{ max-width: 720px; margin: 0 auto; padding: 0 0 40px; }
.care-back{
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  font-size: 13px; padding: 7px 16px; border-radius: 20px; cursor: pointer;
  margin-bottom: 20px; transition: .2s;
}
.care-back:hover{ border-color: var(--jade-soft); color: var(--jade-deep); }
.care-cover{ width: 100%; border-radius: 14px; display: block; margin: 0 0 22px; }
.care-title{ font-size: 25px; line-height: 1.45; color: var(--ink); margin: 0 0 12px; font-weight: 600; }
.care-digest{ font-size: 13px; color: var(--ink-4); margin: 0 0 22px; }
.care-lead{
  font-size: 15.5px; line-height: 1.95; color: var(--ink-2); margin: 0 0 26px;
  padding: 16px 20px; background: var(--paper-2);
  border-left: 3px solid var(--jade-soft); border-radius: 0 10px 10px 0;
}
.care-sec h3{
  font-size: 18px; color: var(--ink); margin: 2px 0 14px;
  padding-left: 12px; border-left: 4px solid var(--jade); font-weight: 600;
}
.care-num{
  display: block; font-size: 11.5px; letter-spacing: 3px; font-weight: 700;
  color: #c9bda9; margin: 34px 0 5px;
}
.care-sec p{ font-size: 15.5px; line-height: 1.9; color: var(--ink-2); margin: 0 0 14px; text-align: justify; }
.care-b{ color: var(--jade-deep); font-weight: 600; }
.care-hot{ margin: 0 0 14px; }
.care-hot span{
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: rgba(176, 138, 90, .12); color: var(--gold);
  font-size: 12px; line-height: 1.6; letter-spacing: .3px;
}
.care-inline{ width: 100%; border-radius: 12px; margin: 2px 0 18px; display: block; }
.care-points{
  background: var(--paper-2); border-radius: 12px;
  padding: 16px 18px 6px; margin: 4px 0 20px;
}
.care-points-h{
  display: block; font-size: 11.5px; letter-spacing: 1.5px; font-weight: 700;
  color: var(--gold); margin: 0 0 10px;
}
.care-points ol{ list-style: none; margin: 0; padding: 0; }
.care-points li{
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14.5px; line-height: 1.8; color: var(--ink-2); margin: 0 0 10px;
}
.care-points li i{
  flex: 0 0 auto; font-style: normal; font-weight: 700; font-size: 13px;
  color: var(--jade); min-width: 12px;
}
.care-tip{
  background: var(--paper-3); border-radius: 10px; padding: 14px 18px;
  margin: 0 0 22px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2);
}
.care-tip b{ color: var(--gold); margin-right: 8px; }
.care-ending{
  font-size: 15px; line-height: 1.95; color: var(--ink-2);
  margin: 30px 0 0; padding-top: 20px; border-top: 1px dashed var(--line);
}
.care-disc{
  font-size: 12px; line-height: 1.8; color: var(--ink-4);
  margin: 22px 0 0; padding: 12px 16px; background: var(--paper-3); border-radius: 8px;
}
.care-empty{ font-size: 13.5px; color: var(--ink-4); padding: 46px 0; text-align: center; }

@media (max-width: 720px){
  .care-grid{ grid-template-columns: 1fr; }
  .care-title{ font-size: 21px; }
  .care-sec p{ font-size: 15px; }
}

/* ============================================================
   数字人 · 生成流程（配音 → 生成 → 成片）
   ============================================================ */
.st-av-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.st-av-head h5{ margin:0; }
.st-av-head-r{ display:flex; align-items:center; gap:8px; }
.st-av-badge{ font-size:10.5px; color:var(--clay); background:#FBF1E4; border:1px solid #EBD8BE;
  padding:2px 7px; border-radius:99px; }

.st-av-steps{ display:flex; align-items:center; gap:6px; margin:2px 0 12px; }
.st-av-steps span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-4); }
.st-av-steps span i{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:10px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink-4); }
.st-av-steps span.is-done{ color:var(--jade-deep); }
.st-av-steps span.is-done i{ background:var(--jade); border-color:var(--jade); color:#fff; }
.st-av-steps span.is-run{ color:var(--jade); }
.st-av-steps span.is-run i{ border-color:var(--jade-soft); color:var(--jade); box-shadow:0 0 0 3px var(--jade-mist); }
.st-av-steps em{ flex:0 0 22px; height:1px; background:var(--line); }
.st-av-steps em.is-done{ background:var(--jade-soft); }
.st-av-steps em.is-run{ background:linear-gradient(90deg, var(--jade-soft), var(--line)); }

.st-av-go{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0 0;
  padding:12px 14px; background:linear-gradient(180deg,#F3F8F4,#EFF6F1);
  border:1px solid #DCE9E1; border-radius:var(--r-md); }
.st-av-go-btn{ min-width:198px; }
.st-av-gohint{ font-size:11.5px; color:var(--ink-3); line-height:1.75; flex:1 1 220px; }
.st-av-gohint b{ color:var(--jade-deep); }

.st-av-prog{ margin-top:12px; }
.st-av-prog[hidden]{ display:none; }
.st-av-prog-bar{ height:6px; border-radius:99px; background:var(--paper-3); overflow:hidden; }
.st-av-prog-bar i{ display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--jade-soft), var(--jade)); transition:width .35s ease; }
.st-av-prog span{ display:block; margin-top:6px; font-size:11.5px; color:var(--ink-3); }

.st-av-out:empty{ display:none; }
.st-av-block{ margin-top:12px; padding:14px 16px; border-radius:var(--r-md);
  background:#FBF3EC; border:1px solid #EEDCC9; font-size:12.5px; color:var(--ink-2); line-height:1.85; }
.st-av-block b{ display:block; color:var(--clay); font-size:13px; margin-bottom:4px; }
.st-av-block.is-bad{ background:#FBEEEC; border-color:#EED3CE; }
.st-av-block.is-bad b{ color:var(--seal); }
.st-av-block p{ margin:0 0 8px; }
.st-av-block-act{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.st-av-block-code{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.st-av-block-code code{ font-size:11px; padding:2px 6px; background:#fff;
  border:1px solid #EEDCC9; border-radius:4px; color:var(--ink-2); }

.st-av-result{ margin-top:12px; display:flex; gap:18px; align-items:flex-start; }
.st-av-rside{ flex:1 1 240px; min-width:0; }
.st-av-video{ width:100%; max-width:288px; flex:0 0 auto; aspect-ratio:9/16; object-fit:cover;
  border-radius:var(--r-md); background:#0E1512; display:block; }
.st-av-rmeta{ margin:2px 0 12px; }
.st-av-rmeta b{ display:block; font-size:12.5px; color:var(--ink); }
.st-av-rmeta span{ display:block; margin-top:3px; font-size:11.5px; color:var(--ink-3); line-height:1.75; }
.st-av-rmeta u{ text-decoration:none; color:var(--clay); border-bottom:1px dashed currentColor; }
.st-av-racts{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ============================================================
   素材库（视频 / 音频 / 图片）
   ============================================================ */
body.av-lib-open{ overflow:hidden; }
.av-lib{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; }
.av-lib[hidden]{ display:none; }
.av-lib-mask{ position:absolute; inset:0; background:rgba(19,28,24,.44); }
.av-lib-panel{ position:relative; width:min(1180px, 96vw); height:min(780px, 92vh);
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); display:flex; flex-direction:column; overflow:hidden; }
.av-lib-top{ display:flex; align-items:center; gap:14px; padding:14px 20px; flex:none;
  border-bottom:1px solid var(--line-soft); }
.av-lib-title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.av-lib-title h3{ margin:0; font-size:16px; font-family:var(--serif); color:var(--ink); letter-spacing:.5px; }
.av-lib-title span{ font-size:11.5px; color:var(--ink-3); }
.av-lib-title b{ color:var(--jade-deep); }
.av-lib-search{ position:relative; margin-left:auto; flex:0 0 190px; }
.av-lib-search input{ width:100%; box-sizing:border-box; height:30px; padding:0 10px 0 26px;
  font-size:12px; border:1px solid var(--line); border-radius:99px; background:var(--paper);
  color:var(--ink); font-family:inherit; }
.av-lib-search input:focus{ outline:none; border-color:var(--jade-soft); background:var(--paper-2); }
.av-lib-search::before{ content:"⌕"; position:absolute; left:9px; top:50%; transform:translateY(-50%);
  color:var(--ink-4); font-size:14px; pointer-events:none; }
.av-lib-tabs{ margin-left:0; display:flex; gap:4px; background:var(--paper-3);
  padding:3px; border-radius:99px; flex:none; }
.av-lib-tabs button{ border:0; background:transparent; padding:6px 16px; border-radius:99px;
  font-size:12.5px; color:var(--ink-3); cursor:pointer; font-family:inherit; }
.av-lib-tabs button.on{ background:var(--paper-2); color:var(--jade-deep); box-shadow:var(--shadow-1); }
.av-lib-x{ border:0; background:transparent; font-size:15px; color:var(--ink-3);
  cursor:pointer; padding:6px 8px; border-radius:8px; }
.av-lib-x:hover{ background:var(--paper-3); color:var(--ink); }

.av-lib-drop{ margin:12px 20px 0; padding:12px 14px; border:1.5px dashed var(--line); flex:none;
  border-radius:var(--r-md); display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  cursor:pointer; transition:border-color .18s, background .18s; background:var(--paper); }
.av-lib-drop:hover, .av-lib-drop.is-over{ border-color:var(--jade-soft); background:var(--jade-mist-2); }
.av-lib-drop-ico{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--jade-mist); color:var(--jade-deep); font-size:13px; }
.av-lib-drop b{ color:var(--jade-deep); }
.av-lib-drop-hint{ margin-left:auto; font-size:11px; color:var(--ink-4); }

/* 弹层内滚动：panel 定高 → body 占满剩余 → grid 自己滚，卡片不会再顶出弹层 */
.av-lib-body{ position:relative; flex:1 1 auto; min-height:0; display:flex; }
.av-lib-grid{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:14px 20px 20px; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:12px; align-content:start; }
.av-lib-grid::-webkit-scrollbar{ width:9px; }
.av-lib-grid::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; border:2px solid var(--paper-2); }
.av-lib-grid::-webkit-scrollbar-thumb:hover{ background:var(--jade-soft); }
.av-lib-foot{ flex:none; display:flex; align-items:center; gap:14px; padding:8px 20px;
  border-top:1px solid var(--line-soft); background:var(--paper-3); font-size:11px; color:var(--ink-4); }
.av-lib-foot b{ color:var(--jade-deep); }
.av-lib-foot-tip{ margin-left:auto; }
.avm-card{ background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .18s, box-shadow .18s; }
.avm-card:hover{ border-color:var(--jade-soft); box-shadow:var(--shadow-1); }
.avm-card.is-miss{ border-color:#E0BFB8; }
.avm-thumb{ position:relative; aspect-ratio:3/4; background:#0E1512; cursor:pointer; overflow:hidden; }
.avm-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.avm-noposter{ display:grid; place-items:center; height:100%; color:#5A6B62; font-size:11px; }
.avm-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(246,244,236,.86); color:var(--jade-deep); font-size:12px; }
.avm-dur{ position:absolute; right:6px; bottom:6px; font-size:10.5px; color:#fff;
  background:rgba(14,21,18,.62); padding:1px 5px; border-radius:4px; }
.avm-badges{ position:absolute; left:6px; top:6px; display:flex; gap:4px; flex-wrap:wrap; }
.avm-badge{ font-size:9.5px; padding:1px 5px; border-radius:3px;
  background:rgba(246,244,236,.92); color:var(--ink-2); }
.avm-badge.is-render{ background:rgba(200,149,47,.94); color:#fff; }
.avm-badge.is-clip{ background:rgba(62,124,99,.94); color:#fff; }
.avm-badge.is-miss{ background:rgba(166,61,52,.94); color:#fff; }
.avm-wave{ height:100%; display:flex; align-items:center; justify-content:center; gap:2px;
  padding:0 12px; background:linear-gradient(160deg,#2C5C49,#16302A); }
.avm-wave i{ width:3px; border-radius:2px; background:rgba(180,220,200,.78); }
.avm-meta{ padding:8px 10px 6px; }
.avm-name{ font-size:12.5px; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.avm-sub{ font-size:10.5px; color:var(--ink-4); margin-top:2px; }
.avm-tags{ display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.avm-tags span{ font-size:9.5px; color:var(--jade); background:var(--jade-mist-2);
  padding:1px 5px; border-radius:3px; }
.avm-acts{ display:flex; gap:4px; padding:0 10px 10px; margin-top:auto; }
.avm-acts button{ flex:1; border:1px solid var(--line); background:var(--paper); border-radius:5px;
  font-size:11px; padding:4px 0; color:var(--ink-2); cursor:pointer; font-family:inherit; }
.avm-acts button:hover{ border-color:var(--jade-soft); color:var(--jade-deep); background:var(--jade-mist-2); }
.avm-acts button.is-danger:hover{ border-color:#E0BFB8; color:var(--seal); background:#FBEEEC; }
.avm-clip{ padding:0 10px 10px; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.avm-clip[hidden]{ display:none; }
.avm-clip label{ font-size:10px; color:var(--ink-4); display:flex; flex-direction:column; gap:3px; }
.avm-clip select{ font-size:11px; padding:3px 4px; border:1px solid var(--line);
  border-radius:4px; background:var(--paper-2); color:var(--ink); font-family:inherit; }
.avm-clip-act{ grid-column:1 / -1; display:flex; gap:6px; }
.avm-clip-act button{ flex:1; font-size:11px; padding:5px 0; }
.avm-loading{ grid-column:1 / -1; padding:40px; text-align:center;
  color:var(--ink-4); font-size:12.5px; }
.av-lib-empty{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px; padding:40px; text-align:center; color:var(--ink-3); }
.av-lib-empty[hidden]{ display:none; }
.av-lib-empty b{ font-size:14px; color:var(--ink); }
.av-lib-empty p{ margin:0; font-size:12px; line-height:1.9; color:var(--ink-3); }
.avm-empty-ico{ font-size:30px; opacity:.7; }

/* 详情层：盖在网格上方，居中，不再压着卡片露半截 */
.av-lib-detail{ position:absolute; inset:0; z-index:5; display:flex;
  align-items:center; justify-content:center; padding:22px; }
.av-lib-detail[hidden]{ display:none; }
.avd-mask{ position:absolute; inset:0; background:rgba(19,28,24,.5); }
.avd-card{ position:relative; display:flex; gap:18px; width:min(760px, 100%); max-height:100%;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); padding:16px; overflow:hidden; }
.avd-x{ position:absolute; right:8px; top:8px; z-index:2; border:0; background:transparent;
  color:var(--ink-4); font-size:14px; cursor:pointer; padding:4px 7px; border-radius:7px; }
.avd-x:hover{ background:var(--paper-3); color:var(--ink); }
.avd-media{ flex:0 0 268px; width:268px; display:grid; place-items:center; background:#0E1512;
  border-radius:var(--r-md); overflow:hidden; }
.avd-media video{ width:100%; max-height:min(58vh, 520px); display:block; background:#0E1512; }
.avd-media img{ max-width:100%; max-height:min(58vh, 520px); display:block; object-fit:contain; }
.avd-media video::-webkit-media-controls-panel{ background:rgba(14,21,18,.7); }
.avd-audio{ width:100%; padding:20px 14px; display:flex; flex-direction:column; gap:14px;
  align-items:center; background:linear-gradient(160deg,#2C5C49,#16302A); }
.avd-audio audio{ width:100%; }
.avd-wave{ display:flex; gap:2px; align-items:center; justify-content:center; height:104px; width:100%; }
.avd-wave i{ width:3px; border-radius:2px; background:rgba(180,220,200,.8); }
.avd-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:10px;
  overflow-y:auto; padding-right:4px; }
.avd-head b{ display:block; font-size:14px; color:var(--ink); word-break:break-all; padding-right:26px; }
.avd-head span{ font-size:11px; color:var(--ink-4); }
.avd-kv{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:11.5px; }
.avd-kv dt{ color:var(--ink-4); white-space:nowrap; }
.avd-kv dd{ margin:0; color:var(--ink-2); word-break:break-all; }
.avd-tags{ display:none; gap:5px; flex-wrap:wrap; }
.avd-tags.on{ display:flex; }
.avd-tags span{ font-size:10px; color:var(--jade); background:var(--jade-mist-2);
  padding:1px 6px; border-radius:4px; }
.avd-clip{ border:1px dashed var(--line); border-radius:var(--r-md); padding:10px;
  display:flex; flex-direction:column; gap:8px; background:var(--paper); }
.avd-clip[hidden]{ display:none; }
.avd-clip-title{ font-size:10.5px; color:var(--ink-4); line-height:1.6; }
.avd-clip-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.avd-clip-grid label{ font-size:10px; color:var(--ink-4); display:flex; flex-direction:column; gap:3px; }
.avd-clip-grid select{ font-size:11px; padding:4px 5px; border:1px solid var(--line);
  border-radius:4px; background:var(--paper-2); color:var(--ink); font-family:inherit; }
.avd-acts{ margin-top:auto; display:flex; gap:6px; flex-wrap:wrap; padding-top:4px; }
.avd-acts button, .avd-acts a{ flex:1 1 76px; text-align:center; border:1px solid var(--line);
  background:var(--paper); border-radius:6px; font-size:11.5px; padding:7px 0; color:var(--ink-2);
  cursor:pointer; font-family:inherit; text-decoration:none; }
.avd-acts button:hover, .avd-acts a:hover{ border-color:var(--jade-soft); color:var(--jade-deep);
  background:var(--jade-mist-2); }
.avd-acts .is-danger:hover{ border-color:#E0BFB8; color:var(--seal); background:#FBEEEC; }
.avd-acts .btn-primary{ background:var(--jade); border-color:var(--jade); color:#fff; }
.avd-acts .btn-primary:hover{ background:var(--jade-deep); border-color:var(--jade-deep); color:#fff; }
.avd-acts button[hidden]{ display:none; }
@media (max-width: 820px){
  .av-lib-panel{ width:100vw; height:94vh; border-radius:0; border:0; }
  .av-lib-grid{ grid-template-columns:repeat(auto-fill, minmax(136px, 1fr)); padding:12px 12px 16px; gap:10px; }
  .av-lib-search{ flex:0 0 130px; }
  .av-lib-foot-tip{ display:none; }
  .avd-card{ flex-direction:column; padding:14px; }
  .avd-media{ flex:none; width:100%; }
  .avd-media video{ max-height:30vh; }
  .avd-media img{ max-height:30vh; width:auto; }
  /* 窄屏信息区要滚，操作按钮吸在底部，别让人找不到 */
  .avd-acts{ position:sticky; bottom:0; background:var(--paper-2); padding:8px 0 2px; }
}

.st-av-kv{ margin:0 0 12px; display:flex; flex-direction:column; gap:5px; }
.st-av-kv > div{ display:flex; gap:10px; font-size:11.5px; line-height:1.6; }
.st-av-kv dt{ flex:0 0 34px; color:var(--ink-4); }
.st-av-kv dd{ margin:0; color:var(--ink-2); }

/* ================= MG 动画弹层 ================= */
.st-item-mg{
  flex: none; font-size: 9.5px; letter-spacing: .06em; color: var(--jade-deep);
  background: #fff; border: 1px solid #D7E7DD; border-radius: 4px;
  padding: 1px 6px; cursor: pointer; transition: .16s; line-height: 1.6;
}
.st-item-mg:hover{ background: var(--jade); border-color: var(--jade); color: #fff; }

.mg-mask{ position:fixed; inset:0; z-index:72; background:rgba(18,30,26,.36);
  display:flex; align-items:center; justify-content:center; padding:16px; }
.mg-mask[hidden]{ display:none; }
.mg-panel [hidden]{ display:none !important; }  /* 类里的 display:flex 会盖掉 hidden，这里兜住 */
.mg-panel{ width:min(1000px,95vw); height:min(830px,92vh); background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  display:flex; flex-direction:column; overflow:hidden; }
.mg-top{ display:flex; align-items:center; gap:14px; padding:14px 20px;
  border-bottom:1px solid var(--line-soft); }
.mg-ttl{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mg-ttl b{ font-size:15px; color:var(--jade-deep); letter-spacing:.04em; }
.mg-ttl span{ font-size:11.5px; color:var(--ink-4); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.mg-x{ margin-left:auto; flex:none; width:26px; height:26px; border:0; border-radius:50%;
  background:transparent; color:var(--ink-4); cursor:pointer; font-size:13px; }
.mg-x:hover{ background:var(--paper-3); color:var(--ink); }
.mg-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 20px 4px; }

.mg-load{ height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; color:var(--ink-3); }
.mg-spin{ width:26px; height:26px; border-radius:50%; border:2px solid var(--line);
  border-top-color:var(--jade); animation:mgspin .9s linear infinite; }
@keyframes mgspin{ to{ transform:rotate(360deg); } }
.mg-load p{ font-size:12.5px; }

.mg-meta{ display:flex; align-items:flex-end; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.mg-meta label{ display:flex; flex-direction:column; gap:5px; font-size:10.5px;
  letter-spacing:.1em; color:var(--ink-4); }
.mg-meta input, .mg-meta select{ font-family:inherit; font-size:12.5px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:7px; padding:7px 10px; }
.mg-meta input{ width:280px; }
.mg-count{ margin-left:auto; font-size:11px; color:var(--ink-4); }

.mgs{ border:1px solid var(--line-soft); border-radius:12px; background:#fff;
  padding:12px 14px; margin-bottom:10px; }
.mgs-top{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.mgs-idx{ flex:none; width:21px; height:21px; border-radius:50%; background:var(--jade-mist);
  color:var(--jade-deep); font-size:10.5px; display:flex; align-items:center;
  justify-content:center; }
.mgs-type{ font-family:inherit; font-size:11.5px; color:var(--ink-2); background:var(--paper-2);
  border:1px solid var(--line); border-radius:6px; padding:3px 7px; }
.mgs-acts{ margin-left:auto; display:flex; gap:4px; }
.mgs-acts button{ border:1px solid var(--line-soft); background:#fff; color:var(--ink-4);
  border-radius:5px; width:22px; height:22px; font-size:11px; cursor:pointer; line-height:1; }
.mgs-acts button:hover{ color:var(--ink); border-color:var(--line); }
.mgs-acts button.mgs-del:hover{ color:var(--seal); border-color:#E0BFB8; background:#FBEEEC; }
.mgs-text{ width:100%; font-family:inherit; font-size:12.5px; line-height:1.72; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; resize:vertical;
  min-height:52px; }
.mgs-text:focus{ outline:none; border-color:var(--jade-soft); }
.mgs-fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.mgs-fields label{ display:flex; flex-direction:column; gap:4px; font-size:10px;
  letter-spacing:.08em; color:var(--ink-4); }
.mgs-fields input{ font-family:inherit; font-size:12px; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line-soft); border-radius:6px; padding:6px 8px; }
.mgs-fields input:focus, .mgs-fields textarea:focus{ outline:none; border-color:var(--jade-soft); background:#fff; }
.mgs-fields textarea{ font-family:inherit; font-size:12px; line-height:1.7; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:6px; padding:6px 8px;
  resize:vertical; min-height:46px; }
.mgs-fields .wide{ grid-column:1/-1; }
.mg-add{ width:100%; border:1.5px dashed var(--line); background:transparent; color:var(--ink-4);
  border-radius:10px; padding:10px; font-family:inherit; font-size:12px; cursor:pointer;
  margin-bottom:8px; }
.mg-add:hover{ border-color:var(--jade-soft); color:var(--jade-deep); background:var(--jade-mist-2); }

.mg-run{ height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; }
.mg-bar{ width:min(420px,80%); height:6px; border-radius:99px; background:var(--paper-3);
  overflow:hidden; }
.mg-bar i{ display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--jade),var(--jade-deep)); transition:width .5s; }
.mg-phase{ font-size:12.5px; color:var(--ink-2); letter-spacing:.06em; }
.mg-run-tip{ font-size:11px; color:var(--ink-4); }

.mg-done{ height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; }
.mg-done video{ max-height:calc(min(830px,92vh) - 240px); width:auto; border-radius:12px;
  background:#0E1512; box-shadow:var(--shadow-1); }
.mg-done-meta{ font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; }

.mg-foot{ flex:none; display:flex; align-items:center; gap:12px; padding:12px 20px;
  border-top:1px solid var(--line-soft); background:var(--paper-2); }
.mg-hint{ font-size:11px; color:var(--ink-4); margin-right:auto; }
.mg-foot .btn, .mg-foot .import-btn{ flex:none; }
@media (max-width:760px){
  .mg-panel{ height:min(96vh, 900px); }
  .mg-meta input{ width:100%; }
  .mgs-fields{ grid-template-columns:1fr; }
}

/* ============================================================
   工作台记忆面板 + 口播改稿（记忆层的两个进料口）
   ============================================================ */
.mem-blk{ border:1px solid var(--line-soft); border-radius:10px; background:var(--paper);
  padding:12px 14px; margin-bottom:12px; }
.mem-blk h5{ font-size:12px; letter-spacing:.08em; color:var(--ink-2); font-weight:600;
  display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.mem-note{ font-size:10.5px; color:var(--ink-4); letter-spacing:.02em; font-weight:400; }
.mem-tip{ font-size:11px; line-height:1.8; color:var(--ink-4); margin:8px 0 0; }
.mem-block{ font-family:var(--mono, ui-monospace, monospace); font-size:11.5px; line-height:1.9;
  white-space:pre-wrap; word-break:break-word; color:var(--ink-2);
  background:var(--paper-2); border-left:3px solid var(--gold);
  padding:10px 12px; border-radius:0 8px 8px 0; margin:0; }
.mem-empty{ font-size:11.5px; color:var(--ink-4); line-height:1.8; padding:6px 0; }
.mem-rule{ display:grid; grid-template-columns:52px 1fr auto auto auto; align-items:center;
  gap:8px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:12.5px; }
.mem-rule:last-child{ border-bottom:0; }
.mem-rule.off{ opacity:.45; }
.mem-rule.off .mem-txt{ text-decoration:line-through; }
.mem-cat{ font-size:10.5px; letter-spacing:.06em; color:var(--jade-deep, #2F6B54);
  background:rgba(62,124,99,.1); border-radius:20px; padding:2px 8px; text-align:center; }
.mem-txt{ color:var(--ink); }
.mem-stats{ font-size:10.5px; color:var(--ink-4); white-space:nowrap; }
.mem-del{ color:#B4462F; }
.mem-cand{ padding:9px 0; border-bottom:1px dashed var(--line); }
.mem-cand:last-child{ border-bottom:0; }
.mem-cand select, .mem-cand input{ font-family:inherit; font-size:12px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:7px; padding:5px 8px; }
.mem-cand select{ width:74px; }
.mem-cand input{ width:min(430px,52%); margin:0 8px; }
.mem-conf{ font-size:10.5px; color:var(--ink-4); margin-right:8px; }
.mem-conf.high{ color:var(--jade-deep, #2F6B54); }
.mem-conf.low{ color:#B4462F; }
.mem-why{ font-size:10.5px; color:var(--ink-4); margin-top:5px; line-height:1.7; }
.mem-ev{ display:flex; flex-wrap:wrap; gap:7px; align-items:baseline;
  padding:5px 0; border-bottom:1px dashed var(--line); font-size:11.5px; }
.mem-ev:last-child{ border-bottom:0; }
.mem-kind{ font-size:10px; color:var(--ink-4); white-space:nowrap; }
.mem-ev s{ color:var(--ink-4); text-decoration-color:rgba(180,70,47,.5); }
.mem-ev b{ color:var(--ink); font-weight:600; }
.mem-ev .mem-note{ width:100%; margin-top:-2px; }
.mem-panel{ width:min(1120px,95vw); }
/* 选题栏只有 280-306px：「记忆」「素材库」两个按钮按默认内边距排不下，标题就被挤成竖排 */
.st-pick .import-btn{ padding:5px 10px; letter-spacing:.02em; }
/* 常驻的登录态入口：邮箱可能很长，截断就行，别把选题顶栏撑成两行 */
#stWhoBtn{ max-width:150px; overflow:hidden; text-overflow:ellipsis; }
/* 三张列表各自封顶滚动：40 条事件不加限高会把整块面板撑出一条长长的空白 */
.mem-rules, .mem-cands{ max-height:230px; overflow-y:auto; }
.mem-evs{ max-height:260px; overflow-y:auto; }
.mem-load{ display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:38px 0; font-size:12px; color:var(--ink-4); text-align:center; line-height:1.8; }

.st-edit-btn{ float:right; margin-top:-3px; }
.st-edit{ margin-top:10px; padding:12px; border:1px solid var(--line);
  border-radius:10px; background:var(--paper); }
.st-fld{ display:block; font-size:11px; letter-spacing:.06em; color:var(--ink-3); margin-bottom:10px; }
.st-fld input, .st-fld textarea{ display:block; width:100%; box-sizing:border-box; margin-top:4px;
  font-family:inherit; font-size:13px; line-height:1.9; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.st-fld textarea{ resize:vertical; }
.st-edit-act{ display:flex; align-items:center; gap:10px; }
.st-ed-warn{ color:#B4462F; }

/* ============================================================
   全站页脚（ICP 备案 · 免责声明）
   ============================================================ */
.site-foot{
  position: relative; z-index: 1;
  padding: 36px 0 44px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper-3);
}
.sf-inner{ max-width: 960px; margin: 0 auto; padding: 0 48px; text-align: center; }
.sf-disc{
  margin: 0 0 12px;
  font-size: 12px; line-height: 1.8; color: var(--ink-4);
  letter-spacing: .01em;
}
.sf-legal{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; font-size: 12px; color: var(--ink-3); letter-spacing: .02em;
}
.sf-sep{ color: var(--line); }
.sf-icp{
  color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.sf-icp:hover{ color: var(--jade-deep); border-bottom-color: var(--jade-soft); }
@media (max-width:760px){
  .site-foot{ padding: 28px 0 34px; }
  .sf-inner{ padding: 0 22px; }
  .sf-disc{ font-size: 11.5px; }
}

/* ============================================================
   在线素材搜索（素材库内联面板）
   ============================================================ */
.av-lib-find{
  flex:none; height:30px; padding:0 12px; border-radius:99px; cursor:pointer;
  border:1px solid var(--jade-soft); background:var(--jade-mist-2); color:var(--jade-deep);
  font-size:12px; font-family:inherit; letter-spacing:.02em;
  transition:background .18s, border-color .18s, color .18s;
}
.av-lib-find:hover{ background:var(--jade-mist); border-color:var(--jade); }
.av-lib-find.is-on{ background:var(--jade); color:#fff; border-color:var(--jade-deep); }

.mtl-panel{
  flex:none; padding:12px 20px 14px; border-bottom:1px solid var(--line-soft);
  background:var(--jade-mist-2);
}
.mtl-panel[hidden]{ display:none; }
.mtl-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mtl-bar select{
  height:30px; padding:0 8px; font-size:12px; font-family:inherit;
  border:1px solid var(--line); border-radius:8px; background:var(--paper-2); color:var(--ink);
}
.mtl-bar input{
  flex:1 1 200px; min-width:160px; height:30px; box-sizing:border-box; padding:0 12px;
  font-size:12px; font-family:inherit; color:var(--ink);
  border:1px solid var(--line); border-radius:99px; background:var(--paper);
}
.mtl-bar input:focus{ outline:none; border-color:var(--jade-soft); }
.mtl-bar .btn{ height:30px; padding:0 14px; font-size:12px; flex:none; }
.mtl-x{ border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  padding:6px 8px; border-radius:8px; font-size:13px; }
.mtl-x:hover{ background:var(--paper-3); color:var(--ink); }
.mtl-tip{ font-size:11px; color:var(--ink-4); margin:8px 0 0; line-height:1.6; }
.mtl-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:10px; margin-top:10px; max-height:320px; overflow-y:auto;
}
.mtl-grid::-webkit-scrollbar{ width:9px; }
.mtl-grid::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px;
  border:2px solid var(--jade-mist-2); }
.mtl-card{
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:10px;
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:border-color .18s, box-shadow .18s;
}
.mtl-card:hover{ border-color:var(--jade); box-shadow:var(--shadow-1); }
.mtl-card.is-busy{ opacity:.55; pointer-events:none; }
.mtl-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover;
  background:var(--paper-3); display:block; }
.mtl-meta{ padding:6px 8px 8px; display:grid; gap:2px; }
.mtl-name{ font-size:11.5px; color:var(--ink); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mtl-lic{ font-size:10.5px; color:var(--jade-deep); }
.mtl-au{ font-size:10.5px; color:var(--ink-4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }