/* =========================================================================
 * 9两健康 · 业务员手机端（Zen Flow Mobile · 重做版 v3）
 * 目标机型：iPhone 17 Pro（393 × 852 pt）
 * 全部样式收归组件库；页面 JS 只拼类名，不散写 inline。
 * ========================================================================= */

/* ---------------- 设计 Token ---------------- */
:root {
  --teal: #0D948E;
  --teal-d: #0A7A75;
  --teal-l: #E6F5F4;
  --teal-grad: linear-gradient(135deg, #0D948E 0%, #14B8A6 100%);

  --bg: #F4F5F3;
  --surface: #FFFFFF;
  --surface-2: #FAFAF9;
  --line: #E8E6E1;
  --line-2: #F0EFEB;

  --text: #1C1B19;
  --text-2: #6B6862;
  --text-3: #9D9A93;

  --good: #16A34A;
  --warn: #CA8A04;
  --bad: #DC2626;
  --info: #2563EB;

  --r-s: 8px;
  --r: 14px;
  --r-l: 20px;
  --r-xl: 26px;

  --sh-1: 0 1px 2px rgba(28,27,25,.05);
  --sh-2: 0 2px 10px rgba(28,27,25,.07);
  --sh-3: 0 8px 28px rgba(28,27,25,.12);

  --nav-h: 52px;
  --tab-h: 58px;
  --safe-t: 16px;
  --ease: cubic-bezier(.32,.72,0,1);
}

html[data-theme="dark"] {
  --bg: #131413;
  --surface: #1E201F;
  --surface-2: #252827;
  --line: #32352F;
  --line-2: #2A2D2B;
  --text: #F0EFEB;
  --text-2: #A8A59D;
  --text-3: #75736C;
  --teal-l: #10312F;
  --sh-1: 0 1px 2px rgba(0,0,0,.3);
  --sh-2: 0 2px 10px rgba(0,0,0,.35);
  --sh-3: 0 8px 28px rgba(0,0,0,.5);
}

/* ---------------- 基础 ---------------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 15px; line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------------- 应用根（全屏移动优先，不画手机外框） ---------------- */
/* 关键：用 position:fixed 直接相对视口撑满，绕开 html/body height:100% 链。
   iOS 微信/Safari WebView 里 height:100% 链会断裂导致 #app 塌成 ~88px（白屏根因）。 */
.app {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* ---------------- 视图 / 滚动区 ---------------- */
.view { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); }
.view::-webkit-scrollbar { display: none; }
.page { min-height: 100%; padding: var(--safe-t) 16px calc(var(--tab-h) + 16px); }
.page.no-tab { padding-bottom: 24px; }

.a-fade { animation: fade .22s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- 顶部栏 ---------------- */
.nav-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  min-height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  background: rgba(255,255,255,.88); /* fallback for color-mix */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2);
}
.nav-title { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.nav-sub { font-size: 12px; color: var(--text-3); font-weight: 500; }
.nav-spacer { flex: 1; }
.nav-act {
  border: none; background: var(--teal-l); color: var(--teal);
  width: 34px; height: 34px; border-radius: 10px; font-size: 18px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .12s var(--ease);
}
.nav-act:active { transform: scale(.9); }
.nav-back {
  border: none; background: transparent; color: var(--teal);
  font-size: 22px; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center;
}

/* ---------------- Hero 卡 ---------------- */
.hero {
  background: var(--teal-grad); border-radius: var(--r-xl);
  padding: 18px; color: #fff; margin-bottom: 16px; position: relative;
  overflow: hidden; box-shadow: 0 10px 26px -12px rgba(13,148,142,.8);
}
.hero::before { content:""; position:absolute; right:-46px; top:-56px; width:168px; height:168px; border-radius:50%; background:rgba(255,255,255,.11); }
.hero::after { content:""; position:absolute; right:24px; bottom:-66px; width:108px; height:108px; border-radius:50%; background:rgba(255,255,255,.07); }
.hero .hi { font-size: 21px; font-weight: 700; letter-spacing: -.3px; position: relative; z-index:1; }
.hero .sub { font-size: 12.5px; opacity: .85; margin-top: 3px; position: relative; z-index:1; }
.hero .stats { display: flex; gap: 4px; margin-top: 16px; position: relative; z-index: 1; }
.hero .st { flex: 1; }
.hero .st b { display: block; font-size: 22px; font-weight: 720; letter-spacing: -.8px; line-height: 1.15; }
.hero .st span { font-size: 11px; opacity: .82; }

/* ---------------- 快捷入口 ---------------- */
.quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 18px; }
.qa {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 12px 4px 9px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2); cursor: pointer;
  box-shadow: var(--sh-1); transition: transform .14s var(--ease);
}
.qa:active { transform: scale(.94); }
.qa i {
  font-style: normal; font-size: 17px; width: 34px; height: 34px; border-radius: 12px;
  background: var(--teal-l); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
}

/* ---------------- 区块标题 ---------------- */
.sec-t {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  margin: 4px 2px 10px;
}
.sec-t .more { color: var(--teal); font-weight: 600; font-size: 12.5px; letter-spacing: 0; }
.sec-t .more.muted { color: var(--text-3); font-weight: 500; }

/* ---------------- 列表项 ---------------- */
.li {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  margin-bottom: 8px; cursor: pointer; box-shadow: var(--sh-1);
  transition: transform .13s var(--ease);
}
.li:active { transform: scale(.985); }
.li .grow { flex: 1; min-width: 0; }
.li .nm { font-size: 15px; font-weight: 640; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; }
.li .meta { font-size: 12px; color: var(--text-3); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.li .arr { color: var(--text-3); font-size: 16px; flex-shrink: 0; }

/* ---------------- 头像 ---------------- */
.ava {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal-l); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; letter-spacing: .5px;
}
.ava.lg { width: 64px; height: 64px; font-size: 24px; }
.ava.sm { width: 32px; height: 32px; font-size: 13px; }

/* ---------------- 卡片 ---------------- */
.card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-l); padding: 4px 16px; margin-bottom: 14px; box-shadow: var(--sh-1); }
.card-title { font-size: 14px; font-weight: 700; padding: 14px 0 6px; }

/* ---------------- 分段控件 ---------------- */
.seg { display: flex; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 3px; gap: 3px; margin: 4px 0 14px; }
.seg-btn { flex: 1; border: none; background: transparent; color: var(--text-2); font-size: 13.5px; font-weight: 600; padding: 8px 4px; border-radius: 9px; cursor: pointer; transition: all .18s var(--ease); }
.seg-btn.on { background: var(--surface); color: var(--teal); box-shadow: var(--sh-1); }

