/* ============================================================
   人体仪表盘 · 状态总面板 · 时间轴
   参考「生命先知」交互：仪表盘为核心，脏腑为按钮逐层展开
   ============================================================ */

/* ---------- 页面容器：给左侧时间轴留位 ---------- */
.dash {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-height: 100vh;
}

/* ---------- 左侧时间轴 ---------- */
.tl {
  flex: none;
  width: 62px;
  background: #fff;
  border-right: 1px solid rgba(197, 204, 199, .5);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  z-index: 20;
  /* 转盘容器：上下两端做透视，形成圆盘转沿的观感 */
  perspective: 460px;
  perspective-origin: 50% 50%;
}
.tl::-webkit-scrollbar { display: none; }

/* 上下渐隐遮罩：模拟圆盘边缘的模糊衰减 */
.tl::before,
.tl::after {
  content: '';
  position: sticky;
  display: block;
  height: 52px;
  margin: 0;
  pointer-events: none;
  z-index: 6;
}
.tl::before {
  top: 0;
  background: linear-gradient(180deg, #fff 8%, rgba(255, 255, 255, .72) 42%, rgba(255, 255, 255, 0) 100%);
}
.tl::after {
  bottom: 0;
  background: linear-gradient(0deg, #fff 8%, rgba(255, 255, 255, .72) 42%, rgba(255, 255, 255, 0) 100%);
}

.tl__ym {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 4px 8px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid rgba(197, 204, 199, .45);
}
.tl__ymTxt { font-size: 13px; font-weight: 700; color: var(--g-d); letter-spacing: .5px; }
.tl__ymSub { font-size: 10px; color: var(--ink3); margin-top: 1px; }

/* 年月设定：点击弹出选择器 */
.tl__ymBtn {
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}

.tl__list {
  padding: 4px 0 20px;
  transform-style: preserve-3d;
}

/* 日期项：默认压扁 + 模糊，滚动到中间时由 JS 切换为清晰态 */
.tl__day {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 4px 9px 6px;
  border: 0;
  background: none;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .15s, opacity .2s, filter .2s, transform .2s;
  /* 远处日期：缩小 + 变淡，模拟圆盘纵深 */
  opacity: var(--o, 1);
  filter: blur(var(--b, 0px));
  transform: scaleX(var(--s, 1));
  transform-origin: center center;
}
.tl__day:active { background: var(--g-l); }
.tl__day.is-on {
  background: var(--g-l);
  border-left-color: var(--g);
}
/* 圆盘中心（当前选中）：放大、去模糊、突出 */
.tl__day.is-focus {
  opacity: 1;
  filter: blur(0px);
  transform: scaleX(1.06);
  background: #F4FAF6;
}
.tl__face {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid transparent;
}
/* 表情随当日最弱环节变化 —— 一眼看出当天整体强弱 */
.tl__face--good { background: #E8F5EC; border-color: #BFE3CB; }
.tl__face--mid { background: #FCF6E3; border-color: #EEDCA8; }
.tl__face--bad { background: #FCEEEA; border-color: #F3CFC4; }
.tl__n { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.tl__day.is-on .tl__n { color: var(--g-d); font-weight: 700; }

/* 上下拨动微调（小时） */
.tl__hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px 8px;
  border-top: 1px dashed rgba(197, 204, 199, .5);
  margin-top: 4px;
}
.tl__hourTxt { font-size: 11px; color: var(--g-d); font-weight: 600; }
.tl__hourBtn {
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 11px; padding: 1px 4px; line-height: 1;
  font-family: inherit;
}
.tl__hourBtn:active { color: var(--g); }

/* ---------- 右侧主区 ---------- */
/* ============================================================
   布局：时间轴 | [左功能栏 + 主体 + 右周期栏] 三列
   —— 左右按钮竖排，中间人体底图占满剩余空间
   ============================================================ */
.dash {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

/* 中间三列容器 */
.dash__cols {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
}

.dash__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
/* 状态面板与模块条占满中间栏 */
.dash__main > .panel,
.dash__main > .mods { width: 100%; }
/* 仪表盘容器不再额外留边，把宽度全部让给底图 */
.dash__main > .gauge { margin: 6px 0 0; width: 100%; }

/* 侧栏通用 */
/* 固定侧栏已移除：两组按钮改为浮在人体图上的可拖拽悬浮窗（见文件末尾 .dock） */

/* 竖排文字按钮 */
.vbtn {
  border: 1px solid rgba(76, 175, 109, .35);
  background: #fff;
  color: var(--g-d);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  padding: 12px 3px;
  line-height: 1.15;
  letter-spacing: .5px;
  white-space: nowrap;
  transition: all .18s;
}
.vbtn--on {
  background: var(--g);
  border-color: var(--g);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(76, 175, 109, .3);
}
.vbtn--ghost { border-style: dashed; color: var(--ink3); border-color: var(--line); }
.vbtn--wide { font-size: 11px; padding: 14px 3px; }

/* 周期栏里的文字标签 */
.perLabel { font-size: 9.5px; color: var(--muted); text-align: center; margin-top: -2px; }

/* ---------- 状态总面板 ---------- */
.panel {
  padding: 12px 14px 14px;
  background: #fff;
  border-bottom: 1px solid rgba(197, 204, 199, .45);
}
.panel__row { display: flex; align-items: flex-start; gap: 10px; }
.panel__l { flex: 1; min-width: 0; }
.panel__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .5px;
}
.panel__title.is-warn { color: var(--danger); }
.panel__title.is-ok { color: var(--g-d); }
.panel__sub { font-size: 12.5px; color: var(--ink3); margin-top: 3px; }
.panel__score {
  flex: none;
  text-align: center;
  padding-left: 6px;
}
.panel__scoreNum {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--g-d);
}
.panel__scoreNum.is-warn { color: var(--danger); }
.panel__scoreNum.is-ok { color: var(--g-d); }
.panel__scoreLb { font-size: 10.5px; color: var(--ink3); margin-top: 2px; }

/* 风险/黄金期标签 */
.panel__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.flag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
}
.flag--risk { background: #FCE9E6; color: #B93A2E; }
.flag--gold { background: #E8F5EC; color: var(--g-d); }
.flag--info { background: var(--g-l); color: var(--g-d); }

/* 详情展开按钮 */
.panel__more {
  margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%;
  padding: 9px;
  border: 1px dashed rgba(76, 175, 109, .5);
  border-radius: 10px;
  background: #F6FAF7;
  color: var(--g-d);
  font-size: 13.5px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.panel__more:active { background: var(--g-l); }

/* 总结段落 */
.panel__summary {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
  background: #F7FAF8;
  border-left: 3px solid var(--g);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
}

/* ---------- 先天 / 后天 二级模块 ---------- */
.mods {
  display: flex;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 15;
  background: #fff;
  border-bottom: 1px solid rgba(197, 204, 199, .45);
}
.mods__item {
  flex: 1;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink3);
  padding: 11px 0 9px;
  cursor: pointer;
  position: relative;
  font-weight: 500;
}
.mods__item.is-on { color: var(--g-d); font-weight: 600; }
.mods__item.is-on::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 34px; height: 2.5px;
  border-radius: 2px;
  background: var(--g);
}
.mods__hint { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }

/* 后天子模块悬浮按钮组 */
.subs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(180deg, #F7FAF8, #fff);
  border-bottom: 1px solid rgba(197, 204, 199, .4);
}
.subs::-webkit-scrollbar { display: none; }
.subs__item {
  flex: 0 0 auto;
  border: 1px solid rgba(76, 175, 109, .35);
  background: #fff;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--g-d);
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s;
}
.subs__item.is-on {
  background: var(--g);
  border-color: var(--g);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(76, 175, 109, .3);
}

/* ---------- 人体仪表盘 ---------- */
.gauge {
  position: relative;
  margin: 8px auto 0;
  width: 100%;
}
.gauge__fig {
  position: relative;
  width: 100%;
  /* 新底图：女 347×1500、男 454×1500。
     容器取较宽的 400/1500 并用 object-fit:contain，
     两种性别都能完整显示且留出悬浮窗可拖动的空间。 */
  aspect-ratio: 400 / 1500;
  min-height: 62vh;
  max-height: 78vh;
  margin: 0 auto;
}
.gauge__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: .97;
}

/* 脏腑热区：颜色随状态变化（醒目提示信号）
   ⚠️ 用 aspect-ratio 保证正圆：容器是窄高比例，
      若直接 %宽 + %高 会算出椭圆 */
/* 五脏色块分区（不再可点，不显示文字注释） */
.gauge__zone {
  position: absolute;
  width: 46px; height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
}
.gauge__zone::before {
  /* 实心核：一眼看清状态色*/
  content: '';
  position: absolute; inset: 18%;
  border-radius: 50%;
  background: var(--org-core);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 1px 5px rgba(0, 0, 0, .18);
}
.gauge__zone::after {
  /* 外圈柔光：标示这是躯干上的一个分区 */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--org-core);
  opacity: .38;
}

/* 保留旧热区样式以防他处引用 */
.gauge__organ {
  position: absolute;
  width: 12.5%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  transition: transform .18s;
  z-index: 6;
}
.gauge__organ::before {
  /* 外层柔光：提示「这里有信号」 */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--org-c) 0%, transparent 70%);
  opacity: .8;
  transition: opacity .25s, transform .18s;
}
.gauge__organ::after {
  /* 内层实心核：颜色即信号 */
  content: '';
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: var(--org-core, rgba(76, 175, 109, .95));
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
  transition: inset .18s;
}
.gauge__organ.is-on { transform: translate(-50%, -50%) scale(1.34); z-index: 8; }
.gauge__organ.is-on::before { transform: scale(1.5); opacity: 1; }
.gauge__organ.is-on::after {
  box-shadow: 0 0 0 2.5px #fff, 0 0 14px var(--org-core, rgba(76, 175, 109, .85));
}

