/* ===== 基础重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
    --primary: #2f7bea;
    --primary-dark: #2264c4;
    --bg: #eef2f7;
    --card-bg: #ffffff;
    --text: #333333;
    --text-light: #888888;
    --border: #dfe4ec;
}

html {
    font-size: 16px;
    /* 🔴 关掉 iOS 的自动文本放大（Text Autosizing）。不写这一行，Safari/微信
       WebView 会在页面布局稳定后**自己再放大一次正文**，理由是"字太小不好读"。
       症状：进任何页面约半秒后整页猛地放大一下，像闪了一下。

       0819 排查纪实：这东西**不改变 getComputedStyle 报告的 font-size**，
       所以探针一路显示「字号14px、文档宽=视宽、缩放1」全绿，看不出任何异常，
       只有人眼看得见——查了很久才想到它。

       为什么是这几天才冒出来：0816 显示大小从二档（标准/大）改成三档，新增的
       「小」档把根字号压到 14px，正好落进 iOS 判定「需要帮你放大」的区间。
       我们自己已经有三档字号给用户选，不需要系统再插一手。
       legal.css 早就设了这一行，所以法律文书页一直没这毛病，可以对照。 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ===== 布局：手机端自适应，内容居中并限制最大宽度 ===== */
.app {
    width: 100%;
    max-width: 640px;   /* 大屏手机/平板不至于过宽 */
    margin: 0 auto;
    padding: 12px;
}

.card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 20px 16px 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
}

.title {
    font-size: 1.375rem;
    text-align: center;
    font-weight: 700;
}

.subtitle {
    text-align: center;
    color: var(--text-light);
    font-size: 0.9rem;
    margin-top: 4px;
    margin-bottom: 8px;
}

/* ===== 问题块 ===== */
.question { margin-top: 22px; }

.q-title {
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.q-num {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.85rem;
    margin-right: 8px;
}

.q-hint {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-bottom: 10px;
    padding-left: calc(1.5rem + 8px);
}
.q-hint strong { color: #d63131; }

/* ===== 选项：大触控区，自适应换行 ===== */
.options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.opt {
    flex: 1 1 calc(50% - 10px);  /* 每行两个，窄屏自动挤压 */
    min-width: 130px;
    cursor: pointer;
}

/* 隐藏原生控件，用 .box 呈现可点区域 */
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 48px;               /* ≥44px 触控友好 */
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 0.95rem;
    background: #fafbfd;
    transition: all 0.15s ease;
    user-select: none;
}

.opt input:checked + .box {
    border-color: var(--primary);
    background: #eaf2ff;
    color: var(--primary-dark);
    font-weight: 600;
}

.opt input:focus-visible + .box { outline: 2px solid var(--primary); }

/* ===== 按钮 ===== */
.btn-primary {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease;
}
.btn-primary:active { background: var(--primary-dark); }

/* 次选按钮：分层结果里的备选评估入口（描边样式，区别于主按钮） */
.btn-secondary {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 13px;
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 10px;
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease;
}
.btn-secondary:active { background: #eaf2ff; }

.btn-text {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 8px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 0.9rem;
    cursor: pointer;
}

/* ===== 错误提示 ===== */
.error-msg {
    color: #d63131;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 16px;
    min-height: 1.2em;
}

/* ===== 结果区 ===== */
/* 结果卡：顶部一条分层主题色的强调边，整体更聚焦、更有层次 */
.result-card {
    --tier: var(--primary);
    --tier-soft: #eef4ff;
    --tier-line: #cfe0fb;
    position: relative;
    overflow: hidden;
    padding-top: 30px;
    border-top: 4px solid var(--tier);
}
.result-icon {
    font-size: 2.6rem;
    text-align: center;
    margin-bottom: 8px;
}
/* 分层徽标：结果卡顶部居中的小胶囊标签，颜色随分层 */
.result-badge {
    display: inline-block;
    margin: 0 auto 2px;
    padding: 4px 16px;
    border-radius: 999px;
    background: var(--tier-soft);
    color: var(--tier);
    border: 1px solid var(--tier-line);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
}
/* 让徽标真正居中（父级是块级卡片） */
.result-card { text-align: center; }
.result-msg {
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.9;
    padding: 8px 4px 4px;
}
/* 初筛结果放大版：结果句更醒目 */
.result-msg-lg {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 12px 6px 4px;
}
.result-msg-lg .hl {
    font-size: 1.5rem;
}
/* 分层副标题：主标题下方的说明，收进一张浅色分层底色的卡里，突出重点 */
.result-subtitle {
    font-size: 0.98rem;
    color: var(--text);
    text-align: center;
    line-height: 1.85;
    margin: 12px 2px 4px;
    padding: 14px 16px;
    background: var(--tier-soft);
    border-radius: 12px;
}
.result-subtitle:empty { display: none; }
/* 副标题内的用户勾选项：黑体加粗放大，颜色由 JS 内联设置 */
.result-subtitle .hl {
    font-family: "SimHei", "Heiti SC", "Microsoft YaHei", sans-serif;
    font-weight: 700;
    font-size: 1.08rem;
}
/* 下一步评估按钮组 */
.result-btns {
    margin-top: 18px;
}
/* 统一底色的结果按钮：三个按钮同取分层主题色，主/次仅在填充与描边上区分 */
.result-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    font-size: 1.04rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: filter 0.15s ease, background 0.15s ease;
}
/* 按钮左侧小图标 */
.result-btn-icon {
    font-size: 1.15rem;
    line-height: 1;
}
.result-btn:first-child { margin-top: 0; }
.result-btn.is-primary {
    background: var(--tier);
    color: #fff;
    border: 1px solid var(--tier);
    box-shadow: 0 4px 12px var(--tier-line);
}
.result-btn.is-primary:active { filter: brightness(0.92); }
.result-btn.is-secondary {
    background: var(--tier-soft);
    color: var(--tier);
    border: 1px solid var(--tier-line);
}
.result-btn.is-secondary:active { filter: brightness(0.96); }
/* 分层引导文案：结果句下方的一段说明 */
.result-guide {
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    line-height: 1.75;
    margin-top: 16px;
    padding: 14px 10px 4px;
    border-top: 1px solid var(--border);
}
.result-guide:empty { display: none; border-top: none; }
/* 信息矛盾提示卡 */
.conflict-box {
    background: #fff2f2;
    border: 1px solid #ffc9c9;
    border-radius: 12px;
    padding: 14px 14px 16px;
    margin-bottom: 16px;
}
.conflict-title {
    color: #d63131;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 8px;
}
.conflict-item {
    color: #7a3030;
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0 0 8px;
}
.conflict-btn {
    display: inline-block;
    background: #d63131;
    color: #fff;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 20px;
    margin-top: 4px;
}
/* 高亮词：黑体 + 加粗，颜色由 JS 内联设置 */
.result-msg .hl {
    font-family: "SimHei", "Heiti SC", "Microsoft YaHei", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
}

/* ===== 通用 ===== */
.hidden { display: none !important; }

.placeholder { text-align: center; padding-top: 40px; padding-bottom: 40px; }
.placeholder .btn-primary { max-width: 260px; margin-left: auto; margin-right: auto; }

/* “以上都没有 / 都能自理”占位选项：独占一行、样式弱化区分 */
.opt-none { flex: 1 1 100%; }
.opt-none .box {
    background: #f4f6f9;
    border-style: dashed;
    color: var(--text-light);
}
.opt-none input:checked + .box {
    border-style: solid;
    color: var(--primary-dark);
}

/* 超小屏（<360px）时选项改为单列 */
@media (max-width: 359px) {
    .opt { flex: 1 1 100%; }
}

/* ============ A 层专项筛查（健康年龄测评） ============ */
.sec-title {
    margin-top: 26px;
    padding-left: 10px;
    border-left: 4px solid var(--primary);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.sec-hint {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-top: 6px;
}
.q-opt { font-size: 0.8rem; color: var(--text-light); font-weight: 400; margin-left: 4px; }

/* 数字输入 */
.num-input {
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: #fafbfd;
    color: var(--text);
}
.num-input:focus { border-color: var(--primary); outline: none; background: #fff; }

.inline-inputs { display: flex; gap: 10px; }
.io { flex: 1 1 0; display: flex; align-items: center; gap: 6px; }
.io .num-input { text-align: center; }
.io .unit { font-size: 0.82rem; color: var(--text-light); flex: none; }

/* 情绪量表：4 档并排、更紧凑 */
.mood-q { margin-top: 16px; }
.options.scale { flex-wrap: nowrap; gap: 8px; }
.opt-s { flex: 1 1 0; min-width: 0; }
.opt-wide { flex: 1 1 100%; }

/* ============ 结果报告 ============ */
.report-hero {
    background: linear-gradient(135deg, #2f7bea, #2264c4);
    color: #fff;
    border-radius: 14px;
    padding: 24px 16px;
    text-align: center;
    margin-bottom: 16px;
}
.hero-label { font-size: 0.95rem; opacity: 0.9; }
.hero-age { font-size: 3.2rem; font-weight: 800; line-height: 1.1; margin: 6px 0; font-family: "SimHei", "Microsoft YaHei", sans-serif; }
.hero-unit { font-size: 1.2rem; font-weight: 500; margin-left: 4px; }
.hero-gap { font-size: 1rem; font-weight: 600; }

.report-block {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 14px 16px;
    margin-bottom: 14px;
}
.rb-title { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }

/* AI 深度解读区 */
.ai-int-tip { font-size: 0.86rem; color: var(--muted, #6b7684); margin: -2px 0 12px; line-height: 1.5; }
.ai-interpret {
    margin-top: 12px;
    padding: 12px 13px;
    background: #f6f9ff;
    border: 1px solid #dbe6fb;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text, #333);
    white-space: pre-wrap;   /* 保留大模型输出的分段换行 */
    word-break: break-word;
}
.ai-interpret.hidden { display: none; }

.risk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
}
.risk-row:last-child { border-bottom: none; }
.risk-name { font-size: 0.98rem; }
.risk-badge {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

/* 风险条右侧：徽标 + “了解更多” */
.risk-right { display: flex; align-items: center; gap: 10px; flex: none; }
.risk-more {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.risk-more:active { color: var(--primary-dark); }
.risk-tip { font-size: 0.8rem; color: var(--text-light); margin-top: 10px; }

.main-factor { font-size: 1rem; font-weight: 600; color: var(--primary-dark); }
.prescription { font-size: 0.95rem; line-height: 1.7; }

/* 专项预防方案：每个慢病风险因素/亚健康诱因一张卡 */
.plan-card {
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
}
.plan-card:last-child { border-bottom: none; }
.plan-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 6px;
}
.plan-name::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    margin-right: 8px;
    vertical-align: middle;
}
.plan-summary { font-size: 0.9rem; color: var(--text-light); line-height: 1.6; margin-bottom: 8px; }
.plan-measures { margin: 0 0 6px; padding-left: 20px; }
.plan-measures li { font-size: 0.92rem; line-height: 1.65; margin-bottom: 3px; }
.plan-medical { font-size: 0.88rem; color: var(--danger); line-height: 1.6; }

/* 下载报告 + 企业微信二维码 */
.download-block { text-align: center; }
.download-block .rb-title { text-align: left; }
.dl-text { font-size: 0.9rem; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; text-align: left; }
.wecom-qr {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    background: #fff;
}
.dl-tip { font-size: 0.85rem; color: var(--text-light); margin: 8px 0 4px; }
.dl-name { margin: 4px 0 14px; text-align: left; }

/* 禁用态按钮（下载报告需先填称呼） */
.btn-disabled {
    background: #c7d2e0 !important;
    color: #fff !important;
    cursor: not-allowed;
    pointer-events: auto;
}

/* 立即咨询：悬浮按钮 */
.fab-consult {
    position: fixed;
    right: 16px;
    bottom: 22px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    /* 0830 定稿：**实心主绿 + 白字白图标 + 胶囊圆角**。
       白底描边那版试过又推翻了——整页只该有这一块实心深绿，它就是全场唯一的焦点，
       而且完全落在绿色体系里；白底描边的它反而和满页白卡片糊在一起。
       🔴 改这里的 background 必须连带改 templates/_fab_avatar.html 里八瓣标的填充：
          底深→图标白、底浅→图标深。0830 一天之内这两处脱节过两次
          （深蓝底配白图标 → 药丸改白底，白图标当场消失 → 图标改琥珀橙 →
            药丸又改回深绿，琥珀橙又不成立）。test_naming.py 现在钉了这一条。 */
    background: #0F6E56;
    color: #fff;
    font-size: 0.98rem;
    font-weight: 600;
    border-radius: 999px;   /* 胶囊 */
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 110, 86, .2);
}
.fab-consult:active { transform: scale(0.96); }
.fab-consult { touch-action: none; cursor: grab; user-select: none; }
.fab-icon { font-size: 1.1rem; }

/* 悬浮「专属顾问」按钮上的未读红点（客服回复/订单更新数）
   ⚠️ 尺寸 2026-08-16 从 18px 提到 20px：老人扫一眼扫不到 18px 的圆点，
      而这是客服回话、订单变更**唯一**的到达提示，看不见等于没发。 */
.fab-badge {
    position: absolute;
    top: -7px; right: -7px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #e53935;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    animation: fabBadgePop 0.2s ease;
}
.fab-badge.hidden { display: none; }
@keyframes fabBadgePop { from { transform: scale(0); } to { transform: scale(1); } }

/* 养老功能引导弹窗 */
.eg-mask {
    position: fixed;
    inset: 0;
    /* 1000 而不是 999：与「我的顾问」悬浮窗同层时，谁在上由 DOM 顺序决定，
       弹窗被悬浮窗压住是不可接受的不确定性。 */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.45);
}
.eg-mask.hidden { display: none; }
.eg-box {
    width: 100%;
    max-width: 320px;
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px 18px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.eg-ico { font-size: 2.2rem; line-height: 1; }
.eg-title {
    margin-top: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e2a3a;
}
.eg-desc {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #5a6472;
    text-align: left;
}
.eg-acts {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.eg-cancel, .eg-go {
    flex: 1;
    height: 42px;
    line-height: 42px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}
.eg-cancel {
    border: 1px solid #d5dbe4;
    background: #fff;
    color: #5a6472;
    cursor: pointer;
}
.eg-go {
    border: none;
    background: var(--primary, #2264c4);
    color: #fff;
    text-decoration: none;
}
.eg-go:active { opacity: 0.9; }

/* 客服小人头：白底圆形 + 描边图标 */
.fab-avatar {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fab-avatar svg { display: block; }

/* logo 版头像：透明底（去掉白圆）。
   ⚠️ 下面 .fab-logo3d 那套 3D 翻滚是**给 logo_consult.png 用的旧样式**，
      2026-08-22 头像已换成八瓣呼吸标（.fabm-*，见本文件靠下）。
      留着是回滚路径：consult_fab.js 里改回注入 <img class="fab-logo3d"> 即可。 */
.fab-avatar-logo {
    background: transparent;
    overflow: visible;
    perspective: 240px;
}
.fab-logo3d {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-style: preserve-3d;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
    /* 每轮 9s：前 ~3.6s 绕多轴缓慢翻滚一圈，后 ~5.4s 静止，再循环 */
    animation: fabLogoTumble 9s ease-in-out infinite;
}
/* 绕 X/Y/Z 多轴翻滚，角度组合每段不同，视觉上像随机翻转；转完停住 */
@keyframes fabLogoTumble {
    0%   { transform: rotate3d(0, 1, 0, 0deg);      filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)) brightness(1); }
    10%  { transform: rotate3d(1, 1, 0, 150deg);    filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)) brightness(1.12); }
    22%  { transform: rotate3d(-1, 2, 1, 300deg);   filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)) brightness(1); }
    32%  { transform: rotate3d(1, 1, -1, 240deg);   filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)) brightness(1.15); }
    40%  { transform: rotate3d(0, 1, 0, 360deg);    filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)) brightness(1); }
    100% { transform: rotate3d(0, 1, 0, 360deg);    filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)) brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
    .fab-logo3d { animation: none; }
}