/* ===== 管理后台（仅管理员） ===== */
.admin-user { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--line-2); }
.admin-user:last-child { border-bottom: none; }
.admin-user .au-info { flex: 1; min-width: 0; }
.admin-user .au-name { font-size: 14.5px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 7px; }
.admin-user .au-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-bdg { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; flex: none; }
.role-bdg.mgr { background: #6366f11a; color: #6366F1; }
.role-bdg.agent { background: #0D948E1a; color: #0D948E; }
.admin-cust { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--line-2); }
.admin-cust:last-child { border-bottom: none; }
.admin-cust .ac-info { flex: 1; min-width: 0; }
.admin-cust .ac-name { font-size: 14.5px; font-weight: 600; color: var(--text-1); }
.admin-cust .ac-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.admin-cust .ac-sel { flex: none; max-width: 130px; font-size: 13px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--text-1); }
.btn.sm { padding: 7px 13px; font-size: 12.5px; border-radius: 9px; flex: none; }
.btn.sm[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------- 角标 / 标签 ---------------- */
.bdg { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.6; }
.bdg.teal { background: var(--teal-l); color: var(--teal); }
.bdg.warn { background: rgba(202,138,4,.12); color: var(--warn); }
.bdg.good { background: rgba(22,163,74,.12); color: var(--good); }
.bdg.info { background: rgba(37,99,235,.12); color: var(--info); }
.bdg.plain { background: var(--surface-2); color: var(--text-2); }

.tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line-2); }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: all .15s var(--ease); white-space: nowrap; }
.chip.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; }
.chips::-webkit-scrollbar { display: none; }

/* ---------------- 进度条 ---------------- */
.prog { background: var(--surface-2); border-radius: 4px; height: 6px; overflow: hidden; }
.prog-fill { background: var(--teal); height: 100%; border-radius: 4px; transition: width .3s ease; }

/* ---------------- 按钮 ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 12px; font-size: 14.5px; font-weight: 600; padding: 11px 16px; cursor: pointer; font-family: inherit; transition: transform .12s var(--ease), background .15s; }
.btn:active { transform: scale(.97); }
.btn.pri { background: var(--teal); color: #fff; }
.btn.pri:hover { background: var(--teal-d); }
.btn.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; pointer-events: none; }

/* ---------------- 搜索框 ---------------- */
.search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 13px; margin-bottom: 12px; box-shadow: var(--sh-1); }
.search .ic { font-size: 15px; opacity: .5; }
.search input { border: none; outline: none; background: transparent; flex: 1; font-size: 14px; color: var(--text); font-family: inherit; }

/* ---------------- FAB ---------------- */
.fab { position: fixed; right: 26px; bottom: calc(var(--tab-h) + 22px); width: 52px; height: 52px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 26px; border: none; box-shadow: var(--sh-3); cursor: pointer; z-index: 30; transition: transform .14s var(--ease); }
.fab:active { transform: scale(.9); }

/* ---------------- 空状态 ---------------- */
.empty { text-align: center; padding: 30px 16px; color: var(--text-3); }
.empty .e-ic { font-size: 38px; margin-bottom: 8px; opacity: .6; }
.empty p { font-size: 13.5px; margin: 0 0 12px; }

/* ---------------- 时间线 ---------------- */
.tl { display: flex; gap: 10px; align-items: flex-start; padding: 10px 2px; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0; margin-top: 6px; }
.tl-date { font-size: 11px; color: var(--text-3); margin-bottom: 3px; }
.tl-text { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.tl-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); margin-bottom: 8px; box-shadow: var(--sh-1); }
.tl-row .tl-meta { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
.tl-row .tl-body { font-size: 13.5px; line-height: 1.5; }

/* ---------------- 客户资料头 ---------------- */
.profile-hd { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 0 14px; }
.profile-hd .nm { font-size: 20px; font-weight: 700; margin-top: 10px; letter-spacing: -.3px; }
.profile-hd .sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.profile-hd .badges { display: flex; gap: 6px; margin-top: 10px; }

/* ---------------- 操作栏 ---------------- */
.act-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 4px 0 4px; }
.act-bar button { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r); padding: 12px 4px; font-size: 11.5px; font-weight: 600; color: var(--text-2); cursor: pointer; box-shadow: var(--sh-1); transition: transform .12s var(--ease); }
.act-bar button:active { transform: scale(.95); }
.act-bar button i { font-style: normal; font-size: 18px; color: var(--teal); }

/* ---------------- 键值表 ---------------- */
.kv { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-3); }
.kv .v { color: var(--text); font-weight: 500; text-align: right; }

/* ---------------- 底部 Tab ---------------- */
.tabbar { display: flex; height: var(--tab-h); background: var(--surface); border-top: 1px solid var(--line-2); padding-bottom: env(safe-area-inset-bottom); }
.tab { flex: 1; border: none; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-3); cursor: pointer; font-size: 10.5px; font-weight: 600; transition: color .15s var(--ease); }
.tab i { font-style: normal; font-size: 20px; transition: transform .2s var(--ease); }
.tab.on { color: var(--teal); }
.tab.on i { transform: scale(1.12); }