/* 引线标注 */
.gauge__lead { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

/* 关注事项标签（分布在人体两侧） */
.gauge__tags { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.gtag__k { display: block; font-size: 9.5px; opacity: .75; font-weight: 400; }
.gtag {
  position: absolute;
  pointer-events: auto;
  /* 两侧留出悬浮窗通道（dock 宽约 26~30%），标签内缩避免被压住 */
  border: 0;
  font-family: inherit;
  border-radius: 8px;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 33%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
  transition: transform .16s;
  backdrop-filter: blur(2px);
}
.gtag__k { display: block; font-size: 9.5px; opacity: .75; font-weight: 400; }
.gtag:active { transform: scale(.95); }
.gtag--risk { background: rgba(252, 233, 230, .96); color: #A8382C; }
.gtag--mid { background: rgba(252, 246, 227, .96); color: #8A6D14; }
.gtag--good { background: rgba(232, 245, 236, .96); color: var(--g-d); }
.gtag__k { display: block; font-size: 10px; opacity: .75; font-weight: 400; }

/* ---------- 脏腑按钮组（点击展开） ---------- */
.zbtn-wrap { padding: 4px 12px 0; }
.zbtns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.zbtn {
  border: 1px solid transparent;
  background: #fff;
  border-radius: 12px;
  padding: 9px 2px 7px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(43, 50, 44, .06);
  position: relative;
  transition: all .18s;
}
.zbtn__n { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.zbtn__v { font-size: 18px; font-weight: 700; line-height: 1.25; }
.zbtn__l { font-size: 10.5px; color: var(--ink3); }
.zbtn--high { background: #FDF3E8; border-color: #F6DCC6; }
.zbtn--high .zbtn__v { color: var(--warn); }
.zbtn--low { background: #EAF2F8; border-color: #D6E5F0; }
.zbtn--low .zbtn__v { color: #4A7FA5; }
.zbtn--mid { background: #EFF5F0; border-color: #DCE9DE; }
.zbtn--mid .zbtn__v { color: var(--g-d); }
.zbtn.is-on {
  border-color: var(--g);
  box-shadow: 0 0 0 2px rgba(76, 175, 109, .25);
  transform: translateY(-1px);
}

/* 展开的脏腑详情 */
.zdetail {
  margin-top: 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(43, 50, 44, .07);
  overflow: hidden;
  animation: zopen .22s ease;
}
@keyframes zopen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.zdetail__hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(197, 204, 199, .4);
}
.zdetail__name { font-size: 17px; font-weight: 700; }
.zdetail__score {
  margin-left: auto;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.zdetail__body { padding: 12px 14px 14px; }
.zdetail__gloss {
  font-size: 12.5px;
  color: var(--ink2);
  background: #F7FAF8;
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 10px;
  line-height: 1.6;
}
.zdetail__title {
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.5;
}
.zdetail__sec { margin-top: 12px; }
.zdetail__secT {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.zdetail__sec--sign .zdetail__secT { color: var(--ink2); }
.zdetail__sec--avoid .zdetail__secT { color: #B85F1F; }
.zdetail__sec--nourish .zdetail__secT { color: var(--g-d); }
.zdetail__list { list-style: none; }
.zdetail__list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 5px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink2);
}
.zdetail__list li:last-child { margin-bottom: 0; }
.zdetail__list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}
.zdetail__toggle {
  margin-top: 12px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--g-d);
  cursor: pointer;
  padding: 4px 0;
}

/* ---------- VIP 模糊遮罩 ---------- */
.vip {
  position: relative;
  margin: 12px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.vip__hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(197, 204, 199, .4);
}
.vip__title { font-size: 15px; font-weight: 600; }
.vip__lock { margin-left: auto; font-size: 12px; color: var(--gold); }
.vip__blur {
  position: relative;
  padding: 14px;
  filter: blur(4.5px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  min-height: 190px;
}
.vip__mask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .75));
}
.vip__cta {
  border: 0;
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201, 162, 39, .35);
}
.vip__tip { font-size: 12px; color: var(--ink3); }

/* ---------- 年月选择弹层 ---------- */
.ympop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .35);
  display: flex;
  align-items: flex-end;
}
.ympop__box {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.ympop__t { font-size: 16px; font-weight: 600; margin-bottom: 12px; text-align: center; }
.ympop__row { display: flex; gap: 10px; margin-bottom: 12px; }
.ympop__row select {
  flex: 1;
  padding: 11px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.ympop__acts { display: flex; gap: 10px; }
.ympop__btn {
  flex: 1;
  padding: 12px;
  font-size: 15px;
  font-family: inherit;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink2);
}
.ympop__btn--ok {
  background: var(--g);
  border-color: var(--g);
  color: #fff;
  font-weight: 500;
}

/* 关注事项选择弹层 */
.bdpop__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}
.bdopt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink2);
  text-align: left;
}
.bdopt.is-on {
  border-color: var(--g);
  background: #F4FAF6;
  color: var(--g-d);
  font-weight: 500;
}
.bdopt__i { font-size: 16px; flex: none; }