/* 「我的顾问」悬浮球头像的动效与配色**不在这里**。
   2026-08-22 全部挪进 templates/_fab_avatar.html 那段 SVG 本身（SMIL）：
   /static 是 30 天强缓存，真机上 CSS 换了也不生效——颜色和动画同时不对，
   查了半天才确认是「文件没到设备上」而不是「代码写错了」。
   要改图标去改那个 include，别在这里加 .fabm-* 规则。 */

/* 分层报告：综合评估大字（文字型，不同于健康年龄数字） */
.hero-band { font-size: 1.9rem; font-weight: 800; line-height: 1.2; margin: 6px 0; }

/* 分层报告：分项方案条目 */
.plan-item { padding: 6px 0 2px; }
.plan-item-div { border-top: 1px solid #e6ebf2; margin-top: 12px; padding-top: 14px; }
.plan-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.plan-name { font-size: 1rem; font-weight: 700; }
.plan-medical { font-size: 0.9rem; color: #c0392b; margin-top: 6px; line-height: 1.6; }

/* 注册页：获取验证码按钮 + 协议勾选 */
.btn-code {
    flex: none;
    min-width: 116px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1.5px solid var(--primary);
    border-radius: 10px;
    background: #eaf2ff;
    color: var(--primary-dark);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-code:disabled { border-color: var(--border); background: #f2f4f8; color: var(--text-light); cursor: default; }

.agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.5;
}
.agree input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.agree a { color: var(--primary); text-decoration: none; }

/* 咨询页：自动带入的风险清单 */
.risk-import { margin: 0 0 4px; padding-left: 0; list-style: none; }
.risk-import li {
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #fff5ec;
    border-left: 4px solid #e8820c;
    color: #333;
}
.risk-import li.high { background: #fdecec; border-left-color: #d63131; }
.risk-none { font-size: 0.95rem; color: var(--text-light); }

/* ============ 预防方案详情页 + 预约表单 ============ */
.plan-summary { font-size: 0.98rem; line-height: 1.75; }
.plan-measures { margin: 0; padding-left: 1.3em; }
.plan-measures li { font-size: 0.95rem; line-height: 1.8; margin-bottom: 6px; }

/* 销售服务入口 */
.cta-block {
    background: linear-gradient(135deg, #2f7bea, #2264c4);
    color: #fff;
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    margin-bottom: 14px;
}
.cta-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.cta-text { font-size: 0.9rem; line-height: 1.6; opacity: 0.95; margin-bottom: 14px; }
.cta-block .btn-primary { background: #fff; color: var(--primary-dark); margin-top: 0; }
.cta-block .btn-primary:active { background: #eaf2ff; }

/* 文本输入框（预约表单） */
.text-input {
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: #fafbfd;
    color: var(--text);
    margin-top: 6px;
}
.text-input:focus { border-color: var(--primary); outline: none; background: #fff; }
/* 日期滚轮的触发框是 button：默认居中且 inline-block，要跟输入框对齐 */
.text-input.dw-field { display: block; text-align: left; line-height: 32px; }
.text-input.dw-field:active { border-color: var(--primary); background: #fff; }

/* ===== AI 智能推荐（地区/医院） ===== */
.ai-suggest-btn {
    margin-left: auto;
    flex: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: #eef4ff;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.ai-suggest-btn:disabled { opacity: 0.55; }
.ai-suggest-box {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ai-chip {
    display: inline-block;
    background: #eef4ff;
    border: 1px solid #cfe0ff;
    color: var(--primary-dark);
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 0.88rem;
    cursor: pointer;
}
.ai-chip:active { background: #dce8ff; }
/* 多选已选中态（地区多选） */
.ai-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
/* 医院分页导航 */
.ai-page-nav {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    width: 100%;
}
.ai-page-btn {
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--primary-dark);
    border-radius: 16px;
    padding: 5px 14px;
    font-size: 0.85rem;
    cursor: pointer;
}
.ai-page-btn:active { background: #eef4ff; }

/* 注册页「我已注册，直接登录」入口 */
.switch-login {
    text-align: center;
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--text-light);
}
.switch-login a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.disclaimer {
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: center;
    margin: 12px 4px;
    line-height: 1.6;
}

/* 「慢病服务 / 养老服务」报告页入口卡片（.service-entry / .se-*）已整体移除，
   相关样式一并删除；服务入口统一走各自的服务专区页。 */

/* ===== AI 出处标注：模型品牌 + 免责一行（报告页 / 聊天页共用） ===== */
.ai-src {
    font-size: 11.5px;
    color: var(--text-light, #8a93a6);
    line-height: 1.55;
    margin: 4px 0 10px;
}
.ai-src-chat {
    margin: 0 12px 8px;
    padding: 7px 10px;
    background: rgba(47, 123, 234, .06);
    border-radius: 9px;
}
html.elder-mode .ai-src { font-size: 13px; }

/* ===== 慢病就医服务：服务类型卡片（对齐 subpage 设计语言）===== */
.svc-list { display: flex; flex-direction: column; gap: 12px; }
.svc-card {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff;
    border: 1.5px solid #eef1f7;
    border-radius: 16px;
    padding: 14px 15px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(31, 42, 68, .06);
    transition: border-color .15s, background .15s, transform .12s, box-shadow .12s;
}
.svc-card:active { transform: scale(.99); }
.svc-card.active {
    border-color: var(--hm-c, var(--primary));
    background: var(--hm-bg, #f5f8fc);
    box-shadow: 0 6px 18px rgba(31, 42, 68, .10);
}
.svc-ico {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.45rem; background: var(--hm-bg, #eef4ff); color: var(--hm-c, #2f7bea);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px rgba(31, 42, 68, .10);
}
.svc-main { flex: 1 1 auto; min-width: 0; }
.svc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.svc-name { font-weight: 700; font-size: 1rem; color: #1f2a44; }
.svc-tag {
    font-size: 0.72rem; color: var(--hm-c, var(--primary));
    background: var(--hm-bg, #e8f0ff); border-radius: 8px; padding: 1px 8px;
}
.svc-desc { font-size: 0.85rem; color: var(--text-light); line-height: 1.5; }

.file-input {
    width: 100%; border: 1px dashed var(--border); border-radius: 10px;
    padding: 12px; font-size: 0.9rem; background: #fafbfd;
}
/* 附件选择按钮 + 缩略图预览 */
.file-picker {
    display: inline-block; cursor: pointer;
    border: 1px dashed var(--border); border-radius: 10px;
    padding: 12px 16px; font-size: 0.9rem; color: var(--primary-dark);
    background: #fafbfd;
}
.file-picker:active { background: #f0f4fa; }
.file-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.file-preview:empty { margin-top: 0; }
.fp-item { position: relative; width: 72px; height: 72px; }
.fp-thumb {
    width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border); background: #f3f6fa;
    display: flex; align-items: center; justify-content: center;
}
.fp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fp-thumb.fp-doc { font-size: 0.72rem; font-weight: 600; color: var(--text-light); }
.fp-check {
    position: absolute; right: -6px; bottom: -6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #2ecc71; color: #fff; font-size: 12px; line-height: 20px;
    text-align: center; box-shadow: 0 0 0 2px #fff;
}
.fp-del {
    position: absolute; right: -6px; top: -6px;
    width: 20px; height: 20px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.55); color: #fff; font-size: 14px;
    line-height: 18px; text-align: center; cursor: pointer; padding: 0;
}
/* 含附件徽标（订单列表通用，文字表达，避免 emoji 渲染不一致） */
.order-clip {
    display: inline-block; margin-left: 6px; vertical-align: middle;
    font-size: 0.7rem; font-weight: 600; line-height: 1;
    color: var(--primary-dark); background: #eaf2ff;
    border: 1px solid #bcd8ff; border-radius: 6px; padding: 2px 7px;
    white-space: nowrap;
}

/* ===== 养老服务：照护需求卡片 ===== */
.care-card {
    background: #eef7ff; border: 1px solid #bcd8ff;
    border-radius: 12px; padding: 14px;
}
.care-level { font-size: 1.1rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 4px; }
.care-desc { font-size: 0.86rem; color: var(--text-light); line-height: 1.5; }
.care-badges { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.care-badge {
    font-size: 0.74rem; color: #fff; background: var(--primary);
    border-radius: 8px; padding: 2px 9px;
}

/* 入住偏好：选项按钮 */
.pref-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pref-opt {
    border: 1.5px solid var(--border); border-radius: 20px;
    padding: 7px 14px; font-size: 0.88rem; background: #fff;
    color: var(--text); cursor: pointer;
}
.pref-opt.active { border-color: var(--primary); background: #eaf2ff; color: var(--primary-dark); font-weight: 600; }

/* 慢病就医：为本人申请时的只读信息 */
.appl-self {
    background: rgba(47,123,234,0.05); border: 1px solid var(--border);
    border-radius: 12px; padding: 2px 14px; margin-top: 8px;
}
.appl-self .me-row:last-child { border-bottom: none; }

/* 申请人健康声明：醒目文案 + 两个承诺按钮 */
.declare-box {
    background: #fff8f1; border: 1px solid #ffd9b0;
    border-radius: 12px; padding: 12px 14px; margin-top: 6px;
}
.declare-text { font-size: 0.92rem; line-height: 1.7; color: #1f2d3d; font-weight: 600; margin: 0; }
.declare-warn { color: #d63131; font-weight: 700; }
.declare-opts { display: flex; gap: 12px; margin-top: 12px; align-items: stretch; }
.declare-opt {
    flex: 1 1 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    /* 固定高度 + 纯文字：两个按钮永远等高、文字垂直居中不错位 */
    height: 52px; line-height: 1; white-space: nowrap;
    cursor: pointer; user-select: none;
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 0 10px; font-size: 0.92rem; font-weight: 600;
    color: var(--text); background: #fff; transition: all .15s;
}
.declare-opt.hd-agree.active {
    border-color: #2ecc71; background: #eafaf0; color: #1c9e57;
}
.declare-opt.hd-decline.active {
    border-color: #e2564f; background: #fdeceb; color: #d63131;
}

/* 匹配结果 */
.match-hero { text-align: center; padding: 10px 0 6px; }
.match-score { font-size: 2.4rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.match-label { font-size: 0.85rem; color: var(--text-light); }

.inst-card {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 14px; margin-bottom: 12px; background: #fafbfd;
}
.inst-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inst-name { font-weight: 700; font-size: 1rem; }
.inst-dist { font-size: 0.82rem; color: var(--primary); flex: 0 0 auto; }
.inst-meta { font-size: 0.85rem; color: var(--text-light); margin: 6px 0; }
.inst-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.inst-tag {
    font-size: 0.72rem; color: #555; background: #eef2f7;
    border-radius: 8px; padding: 2px 8px;
}

/* ============================================================
   客户端首页 home.html
   ============================================================ */
/* 顶部品牌栏 */
.home-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 14px;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-logo {
    width: 30px; height: 30px; flex: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #2f7bea, #2264c4);
    color: #fff; font-weight: 800; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.brand-name { font-size: 1.08rem; font-weight: 700; color: var(--text); }
.home-member {
    font-size: 0.86rem; color: var(--primary-dark);
    background: #eaf2ff; border-radius: 16px;
    padding: 5px 12px; text-decoration: none; white-space: nowrap;
}

/* Hero 主评估入口 */
.home-hero {
    background: linear-gradient(135deg, #2f7bea, #2264c4);
    color: #fff; border-radius: 16px;
    padding: 26px 20px; margin-bottom: 16px;
    box-shadow: 0 8px 22px rgba(34, 100, 196, 0.28);
    /* 首次进入未初筛时，用呼吸式光晕吸引用户先做初筛 */
    animation: heroGlow 2.2s ease-in-out infinite;
}
@keyframes heroGlow {
    0%, 100% { box-shadow: 0 8px 22px rgba(34, 100, 196, 0.28); }
    50% { box-shadow: 0 10px 30px rgba(47, 123, 234, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero { animation: none; }
    .home-hero .hero-btn { animation: none; }
}
.home-hero h1 { font-size: 1.34rem; font-weight: 800; line-height: 1.4; }
.home-hero .hero-sub { font-size: 0.92rem; opacity: 0.92; margin: 8px 0 18px; }
.home-hero .hero-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box;
    /* 醒目暖橙渐变，与蓝色 hero 形成强对比，突出「开始评估」行动号召 */
    background: linear-gradient(135deg, #ff9d3c 0%, #ff7a18 100%);
    color: #fff;
    font-size: 1.2rem; font-weight: 800; letter-spacing: 0.5px;
    padding: 15px 26px; border-radius: 30px; text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 122, 24, 0.45), 0 0 0 0 rgba(255, 138, 40, 0.75);
    animation: heroBtnPulse 1.35s ease-in-out infinite;
}
@keyframes heroBtnPulse {
    0%   { transform: scale(1);    box-shadow: 0 6px 18px rgba(255,122,24,0.45), 0 0 0 0 rgba(255,138,40,0.75); }
    70%  { transform: scale(1.045); box-shadow: 0 6px 18px rgba(255,122,24,0.45), 0 0 0 14px rgba(255,138,40,0); }
    100% { transform: scale(1);    box-shadow: 0 6px 18px rgba(255,122,24,0.45), 0 0 0 0 rgba(255,138,40,0); }
}
.home-hero .hero-btn:active { filter: brightness(0.95); transform: scale(0.98); }

/* 通用区块标题 */
.home-sec { margin-bottom: 16px; }
.home-sec-title {
    font-size: 1.05rem; font-weight: 700; color: var(--text);
    margin-bottom: 12px; padding-left: 10px;
    border-left: 4px solid var(--primary);
}
/* 「当前健康状态」标题：去掉左侧蓝色竖条 */
.home-sec-title.cur-state-title { border-left: none; padding-left: 0; }

/* 我的评估 */
.assess-card {
    background: var(--card-bg); border-radius: 14px;
    padding: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.assess-title { font-size: 1.08rem; font-weight: 700; color: var(--primary-dark); }
/* 健康状态分级着色：健康=绿、亚健康/需关注=橙、高风险=红并加重强调 */
.assess-status { font-weight: 800; }
.assess-tone-good { color: #2e9e3f; }
.assess-tone-warn { color: #e8820c; }
.assess-tone-danger {
    color: #d63131;
    background: rgba(214,49,49,0.08);
    padding: 1px 8px;
    border-radius: 6px;
}
.assess-main { font-size: 0.9rem; color: var(--text-light); margin: 6px 0 2px; }
.assess-when { font-size: 0.78rem; color: var(--text-light); }
.assess-acts { display: flex; gap: 10px; margin-top: 14px; }
.assess-acts a {
    flex: 1 1 0; text-align: center; text-decoration: none;
    padding: 10px; border-radius: 10px; font-size: 0.92rem; font-weight: 600;
}
.assess-acts .a-primary { background: var(--primary); color: #fff; }
.assess-acts .a-ghost { background: #eaf2ff; color: var(--primary-dark); }

/* 我的健康：标题与「当前健康状态」同一行，状态右对齐（不再单独占一行） */
.home-sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.home-sec-head .home-sec-title { margin-bottom: 0; }
.state-inline {
    --sc: #2f7bea;                 /* 分层主题色，按 tone 覆盖 */
    text-decoration: none; color: var(--text-light);
    font-size: 1.05rem; font-weight: 700; white-space: nowrap;  /* 与「我的健康」标题同字号字重 */
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.state-inline b { color: var(--sc); font-weight: 700; }
.state-inline-arrow { color: var(--sc); margin-left: 3px; font-size: 1.05rem; }
/* 分层配色 */
.state-good   { --sc: #2e9e3f; }
.state-warn   { --sc: #e8820c; }
.state-danger { --sc: #d63131; }
.state-empty  { --sc: #6b7688; }

/* 各项专项筛查重点结论列表（状态卡下方）——布局同「专项健管」feat-row */
.assess-conclusions { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.concl-item {
    --ct: #2f7bea;                 /* 分层色调，按 tone 覆盖 */
    display: flex; align-items: flex-start; gap: 12px;
    text-decoration: none; color: inherit;
    padding: 14px; border-radius: 14px;
    background: var(--card-bg);
    box-shadow: 0 3px 12px rgba(31,42,68,0.05);
    border: 1px solid #eef2f7;
}
.concl-item:active { background: #fbfcfe; }
.concl-ico {
    width: 42px; height: 42px; flex: none; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; background: var(--ct-soft, #eef4ff);
}
.concl-body { flex: 1 1 0; min-width: 0; }
.concl-name { font-size: 1rem; font-weight: 700; }
/* 结论名称的分级着色：仅改颜色、不加底色/内边距，避免各行左侧不对齐 */
.concl-tone-good { color: #2e9e3f; }
.concl-tone-warn { color: #e8820c; }
.concl-tone-danger { color: #d63131; }
.concl-text {
    font-size: 0.84rem; color: var(--text-light); line-height: 1.5; margin-top: 2px;
    /* 最多两行，超出省略 */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}
/* 图标底色跟随分层色调 */
.concl-good   { --ct-soft: rgba(46,158,63,0.12); }
.concl-warn   { --ct-soft: rgba(232,130,12,0.12); }
.concl-danger { --ct-soft: rgba(214,49,49,0.12); }

/* 我的健康：报告头卡轮播（每张已完成评估的头卡，自动轮播 + 手动滑动，点击进报告） */
.hc-carousel { margin-top: 12px; }
.hc-track {
    display: flex;
    position: relative;                  /* 供 JS 按 offsetLeft 计算居中位置 */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;               /* Firefox 隐藏滚动条 */
}
.hc-track::-webkit-scrollbar { display: none; }   /* WebKit 隐藏滚动条 */
.hc-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    box-sizing: border-box;
    padding: 2px;
    text-decoration: none; color: inherit;
}
.hc-slide .bh-duo { margin: 0; }         /* 头卡在轮播里去掉默认外边距 */
.hc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.hc-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #d4dbe6; transition: background .2s, width .2s;
}
.hc-dot.active { background: #2f7bea; width: 16px; border-radius: 4px; }

/* 头卡内评分条：自含最小实现（复用报告页 tone 语义），
   避免引入 report_view.css 与首页 .app 冲突 */
.hc-carousel .tone-low   { --tone: #2e9e3f; }
.hc-carousel .tone-mid   { --tone: #e8820c; }
.hc-carousel .tone-high  { --tone: #d63131; }
.hc-carousel .tone-note  { --tone: #2f7bea; }
.hc-carousel .tone-brand { --tone: #2f7bea; }
.hc-carousel .bar-track {
    height: 9px; background: #eaeef4; border-radius: 999px; overflow: hidden;
}
.hc-carousel .bar-fill {
    height: 100%; border-radius: 999px; background: var(--tone, #2f7bea);
}
.hc-carousel .bar-tag {
    font-size: 0.72rem; font-weight: 700; color: var(--tone, #2f7bea);
    background: color-mix(in srgb, var(--tone, #2f7bea) 12%, #fff);
    border-radius: 999px; padding: 2px 9px;
}
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .hc-carousel .bar-tag { background: #f2f6ff; }
}

/* 2×2 网格（服务矩阵 / 知识专栏） */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-card {
    display: flex; flex-direction: column; gap: 7px;
    background: var(--card-bg); border-radius: 16px;
    padding: 15px 14px; text-decoration: none;
    box-shadow: 0 3px 12px rgba(31,42,68,0.05);
    border: 1px solid #eef2f7;
    min-height: 96px;
}
.grid-card:active { background: #fbfcfe; }
.grid-ico {
    width: 42px; height: 42px; border-radius: 12px; margin-bottom: 2px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; line-height: 1; background: var(--ht-bg, #eef4ff);
}
/* 矢量图标（如听诊器）：跟随磁贴主题色，粗描边、边缘清晰，替代偏淡的 emoji */
.grid-ico-svg svg { width: 25px; height: 25px; display: block; color: var(--ht-c, var(--primary)); }
.grid-name { font-size: 0.98rem; font-weight: 700; color: var(--text); }
.grid-desc { font-size: 0.78rem; color: var(--text-light); line-height: 1.4; }

/* 专业特色服务 */
.feat-list { display: flex; flex-direction: column; gap: 10px; }
.feat-row {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--card-bg); border-radius: 14px;
    padding: 14px; box-shadow: 0 3px 12px rgba(31,42,68,0.05);
    border: 1px solid #eef2f7;
    text-decoration: none; color: inherit;
}
.feat-row:active { background: #fbfcfe; }
.feat-ico {
    width: 42px; height: 42px; flex: none; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; background: var(--ht-bg, #eef4ff);
}
.feat-body { flex: 1 1 0; }
.feat-name { font-size: 1rem; font-weight: 700; }
.feat-desc { font-size: 0.84rem; color: var(--text-light); line-height: 1.5; margin-top: 2px; }

/* 信任背书 */
.trust-row { display: flex; gap: 10px; }
.trust-item {
    flex: 1 1 0; text-align: center;
    background: var(--card-bg); border-radius: 12px; padding: 14px 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.trust-num { font-size: 1.2rem; font-weight: 800; color: var(--primary-dark); }
.trust-label { font-size: 0.76rem; color: var(--text-light); margin-top: 4px; }

/* 首页业务 banner（已初筛后替代评估入口，3 图自动轮播） */
.home-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 8px 22px rgba(34, 100, 196, 0.18);
}
/* transform 百分比轮播（JS initBanner 驱动）：整条轨道平移，绝不用 scroll-snap，
   否则吸附会抢占程序化平移、停在两张之间导致「头图显示不全/半张」。 */
.banner-track {
    display: flex;
    align-items: stretch;                /* 三张严格等高，杜绝中间张被拉伸/裁剪 */
    position: relative;
    overflow: hidden;                    /* 关键：隐藏溢出，只由 JS translateX 切换 */
}
/* 每张 slide = 固定 2:1 盒子。之前第 2 张「上半显示、下半灰白(像没加载完)」的真凶
   是 iOS Safari 合成 bug：当每张 slide 各自被提升为独立 GPU 图层、又嵌在被 transform
   平移的 track(也是独立层)里时，滑进视口那张的 backing-store 只画了上半、下半留灰白
   未重绘。解法：①不再给每张 slide 单独 translateZ 提层，只让平移的 track 作为单一稳定
   图层整体绘制；②图片绝对定位铺满盒子；③配合 JS 里对三张图 img.decode() 强制完整解码。
   盒子高由 aspect-ratio(=宽/2) 与 JS 决定，永不依赖图片。 */
.banner-slide {
    flex: 0 0 100%;
    aspect-ratio: 2 / 1;
    position: relative;
    overflow: hidden;
}
.banner-slide a { position: absolute; inset: 0; display: block; }
/* 盒子 2:1、图片 1280×640 也是 2:1 → cover 即完整显示、零裁剪 */
.banner-slide img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 占位轮播：待客户提供正式图后，改回 .banner-slide>img 即可 */
.banner-ph {
    height: 170px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: 1px;
}
.banner-track .banner-ph:nth-child(1) { background: linear-gradient(135deg, #2f7bd6, #5aa0f2); }
.banner-track .banner-ph:nth-child(2) { background: linear-gradient(135deg, #2aa889, #4fc9a6); }
.banner-track .banner-ph:nth-child(3) { background: linear-gradient(135deg, #e08a3c, #f2b45a); }
.banner-dots {
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.banner-dots .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}
.banner-dots .dot.active { background: #fff; }

/* 咨询页页头问候语 */
.greeting {
    font-size: 1.5rem; font-weight: 700; color: var(--primary-dark);
    text-align: center; margin-bottom: 10px;
}

/* 首页页头：欢迎语（左）+ 退出（右）一行两端对齐 */
.home-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin: 2px 2px 8px;
}
/* 首页右上角欢迎语（次要色、小字） */
.home-greeting {
    flex: 1 1 auto; min-width: 0; text-align: left; font-size: 0.85rem; font-weight: 700;
    color: var(--primary); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-greeting:active { opacity: 0.6; }
/* 退出登录入口：浅描边胶囊，次要视觉，避免误触 */
.home-logout {
    flex: 0 0 auto; font-size: 0.8rem; font-weight: 600; color: var(--text-muted, #8a94a6);
    text-decoration: none; padding: 3px 12px; border: 1px solid #dfe4ec;
    border-radius: 999px; background: #fff;
}
.home-logout:active { opacity: 0.6; }
/* 首页左上角头像入口：进入「我的资料」 */
/* 尺寸跟着顶栏的 --hd-h 走（定义在 _home_styles.html 的 .home-head 上），
   三档字号切换时和右边三个区域始终等高。 */
.home-avatar { flex: 0 0 auto; display: block;
    width: var(--hd-h, 34px); height: var(--hd-h, 34px); }
.home-avatar img {
    width: var(--hd-h, 34px); height: var(--hd-h, 34px); border-radius: 50%; object-fit: cover;
    /* 0830：首屏左上角这枚头像也接进绿色体系——浅绿底 + 主绿细环，
       和底部圆钮外面那圈环是同一套语言。 */
    background: #E1F5EE; border: 1.5px solid #0F6E56; display: block;
}
.home-avatar:active { opacity: 0.7; }

/* ============ 我的资料页 ============ */
.me-avatar-wrap { text-align: center; margin: 6px 0 18px; }
.me-avatar { display: inline-block; position: relative; cursor: pointer; }
.me-avatar img {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    background: #eef2f7; border: 1px solid #e3e9f0; display: block;
}
.me-avatar-edit {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); color: #fff; font-size: 0.66rem;
    padding: 3px 0; border-radius: 0 0 48px 48px; text-align: center;
}
.me-avatar-tip { font-size: 0.8rem; color: var(--text-muted, #8a94a6); margin: 10px 0 0; }
.me-avatar-msg { font-size: 0.8rem; margin: 6px 0 0; min-height: 1em; color: var(--text-muted, #8a94a6); }
.me-avatar-msg.ok { color: #1f9d55; }
.me-avatar-msg.err { color: #e2564f; }
.me-list { border-top: 1px solid #eef1f6; margin-top: 6px; }
.me-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 2px; border-bottom: 1px solid #eef1f6; font-size: 0.95rem;
}
.me-k { color: var(--text-muted, #8a94a6); }
.me-v { color: var(--text, #333); font-weight: 600; }
/* 当前健康状态：可点击进入初筛详情，与首页保持一致；按层级着色 */
.me-health-link { text-decoration: none; cursor: pointer; }
a.me-v.assess-tone-good { color: #2e9e3f; }
a.me-v.assess-tone-warn { color: #e8820c; }
a.me-v.assess-tone-danger { color: #d63131; background: none; padding: 0; }
/* 我的订单入口（自首页迁移至此） */
/* 资料页顶栏：左「返回首页」，右「我的订单」入口，同一行两端对齐 */
.me-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px;
}
.me-topbar .home-link { margin-bottom: 0; }
.me-orders-link {
    flex: 0 0 auto; font-size: 15px; font-weight: 900;
    color: var(--primary-dark, #2f6bff); text-decoration: none;
}
.me-orders-link:active { opacity: .7; }

.me-logout { display: block; text-align: center; margin-top: 22px; color: #e2564f; }
/* 重新初筛：退出登录下方的浅色文字链接 */
.me-reintake {
    display: block; text-align: center; margin-top: 12px;
    font-size: 0.85rem; color: var(--text-muted, #a6adbb);
    text-decoration: underline; text-underline-offset: 3px;
}
/* 姓名行内修改 */
.me-edit-link { font-size: 0.82rem; color: var(--brand, #2f7fd8); font-weight: 500; margin-left: 10px; text-decoration: none; }
.me-name-link { color: var(--brand, #2f7fd8); text-decoration: none; cursor: pointer; }
.me-name-input {
    font-size: 0.95rem; padding: 4px 8px; border: 1px solid #d7dde6;
    border-radius: 8px; width: 8em; max-width: 55vw;
}

/* ============ 信息管理（筛查重置）============ */
.mdata-tip {
    font-size: 0.82rem; color: var(--text-muted, #8a94a6);
    line-height: 1.6; background: #f6f8fc; border-radius: 10px;
    padding: 10px 12px; margin: 10px 0 4px;
}
.mdata-list { border-top: 1px solid #eef1f6; margin-top: 6px; }
.mdata-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 2px; border-bottom: 1px solid #eef1f6;
    font-size: 0.95rem; cursor: pointer;
}
.mdata-row input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }
.mdata-all { font-weight: 700; color: var(--text, #333); }
.mdata-name { flex: 1 1 auto; color: var(--text, #333); }
.mdata-count { flex: 0 0 auto; font-size: 0.8rem; color: var(--text-muted, #a6adbb); }
.mdata-reset {
    display: block; width: 100%; margin-top: 20px;
}
.mdata-reset:disabled { opacity: .5; }
.mdata-empty {
    text-align: center; color: var(--text-muted, #a6adbb);
    padding: 40px 0; font-size: 0.95rem;
}

/* ============ zhishi zhuanlan（列表页 + 文章页）============
   .art-* 整套样式已于 2026-08-16 随两页视觉下沉搬到 css/subpage.css，
   此处不再保留副本（同名规则分散在两个文件里，加载顺序一变就说不清谁生效）。
   .empty-tip 留在这里：orders.html 也在用它，跟专栏无关。 */
.empty-tip { text-align: center; padding: 26px 0; }

/* ============ zaixian zixun: chat ============ */
/* 聊天页整页不滚动：滚动只发生在消息区内部（见 .chat-list） */
.chat-body { background: #eef2f7; overflow: hidden; }
.chat-wrap {
    display: flex; flex-direction: column;
    /* dvh 跟随 iOS 地址栏伸缩，避免 100vh 在 Safari 上比实际视口高、
       多出的那一截让整页可以拖动。不支持 dvh 的浏览器回落到 vh。 */
    height: 100vh; height: 100dvh;
    max-width: 640px; margin: 0 auto; background: #eef2f7;
}
.chat-head {
    display: flex; align-items: center; gap: 8px;
    background: var(--primary); color: #fff;
    padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    position: sticky; top: 0; z-index: 5;
}
.chat-back {
    color: #fff; text-decoration: none; font-size: 1.8rem; line-height: 1;
    width: 30px; text-align: center; flex: 0 0 auto;
}
.chat-head-txt { flex: 1; }
.chat-hello { font-size: 1.2rem; font-weight: 800; }
.chat-sub { font-size: 0.85rem; opacity: 0.92; margin-top: 2px; }

/* 健康上下文条：置于问候语下方，实时反映客户最新评估 */
.chat-context {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 10px 12px 0; padding: 10px 12px;
    background: #eaf2fe; border: 1px solid #cfe0fb; border-radius: 12px;
    color: #24457a; font-size: 0.88rem; line-height: 1.5;
}
.chat-context-ico { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.4; }
.chat-context-txt b { color: var(--primary-dark, #1e4c9a); font-weight: 700; }
.chat-context-txt a { color: var(--primary-dark, #1e4c9a); font-weight: 700; text-decoration: underline; }
.chat-context-plain { background: #fff7e8; border-color: #f3dcae; color: #7a5a23; }

/* 顶部 holistic 健康总览：按整体严重度着色。
   进场完整展示，数秒后自动回缩为一行，把屏幕让给对话；右上角箭头可随时拉开。
   max-height 的展开值由 JS 实测写入（见 chat.html），这里只定义折叠态与过渡。 */
.chat-context-hv {
    flex-direction: row;
    /* 固定在顶部不随对话滚动（它在 .chat-list 之外，滚动区已限制在消息区内），
       z-index 保证折叠时也不会被 sticky 的 header 压住。 */
    position: relative; z-index: 4; flex: 0 0 auto;
    padding-right: 34px;
    overflow: hidden;
    transition: max-height .34s cubic-bezier(.4, 0, .2, 1),
                padding-top .34s, padding-bottom .34s;
}
.chat-hv-arrow {
    position: absolute; top: 7px; right: 7px;
    width: 24px; height: 24px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .6); color: inherit;
    font-size: 15px; line-height: 1; cursor: pointer;
    transition: transform .3s; -webkit-tap-highlight-color: transparent;
}
.chat-hv-arrow:active { background: rgba(255, 255, 255, .9); }
/* 展开态箭头朝上（点它收起），折叠态朝下（点它拉开） */
.chat-context-hv .chat-hv-arrow { transform: rotate(180deg); }
.chat-context-hv.hv-folded .chat-hv-arrow { transform: rotate(0deg); }
/* 折叠态：只留结论一行，超出省略；其余内容淡出后被 max-height 裁掉 */
.chat-context-hv.hv-folded {
    max-height: 40px; padding-top: 9px; padding-bottom: 9px; cursor: pointer;
}
.chat-context-hv.hv-folded .chat-hv-head {
    margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-context-hv.hv-folded .chat-hv-list,
.chat-context-hv.hv-folded .chat-hv-toggle,
.chat-context-hv.hv-folded .chat-hv-normal,
.chat-context-hv.hv-folded .chat-hv-foot { opacity: 0; }
.chat-context-hv .chat-hv-list,
.chat-context-hv .chat-hv-toggle,
.chat-context-hv .chat-hv-normal,
.chat-context-hv .chat-hv-foot { transition: opacity .2s; }
.chat-hv-head { font-weight: 700; margin-bottom: 4px; }
.chat-hv-list { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-hv-list li { position: relative; padding-left: 14px; font-size: 0.85rem; line-height: 1.45; }
.chat-hv-list li:before { content: "•"; position: absolute; left: 2px; color: #9aa7bd; }
.chat-hv-list li.chat-hv-sev3:before { color: #d64545; }
.chat-hv-list li.chat-hv-sev2:before { color: #e08a17; }
.chat-hv-list li.chat-hv-sev1:before { color: #3a8ac0; }
/* 异常项过多时折叠：默认隐藏第 4 条起，展开后显示 */
.chat-hv-list .chat-hv-more { display: none; }
.chat-hv-list.hv-open .chat-hv-more { display: block; }
.chat-hv-toggle {
    display: inline-block; margin: 2px 0 2px; padding: 0;
    background: none; border: none; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; color: #3a6bb0;
    text-decoration: underline; -webkit-tap-highlight-color: transparent;
}
.chat-hv-normal { font-size: 0.82rem; opacity: 0.8; margin-top: 4px; }
.chat-hv-foot { margin-top: 6px; }
.chat-hv-alert { background: #fdecec; border-color: #f4c4c4; color: #7a2b2b; }
.chat-hv-alert .chat-context-txt b { color: #b02a2a; }
.chat-hv-watch { background: #fff5e6; border-color: #f3d9a8; color: #7a5320; }
.chat-hv-watch .chat-context-txt b { color: #b5771a; }
.chat-hv-good { background: #eafaf0; border-color: #c3e9d1; color: #256040; }
.chat-hv-good .chat-context-txt b { color: #1f7a4d; }

.chat-list {
    /* min-height: 0 是关键：flex 子项默认 min-height:auto 会被内容撑开而不是滚动，
       于是 .chat-wrap 超出视口、整页跟着滚——顶部的健康概览条会被一起拉走，
       折叠后还会滑到 sticky 的 header 底下被遮住一半（用户实际反馈）。
       加上它之后，滚动被限制在消息区内部，顶部各条自然固定不动。 */
    flex: 1; min-height: 0; overflow-y: auto; padding: 16px 12px;
    display: flex; flex-direction: column; gap: 12px;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* 微信式一行：头像 + 气泡列，客户在右、客服/AI 在左 */
.chat-row { display: flex; align-items: flex-start; gap: 8px; max-width: 86%; }
.chat-row.from-user { align-self: flex-end; flex-direction: row-reverse; }
.chat-row.from-staff { align-self: flex-start; }
.chat-avatar {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px;
    object-fit: cover; background: #eef2f7; border: 1px solid #e6ebf1; display: block;
}
/* 🔴 2026-08-23 用户：「智能助手那个 SVG 有个框，去掉」。
   上面那圈灰底 + 描边是给**照片**头像用的（白底照片贴在白底页面上会糊成一片，
   要一道边把它框住）。而阿惠这枚八瓣呼吸标是**无底色的 SVG**，本身自带留白，
   再套一层就成了一个多余的方框。
   ⚠️ 用 src 属性选择器精确命中它一个，不动会员照片与人工客服的头像；
      `*=` 是子串匹配，所以地址后面带的 ?v=<mtime> 不影响命中。 */
.chat-avatar[src*="avatar_ai_breathe"] {
    background: transparent;
    border: none;
}
.chat-col { display: flex; flex-direction: column; min-width: 0; }
.from-user .chat-col { align-items: flex-end; }
.from-staff .chat-col { align-items: flex-start; }
.chat-who { font-size: 0.72rem; color: #8a97a5; margin: 1px 2px 4px; }
/* 🔴 2026-08-23 用户：「琥珀橘的 SVG 跟『智能助手』要水平居中，现在文字太高了」。
   头像是 38px 的方块，而名字那一行只有约 12px、又贴在列的最顶上——
   两者的**中线差了十来个像素**，看上去名字浮在头像肩膀上。
   把名字这一行撑到与头像等高（38px，全局 box-sizing:border-box，边框已含在内）
   并在其中垂直居中，两条中线就对齐了，读起来是「一个头像 + 一个名字」并排一行。
   ⚠️ 只作用于左侧（AI / 人工客服）——用户自己的消息本来就不渲染名字这一行。 */
.from-staff .chat-who {
    min-height: 38px;
    display: flex;
    align-items: center;
    margin: 0 2px 4px;
}
.chat-bubble {
    padding: 10px 13px; border-radius: 14px; font-size: 0.95rem; max-width: 100%;
    line-height: 1.6; word-break: break-word; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.from-user .chat-bubble { background: var(--primary); color: #fff; border-top-right-radius: 4px; }
.from-staff .chat-bubble { background: #fff; color: var(--text); border-top-left-radius: 4px; }
.chat-time { font-size: 0.68rem; color: #9aa6b2; margin-top: 4px; }
/* AI 结构化解读含分段换行（\n）：pre-wrap 才能显示分段，esc() 已保留 \n */
.chat-msg-text { white-space: pre-wrap; }
/* ===== 阿惠主动消息卡片 =====
   这类消息不是闲聊，是「平台主动跟你说一件事」，所以给它独立的版式：
   一眼可辨的标题、段落之间真正的留白、以及一个好点的大按钮。
   字号比普通气泡大一档（老人是主要读者），行距也放宽。 */
.chat-bubble.chat-bubble-card {
    background: transparent; box-shadow: none; padding: 0; max-width: 100%;
}
.agent-card {
    background: #fff; border: 1px solid #e3ebf3; border-radius: 16px;
    padding: 14px 15px 13px; box-shadow: 0 3px 14px rgba(31,42,68,.07);
    border-left: 4px solid #12b39a;
}
.agent-card .ac-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px solid #f0f3f8;
}
.agent-card .ac-ico { font-size: 1.2rem; line-height: 1; }
.agent-card .ac-title { font-size: 1rem; font-weight: 800; color: #12988e; }
/* 正文：字号 1.02rem（比气泡的 .95rem 大一档），行距 1.8，段间留白 10px */
.agent-card .ac-p {
    font-size: 1.02rem; line-height: 1.8; color: #28313f; margin: 0 0 10px;
}
.agent-card .ac-p:last-of-type { margin-bottom: 0; }
.agent-card .ac-btn {
    display: block; margin-top: 13px; padding: 11px 14px; text-align: center;
    background: linear-gradient(135deg, #1aa5c8, #12b39a); color: #fff;
    border-radius: 12px; font-size: 1rem; font-weight: 700; text-decoration: none;
}
.agent-card .ac-btn:active { filter: brightness(.95); }
html.elder-mode .agent-card .ac-p { font-size: 1.12rem; line-height: 1.9; }
html.elder-mode .agent-card .ac-title { font-size: 1.1rem; }
html.elder-mode .agent-card .ac-btn { font-size: 1.12rem; padding: 13px 16px; }

/* 系统提示（排队 / 超时 / 闭店 / 转回智能助理）：微信式的居中灰条。
   刻意**不给头像、不给名字、不做气泡**——它不是谁在说话，是系统在交代流程。
   老人一眼要能看出「这不是那个人回我的」，所以视觉上必须和左右两侧的气泡断开。
   字号仍按可读优先给（0.74rem 起、长辈模式再放大）：这条经常带着
   「明天上午 9 点顾问会联系您」这种必须看清的信息，不能做成不起眼的小字。 */
.chat-sys {
    align-self: center; max-width: 86%; margin: 10px auto;
    padding: 7px 12px; border-radius: 10px;
    background: rgba(0, 0, 0, .045); color: #6b7280;
    font-size: .74rem; line-height: 1.6; text-align: center;
    white-space: pre-wrap; word-break: break-word;
}
html.elder-mode .chat-sys { font-size: .92rem; line-height: 1.75; }

/* iOS 静音拨片提示：只在首条语音下出现一次 */
.chat-silent-tip {
    margin-top: 5px; padding: 5px 9px; background: #fff8e6;
    border: 1px solid #f0e0b8; border-radius: 9px;
    color: #9a7b28; font-size: 0.68rem; line-height: 1.5;
}
html.elder-mode .chat-silent-tip { font-size: 0.82rem; }

/* 自己发的语音下方的删除入口：做得克制（小、灰、右对齐），
   既能找到又不会误触；长辈模式下放大到可点。 */
.chat-del {
    align-self: flex-end; margin-top: 4px; padding: 3px 9px;
    background: transparent; border: 1px solid #d9dfe8; border-radius: 10px;
    color: #98a0b0; font-size: 0.7rem; line-height: 1.4; cursor: pointer;
}
.chat-del:active { background: #f2f4f8; }
.chat-del:disabled { opacity: .6; }
html.elder-mode .chat-del { font-size: 0.85rem; padding: 5px 12px; }
/* 智能体主动消息里的可点动作（[文字](/路径) 由 chat.js actLink 渲染）。
   做成气泡内的行内按钮而不是下划线链接：手机上更好点，也更像「下一步动作」。 */
.chat-act {
    display: inline-block; margin-top: 2px; padding: 6px 12px;
    background: #e6f5f3; color: #0e8a80; border: 1px solid #bfe4df;
    border-radius: 12px; font-size: 0.88rem; font-weight: 700;
    text-decoration: none; line-height: 1.3;
}
.chat-act:active { background: #d3ede9; }
html.elder-mode .chat-act { font-size: 1rem; padding: 8px 14px; }
.chat-msg-file { margin-top: 6px; }
.chat-img { max-width: 180px; max-height: 220px; border-radius: 8px; display: block; }
.chat-audio { max-width: 220px; }
.chat-file { color: inherit; text-decoration: underline; font-size: 0.9rem; }

.chat-input {
    display: flex; align-items: flex-end; gap: 8px;
    background: #fff; padding: 10px 12px;
    border-top: 1px solid #e3e9f0;
    position: sticky; bottom: 0;
}
.chat-attach {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); background: #eef4ff; cursor: pointer;
}
.chat-attach:active { background: #dfeaff; }
.chat-mic {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); background: #eef4ff; cursor: pointer;
}
.chat-mic:active { background: #dfeaff; }
.chat-mic.recording { color: #fff; background: #e53935; animation: micPulse 1s ease-in-out infinite; }
@keyframes micPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.chat-text {
    flex: 1; resize: none; border: 1px solid #d7dfe8; border-radius: 20px;
    padding: 10px 14px; font-size: 0.95rem; line-height: 1.4;
    max-height: 120px; outline: none; font-family: inherit;
}
.chat-text:focus { border-color: var(--primary); }
.chat-send {
    flex: 0 0 auto; height: 40px; padding: 0 18px; border: none;
    border-radius: 20px; background: var(--primary); color: #fff;
    font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.chat-send:disabled { opacity: 0.6; }

/* 文字/语音切换：默认显示话筒图标，语音模式显示键盘图标 */
.chat-mic .ico-kbd { display: none; }
.chat-input.voice-mode .chat-mic .ico-voice { display: none; }
.chat-input.voice-mode .chat-mic .ico-kbd { display: block; }
/* 语音模式下隐藏文字输入与发送，露出「按住说话」 */
.chat-hold { display: none; }
.chat-input.voice-mode .chat-text,
.chat-input.voice-mode .chat-send { display: none; }
.chat-input.voice-mode .chat-hold { display: block; }

/* 表情按钮：位置在输入框右、「+」左，与微信一致 */
.chat-emoji {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); background: #eef4ff; cursor: pointer;
}
.chat-emoji:active { background: #dfeaff; }
/* 表情面板：不做分类 tab 与搜索（对中老年用户是负担），格子做大好点 */
.chat-emoji-panel {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
    background: #fff; border-top: 1px solid #e3e9f0;
    padding: 10px 12px 14px; max-height: 210px; overflow-y: auto;
}
.chat-emoji-panel.hidden { display: none; }
.chat-emoji-panel .emoji-item {
    border: none; background: transparent; cursor: pointer;
    font-size: 1.55rem; line-height: 1; padding: 7px 0; border-radius: 10px;
}
.chat-emoji-panel .emoji-item:active { background: #eef2f7; }
html.elder-mode .chat-emoji-panel { grid-template-columns: repeat(6, 1fr); }
html.elder-mode .chat-emoji-panel .emoji-item { font-size: 1.9rem; padding: 9px 0; }

/* ── 微信式输入栏 ──
   发送按钮不常驻：输入框空着时把位置让给「+」附件入口，一有字就顶掉「+」出现。
   这样底部永远只有三个元素（切换 / 输入框 / 一个右侧按钮），不拥挤。 */
.chat-send { display: none; }
.chat-input.has-text .chat-send { display: block; }
.chat-input.has-text .chat-attach { display: none; }
.chat-input.voice-mode .chat-attach { display: flex; }   /* 语音模式仍可发附件 */
.chat-hold {
    flex: 1; height: 42px; border: 1px solid #d7dfe8; border-radius: 21px;
    background: #f2f5fa; color: #333; font-size: 0.95rem; font-weight: 600;
    cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
}
.chat-hold.holding { background: #ffe2e0; border-color: #e53935; color: #e53935; }

/* ===== 我的订单：列表与详情 ===== */
.order-list { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 16px; }
.order-item {
    display: block; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid #e7ecf3; border-radius: 12px;
    padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.order-item:active { background: #f7f9fc; }
.order-item-top { display: flex; align-items: center; justify-content: space-between; }
.order-cat { font-size: 0.78rem; color: #8a93a0; }
.order-status { font-size: 0.78rem; font-weight: 700; padding: 2px 10px; border-radius: 10px; }
.order-item-title { font-size: 1.02rem; font-weight: 700; color: var(--text); margin-top: 6px; }
.order-item-summary { font-size: 0.86rem; color: #5a6472; margin-top: 4px; line-height: 1.5; }
.order-item-meta {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; font-size: 0.76rem; color: #9aa6b2;
}
.order-no { letter-spacing: 0.02em; }

/* 进度条 */
.order-steps { display: flex; margin: 18px 0 6px; }
.order-step { flex: 1; text-align: center; position: relative; }
.order-step-dot {
    width: 14px; height: 14px; border-radius: 50%; background: #d7dde6;
    display: block; margin: 0 auto 6px; position: relative; z-index: 1;
}
.order-step-cn { font-size: 0.76rem; color: #9aa6b2; }
.order-step::before {
    content: ""; position: absolute; top: 6px; left: -50%; width: 100%;
    height: 2px; background: #d7dde6; z-index: 0;
}
.order-step:first-child::before { display: none; }
.order-step.done .order-step-dot { background: var(--primary); }
.order-step.done .order-step-cn { color: var(--primary-dark, #1e4c9a); font-weight: 700; }
.order-step.done::before { background: var(--primary); }

/* 字段明细 */
.order-fields { margin: 14px 0 4px; border-top: 1px solid #eef2f6; }
.order-field {
    display: flex; padding: 9px 2px; border-bottom: 1px solid #eef2f6;
    font-size: 0.9rem; line-height: 1.5;
}
.of-k { flex: 0 0 88px; color: #8a93a0; }
.of-v { flex: 1; color: var(--text); word-break: break-word; }
.order-sub-title { font-size: 0.92rem; font-weight: 700; color: var(--text); margin: 16px 0 8px; }
.order-files { display: flex; flex-direction: column; gap: 6px; }
.order-file { font-size: 0.9rem; color: var(--primary-dark, #1e4c9a); text-decoration: underline; }
.inst-list { display: flex; flex-direction: column; gap: 10px; }
.inst-item { background: #f7f9fc; border: 1px solid #e7ecf3; border-radius: 10px; padding: 10px 12px; }
.inst-name { font-size: 0.98rem; font-weight: 700; color: var(--text); }
.inst-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.inst-tags span {
    font-size: 0.76rem; color: #4a6da8; background: #e8f0fd;
    padding: 2px 8px; border-radius: 8px;
}
.order-consult { display: block; text-align: center; margin: 18px 0 6px; }
.chat-pending {
    display: flex; align-items: center; gap: 8px;
    background: #fff; padding: 8px 14px; font-size: 0.85rem; color: var(--text-light);
    border-top: 1px solid #f0f3f7;
}
.chat-pending-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pending-clear {
    border: none; background: #eef2f7; color: #666; border-radius: 50%;
    width: 22px; height: 22px; font-size: 1rem; cursor: pointer; line-height: 1;
}
.chat-error { color: var(--danger, #d63131); text-align: center; font-size: 0.82rem; margin: 4px 0; }

/* 非首页顶部「‹ 返回X」快捷链接——全站 87 个模板都在用它。
   0830 用户：「这些字都太小，也不明显」。原来是 14px、常规字重，在页面最上方
   一片留白里几乎读不出来。改成 16px + 600 字重：**「不明显」多半不是字号问题
   而是字重问题**，光放大不加粗，它还是一条淡淡的细线。
   ⚠️ 各深色背景页（星座/八字/塔罗/养老机构…）只覆盖了 color，不碰字号，
      所以这里一改，那十几处跟着一起变——核实过，没有页面级的 font-size 覆盖。
   点击热区：原来只有文字那 20px 高。padding 撑到 ~35px、margin-bottom 相应
   收掉，版面高度基本不动。 */
.home-link {
    display: inline-block;
    margin-bottom: 3px;
    padding: 6px 10px 6px 0;
    font-size: 16px;
    font-weight: 600;
    /* 0830：返回入口统一主绿，不再跟 --primary（那是全站的旧蓝）。
       这里**故意写死色值而不改 --primary**：那个变量被几百处引用，
       动它等于把全站一次性刷成绿的，远超「统一返回箭头」这件事的范围。
       ⚠️ 有 13 个模板把 .home-link 覆盖成白/半透明——它们的返回链压在**深色头图**上，
          那是对的，不要顺手一起改绿，改了就是在深底上放一行看不见的字。 */
    color: #0F6E56;
    text-decoration: none;
}
.home-link:active { opacity: .7; }
/* 🔴 补一条 elder-mode：全站「显示大小」调到「大」时，这条返回链原先**纹丝不动**
   （87 个模板里一处 elder 覆盖都没有），于是页面其余部分都放大了、唯独最该点得中
   的返回入口还是小字。 */
html.elder-mode .home-link { font-size: 18.5px; }

/* 左上角回首页的那枚小房子（0830 用户定，取代文字「返回首页」）。
   由 app.py 的 home_icon() 统一吐出内联 SVG，这里只管让它跟前面那个「‹」
   站在同一条线上——不给 vertical-align 的话图标会坐在基线上、比箭头低半格。
   ⚠️ 只有「回首页」用它；返回服务/健康/知己识缘那些仍是文字（房子只能指首页）。

   点击热区：图标比原来那四个字窄得多，不撑开的话在手机上很难点中（iOS 的最小
   触控目标是 44px）。padding 撑热区、等值负 margin 抵消占位，版面一点不动。
   🔴 热区**做在图标自己身上**，不用 `.home-link:has(.ico-home)`：`:has()` 在
      老安卓微信的 X5 内核上不支持，那条规则会**静默失效**——图标照常显示、
      只是热区没撑开，而安卓侧的毛病用户这边永远报不出来（测试机是苹果）。 */
.ico-home {
    color: #0F6E56;   /* 0830：顶部 home 图标转主绿 */
    display: inline-flex;
    align-items: center;
    /* 图标 23px 高、旁边的「‹」才 14px：下沉量得跟着图标走，
       不然房子会坐在文字基线上、整个悬在箭头上方半格（0830 放大后重调）。 */
    vertical-align: -.45em;
    padding: 10px 12px 10px 2px;
    margin: -10px -12px -10px -2px;
}

/* 养老机构匹配度徽标与所在地 */
.inst-score {
    flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #2e9e3f;
    background: #eaf7ec; border-radius: 10px; padding: 2px 8px;
}
.inst-loc { font-size: 12px; color: #8a90a0; margin: 2px 0 4px; }

/* 无本市机构 / 空结果提示框 */
.empty-box {
    text-align: center; padding: 28px 16px; background: #f7f8fa;
    border-radius: 12px; margin: 12px 0 18px;
}
.empty-ico { font-size: 40px; margin-bottom: 10px; }
.empty-txt { font-size: 14px; line-height: 1.7; color: #6b7280; }

/* 首页「查看推荐机构」入口 */
.reco-entry {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: linear-gradient(135deg, #eef4ff, #f6fbff);
    border: 1px solid #dbe7ff; border-radius: 14px; text-decoration: none;
}
.reco-ico { font-size: 26px; flex: 0 0 auto; }
.reco-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.reco-name { font-size: 15px; font-weight: 600; color: #1f2a44; }
.reco-desc { font-size: 12px; color: #7a8092; margin-top: 2px; }
.reco-arrow { flex: 0 0 auto; font-size: 22px; color: #9aa3b8; }

/* ===== 健康评估总入口 hub ===== */
/* 覆写共用 .home-hero 的大块 CTA 样式：与首页头卡统一风格——
   蓝→青→绿三段斜向渐变 + 右上角径向柔光高光 + 细腻投影。 */
.assess-hub-hero {
    position: relative;
    overflow: hidden;
    text-align: left;
    background: linear-gradient(135deg, #2f7bea 0%, #1aa5c8 52%, #12b39a 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 22px 22px 20px;
    margin-bottom: 16px;
    box-shadow: 0 10px 24px rgba(23, 120, 180, .28);
    animation: none;
}
/* 右上角柔光高光，制造立体质感 */
.assess-hub-hero::before {
    content: "";
    position: absolute;
    top: -60px; right: -50px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.assess-hub-hero h1,
.assess-hub-hero .hero-sub { position: relative; z-index: 1; }
.assess-hub-hero h1 { font-size: 1.34rem; font-weight: 800; line-height: 1.35; color: #fff; letter-spacing: .5px; }
.assess-hub-hero .hero-sub { font-size: 0.88rem; opacity: .94; color: #fff; margin: 8px 0 0; line-height: 1.6; }
.assess-hub-list { display: flex; flex-direction: column; gap: 12px; }
.hub-mod {
    display: flex; align-items: center; gap: 13px; padding: 15px 16px;
    background: #fff; border: 1px solid #e9edf4; border-radius: 14px;
    text-decoration: none; box-shadow: 0 1px 4px rgba(31, 42, 68, 0.04);
}
.hub-mod:active { background: var(--hm-bg, #f6f9ff); }
/* 图标底 chip：同色系浅底 + 圆角方块，令各模块一眼可辨 */
.hub-mod-ico {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; background: var(--hm-bg, #eef2f8);
}
.hub-mod-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.hub-mod-name { font-size: 15px; font-weight: 600; color: #1f2a44; }
.hub-mod-desc { font-size: 12px; color: #7a8092; margin-top: 3px; line-height: 1.5; }
.hub-mod-arrow { flex: 0 0 auto; font-size: 22px; color: var(--hm-c, #9aa3b8); opacity: 0.7; }

/* G6：为他人筛查——评估页顶部提示条 + 结果页标题徽标 */
.whom-tip {
    margin: 10px 0 4px; padding: 10px 14px; border-radius: 10px;
    background: #fff4e5; border: 1px solid #ffd8a8; color: #b5540a;
    font-size: 13px; line-height: 1.6;
}
.whom-tip strong { color: #d9480f; }
.badge-for-other {
    display: inline-block; vertical-align: middle; margin-left: 8px;
    padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    color: #b5540a; background: #fff4e5; border: 1px solid #ffd8a8;
    white-space: nowrap;
}
.hub-mod-disabled { opacity: 0.6; }
.hub-mod-disabled .hub-mod-ico { background: #f0f2f6; }
.hub-mod-tag {
    flex: 0 0 auto; font-size: 11px; color: #9aa3b8;
    background: #f0f2f6; border-radius: 10px; padding: 3px 9px;
}
.assess-hub-note { font-size: 12px; color: #9aa3b8; margin: 14px 2px 0; line-height: 1.6; }

/* 已完成评定的项目：卡片内嵌「查看报告 / 重新评估」双按钮 */
.hub-mod-done { align-items: flex-start; }
.hub-mod-done .hub-mod-ico { margin-top: 2px; }
.hub-mod-acts { display: flex; gap: 10px; margin-top: 10px; }
.hub-mod-btn {
    flex: 1 1 0; text-align: center; text-decoration: none;
    font-size: 13px; font-weight: 600; padding: 9px 8px; border-radius: 10px;
    border: 1px solid var(--hm-c, #dfe4ec); color: var(--hm-c, #55617a);
    background: var(--hm-bg, #f6f9ff);
}
.hub-mod-btn-primary {
    border-color: var(--hm-c, #3b82f6); color: #fff;
    background: var(--hm-c, #3b82f6);
}
.hub-mod-btn:active { opacity: 0.85; }

/* 8 色健康色系 tone：蓝 / 翠绿 / 青 / 玫粉 / 琥珀 / 青柠 / 靛 / 柔紫 */
/* --hm-c-ink：**浅底上写字专用的深一档**，色相与 --hm-c 完全相同。
   0830「查看报告」从实心底改成浅底描边时算出来的：直接拿 --hm-c 当文字色，
   八个 tone 在自己的浅底片上只有 1.97~3.83:1（橙色最差），看不清。
   这组值在浅底片上 ≥4.50、在白底上 ≥4.95，都过 4.5 的正文标准。
   ⚠️ 描边、图标那类**图形**仍用 --hm-c（图形标准是 3:1）；只有**文字**用 ink。
   ⚠️ 顺带说明：改之前的实心底按钮（白字压在 --hm-c 上）同样不达标（2.15~4.47），
      不是这次改坏的，是这次顺手修好的。 */
.hm-c0 { --hm-c: #3b82f6; --hm-bg: #eaf2ff;  --hm-c-ink: #0B63F4; }
.hm-c1 { --hm-c: #10b981; --hm-bg: #e6f8f1;  --hm-c-ink: #0B7F59; }
.hm-c2 { --hm-c: #06b6d4; --hm-bg: #e3f6fb;  --hm-c-ink: #047A8F; }
.hm-c3 { --hm-c: #ec4899; --hm-bg: #fdeef6;  --hm-c-ink: #D31674; }
.hm-c4 { --hm-c: #f59e0b; --hm-bg: #fef4e1;  --hm-c-ink: #9C6406; }
.hm-c5 { --hm-c: #65a30d; --hm-bg: #eff7e0;  --hm-c-ink: #4D7C0A; }
.hm-c6 { --hm-c: #6366f1; --hm-bg: #ececfd;  --hm-c-ink: #5357F0; }
.hm-c7 { --hm-c: #8b5cf6; --hm-bg: #f2ecfd;  --hm-c-ink: #7B46F5; }

/* 首页专用「品牌主导 + 4 色柔和分区」调色板（大厂金刚区规范：整页≤4色、以品牌蓝为主、
   柔和浅底做图标 chip，靠图标外形区分相邻项）。仅首页用，二级页仍用上面的 8 色 hm-c。
   底色需清晰可见（京东健康/美团金刚区口径），过淡会退化成灰白一片。 */
.ht-c0 { --ht-bg: #dbe8ff; --ht-c: #2f6fe0; }  /* 品牌蓝 */
.ht-c1 { --ht-bg: #c9efe3; --ht-c: #0f9d84; }  /* 青绿 */
.ht-c2 { --ht-bg: #fde3c2; --ht-c: #e08a2a; }  /* 琥珀 */
.ht-c3 { --ht-bg: #e4ddfb; --ht-c: #6b5fd6; }  /* 柔紫 */

/* ===== 评估结果确认（是否同步到健康档案）===== */
.confirm-box {
    background: #fff5ea;
    border: 1px solid #ffd9a8;
    border-left: 4px solid #ef8b1e;
    border-radius: 12px;
    padding: 16px 14px;
    margin-bottom: 16px;
}
.confirm-title { color: #c46a10; font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.confirm-desc { color: #6b5636; font-size: 0.9rem; line-height: 1.7; margin: 0 0 12px; }
.confirm-acts { display: flex; gap: 12px; }
.confirm-acts button {
    flex: 1 1 0; border: none; border-radius: 14px; cursor: pointer;
    padding: 12px 8px; display: flex; flex-direction: column;
    align-items: center; gap: 3px; line-height: 1.2;
}
.confirm-lead { font-size: 1.18rem; font-weight: 800; letter-spacing: 1px; }
.confirm-sub { font-size: 0.82rem; opacity: 0.85; }
.confirm-yes { background: #ef8b1e; color: #fff; }
.confirm-no { background: #eef1f6; color: #55617a; border: 1px solid #dfe4ec !important; }
.confirm-done { color: #1f7a3f; font-size: 0.92rem; font-weight: 600; margin-top: 4px; }
.confirm-done.is-skip { color: #8a7a2f; }

/* 档案同步确认：居中弹窗（遮罩 + 白卡）。背景不可点关闭，必须选是/不是 */
.confirm-mask {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(0, 0, 0, 0.45);
    animation: confirmFade 0.2s ease;
}
.confirm-mask.hidden { display: none; }
.confirm-mask.closing { animation: confirmFadeOut 0.26s ease forwards; }
@keyframes confirmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirmFadeOut { from { opacity: 1; } to { opacity: 0; } }
.confirm-modal {
    width: 100%; max-width: 340px;
    background: #fff; border-radius: 16px;
    padding: 22px 20px 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
    animation: confirmPop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes confirmPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* 弹窗内的确认反馈：居中、略放大，作为选择后的收尾提示 */
.confirm-modal .confirm-done {
    text-align: center; font-size: 1rem; margin-top: 0; padding: 6px 4px 4px;
}

/* ===== 再次筛查「全新 vs 续改」选择弹窗 ===== */
.reassess-acts { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 6px; }
.reassess-btn {
    width: 100%; border: 1px solid #dfe4ec; border-radius: 14px; cursor: pointer;
    padding: 14px 12px; display: flex; flex-direction: column; align-items: center;
    gap: 3px; line-height: 1.25; background: #fff; color: var(--text, #333);
}
.reassess-btn .confirm-sub { color: var(--text-muted, #8a94a6); }
.reassess-continue { background: #2f7fd8; border-color: #2f7fd8; color: #fff; }
.reassess-continue .confirm-sub { color: rgba(255, 255, 255, 0.85); }
.reassess-cancel {
    display: block; width: 100%; margin-top: 6px; border: none; background: none;
    cursor: pointer; color: var(--text-muted, #a6adbb); font-size: 0.9rem; padding: 8px;
}

/* ===== ICP 备案页脚（模板片段 _icp_foot.html） =====
   刻意做得很轻：这是合规标识，不是内容，不该跟页面上任何功能入口抢注意力。
   ⚠️ 但**不能靠 opacity/极浅色做到「几乎看不见」**——备案要求是"标明"，
      看不清等于没标。取 .72rem + #9aa4b2，在浅底上仍可辨认。
   ⚠️ 尺寸用 rem：全站「显示大小」三档靠 html 的 font-size 缩放（见 _ui_scale.html），
      写死 px 的话老人调大字号后这里不跟着变，会显得越来越小。 */
.icp-foot {
    /* 让开底部固定导航这件事**不归这里管**：_tabbar.html 已经给 .app 加了
       padding-bottom:128px（长辈模式 140px），页脚在 .app 内部末尾，自然落在导航之上。
       这里只管页脚自身与上方内容的间距。改动前先看 _tabbar.html 第 16 行，别重复补偿。 */
    padding: 18px 12px 22px;
    text-align: center;
    line-height: 1.7;
    font-size: 0.72rem;
    color: #9aa4b2;
}
.icp-foot .icp-org { display: block; }
/* 两个备案号并排；窄屏或放大字号后自动折成两行，不挤成一坨 */
.icp-foot .icp-nos {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 2px 14px;
}
.icp-foot .icp-no {
    color: #9aa4b2;          /* 与主体名同色：它是标识不是行动号召，不用主题蓝 */
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.icp-foot .icp-no:hover { text-decoration: underline; }
/* 警徽图标：宽高在 HTML 里写死了，这里只保证它不被全局 img 规则拉伸。
   ⚠️ 别让它跟着「显示大小」缩放——位图放大会糊，而这是官方标识，糊了不体面。 */
.icp-foot .icp-gongan img { width: 14px; height: 14px; flex: none; display: block; }
/* tabbar 页面里 .app 底部已有 128px 留白，页脚自己就不必再留那么多 */
body.has-tabbar .icp-foot { padding-bottom: 6px; }


/* —— 报告页统一的「保存长图」入口（_save_img_cta.html）——
   14 个专项报告页各有各的样式表，这里放进 style.css 是因为它们都引了这一份。
   与 A/B/C1/C2 报告页的 .cta-btn 视觉保持一致（那处在 report_view.css，
   同名同值；两处都改才算改完）。 */
.save-img-cta { display: flex; justify-content: center; margin: 18px 0 6px; }
.save-img-cta .cta-btn {
    flex: 0 1 auto; max-width: 100%;
    display: block; text-align: center; text-decoration: none;
    font-size: 1.0rem; font-weight: 500; color: #fff;
    background: #1a5a75; border-radius: 8px; padding: 13px 22px;
    white-space: nowrap;
}
.save-img-cta .cta-btn:active { background: #144a61; }
@media (max-width: 360px) {
    .save-img-cta .cta-btn { font-size: 0.92rem; padding: 12px 14px; }
}

/* ===== 康养服务图标集（0830）：统一配色 =========================================
   用户 0830 晚定稿：**一套色，不分组**。此前按六个业务分组各给一个色相，
   用户看下来是「配色错误」——十个格子六种颜色，反而把版面搅碎了。
   现在统一：底片 #E1F5EE（主色最浅一档）、线条 #0F6E56、圆角 14px。
   卡片仍是白底、页面仍是浅灰蓝，图标块是这一屏唯一的色块。

   🔴 图标 <span class="hi hi-xxx"> **撑满外层的图标框**（.kk-ico / .mod-ico /
      .svc-ico），底片色由这里给、不是外层那格原来的 tone。
   分组类名 .hi-home / .hi-screening / … 仍然打在 HTML 上（Python 那头照旧按
   分组输出），只是现在**不再覆盖颜色**——哪天想恢复分组配色，在这里给它们
   各自的 --hi-line / --hi-tint 即可，不用回头改模板和 Python。
   存档一下原来那六组值，免得要恢复时还得翻聊天记录：
     home #0E8C87/#E3F4F2  screening #2563E8/#E7EEFE  wellness #0E8F52/#E3F4EA
     program #C9457B/#FBE9F0  medical #C4741F/#FCF0E0  mind #6242D8/#EDE9FC

   浅底片 = 九宫格入口、列表行内；实心底 + 白图标 = Banner / 首屏主推 / 选中态
   （.hi-solid，同一个色值从底片挪到底块，不出新文件）。 */
.hi {
    --hi-line: #0F6E56;
    --hi-tint: #E1F5EE;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 14px;
    background: var(--hi-tint); color: var(--hi-line);
}
/* 🔴 线宽：图标源文件里是 stroke-width="2.4"，在 34px 的显示尺寸下折算到屏幕上
   只有 1.7px，用户反馈「线太细」。这里用 CSS 覆盖成 2.8（属性会被 CSS 盖掉），
   折算约 2.0px。档位参考：2.2 卡片头图 / 2.4 原始 / 2.6 列表行内 / 2.8 当前。
   要再粗一档改这一个数就行，**不用动 38 个 svg 源文件**。 */
.hi svg { width: 68%; height: 68%; display: block; stroke-width: 2.8; }
/* 实心态：底块换成线条色，图形转白。用户原话「不用出新文件」 */
.hi-solid { background: var(--hi-line); color: #FFFFFF; }
/* 行内态：不要底片，尺寸跟着字号走。首页简报那种「图标 + 一句话」的小标签用，
   套个 50px 彩块会把整行撑开。vertical-align 让它和汉字的视觉中线对齐。 */
.hi-bare { background: none; width: 1.05em; height: 1.05em;
    display: inline-flex; vertical-align: -0.16em; border-radius: 0; }
.hi-bare svg { width: 100%; height: 100%; }

/* 🔴 深色模式：**故意不做**（0830 用户在 iOS 微信里实测出来的）。
   本来按规范加了一段深色模式媒体查询，把底片换成深调
   #12332A、线条提亮到 #5FD3AC。结果是：iOS 开着深色模式（或跟随日落自动切换）
   从微信公众号进来，**只有图标块翻黑**——卡片仍是白底、页面仍是浅灰蓝，
   一屏白卡片里嵌一堆深绿方块。安卓/鸿蒙在浅色模式下反而是对的，
   所以这个问题只在一部分机器上出现，很容易被当成「没部署上」。
   根子在于：整站没有深色适配，单独给一个部件加深色规则，等于让它和页面打架。
   👉 等平台整体做深色模式时，再连页面底色、卡片、文字一起做；
      在那之前这里不许出现 prefers-color-scheme（scripts/check_icons.py 钉了这一条）。
   当时算好的那对值先存着：线条 #5FD3AC / 底片 #12332A（7.44:1）。 */