/* ---------------- 弹层 Sheet ---------------- */
.sheet-mask { position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.sheet-mask.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%);
  transition: transform .28s var(--ease); max-height: 86%; overflow-y: auto;
}
.sheet.on { transform: translateY(0); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 14px; }
.sheet-head .t { font-size: 16px; font-weight: 700; }
.sheet-head .x { border: none; background: var(--surface-2); width: 28px; height: 28px; border-radius: 50%; font-size: 15px; color: var(--text-2); cursor: pointer; }
.sheet-body { padding-bottom: 8px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; border: 1px solid var(--line); background: var(--surface-2);
  border-radius: 10px; padding: 11px 12px; font-size: 14.5px; color: var(--text);
  font-family: inherit; outline: none; transition: border-color .15s;
}
.field input:focus, .field select:focus { border-color: var(--teal); }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.seg-pick { display: flex; gap: 8px; }
.seg-pick button { flex: 1; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 10px; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.seg-pick button.on { border-color: var(--teal); background: var(--teal-l); color: var(--teal); }

/* ---------------- Toast ---------------- */
.toast {
  position: absolute; top: 56px; left: 50%; transform: translate(-50%, -16px);
  background: rgba(28,27,25,.92); color: #fff; font-size: 13px; font-weight: 500;
  padding: 9px 16px; border-radius: 12px; z-index: 90; opacity: 0;
  pointer-events: none; transition: opacity .2s, transform .2s; max-width: 80%;
  text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: rgba(13,148,142,.95); }
.toast.err { background: rgba(220,38,38,.94); }

/* ---------------- PWA 安装引导条 ---------------- */
.install-banner {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + 14px);
  width: calc(100% - 28px); max-width: 460px; z-index: 95;
  display: flex; align-items: center; gap: 9px;
  background: rgba(13,148,142,.96); color: #fff; font-size: 12.5px; line-height: 1.4;
  padding: 10px 12px; border-radius: 14px; box-shadow: 0 6px 20px rgba(13,148,142,.35);
}
.install-banner .ib-ic { font-size: 18px; flex: none; }
.install-banner .ib-tx { flex: 1; }
.install-banner .ib-tx b { font-weight: 700; text-decoration: underline; }
.install-banner .ib-x {
  flex: none; width: 24px; height: 24px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.22); color: #fff; font-size: 14px; cursor: pointer;
}

/* ---------------- 极简建档 ---------------- */
.quick-tip { font-size: 12px; color: var(--text-3); margin: 4px 2px 2px; line-height: 1.5; }
.field .req { color: var(--teal); font-weight: 700; }

/* ---------------- 检测向导 ---------------- */
.exam-steps { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px 6px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; }
.step .num { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--line); color: var(--text-3); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: all .2s var(--ease); }
.step .lab { font-size: 10.5px; color: var(--text-3); font-weight: 600; }
.step::after { content:""; position: absolute; top: 14px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: -1; }
.step:last-child::after { display: none; }
.step.on .num { background: var(--teal); border-color: var(--teal); color: #fff; }
.step.on .lab { color: var(--teal); }
.step.done .num { background: var(--teal-l); border-color: var(--teal); color: var(--teal); }
.step.done::after { background: var(--teal); }

.wizard-foot { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); }
.wizard-foot .btn { flex: 1; }

.nine-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 8px 0; }
.nine-cell { position: relative; aspect-ratio: 1; border-radius: var(--r); border: 1.5px dashed var(--line); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-3); font-size: 12px; cursor: pointer; transition: all .15s var(--ease); }
.nine-cell.done { border-style: solid; border-color: var(--teal); background: var(--teal-l); color: var(--teal); }
.nine-cell .ic { font-size: 20px; width: 100%; height: 60%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nine-cell .ic .nine-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.nine-cell .nl { font-size: 12px; font-weight: 600; }
.nine-del { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(15,23,42,.6); color: #fff; font-size: 17px; line-height: 20px; text-align: center; padding: 0; cursor: pointer; z-index: 3; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.nine-del:active { background: rgba(15,23,42,.85); transform: scale(.92); }
.nine-actions { display: flex; justify-content: flex-end; padding: 8px 2px 0; }
.btn.sm { padding: 6px 12px; font-size: 12px; }
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.doc-row:last-child { border-bottom: none; }
.doc-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: none; }
.doc-ico { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--surface-2); border-radius: 8px; flex: none; }
.doc-name { font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.doc-empty { font-size: 13px; color: var(--text-3); }
.doc-actions { display: flex; gap: 8px; flex: none; }

.eight-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.eight-row:last-child { border-bottom: none; }
.eight-row .nm { flex: 1; font-size: 14px; font-weight: 500; }
.eight-row input { width: 88px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 9px; padding: 9px 10px; font-size: 14px; text-align: right; color: var(--text); outline: none; }
.eight-row .unit { font-size: 12px; color: var(--text-3); width: 36px; }

.q-item { padding: 8px 0; }
.q-q { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.q-opt { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 9px; font-size: 14px; cursor: pointer; transition: all .15s var(--ease); }
.q-opt.on { border-color: var(--teal); background: var(--teal-l); color: var(--teal); font-weight: 600; }
.q-cat { margin: 16px 0 2px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--teal); background: var(--teal-l); border-radius: 9px; display: inline-block; }
.q-intro { font-size: 12.5px; color: var(--text-3); line-height: 1.6; padding: 4px 2px 10px; }
.q-intro b { color: var(--teal); }

.ai-anim { text-align: center; padding: 40px 20px; }
.ai-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--teal); display: inline-block; margin: 0 4px; animation: bounce 1s infinite ease-in-out; }
.ai-dot:nth-child(2){ animation-delay:.15s } .ai-dot:nth-child(3){ animation-delay:.3s }
@keyframes bounce { 0%,80%,100%{ transform: translateY(0); opacity:.4 } 40%{ transform: translateY(-10px); opacity:1 } }
.ai-text { margin-top: 18px; font-size: 13.5px; color: var(--text-2); }