/* 达到上限时未选中的置灰（但仍可取消已选项） */
.bdopt.is-off { opacity: .42; }
.bdopt.is-off:active { opacity: .42; }

/* 已选计数 */
.bdpop__count {
  font-size: 12.5px;
  color: var(--ink3);
  text-align: center;
  padding-top: 2px;
}
.bdpop__count b { color: var(--g-d); font-size: 14px; }
.bdpop__count.is-full b { color: var(--warn); }

/* 会员已解锁态：去掉模糊与遮罩 */
.vip__blur.is-open {
  filter: none;
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}
/* ============================================================
   可拖拽悬浮窗面板（dock）
   —— 浮在人体仪表盘视窗内，可拖动、下拉展开，范围不超出视窗
   ============================================================ */
.dock {
  position: absolute;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 46%;
  padding: 3px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(197, 204, 199, .7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  backdrop-filter: blur(3px);
  transition: box-shadow .16s;
}
.dock.is-drag {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  cursor: grabbing;
}

/* 分组：常驻展开，标题仅作说明入口（不再承担折叠） */
.dock__grp { border-radius: 9px; overflow: hidden; }

.dock__head {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  border: 0;
  background: #F4F8F5;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--g-d);
  padding: 5px 7px;
  cursor: pointer;
  border-radius: 9px;
  min-height: 30px;
}
.dock__head:active { background: var(--g-l); }
/* 无说明内容的标题（如四柱窗若未接说明）不可点 */
.dock__head:disabled {
  cursor: default;
  opacity: 1;
  -webkit-text-fill-color: var(--g-d);
}
.dock__t { flex: 1; text-align: left; }
/* 展开态常显，箭头改为「放大」提示：点标题看说明 */
.dock__ar {
  font-size: 10px;
  color: var(--ink3);
  display: inline-block;
  line-height: 1;
}

/* 内容区：**默认展开**，竖排窄条节省横向空间 */
.dock__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 2px 1px;
}

/* 只读条目（四柱）：平铺显示年/月/日/时，不做成按钮 */
.dock__plain {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid rgba(76, 175, 109, .22);
  white-space: nowrap;
}
.dock__plainK { font-size: 10.5px; color: var(--ink3); }
.dock__plainV {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-d);
  letter-spacing: .5px;
}

.dock__item {
  border: 1px solid rgba(76, 175, 109, .3);
  background: #fff;
  color: var(--g-d);
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  padding: 6px 4px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  min-height: 28px;
}
.dock__item:active { background: var(--g-l); }
.dock__item.is-on {
  background: var(--g);
  border-color: var(--g);
  color: #fff;
  font-weight: 600;
}

/* 拖拽把手 */
.dock__grip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  cursor: grab;
  color: var(--ink3);
  font-size: 10px;
  line-height: 1;
  touch-action: none;          /* 关键：允许在触摸设备上自由拖动 */
  user-select: none;
  -webkit-user-select: none;
}
.dock__grip:active { cursor: grabbing; }

/* 左侧悬浮窗默认略宽（文案较长），右侧窄一些 */
.dock--left { max-width: 30%; }
/* 右侧周期窗有 5 项，四柱窗要放「年柱 庚申」这类组合，给足宽度但不压到右侧标签 */
.dock--right { max-width: 30%; min-width: 74px; }