/* MiniMax 流式生成面板 */
.ai-gen { padding: 26px 18px; text-align: center; }
.ai-gen-head { font-size: 13.5px; color: var(--text-2); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ai-gen-head .ai-dot { width: 8px; height: 8px; margin: 0 2px; animation: bounce 1s infinite ease-in-out; }
.ai-gen-box {
  text-align: left; font-size: 13.5px; line-height: 1.7; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 14px; max-height: 320px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  min-height: 80px;
}
.ai-gen-box::-webkit-scrollbar { width: 4px; }
.ai-gen-box::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.ai-err { margin-top: 10px; font-size: 12.5px; color: var(--bad); line-height: 1.5; white-space: pre-wrap; }

/* ---------------- 我的页 ---------------- */
.me-head { display: flex; align-items: center; gap: 14px; padding: 8px 4px 18px; }
.me-head .nm { font-size: 20px; font-weight: 700; }
.me-head .role { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.me-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; }
.me-stat { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 10px; text-align: center; box-shadow: var(--sh-1); }
.me-stat b { display: block; font-size: 22px; font-weight: 720; color: var(--teal); letter-spacing: -.6px; }
.me-stat span { font-size: 11.5px; color: var(--text-3); }
.team-item { display: flex; align-items: center; gap: 11px; padding: 10px 2px; }
.team-item .nm { font-size: 14px; font-weight: 600; }
.team-item .sub { font-size: 12px; color: var(--text-3); }
.team-item .me-tag { margin-left: auto; font-size: 11px; color: var(--teal); font-weight: 600; }

.setting-item { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line-2); cursor: pointer; font-size: 14.5px; }
.setting-item:last-child { border-bottom: none; }
.setting-item .ic { font-size: 18px; width: 24px; text-align: center; }
.setting-item .spacer { flex: 1; }
.setting-item .val { color: var(--text-3); font-size: 13px; }
.theme-seg { display: flex; gap: 6px; }
.theme-seg button { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.theme-seg button.on { border-color: var(--teal); background: var(--teal-l); color: var(--teal); }

.store-note { font-size: 11.5px; line-height: 1.6; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; margin-top: 14px; }
.store-note b { color: var(--text-1); font-family: var(--font-mono, monospace); }

/* ---------------- 登录闸 / 加载态 ---------------- */
.login-gate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; background: var(--bg); }
.lg-logo { font-size: 19px; font-weight: 760; color: var(--teal); letter-spacing: -.4px; }
.lg-msg { color: var(--danger, #e2483d); font-size: 13px; }
.lg-card { width: 100%; max-width: 300px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-l); padding: 22px 18px; box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: 10px; }
.lg-card label { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.lg-card input { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font-size: 14px; background: var(--surface-2); color: var(--text-1); }
.lg-card input:focus { outline: none; border-color: var(--teal); }
.lg-card select { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font-size: 14px; background: var(--surface-2); color: var(--text-1); appearance: none; -webkit-appearance: none; }
.lg-card select:focus { outline: none; border-color: var(--teal); }
.lg-card .btn { margin-top: 4px; }
.lg-switch { font-size: 12.5px; color: var(--text-2); text-align: center; margin-top: 2px; line-height: 1.8; }
.lg-switch a, .lg-switch span { color: var(--teal); font-weight: 600; cursor: pointer; }
.lg-tip { font-size: 11.5px; color: var(--text-3); text-align: center; line-height: 1.6; }
.loading { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 14px; }
.loading::after { content: ""; width: 18px; height: 18px; margin-left: 10px; border: 2px solid var(--teal); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- 我的目标进度 ---------------- */
.me-goal-row {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0; font-size: 12.5px; color: var(--text-2);
}
.me-goal-row > span { width: 34px; flex: none; }
.me-goal-track {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); overflow: hidden;
}
.me-goal-fill {
  height: 100%; border-radius: 999px; background: var(--teal);
  transition: width .5s ease;
}
.me-goal-track.gf2 .me-goal-fill { background: #16A34A; }
.me-goal-row b { font-size: 12.5px; color: var(--text-1); min-width: 86px; text-align: right; }

/* ---------------- 报告样式 ---------------- */
.rep-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rep-prov { font-size: 12px; font-weight: 600; color: var(--teal); background: var(--teal-l); padding: 4px 10px; border-radius: 999px; }
.btn.sm { padding: 7px 13px; font-size: 12.5px; border-radius: 10px; }
.rep-head { background: var(--teal-grad); border-radius: var(--r-l); padding: 18px; color: #fff; margin-bottom: 14px; }
.rep-brand { font-size: 16px; font-weight: 700; }
.rep-sub { font-size: 12px; opacity: .85; margin-top: 3px; }
.rep-meta { font-size: 11.5px; opacity: .9; margin-top: 10px; line-height: 1.5; }
.rep-demo-flag { font-size: 10.5px; opacity: .8; margin-top: 8px; background: rgba(255,255,255,.16); display: inline-block; padding: 3px 9px; border-radius: 8px; }
.rep-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-l); padding: 6px 16px 14px; margin-bottom: 14px; box-shadow: var(--sh-1); }
.rep-card-title { font-size: 15px; font-weight: 700; padding: 12px 0 8px; color: var(--teal); }
.rep-summary { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.rep-row { padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.rep-row:last-child { border-bottom: none; }
.rep-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.rep-row-text { font-size: 12.5px; color: var(--text-2); margin-top: 5px; line-height: 1.5; }
.rep-val { font-weight: 700; }
.rep-val-good { color: var(--good); } .rep-val-warn { color: var(--warn); } .rep-val-bad { color: var(--bad); } .rep-val-info { color: var(--info); }
.rep-bar { height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin: 8px 0 4px; }
.rep-bar-fill { height: 100%; border-radius: 4px; }
.rep-bar-good { background: var(--good); } .rep-bar-warn { background: var(--warn); } .rep-bar-bad { background: var(--bad); } .rep-bar-info { background: var(--info); }
.rep-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.rep-badge-good { background: rgba(22,163,74,.14); color: var(--good); }
.rep-badge-warn { background: rgba(202,138,4,.14); color: var(--warn); }
.rep-badge-bad { background: rgba(220,38,38,.14); color: var(--bad); }
.rep-badge-info { background: rgba(37,99,235,.14); color: var(--info); }
.rep-risk { padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.rep-risk-bad { background: rgba(220,38,38,.1); color: #b91c1c; }
.rep-risk-warn { background: rgba(202,138,4,.1); color: #a16207; }
.rep-risk-info { background: rgba(37,99,235,.1); color: var(--info); }
.rep-suggest { font-size: 13.5px; line-height: 1.7; color: var(--text); }
.rep-suggest div { margin-bottom: 4px; }
.rep-disclaimer { font-size: 11px; color: var(--text-3); line-height: 1.5; padding: 4px 4px 8px; }

/* MiniMax AI 综合评估区块 */
.rep-ai { border-color: var(--teal) !important; box-shadow: 0 0 0 1px rgba(13,148,142,.18), var(--sh-1) !important; }
.rep-ai-text { font-size: 13.5px; line-height: 1.75; color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* ---------------- 加载态 ---------------- */
.loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; color: var(--text-3); font-size: 13px; }
.spin { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: spin .7s linear infinite; margin-right: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- 响应式 ---------------- */
/* 全屏移动优先：所有设备直接铺满视口，不画手机外框、不依赖 100vh */

/* =========================================================================
 * 报告样式升级 + PDF 导出
 * ========================================================================= */

/* 工具栏按钮组 */
.rep-actions { display: flex; gap: 8px; }
.rep-actions .btn { white-space: nowrap; }

/* ---------- 报告封面（屏幕 + 导出共用） ---------- */
.rep-cover {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-l); padding: 18px 18px 16px; margin-bottom: 14px;
  box-shadow: var(--sh-1);
}
.rep-cover-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--teal-grad);
}
.rep-cover-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rep-cover-brand { display: flex; align-items: center; gap: 10px; }
.rep-cover-logo {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--teal-l);
}
.rep-cover-title { font-size: 17px; font-weight: 760; color: var(--text); letter-spacing: -.3px; }
.rep-cover-sub { font-size: 11.5px; color: var(--teal); font-weight: 600; margin-top: 1px; }
.rep-cover-prov {
  font-size: 11px; font-weight: 600; color: var(--teal-d);
  background: var(--teal-l); padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.rep-cover-meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2);
}
.rep-meta-item { display: flex; flex-direction: column; gap: 2px; }
.rep-meta-item span { font-size: 11px; color: var(--text-3); }
.rep-meta-item b { font-size: 14px; font-weight: 650; color: var(--text); }
.rep-cover-stats { display: flex; gap: 10px; margin-top: 14px; }
.rep-stat {
  flex: 1; background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 9px 10px; text-align: center;
  font-size: 11px; color: var(--text-3); line-height: 1.4;
}
.rep-stat b { display: block; font-size: 16px; font-weight: 740; color: var(--teal); margin-bottom: 1px; }
.rep-cover-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--text-3); letter-spacing: .3px; text-align: center;
}

/* 段落标题加左侧色条（premium） */
.rep-card-title {
  display: flex; align-items: center; gap: 8px;
  border-left: 3px solid var(--teal); padding-left: 10px !important;
}
/* 风险项图标 + 建议勾选 */
.rep-risk { display: flex; gap: 8px; align-items: flex-start; }
.rep-risk::before { content: "⚠"; flex: none; font-size: 13px; line-height: 1.5; }
.rep-suggest div { position: relative; padding-left: 22px; }
.rep-suggest div::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--teal); font-weight: 800;
}