/* 先天模块隐藏日期轴后，主体占满整个视窗宽度 */
.dash--no-tl .dash__cols { width: 100%; }

/* ============================================================
   无外框内容块 + 纯文字免责图层
   ============================================================ */
/* 直接写在背景图层上，不带卡片边框/圆角/阴影 */
.flatblk {
  margin: 14px 0 0;
  padding: 0 2px;
}
.flatblk .card {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* 免责提示：与「公司与备案号」同一图层模式（居中文字，无外框） */
.foot-note {
  margin: 18px 0 0;
  padding: 0 4px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--muted);
  text-align: center;
}
.text-center { text-align: center; }

/* ============================================================
   折叠区块（手风琴）
   —— 标题栏两端与卡片边框对齐：负margin 抵消卡片内边距，撑满整行
   ============================================================ */
.acc {
  margin: 12px 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

/* 标题栏：两端与卡片边框对齐。
   .acc 自身无内边距，所以用 border 宽度抵消，
   让标题栏的视觉边界正好压在边框内侧（两端齐平）。 */
.acc__hd {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.acc__hd:active { background: var(--g-l); }

.acc__t {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  flex: none;
}
.acc__s {
  font-size: 12.5px;
  color: var(--ink3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.acc__b {
  flex: none;
  margin-left: auto;
  font-size: 11px;
  color: var(--g-d);
  background: var(--g-l);
  border-radius: 999px;
  padding: 2px 8px;
}

/* 箭头：▼ 展开时旋转 180° */
.acc__ar {
  flex: none;
  width: 0; height: 0;
  margin-left: 6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--ink3);
  transition: transform .22s;
}
.acc.is-open .acc__ar { transform: rotate(180deg); }

/* 展开区 */
.acc__bd {
  display: none;
  padding: 0 14px 14px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink2);
}
.acc.is-open .acc__bd { display: block; }

/* 折叠区内若再嵌卡片，卡片去掉边框避免三层框套叠 */
.acc__bd .card,
.acc__bd .flatblk {
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
  padding: 0;
}
.acc__bd .acc { margin: 10px 0 0; }

/* 强调型（用于「引擎今日建议」这类要跳出来的内容） */
.acc--key .acc__hd { background: #F7FAF8; }
.acc--key.is-open .acc__hd { background: var(--g-l); }

/* 色调 */
.acc--gold .acc__t { color: #B8860B; }
.acc--green .acc__t { color: var(--g-d); }
.acc--blue .acc__t { color: #4A7FA5; }

/* 折叠区内的列表更紧凑 */
.acc__bd .item { padding: 9px 0; }
.acc__bd .item__title { font-size: 14.5px; }
.acc__bd .item__desc { font-size: 12.5px; }

/* ============================================================
   健康事项标签（一等公民：全量罗列 + 五档状态）
   ============================================================ */
.gtag {
  position: absolute;
  pointer-events: auto;
  border: 0;
  font-family: inherit;
  border-radius: 10px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(197, 204, 199, .8);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .07);
  cursor: pointer;
  text-align: left;
  max-width: 40%;
  transition: transform .16s, box-shadow .16s;
}
.gtag:active { transform: scale(.96); box-shadow: 0 2px 10px rgba(0, 0, 0, .13); }

/* 左/右侧用不同底色区分 */
.gtag--excess, .gtag--poor { background: rgba(253, 243, 241, .97); border-color: #EFC9C0; }
.gtag--high { background: rgba(252, 244, 233, .97); border-color: #EEDCB8; }
.gtag--low  { background: rgba(240, 246, 251, .97); border-color: #C6DBEA; }
.gtag--mid  { background: rgba(240, 249, 243, .97); border-color: #C2E3CF; }

.gtag__n {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.gtag__g {
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1px;
}

/* ============================================================
   弹窗
   ============================================================ */
.popmask {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(20, 28, 22, .34);
  opacity: 0;
  transition: opacity .18s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.popmask.is-in { opacity: 1; }

.pop {
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  background: #fff;
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(16px);
  transition: transform .2s;
  overflow: hidden;
  box-shadow: 0 -6px 26px rgba(0, 0, 0, .18);
}
.popmask.is-in .pop { transform: translateY(0); }

/* 顶部条 */
.pop__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--line);
  background: #F7FAF8;
}
.pop__barT { font-size: 16px; font-weight: 700; color: var(--ink); }
.pop__barS {
  font-size: 12px; color: var(--ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1;
}
.pop__x {
  flex: none;
  width: 28px; height: 28px;
  border: 0; background: #EDF1EE;
  border-radius: 50%;
  font-size: 19px; line-height: 1;
  color: var(--ink2); cursor: pointer;
}
.pop__x:active { background: #E1E7E3; }
.pop__x--float {
  position: absolute; top: 10px; right: 12px; z-index: 3;
}

.pop__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
}

/* 内容块 */
.pop__hd {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.pop__ico {
  flex: none; width: 38px; height: 38px;
  border-radius: 10px; background: var(--g-l);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.pop__t { font-size: 17px; font-weight: 700; color: var(--ink); }
.pop__sub { font-size: 11.5px; color: var(--ink3); margin-top: 2px; }
.pop__grade {
  margin-left: auto; flex: none;
  font-size: 12px; font-weight: 700;
  color: #fff; background: var(--tone, #4CAF6D);
  border-radius: 999px; padding: 3px 10px;
}

.pop__score {
  display: flex; align-items: baseline; gap: 8px;
  padding: 11px 13px; margin-bottom: 12px;
  background: #F7FAF8; border-radius: 10px;
}
.pop__scoreK { font-size: 13px; color: var(--ink2); }
.pop__scoreV { font-size: 26px; font-weight: 700; margin-left: auto; }

.pop__row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; font-size: 13px;
}
.pop__k { color: var(--ink3); }
.pop__v { color: var(--ink); margin-left: auto; }

.pop__sec { margin-bottom: 16px; }
.pop__secT {
  font-size: 13px; font-weight: 700; color: var(--g-d);
  margin-bottom: 7px;
  display: flex; align-items: center; gap: 5px;
}
.pop__secT::before {
  content: ''; width: 3px; height: 13px;
  background: var(--g); border-radius: 2px;
}
.pop__body p { margin: 0 0 7px; line-height: 1.8; color: var(--ink2); font-size: 14px; }
.pop__body b { color: var(--ink); }
.pop__board {
  margin-top: 9px !important;
  padding: 10px 12px;
  background: var(--g-l); border-radius: 9px;
  font-size: 13.5px !important;
}

.pop__list { margin: 0; padding-left: 18px; }
.pop__list li {
  font-size: 13.5px; line-height: 1.75;
  color: var(--ink2); margin-bottom: 5px;
}
.pop__list b { color: var(--g-d); }

.pop__tip {
  font-size: 12.5px; color: var(--ink3);
  padding: 9px 11px; background: #F7FAF8;
  border-radius: 8px; margin-bottom: 10px;
}
.pop__member {
  font-size: 12.5px; color: var(--ink3);
  padding: 10px 12px; border: 1px dashed var(--line);
  border-radius: 9px;
}

/* 五脏一览 */
.pop__zrows { display: flex; flex-direction: column; gap: 6px; }
.pop__zrow { display: flex; align-items: center; gap: 8px; }
.pop__zk { flex: none; width: 26px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pop__zbar { flex: 1; height: 7px; background: #E8EEEA; border-radius: 4px; overflow: hidden; }
.pop__zbar > span { display: block; height: 100%; border-radius: 4px; }
.pop__zv {
  flex: none; width: 30px; text-align: right;
  font-size: 13px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pop__zg { flex: none; width: 62px; font-size: 11.5px; font-weight: 600; }

.pop__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pop__flag {
  font-size: 11.5px; color: var(--ink2);
  background: #F1F5F2; border-radius: 999px; padding: 3px 9px;
}

/* 固定展开的折叠区：无箭头、点击无效 */
.acc.is-fixed .acc__ar { display: none; }
.acc.is-fixed .acc__hd { cursor: default; }
.acc.is-fixed .acc__hd:active { background: #fff; }

/* ============================================================
   顶部返回条
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.topbar__b {
  display: flex; align-items: center; gap: 3px;
  border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: 5px 12px 5px 9px;
  font-family: inherit; font-size: 13px; color: var(--g-d);
  cursor: pointer; flex: none;
}
.topbar__b:active { background: var(--g-l); }
.topbar__i { font-size: 17px; line-height: 1; }
.topbar__title {
  font-size: 15px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* mcard简述样式（去掉标题后的排版） */
.mcard__brief {
  padding: 12px 14px 0; margin: 0;
  font-size: 14.5px; color: var(--ink2); line-height: 1.75;
}
.mcard > .mcard__ico {
  position: absolute;
  top: 8px; right: 10px;
  width: 30px; height: 30px; font-size: 15px;
  pointer-events: none; opacity: .5;
}
.mcard { position: relative; }