/* =========================================================================
 * PDF 导出容器（脱离手机框，A4 文档排版，强制浅色主题）
 * ========================================================================= */
#rep-export-host {
  position: fixed; left: -10000px; top: 0; width: 670px; z-index: -1;
  background: #fff;
}
/* ===================== 报告样式（棕金红 · 御医派198 中医视觉体系） ===================== */
:root {
  --rep-primary: #8B4513;
  --rep-primary-l: #A0522D;
  --rep-secondary: #D4A574;
  --rep-gold: #CFA24D;
  --rep-accent: #C73E3A;
  --rep-bg: #FDF8F3;
  --rep-border: #E8D5C4;
  --rep-text: #2D2D2D;
  --rep-text-2: #666666;
  --rep-red-l: #FFF5F5;
  --rep-orange-l: #FEF3C7;
  --rep-green-l: #F0FFF4;
  --rep-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --rep-sans: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 屏幕报告容器（手机预览）沿用报告视觉体系 */
#rep-box { background: var(--rep-bg); border-radius: 16px; padding: 12px; margin-top: 4px; }

/* 品牌头 */
.rep-header { text-align: center; padding: 30px 20px; background: linear-gradient(135deg, var(--rep-primary) 0%, var(--rep-primary-l) 100%); color: #fff; border-radius: 12px; margin-bottom: 18px; }
.rep-header .brand { font-size: 14px; letter-spacing: 4px; opacity: .9; }
.rep-header h1 { font-family: var(--rep-serif); font-size: 26px; margin: 10px 0; font-weight: 700; }
.rep-header .subtitle { font-size: 13px; opacity: .85; }
.rep-header .report-id { margin-top: 12px; font-size: 12px; opacity: .8; }

/* AI 免责声明（合规必含；深琥珀色文字 on 浅琥珀底 → WCAG AA） */
.rep-disclaimer {
  background: #FFF7ED;
  border: 1px solid #F59E0B;
  border-left: 4px solid #F59E0B;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.6;
  color: #7C2D12;
  margin-bottom: 16px;
}
.rep-disclaimer b { color: #7C2D12; font-weight: 700; }

/* 演示报告醒目横幅（非真实 AI 时显示，杜绝"假评估"误导） */
.rep-demo-banner {
  background: #FFF4E5;
  border: 1px solid #F0B27A;
  border-left: 4px solid #EA580C;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #9A3412;
}
.rep-demo-banner span { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; opacity: .9; }

/* 患者横幅 */
.rep-patient { background: #fff; border-radius: 12px; padding: 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); margin-bottom: 16px; border: 1px solid var(--rep-border); }
.rep-patient .pname { font-family: var(--rep-serif); font-size: 22px; color: var(--rep-primary); font-weight: 700; }
.rep-patient .pmeta { color: var(--rep-text-2); font-size: 12px; margin-top: 3px; }
.rep-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rep-tag { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.rep-tag.primary { background: var(--rep-orange-l); color: var(--rep-primary); }
.rep-tag.secondary { background: #FFF3E0; color: #E65100; }
.rep-score { background: linear-gradient(135deg, var(--rep-gold), #D4A017); color: #fff; padding: 10px 18px; border-radius: 8px; text-align: center; min-width: 100px; flex-shrink: 0; }
.rep-score .label { font-size: 11px; opacity: .9; }
.rep-score .val { font-size: 24px; font-weight: 700; line-height: 1.1; }
.rep-score .level { font-size: 10px; opacity: .9; margin-top: 2px; }

/* 通用卡片（含 card-header：图标 + 标题 + 副标题） */
.rep-card { background: #fff; border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.06); border: 1px solid var(--rep-border); overflow: hidden; }
.rep-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rep-card-ico { font-size: 20px; flex-shrink: 0; }
.rep-card-title { font-family: var(--rep-serif); font-size: 16px; color: var(--rep-primary); font-weight: 700; line-height: 1.3; }
.rep-card-sub { font-size: 11px; color: var(--rep-text-2); margin-top: 2px; }
.rep-summary { font-size: 13px; line-height: 1.7; color: var(--rep-text); word-break: break-word; overflow-wrap: anywhere; }
.rep-p { font-size: 12.5px; line-height: 1.8; color: var(--rep-text); margin: 3px 0; word-break: break-word; overflow-wrap: anywhere; }
.rep-ul { margin: 6px 0 4px; padding-left: 16px; }
.rep-ul li { font-size: 12.5px; line-height: 1.7; color: var(--rep-text); word-break: break-word; overflow-wrap: anywhere; }

/* 执行摘要（棕渐变深色卡） */
.rep-exec { background: linear-gradient(135deg, var(--rep-primary) 0%, var(--rep-primary-l) 100%); border-radius: 12px; padding: 20px; color: #fff; margin-bottom: 16px; overflow: hidden; }
.rep-exec-title { font-family: var(--rep-serif); font-size: 16px; margin-bottom: 12px; text-align: center; }
.rep-exec-main { font-size: 17px; text-align: center; margin-bottom: 6px; font-weight: 700; line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; }
.rep-exec-desc { font-size: 12px; text-align: center; opacity: .9; margin-bottom: 14px; line-height: 1.75; word-break: break-word; overflow-wrap: anywhere; }
.rep-exec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rep-exec-item { background: rgba(255,255,255,.15); border-radius: 8px; padding: 10px 6px; text-align: center; min-width: 0; }
.rep-exec-item .l { font-size: 10px; opacity: .85; margin-bottom: 5px; word-break: keep-all; }
.rep-exec-item .v { font-size: 14px; font-weight: 700; white-space: nowrap; line-height: 1.3; }
.rep-exec-item .v.v-wrap { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }

/* 四诊表 */
.rep-dx-table { width: 100%; border-collapse: collapse; }
.rep-dx-table th, .rep-dx-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rep-border); font-size: 13px; vertical-align: top; }
.rep-dx-table th { background: var(--rep-bg); color: var(--rep-primary); font-weight: 600; width: 72px; }
.rep-dx-table tr:last-child th, .rep-dx-table tr:last-child td { border-bottom: none; }

/* 体质三列卡 */
.rep-cons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rep-con { border-radius: 10px; padding: 14px 10px; text-align: center; min-width: 0; }
.rep-con.primary { background: linear-gradient(135deg, var(--rep-orange-l), #FFE0B2); border: 2px solid var(--rep-gold); }
.rep-con.secondary { background: #FFF3E0; border: 2px solid var(--rep-secondary); }
.rep-con.tertiary { background: #F5F5F5; border: 2px solid #BDBDBD; }
.rep-con .clabel { font-size: 10px; color: var(--rep-text-2); margin-bottom: 4px; }
.rep-con .cname { font-family: var(--rep-serif); font-size: 17px; color: var(--rep-primary); margin-bottom: 6px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.rep-con .cscore { font-size: 24px; font-weight: 700; color: var(--rep-primary); }
.rep-con .cscore .u { font-size: 12px; font-weight: 400; }
.rep-con .cbar { height: 6px; background: rgba(0,0,0,.1); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.rep-con .cfill { height: 100%; background: var(--rep-gold); border-radius: 3px; }
.rep-con.secondary .cfill { background: var(--rep-secondary); }
.rep-con.tertiary .cfill { background: #9E9E9E; }
.rep-con .cdesc { font-size: 10px; color: var(--rep-text-2); line-height: 1.5; margin-top: 6px; }

/* 生化指标网格（接真实八数数据） */
.rep-bio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rep-bio-item { background: var(--rep-bg); border-radius: 10px; padding: 12px 8px; text-align: center; min-width: 0; }
.rep-bio-item .bn { font-size: 10px; color: var(--rep-text-2); margin-bottom: 4px; word-break: keep-all; }
.rep-bio-item .bv { font-size: 17px; font-weight: 700; color: var(--rep-primary); line-height: 1.2; white-space: nowrap; }
.rep-bio-item .bu { font-size: 9px; font-weight: 400; color: var(--rep-text-2); }
.rep-bio-item .bs { font-size: 10px; margin-top: 3px; }
.rep-bio-item .bs.normal { color: #2E7D32; }
.rep-bio-item .bs.warning { color: #E65100; }

/* 脉象网格 */
.rep-pulse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rep-pulse-card { background: var(--rep-bg); border-radius: 10px; padding: 16px; min-width: 0; }
.rep-pulse-card .pt { font-weight: 600; color: var(--rep-primary); margin-bottom: 10px; font-size: 14px; }
.rep-pulse-item { font-size: 12px; padding: 6px 0; border-bottom: 1px dashed var(--rep-border); display: flex; justify-content: space-between; gap: 8px; }
.rep-pulse-item:last-child { border-bottom: none; }
.rep-pulse-item .pp { color: var(--rep-gold); font-weight: 600; text-align: right; }
.rep-pulse-item .pm { color: var(--rep-text-2); font-size: 11px; }

/* 风险预警横幅 */
.rep-warn { background: var(--rep-red-l); border: 2px solid var(--rep-accent); border-radius: 10px; padding: 16px 20px; margin-bottom: 18px; }
.rep-warn .wt { font-size: 16px; font-weight: 700; color: var(--rep-accent); margin-bottom: 8px; }
.rep-warn .wc { font-size: 13px; color: var(--rep-text); line-height: 1.8; }

/* 疾病风险网格 */
.rep-disease { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rep-dcard { background: #fff; border-radius: 10px; padding: 12px; border: 1px solid var(--rep-border); min-width: 0; }
.rep-dcard.high { border-left: 4px solid var(--rep-accent); }
.rep-dcard.medium { border-left: 4px solid #FF9800; }
.rep-dcard.low { border-left: 4px solid #4CAF50; }
.rep-dcard .rh { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; gap: 6px; }
.rep-dcard .rn { font-weight: 600; font-size: 13px; line-height: 1.3; word-break: break-word; }
.rep-dcard .rt { font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.rep-dcard .rt.high { background: var(--rep-red-l); color: var(--rep-accent); }
.rep-dcard .rt.medium { background: var(--rep-orange-l); color: #E65100; }
.rep-dcard .rt.low { background: var(--rep-green-l); color: #2E7D32; }
.rep-dcard .rd { font-size: 11.5px; color: var(--rep-text-2); line-height: 1.6; word-break: break-word; }

/* 六维生活方式（接真实问卷数据） */
.rep-life { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rep-life-item { background: var(--rep-bg); border-radius: 10px; padding: 12px 8px; text-align: center; min-width: 0; }
.rep-life-item .li-ico { font-size: 20px; margin-bottom: 4px; }
.rep-life-item .li-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.rep-life-item .li-score { font-size: 18px; font-weight: 700; color: var(--rep-gold); }
.rep-life-item .li-bar { height: 5px; background: rgba(0,0,0,.08); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.rep-life-item .li-fill { height: 100%; background: var(--rep-gold); border-radius: 3px; }
.rep-life-total { text-align: center; margin-top: 12px; font-size: 12px; color: var(--rep-text-2); }
.rep-life-total b { color: var(--rep-gold); font-size: 18px; }

/* 三阶段调理时间线 */
.rep-timeline { position: relative; padding-left: 22px; }
.rep-timeline::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--rep-gold), var(--rep-primary)); border-radius: 2px; }
.rep-tl-item { position: relative; margin-bottom: 18px; }
.rep-tl-item:last-child { margin-bottom: 0; }
.rep-tl-item::before { content: ""; position: absolute; left: -18px; top: 4px; width: 12px; height: 12px; background: var(--rep-gold); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--rep-gold); }
.rep-tl-title { font-weight: 700; font-size: 14px; color: var(--rep-primary); margin-bottom: 3px; line-height: 1.3; word-break: break-word; }
.rep-tl-period { font-size: 10px; color: var(--rep-gold); margin-bottom: 6px; font-weight: 600; }
.rep-tl-content { font-size: 12px; color: var(--rep-text); line-height: 1.7; background: var(--rep-bg); padding: 10px; border-radius: 8px; word-break: break-word; overflow-wrap: anywhere; }

/* 优先级行动 */
.rep-prio { display: flex; flex-direction: column; gap: 12px; }
.rep-prio-card { border-radius: 10px; padding: 14px; min-height: 60px; width: 100%; box-sizing: border-box; }
.rep-prio-card.p0 { background: var(--rep-red-l); border: 2px solid var(--rep-accent); }
.rep-prio-card.p1 { background: var(--rep-orange-l); border: 2px solid #FF9800; }
.rep-prio-card.p2 { background: #FFFDE7; border: 2px solid #FFC107; }
.rep-prio-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.rep-prio-level { font-weight: 700; font-size: 16px; flex-shrink: 0; }
.rep-prio-card.p0 .rep-prio-level { color: var(--rep-accent); }
.rep-prio-card.p1 .rep-prio-level { color: #E65100; }
.rep-prio-card.p2 .rep-prio-level { color: #F57C00; }
.rep-prio-title { font-weight: 600; font-size: 13px; line-height: 1.3; word-break: break-word; }
.rep-prio-desc { font-size: 11px; color: var(--rep-text); margin-bottom: 8px; line-height: 1.5; word-break: break-word; }
.rep-prio-actions { list-style: none; padding: 0; margin: 0; }
.rep-prio-actions li { font-size: 11px; padding: 5px 0; border-bottom: 1px dashed rgba(0,0,0,.1); display: flex; align-items: flex-start; gap: 5px; word-break: break-word; }
.rep-prio-actions li:last-child { border-bottom: none; }
.rep-prio-actions li::before { content: "→"; color: var(--rep-gold); font-weight: 700; flex-shrink: 0; }

/* 监测计划 */
.rep-mon { display: flex; flex-direction: column; gap: 12px; }
.rep-mon-card { background: var(--rep-bg); border-radius: 10px; padding: 14px 10px; text-align: left; min-height: 40px; width: 100%; box-sizing: border-box; }
.rep-mon-card .mp { font-size: 16px; font-weight: 700; color: var(--rep-primary); margin-bottom: 8px; }
.rep-mon-card .mi { font-size: 11.5px; color: var(--rep-text); padding: 5px 0; border-bottom: 1px dashed var(--rep-border); word-break: break-word; }
.rep-mon-card .mi:last-child { border-bottom: none; }

/* 寄语 */
.rep-quote { background: linear-gradient(135deg, #FFF8E1, #FFECB3); border-radius: 12px; padding: 24px; text-align: center; border: 2px solid var(--rep-gold); }
.rep-quote .qt { font-size: 16px; font-weight: 700; color: var(--rep-primary); margin-bottom: 12px; }
.rep-quote .qc { font-size: 15px; color: var(--rep-text); line-height: 1.9; font-style: italic; margin-bottom: 14px; }
.rep-quote .qs { font-size: 12px; color: var(--rep-text-2); }

/* 页脚 */
.rep-foot { text-align: center; padding: 24px; color: var(--rep-text-2); font-size: 12px; border-top: 1px solid var(--rep-border); margin-top: 18px; }
.rep-foot .fb { font-family: var(--rep-serif); font-size: 16px; color: var(--rep-primary); margin-bottom: 8px; }
.rep-foot .fd { font-size: 11px; color: #999; margin-top: 8px; }

/* 兼容旧路径的兜底样式（演示/纯文本渲染） */
.rep-row { padding: 11px 0; border-bottom: 1px solid var(--rep-border); }
.rep-row:last-child { border-bottom: none; }
.rep-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.rep-row-text { font-size: 12.5px; color: var(--rep-text-2); margin-top: 5px; line-height: 1.5; }
.rep-val { font-weight: 700; }
.rep-val-good { color: #16A34A; } .rep-val-warn { color: #CA8A04; } .rep-val-bad { color: #DC2626; } .rep-val-info { color: #2563EB; }
.rep-bar { height: 7px; background: #F0EFEB; border-radius: 4px; overflow: hidden; margin: 8px 0 4px; }
.rep-bar-fill { height: 100%; border-radius: 4px; }
.rep-bar-good { background: #16A34A; } .rep-bar-warn { background: #CA8A04; } .rep-bar-bad { background: #DC2626; } .rep-bar-info { background: #2563EB; }
.rep-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.rep-badge-good { background: rgba(22,163,74,.14); color: #16A34A; }
.rep-badge-warn { background: rgba(202,138,4,.14); color: #CA8A04; }
.rep-badge-bad { background: rgba(220,38,38,.14); color: #DC2626; }
.rep-badge-info { background: rgba(37,99,235,.14); color: #2563EB; }
.rep-disclaimer { font-size: 11px; color: var(--rep-text-2); line-height: 1.5; padding: 4px 4px 8px; }

/* ===== PDF 导出容器（A4 文档，强制浅色） ===== */
#rep-export-host { position: fixed; left: -10000px; top: 0; width: 794px; z-index: -1; background: #fff; }

/* ===== 响应式布局：分层断点 ===== */
/*
  断点策略：
  - ≤480px：手机预览框（#rep-box 约375px）→ 激进降列，多数网格变1列
  - 481-640px：大手机/小平板 → 中等降列（2列）
  - ≥641px：桌面/PDF → 保持原设计多列
  - .rep-doc（PDF 794px）单独适配
*/

/* ---- 极窄屏（手机预览框 ≤480px）---- */
@media (max-width: 480px) {
  /* ★ 报告容器自适应：手机上取消固定794px */
  .rep-doc { width: 100% !important; max-width: 100% !important; padding: 12px 14px !important; font-size: 12px !important; }
  .rep-exec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .rep-exec { padding: 16px; }
  .rep-exec-main { font-size: 15px; }
  .rep-exec-desc { font-size: 11px; }
  .rep-bio { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .rep-cons { grid-template-columns: 1fr !important; gap: 10px; }
  .rep-con { padding: 12px; }
  .rep-disease { grid-template-columns: 1fr !important; }
  .rep-life { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }

  /* ★ 关键修复：优先级和监测计划强制单列（匹配 .rep-doc 作用域的高特异性） */
  .rep-doc .rep-prio,
  .rep-prio,
  .rep-doc .rep-mon,
  .rep-mon {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    grid-template-columns: unset !important; /* 覆盖所有 grid 列声明（包括 .rep-doc .rep-prio 的 !important） */
  }
  .rep-doc .rep-prio-card,
  .rep-prio-card,
  .rep-doc .rep-mon-card,
  .rep-mon-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    text-align: left !important;
  }
  /* P0/P1/P2 标题横排不换行 */
  .rep-prio-head {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .rep-prio-title {
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* 监测计划列表项横排 */
  .rep-mon-card ul,
  .rep-mon-card li {
    text-align: left !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  .rep-pulse { grid-template-columns: 1fr !important; }
  .rep-score { padding: 8px 14px; min-width: 84px; flex-shrink: 0; }
  .rep-score .val { font-size: 20px; }
  .rep-score .level { font-size: 9px; }
  .rep-patient .pname { font-size: 20px; }
  .rep-header { padding: 22px 14px; }
  .rep-header h1 { font-size: 22px; }
  .rep-card-title { font-size: 15px; }
  .rep-card { padding: 14px; margin-bottom: 12px; }
  .rep-timeline { padding-left: 18px; }
  .rep-tl-item::before { left: -15px; width: 10px; height: 10px; }
  .rep-timeline::before { left: 5px; }
  .rep-tl-content { padding: 8px; font-size: 11.5px; }
}

/* ---- 中等屏（481-640px）---- */
@media (min-width: 481px) and (max-width: 640px) {
  .rep-exec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-bio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-cons { grid-template-columns: 1fr; }
  .rep-disease { grid-template-columns: 1fr; }
  .rep-life { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rep-prio { display: flex; flex-direction: column; gap: 12px; }
  .rep-prio-card { width: 100%; box-sizing: border-box; }
  .rep-mon { display: flex; flex-direction: column; gap: 12px; }
  .rep-mon-card { width: 100%; box-sizing: border-box; }
  .rep-pulse { grid-template-columns: 1fr; }
  .rep-header h1 { font-size: 24px; }
}

/* ---- PDF 导出容器（A4 内容区 ≈670px）独立适配 ---- */
.rep-doc {
  width: 100%; max-width: 670px; padding: 20px 24px; background: var(--rep-bg); color: var(--rep-text);
  font-family: var(--rep-sans); font-size: 13px; line-height: 1.7; box-sizing: border-box;
}
.rep-doc .rep-exec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rep-doc .rep-bio { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rep-doc .rep-cons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rep-doc .rep-life { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rep-doc .rep-disease { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rep-doc .rep-prio { display: flex !important; flex-direction: column !important; gap: 12px; }
.rep-doc .rep-mon { display: flex !important; flex-direction: column !important; gap: 12px; }
/* ★ PDF 模式下确保优先级/监测卡片内容完整可见 */
.rep-doc .rep-prio-card,
.rep-doc .rep-mon-card,
.rep-doc .rep-bio-item,
.rep-doc .rep-exec-item,
.rep-doc .rep-con,
.rep-doc .rep-pulse-card,
.rep-doc .rep-dcard,
.rep-doc .rep-life-item {
  overflow: visible !important;
  min-height: auto !important;
  page-break-inside: avoid;
}
.rep-doc .rep-pulse { grid-template-columns: repeat(2, 1fr); }
.rep-doc .rep-card { box-shadow: none; padding: 16px; margin-bottom: 14px; }
.rep-doc .rep-header { padding: 26px 20px; }
.rep-doc .rep-patient { padding: 16px; }
.rep-doc .rep-exec { padding: 20px; }
.rep-doc .rep-score { min-width: 100px; }
.rep-doc .rep-header, .rep-doc .rep-card, .rep-doc .rep-exec,
.rep-doc .rep-patient, .rep-doc .rep-warn, .rep-doc .rep-quote,
.rep-doc .rep-foot { break-inside: avoid; page-break-inside: avoid; }
.rep-doc .rep-con, .rep-doc .rep-bio-item, .rep-doc .rep-pulse-card,
.rep-doc .rep-dcard, .rep-doc .rep-life-item, .rep-doc .rep-prio-card,
.rep-doc .rep-mon-card, .rep-doc .rep-tl-item { break-inside: avoid; page-break-inside: avoid; }

/* ════════════════════════════════════════
 * 移动端兜底（必须在 .rep-doc 规则之后！）
 * 级联顺序：后声明的同特异性 !important 胜出
 * ════════════════════════════════════════ */
@media (max-width: 480px) {
  .rep-doc { width: 100% !important; max-width: 100% !important; padding: 12px 14px !important; font-size: 12px !important; box-sizing: border-box !important; }
  .rep-doc .rep-prio,
  .rep-doc .rep-mon {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    grid-template-columns: unset !important;
  }
  .rep-doc .rep-prio-card,
  .rep-doc .rep-mon-card {
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word !important;
    white-space: normal !important;
    text-align: left !important;
  }
}

/* 打印回退：只显示导出容器 */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  /* 仅打印回退路径加水印（html2pdf 路径由 jsPDF 逐页绘制，避免重复）*/
  body.rep-printing .rep-doc::before {
    content: "9两健康"; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-32deg);
    font-size: 90px; font-weight: 800; color: rgba(13, 148, 142, 0.05);
    white-space: nowrap; z-index: 0; pointer-events: none;
  }
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  body { display: block !important; }
  .app, .boot-err { display: none !important; }
  #rep-export-host { position: static !important; left: auto !important; top: auto !important; width: auto !important; z-index: auto !important; background: #fff !important; }
  .rep-doc { width: auto !important; padding: 0 !important; box-shadow: none !important; }
}