/* ===================================================================== 艾灸智能诊断系统 · 设计系统 移动优先，温暖中医调性 ===================================================================== */ :root { /* 版面宽度：手机端 480px 一列；折叠屏展开/平板按断点放宽（见文件末尾「宽屏适配」）。 🔴 所有 fixed 层（底栏、抽屉、弹层）与 .app **必须共用这个变量** —— 它们各自写死 480px 时，一旦 .app 放宽就会错位（fixed 不继承父容器的居中）。 */ --app-w: 480px; /* 内容区两侧的留白（宽屏时 > 0）。 🔴 所有 `position: fixed` 且写 right/left 贴边的元素都必须叠加这个值 —— fixed 是相对**视口**定位的，不认 .app 的居中：折叠屏展开时 浮钮、麦克风、字幕条会直接飘到页面外面。 */ --app-gutter: max(0px, calc((100vw - var(--app-w)) / 2)); --bg: #F5F2ED; --bg-alt: #EFEAE2; --card: #FFFFFF; --primary: #6B8E7F; --primary-deep: #4F6E60; --primary-soft: #EDF3F0; --accent: #D4915C; --accent-deep: #B5763F; --accent-soft: #FBF1E7; --danger: #C46A5A; --danger-soft: #F9EFED; --warn-soft: #FDF6EC; --warn-text: #B8843A; --text: #2E2B26; --text-sub: #7D766D; --text-faint: #A39C92; --line: #E8E3DA; --line-soft: #F0EBE3; --zhou: #C4714A; --cheng: #5B7FA6; --ma: #5F8A78; --r-lg: 18px; --r-md: 14px; --r-sm: 10px; --shadow: 0 4px 16px rgba(46, 43, 38, .06); --shadow-lg: 0 10px 30px -12px rgba(46, 43, 38, .18); /* 右下角浮动按钮的基准线（2026-10-31）：让开底部导航/操作条（约 84px）+ 安全区。 「帮助」直接站在这条线上；「回到顶部」站在它上方一个按钮位。 两个都从这里算，以后调底栏高度只改这一处，不会出现一上一下错位。 */ /* --bot-h 由 app.js 按 #bottombar 实测高度写入（各页底栏 60~110px 不等）； 写死 84px 时浮钮会骑在底栏上，或把上面一行内容盖住。缺省值仍是 84px。 */ --fab-bottom: calc(var(--bot-h, 84px) + env(safe-area-inset-bottom)); --fab-h: 44px; --fab-gap: 10px; --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } /* 🔴 2026-11-02 多设备适配：禁掉浏览器的「自动文字放大」(font boosting)。 华为/小米/OPPO 等国产浏览器在 text-size-adjust:auto 下会按块长度偷偷放大字号 （同一份页面，华为折叠屏内屏可能放大 1.1~1.3 倍，iPhone 完全不放大）—— 这就是「有的会员手机字会折行、有的不会」的根因。 关掉它不影响无障碍：我们自己的 A⁺ 大字体（html.bigfont）才是唯一的放大入口， 两套放大叠加必然撑破布局。 */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--bg-alt); color: var(--text); /* 2026-10-31 工单 T4：正文 15 → 16px。实测 35~55 岁自助用户在大字体模式之外仍嫌小。 */ font-size: 16px; line-height: 1.7; display: flex; justify-content: center; -webkit-font-smoothing: antialiased; } .app { width: 100%; max-width: var(--app-w); min-height: 100vh; min-height: 100dvh; background: var(--bg); display: flex; flex-direction: column; position: relative; box-shadow: 0 0 40px rgba(0,0,0,.05); } button { font-family: inherit; cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } .hidden { display: none !important; } /* ---------------- 顶栏 ---------------- */ .topbar { flex: none; background: var(--bg); position: sticky; top: 0; z-index: 20; } /* unslop（2026-11-05）：顶栏装饰条从绿→橙跨色渐变收成单色墨绿 —— 跨色相渐变是典型脏项， 装饰条不需要两个色相；v2 里另有 3px 覆盖，两处同改。 */ .accentbar { height: 4px; background: var(--primary); } .nav { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid transparent; transition: border-color .2s; } /* 家庭账号 · 代操作提示条（2026-10-19） 插在 #nav（topbar）内部末尾，所以跟着 topbar 的 sticky 一起粘顶； 只有户主切进家人档案时才由 app.js 注入，其余情况不存在这个元素。 */ .acting-bar { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--accent-soft); border-top: 1px solid #F0DCC6; font-size: 16px; line-height: 1.55; color: var(--text-sub); } .acting-bar b { color: var(--text); } .acting-bar button { margin-left: auto; flex: none; padding: 4px 10px; border-radius: 6px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 600; } .nav.scrolled { border-bottom-color: var(--line); background: rgba(245,242,237,.92); backdrop-filter: blur(10px); } .nav .back { width: 34px; height: 34px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); color: var(--text-sub); } .nav .back:active { background: var(--bg-alt); } /* ⚠️ 2026-11-02 顶栏一屏修复：brand 是 flex:1，min-width:0 会让它被右侧控件压成 **0 宽** （390px 首页实测：logo「灸」宽度 0、只剩一条竖线，后面控件还得往外挤 9px、整页能横拉）。 所以给它一个「logo 宽度」的硬底线 —— 宁可让标题文字省略，也不许品牌标消失。 */ .brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; flex: 1 1 auto; min-width: 28px; } /* 顶栏标题要包一层 .bn 才能「省略号收尾」：裸文本是 flex 匿名项，text-overflow 对它不生效， 空间不够时它会折成两行（后台页实测「管理 / 后台」「数据 / 运维」「退 / 出」竖排）。 ⚠️ 这条必须在 app.css（基础层）—— 后台页按约定不引 app-v2.css。 */ .brand .bn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 首页显式传 title:'' （只留品牌标，页内已有大字标题）—— 空 span 不能白吃 brand 的 8px gap */ .brand .bn:empty { display: none; } .brand .logo { width: 28px; height: 28px; border-radius: 9px; flex: none; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 16px; font-weight: 700; } /* 名字胶囊：390px 首页实测「⚙ + 5 字名」要 99px，原来的 100px 上限刚好卡在临界， 多一个字就被截成「⚙ 系统管理…」。顶栏右侧瘦身后有富余，放宽到 132px。 */ .nav .who { font-size: 13px; color: var(--text-sub); flex: none; background: var(--card); border: 1px solid var(--line); padding: 4px 10px; border-radius: 6px; max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------- 内容区 ---------------- */ .content { flex: 1; padding: 16px 16px 130px; overflow-x: hidden; } .screen { animation: fadein .3s ease; } @keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------------- 首页 Hero ---------------- */ .hero { text-align: center; padding: 26px 0 4px; } .hero .mark { width: 84px; height: 84px; border-radius: 26px; margin: 0 auto 18px; background: linear-gradient(140deg, var(--primary-soft), #fff); border: 1px solid #DFE9E4; display: flex; align-items: center; justify-content: center; } .hero h1 { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: 1px; margin-bottom: 8px; color: var(--text); } .hero .sub { font-size: 16px; color: var(--text-sub); line-height: 1.8; } /* ---------------- 卡片 ---------------- */ .card { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; } .card-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } /* unslop（2026-11-05）：标题前的 ❖ 菱形换成艾叶剪影（与 logo 同一图形语言， mask 抠出中脉）；颜色吃 currentColor —— 危险卡标题红叶、普通标题随文字色， 不再自挂固定橙色。全站唯一装饰符，别再往卡片标题前加别的图形。 */ .card-title::before { content: ""; flex: none; width: 13px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.9 2.1C8.6 2.3 4.2 4.6 3 10.2c-.2 1 0 2.2.1 3.4 1.2.1 2.4.3 3.4.1C12.1 12.4 14.1 7.4 13.9 2.1Z'/%3E%3Cpath d='M3.6 13C6 9.2 9 6.2 12.8 3.4' stroke='%23fff' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.9 2.1C8.6 2.3 4.2 4.6 3 10.2c-.2 1 0 2.2.1 3.4 1.2.1 2.4.3 3.4.1C12.1 12.4 14.1 7.4 13.9 2.1Z'/%3E%3Cpath d='M3.6 13C6 9.2 9 6.2 12.8 3.4' stroke='%23fff' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; } .card ul { list-style: none; font-size: 16px; color: var(--text-sub); line-height: 1.95; } .card ul li { padding-left: 15px; position: relative; } .card ul li::before { content: "·"; position: absolute; left: 3px; color: var(--accent); font-weight: 700; } /* ---------------- 大师卡 ---------------- */ .master-card { display: flex; gap: 13px; align-items: flex-start; background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 15px 16px; margin-bottom: 10px; border-left: 3px solid transparent; } .master-card.m-zhou { border-left-color: var(--zhou); } .master-card.m-cheng { border-left-color: var(--cheng); } .master-card.m-ma { border-left-color: var(--ma); } .avatar { width: 46px; height: 46px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 20px; font-weight: 700; color: #fff; } .a-zhou { background: var(--zhou); } .a-cheng { background: var(--cheng); } .a-ma { background: var(--ma); } .master-card .m-name { font-size: 16px; font-weight: 700; } .master-card .m-title { font-size: 16px; color: var(--text-sub); margin-top: 2px; } .master-card .m-book { font-size: 16px; color: var(--primary); margin-top: 4px; } .master-card .m-desc { font-size: 16px; color: var(--text-sub); line-height: 1.8; margin-top: 7px; } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .chip { font-size: 13px; padding: 3px 9px; border-radius: 6px; background: var(--bg-alt); color: var(--text-sub); } /* 2026-11-02 适老：可点击的 chip（穴位快捷、特征多选）原来只有 23px 高， 约等于拇指接触面积的 1/4，老人必然点错相邻项。文字标签本身是不点的， 所以只抬 button.chip，不动纯展示的 span.chip。 */ button.chip { min-height: 40px; padding: 9px 13px; } .chip-row { gap: 8px; } .chip.green { background: var(--primary-soft); color: var(--primary-deep); } .chip.orange { background: var(--accent-soft); color: var(--accent-deep); } .chip.warn { background: var(--warn-soft); color: var(--warn-text); } .chip.danger { background: var(--danger-soft); color: var(--danger); } /* 可点击的特征 chip（舌面象手填 / 反馈反应多选） */ .chip.pick { cursor: pointer; padding: 6px 11px; font-size: 13px; border: 1px solid var(--line); transition: background .16s, color .16s, border-color .16s; -webkit-tap-highlight-color: transparent; } .chip.pick.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; } /* ---------------- 按钮 ---------------- */ .btn { width: 100%; border: none; border-radius: 13px; padding: 15px; font-size: 16px; font-weight: 700; font-family: inherit; letter-spacing: .5px; transition: background-color .18s, color .18s, box-shadow .18s, transform .18s; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn { line-height: 1.45; } .btn:active { transform: scale(.985); } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px -8px rgba(46,43,38,.35); } .btn-primary:disabled { background: #C9D4CF; color: #EDF3F0; box-shadow: none; } .btn-accent { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px rgba(46,43,38,.35); } .btn-ghost { background: transparent; color: var(--text-sub); border: 1.5px solid var(--line); } .btn-sm { padding: 12px; font-size: 16px; } .btn-row { display: flex; gap: 10px; } /* 并排按钮：.btn 自己是 width:100%，两个挤在一起时按 flex-shrink 分， 短文案那颗会被压到只剩 69px，于是「先不设」折成「先不 / 设」。 改成按内容撑开 + 等分剩余空间。 */ .btn-row .btn { flex: 1 1 0; width: auto; min-width: max-content; white-space: nowrap; } /* 副操作（ghost）按内容宽、主操作吃掉剩余 —— 否则「先不设 / 保存」被等分， 主按钮反而变窄，跟视觉权重相反 */ .btn-row .btn-ghost { flex: 0 0 auto; } .bottombar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--app-w); z-index: 30; background: rgba(245,242,237,.94); backdrop-filter: blur(12px); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 10px; transition: transform .25s ease, opacity .25s; } .bottombar.hide { transform: translateX(-50%) translateY(110%); opacity: 0; pointer-events: none; } /* .bottombar 是 flex，里面的 .btn-row 默认 flex:0 1 auto —— 宽度只等于内容宽， 于是只有一颗按钮的底栏（反馈的「下一步」、回访的「保存回访」）永远只占六成宽， 右边留一条空白。字号 16 之后按钮变宽，这条空白更显眼。 */ .bottombar > .btn-row { flex: 1 1 100%; width: 100%; } .bottombar > .btn { flex: 1 1 auto; width: auto; } /* ---------------- 进度 ---------------- */ .step { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .step .label { font-size: 16px; font-weight: 700; flex: none; } .step .label em { font-style: normal; color: var(--text-sub); font-weight: 400; font-size: 16px; } .progress { flex: 1; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; } .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #8FAF9F); border-radius: 3px; transition: width .4s ease; } /* 段标题行（2026-11-02 修）：原来是不换行的 flex，右侧 .tip 一旦是长句 （问卷第 1 步那段 40 字的橙色提醒），就会把左侧标题压到只剩一个字宽 —— 实测「禁忌筛查」竖排成四行一字一行，是全站最刺眼的一处。 现在：标题不收缩、tip 允许折到下一行占满，两边都不再互相挤。 */ .section { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; flex-wrap: wrap; } .section .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--primary); flex: none; } .section h2 { font-size: 16px; font-weight: 700; flex: none; white-space: nowrap; } .section .tip { margin-left: auto; font-size: 16px; color: var(--warn-text); background: var(--warn-soft); padding: 3px 8px; border-radius: 6px; flex: 0 1 auto; max-width: 100%; } /* ---------------- 题目卡 ---------------- */ .qcard { background: var(--card); border-radius: var(--r-md); padding: 15px; box-shadow: var(--shadow); margin-bottom: 11px; } .qcard.invalid { border: 1.5px solid var(--danger); background: var(--danger-soft); } .qcard .q { font-size: 16px; font-weight: 600; line-height: 1.65; margin-bottom: 11px; } .qcard .q .num { color: var(--accent); margin-right: 6px; font-size: 13px; font-weight: 700; } .qcard .q-hint { font-size: 16px; color: var(--text-faint); margin: -6px 0 9px; line-height: 1.7; } /* 出处引用（2026-11-02）：如「依据 《马氏温灸法》第一部分 四、（五）其他注意事项」 23 字，16px 要 369px、卡内只有 327px —— 差 42px，必然折出 3 字末行。 这是文献名，属**次要信息**（不参与阅读主链），按次要档 13px 处理即可整行放下。 ⚠️ 不用 text-wrap:balance 兜底：中文没有词边界，强行等长会断在词中间 （实测把「判定分」切成「判 / 定分」），比末行短几个字更难看。 */ .qcard .q-src { font-size: 13px; color: var(--text-faint); margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); line-height: 1.7; } .opts { display: flex; flex-direction: column; gap: 8px; } .opts.two { flex-direction: row; } .opts.two .opt { flex: 1; justify-content: center; } .opt { border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 14px; font-size: 16px; color: var(--text); transition: background-color .16s, color .16s, border-color .16s; background: #fff; display: flex; align-items: center; gap: 9px; text-align: left; } .opt .radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; position: relative; transition: background-color .16s, border-color .16s; } .opt.selected { border-color: var(--primary); background: var(--primary-soft); font-weight: 600; } .opt.selected .radio { border-color: var(--primary); } .opt.selected .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); } .opt.yes-selected { border-color: var(--danger); background: var(--danger-soft); font-weight: 600; } .opt.yes-selected .radio { border-color: var(--danger); } .opt.yes-selected .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--danger); } .alert { border-radius: 11px; padding: 12px 14px; font-size: 16px; line-height: 1.75; margin-bottom: 12px; } .alert.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid #EAD5D0; } .alert.warn { background: var(--warn-soft); color: var(--warn-text); } .alert.info { background: var(--primary-soft); color: var(--primary-deep); } .alert strong { display: block; margin-bottom: 4px; font-size: 16px; } /* ---------------- 拍照 ---------------- */ .shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .shot { position: relative; aspect-ratio: 3/4; border-radius: var(--r-md); border: 1.5px dashed #D6CFC3; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; color: var(--text-sub); font-size: 16px; transition: border-color .18s, background-color .18s, color .18s; } .shot:active { border-color: var(--primary); background: var(--primary-soft); } .shot.filled { border-style: solid; border-color: var(--primary); } .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .shot .shot-tag { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 13px; font-weight: 700; color: #fff; background: rgba(46,43,38,.62); padding: 3px 9px; border-radius: 6px; backdrop-filter: blur(4px); } .shot .shot-retake { position: absolute; bottom: 8px; right: 8px; z-index: 2; font-size: 16px; color: #fff; background: rgba(46,43,38,.62); padding: 5px 11px; border-radius: 6px; backdrop-filter: blur(4px); } .shot .shot-icon { width: 34px; height: 34px; opacity: .45; } .shot .shot-sub { font-size: 13px; color: var(--text-faint); } .tips-list { font-size: 16px; color: var(--text-sub); line-height: 1.9; list-style: none; } .tips-list li { padding-left: 16px; position: relative; } .tips-list li::before { content: "·"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; } /* ---------------- 结果页 ---------------- */ .verdict { background: linear-gradient(135deg, #6B8E7F, #55705F); border-radius: var(--r-md); padding: 22px 18px; text-align: center; color: #fff; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(26,42,34,.08); } .verdict .lab { font-size: 16px; letter-spacing: 1px; opacity: .82; margin-bottom: 8px; } .verdict .who { font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: 1px; } .verdict .pct { font-size: 16px; opacity: .93; margin-top: 8px; } .verdict .pct b { font-size: 16px; } .verdict.danger { background: linear-gradient(135deg, #C46A5A, #A9543F); } .badge { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 12px; } .badge .bd-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; font-weight: 700; } .badge .bd-txt { flex: 1; min-width: 0; } .badge .bd-txt .bd-t { font-size: 16px; font-weight: 700; } .badge .bd-txt .bd-s { font-size: 16px; color: var(--text-sub); margin-top: 3px; line-height: 1.6; } .badge .tag { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 6px; flex: none; } .tag-high { color: var(--primary-deep); background: var(--primary-soft); } .tag-mid { color: var(--warn-text); background: var(--warn-soft); } .tag-low { color: var(--text-sub); background: var(--bg-alt); } .tag-danger { color: var(--danger); background: var(--danger-soft); } .sec-t { font-size: 16px; font-weight: 700; color: var(--text-sub); letter-spacing: 1.5px; margin: 18px 0 10px 2px; } .panel { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 16px; } .panel p.para { font-size: 16px; color: var(--text-sub); line-height: 1.95; margin: 0 0 10px; } .panel p.para:last-child { margin-bottom: 0; } .panel p.para b { color: var(--text); } .rank-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .rank-row:last-child { margin-bottom: 0; } .rank-row .nm { font-size: 16px; width: 74px; flex: none; color: var(--text-sub); } .rank-row .track { flex: 1; height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; } .rank-row .track i { display: block; height: 100%; border-radius: 4px; transition: width .5s ease; } .rank-row .pc { font-size: 16px; font-weight: 700; width: 40px; text-align: right; flex: none; } /* 匹配度行的角色标签 + 判定理由（2026-10-17：分值是判定分，不是问卷分数） */ .rank-row .rl-tag { font-size: 16px; padding: 2px 7px; border-radius: 6px; flex: none; background: var(--line); color: var(--text-sub); font-weight: 600; } .rank-row .rl-tag.on { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; } /* 匹配度行的判定理由：原来 margin-left:84px 对齐「马少群」姓名列， 16px 下可用宽只剩 242px，「本证型声明的体质只有该家专长覆盖」（需 256px） 就被折出 2 字末行。理由是一整句，占满行宽更顺，也不再被挤。 */ .rl-why { font-size: 16px; color: var(--text-faint); line-height: 1.6; margin: -6px 0 10px; } /* 方案页「具体怎么做」折叠块（2026-10-17）：默认收起，让页面先给方案本身 */ details.how-to { margin: 4px 0 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; } details.how-to > summary { padding: 13px 15px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; color: var(--text-sub); } details.how-to > summary::-webkit-details-marker { display: none; } details.how-to > summary::before { content: '▸'; font-size: 16px; color: var(--text-faint); transition: transform .2s ease; } details.how-to[open] > summary::before { transform: rotate(90deg); } details.how-to[open] > summary { border-bottom: 1px dashed var(--line); color: var(--text); } details.how-to .tbl-wrap { margin: 0; border: none; border-radius: 0; } .info-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 16px; } .info-row:last-child { border-bottom: none; padding-bottom: 0; } .info-row:first-child { padding-top: 0; } .info-row .k { color: var(--text-sub); flex: none; } .info-row .v { font-weight: 600; text-align: right; } /* 穴位条目 */ .point-item { border-bottom: 1px dashed var(--line); padding: 13px 0; } .point-item:last-child { border-bottom: none; padding-bottom: 0; } .point-item:first-child { padding-top: 0; } .point-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .point-head .pn { font-family: var(--serif); font-size: 16px; font-weight: 700; } .point-head .pcode { font-size: 16px; color: var(--text-faint); } .point-head .pmin { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--accent-deep); flex: none; } .point-body { font-size: 16px; color: var(--text-sub); line-height: 1.8; } .point-body .lbl { color: var(--text-faint); } .point-why { font-size: 16px; color: var(--text-faint); line-height: 1.75; margin-top: 6px; padding-left: 2px; } .point-why summary { cursor: pointer; color: var(--primary); font-size: 16px; list-style: none; } .point-why summary::-webkit-details-marker { display: none; } .point-why summary::before { content: "▸ "; } .point-why[open] summary::before { content: "▾ "; } /* ---- 背 / 正面子方案（一次施灸拆成两段，先背面再正面） ---- */ .plan-sec { margin-bottom: 10px; border-left: 3px solid var(--accent); } .plan-sec:last-of-type { margin-bottom: 0; } .plan-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px dashed var(--line); } .plan-sec-step { flex: none; font-size: 16px; font-weight: 700; color: var(--accent-deep); line-height: 1; } .plan-sec-title { font-family: var(--serif); font-size: 16px; font-weight: 600; } .plan-sec-meta { margin-left: auto; font-size: 13px; color: var(--text-faint); white-space: nowrap; } .plan-sec-hint { font-size: 13px; color: var(--text-sub); line-height: 1.7; padding: 8px 0 2px; } .plan-sec-foot { padding-top: 10px; margin-top: 6px; border-top: 1px dashed var(--line); } .point-jump { margin-top: 8px; } /* nowrap：顶栏和卡片头里的 .btn-xs 放不下就折行，把「退出」挤成竖排「退 / 出」 （2026-11-02 后台页实测）。小按钮本来就只有 2~4 个字，宁可挤走同级元素也不折字。 */ .btn-xs { font-size: 16px; padding: 6px 11px; border-radius: 8px; width: auto; white-space: nowrap; } /* 阶段 */ .phase { padding: 12px 0; border-bottom: 1px dashed var(--line); } .phase:last-child { border-bottom: none; padding-bottom: 0; } .phase:first-child { padding-top: 0; } .phase-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .phase-badge { font-size: 13px; font-weight: 700; color: #fff; background: var(--accent); padding: 3px 9px; border-radius: 6px; flex: none; } .phase-badge.s2 { background: #7A9C8B; } .phase-badge.s3 { background: var(--primary-deep); } .phase-badge.dim { background: var(--line); color: var(--text-faint); } .phase-name { font-family: var(--serif); font-size: 16px; font-weight: 600; } .phase-goal { font-size: 16px; color: var(--text-faint); } .phase-plan { font-size: 16px; line-height: 1.85; color: var(--text-sub); margin-top: 6px; } /* 折叠 */ .acc { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 10px; } .acc summary { padding: 14px 16px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: "展开"; margin-left: auto; color: var(--text-faint); font-size: 16px; font-weight: 400; } .acc[open] summary::after { content: "收起"; } .acc .body { padding: 0 16px 15px; font-size: 16px; color: var(--text-sub); line-height: 1.9; } .acc .body p { margin: 0 0 8px; } .acc .body p:last-child { margin-bottom: 0; } .acc .body b { color: var(--text); } /* --------------------------------------------------------------------- 折叠标题收一档（2026-11-02 用户口径：「本来一行就能做下的，现在变成两行」） --------------------------------------------------------------------- 实测：`🔺 安全与灸后护理（其余禁忌 · 灸后 · 常见反应）` 单行需 364px， 卡内可用只有 326px。差的 38px 里，41px 被右侧「展开」两字（16px）和 ▸ + gap 吃掉 —— 所以先把导航辅助收一档，标题就回到一行， 比整体缩字号划算（用户要的是「一行」，不是「小字」）。 触控高度不变：15px 字 + 12px 上下内边距 ≈ 46px，仍高于 44px 的点击标准。 ⚠️ 同时把 flex 换成 grid（2026-11-02）：flex 的文本子项是「flex item」， `text-wrap: pretty` 管不到它，20 字以上的长标题会被切成「18 字 + 孤零零 2 字」 （「三位大家方案匹配度（判定分 · 为什么是这 / 一位）」）。 grid 让标题成为独立的 1fr 文本块，pretty 才能均衡末行。 --------------------------------------------------------------------- */ .acc summary { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 12px 13px; font-size: 15px; } .acc summary::after { font-size: 13px; margin-left: 0; justify-self: end; } details.how-to > summary { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; padding: 12px 13px; font-size: 15px; } details.how-to > summary::before { font-size: 13px; } .disclaimer { font-size: 13px; color: var(--text-faint); line-height: 1.85; background: var(--bg-alt); border-radius: 12px; padding: 13px 15px; margin: 14px 0 0; } .disclaimer b { color: var(--text-sub); } /* 空的免责块会留一个灰底圆角框（有背景、有内边距，却没字）， 在预约页尾部看起来像一张空白卡片。没内容就不占位。 */ .disclaimer:empty { display: none; } /* ---------------- 时间线 ---------------- */ .tl { position: relative; padding-left: 26px; } .tl::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1.5px; background: var(--line); } .tl-item { position: relative; margin-bottom: 14px; } .tl-item::before { content: ""; position: absolute; left: -23px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--card); border: 2.5px solid var(--line); box-sizing: border-box; } .tl-item.t-screening::before { border-color: var(--primary); } .tl-item.t-plan::before { border-color: var(--accent); } .tl-item.t-feedback::before { border-color: #8FAF9F; } .tl-item.t-photo::before { border-color: #B9AFA0; } .tl-item.t-appointment::before { border-color: #C9A227; } .tl-card { background: var(--card); border-radius: var(--r-sm); padding: 12px 14px; box-shadow: var(--shadow); } .tl-card .tl-t { font-size: 16px; font-weight: 700; } .tl-card .tl-s { font-size: 16px; color: var(--text-sub); margin-top: 4px; line-height: 1.7; } .tl-card .tl-at { font-size: 16px; color: var(--text-faint); margin-top: 6px; } .tl-card img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 8px; margin-top: 8px; } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; } .stat { background: var(--card); border-radius: var(--r-sm); padding: 11px 6px; text-align: center; box-shadow: var(--shadow); } .stat .v { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--primary-deep); } .stat .k { font-size: 16px; color: var(--text-faint); margin-top: 2px; } /* ---------------- 反馈打分 ---------------- */ .scale { display: flex; gap: 6px; } .scale .dot { flex: 1; aspect-ratio: 1; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--text-faint); transition: background-color .16s, color .16s, border-color .16s; } .scale .dot.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-deep); } .scale.heat .dot.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); } /* ---------------- 5 档文字量表（2026-10-31） ---------------- 替代 1–5 数字圆点：会员不用再记「哪个方向才是好的」。 档位文案在 assets/app.js 的 SCALES 里（每天/每周期/症状程度三套），这里只管长相。 */ .sstep-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } .sstep { min-width: 0; padding: 9px 2px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--text-sub); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: background-color .16s, color .16s, border-color .16s; } .sstep.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-deep); } .sstep.warm.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); } /* ---------------- 首次提示条「右上角能放大字」（2026-10-31） ---------------- 只在首页出现一次；点「知道了」或点过 A⁺ 就写入标记不再出现。 */ .big-tip { display: flex; align-items: center; gap: 10px; margin: 8px 14px 0; padding: 10px 13px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-deep); font-size: 16px; line-height: 1.6; } .big-tip b { font-size: 16px; } .big-tip .bt-ok { margin-left: auto; flex: none; border: 0; background: var(--primary); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; padding: 7px 13px; border-radius: 8px; cursor: pointer; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 7px; } .field .hint { font-size: 16px; color: var(--text-faint); margin-bottom: 7px; } .field input, .field textarea, .field select { width: 100%; border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 13px; font-size: 16px; font-family: inherit; color: var(--text); background: #fff; transition: border-color .16s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--primary); } .field textarea { min-height: 82px; resize: vertical; line-height: 1.7; } /* 密码可见切换（2026-10-18 用户要求）：.pwd-wrap 包住 input + 眼睛按钮。 会员输密码时能先看一眼再提交 —— 减少「明明输对了却说密码错」的挫败。 */ .pwd-wrap { position: relative; } .pwd-wrap > input { padding-right: 46px; } .pwd-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-faint); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .pwd-eye:active { background: var(--line-soft); } .pwd-eye.on { color: var(--primary); } .pwd-eye svg { width: 20px; height: 20px; display: block; } /* 默认「划线眼」= 密码正被遮住；点开变干净的眼睛 = 已明文可见 */ .pwd-eye .eye-off { display: inline; } .pwd-eye.on .eye-off { display: none; } /* ---------------- Toast / Loading ---------------- */ .toast { position: fixed; left: 50%; bottom: 108px; transform: translateX(-50%) translateY(10px); background: rgba(46,43,38,.9); color: #fff; font-size: 16px; padding: 11px 20px; border-radius: 12px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 86vw; text-align: center; line-height: 1.6; backdrop-filter: blur(8px); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .loading { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: rgba(245,242,237,.86); backdrop-filter: blur(6px); } .loading.show { display: flex; } .loading .spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading .txt { font-size: 16px; color: var(--text-sub); } /* 进度条（视觉模型分析这类「耗时不可预知」的等待） 有 pct 时隐藏转圈、换成「百分比 + 渐近填充 + 流光」： 条子始终在动、文案分阶段推进，长等待不会被误判成卡死。 */ .loading .prog { display: none; width: 220px; } .loading.with-prog .spinner { display: none; } .loading.with-prog .prog { display: block; } .loading .prog-pct { font-size: 26px; font-weight: 600; line-height: 1; color: var(--primary-deep); text-align: center; margin-bottom: 13px; font-variant-numeric: tabular-nums; } .loading .prog-track { position: relative; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; } .loading .prog-track > i { display: block; height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .32s cubic-bezier(.22,.61,.36,1); } .loading .prog-track::after { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: progShine 1.5s linear infinite; } @keyframes progShine { from { left: -45%; } to { left: 100%; } } @media (prefers-reduced-motion: reduce) { .loading .prog-track::after { animation: none; opacity: 0; } .loading .prog-track > i { transition: none; } } .empty { text-align: center; padding: 40px 20px; color: var(--text-faint); font-size: 16px; line-height: 1.9; } .empty .big { font-size: 34px; margin-bottom: 10px; opacity: .35; } /* ---------------- 弹层（预约前的今日打卡门槛） ---------------- 只服务「点预约入口 → 今天还没打卡」这一种场景，所以样式做窄。 z-index 取 260：压在 toast（200）之上、loading（300）之下。 ⚠️ 这套类名必须与下方「底部抽屉」的 .modal 系列**分开命名**（2026-09-22 事故）： 抽屉那边有一条 `.modal { position: fixed; inset: 0; z-index: 150; display: none; }`， 而抽屉靠 `.modal.show` 才显示。本弹层的卡片是没有 .show 的， 如果它也叫 .modal，同一优先级下**后出现的 display:none 会赢**， 卡片被整块隐藏 —— 用户看到的是「点预约 → 屏幕暗一下 → 什么都没发生」， 表现成「无法预约门店」，且永远点不到「去记录今日打卡」，等于彻底走不通。 为什么原来的测试拦不住它？**不是** jsdom 算不了层叠 —— 实测它算得出来 （加载 app.css 后 getComputedStyle 能给出 .gate-card→block、.modal→none）。 真原因是当时门槛的 11 项断言只查了「DOM 在场」与文案，**压根没查 computed 样式**。 → 回归锁见 tests/test-flow-v2.js：① 真实 getComputedStyle 断言； ② §CSS 层叠检查（静态扫 app.css，比对 .gate-card 与 .modal 的最终 display）。 注意：jsdom 用 resources:'usable' 加载 CSS 是异步的，**必须等 styleSheets[0] 规则数 > 50 再断言**，否则 getComputedStyle 返回空串，`display !== 'none'` 会假通过。 */ .gate-mask { position: fixed; inset: 0; z-index: 260; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(46,43,38,.42); backdrop-filter: blur(3px); } .gate-card { width: 100%; max-width: 360px; background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 20px 18px 16px; animation: gateIn .18s ease-out; } @keyframes gateIn { from { opacity: 0; transform: translateY(8px) scale(.985); } } .gate-title { font-size: 16.5px; font-weight: 700; margin-bottom: 9px; } .gate-body { font-size: 16px; color: var(--text-sub); line-height: 1.85; } .gate-actions { display: flex; gap: 10px; margin-top: 16px; } .gate-actions .btn { flex: 1; text-decoration: none; } .gate-actions .btn-ghost { flex: 0 0 34%; } @media (max-width: 360px) { .hero h1 { font-size: 23px; } .stat-grid { grid-template-columns: repeat(2, 1fr); } } /* ===================================================================== 会员登录 / 预约 / 管理后台 ===================================================================== */ /* ---------------- 分段切换（登录·注册 / 后台标签页） ---------------- */ .seg { display: flex; gap: 4px; background: var(--bg-alt); border-radius: 12px; padding: 4px; margin-bottom: 14px; } .seg button { flex: 1; padding: 10px 6px; border-radius: 9px; font-size: 16px; font-weight: 600; color: var(--text-sub); transition: background-color .16s, color .16s, box-shadow .16s; } .seg button.on { background: var(--card); color: var(--primary-deep); box-shadow: var(--shadow); } /* 2026-11-02：7 个 tab 挤在 390px 里，每格被压到 40px → 全部折成竖排 （「概 / 览」「预 / 约 / 管 / 理」）。改成**横向滚动 + 不折行**： 手机上一行能划，比竖排好读；桌面内容装得下时不会出现滚动条。 */ .tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { flex: none; white-space: nowrap; min-width: 40px; padding: 10px 2px; font-size: 16px; font-weight: 600; color: var(--text-sub); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs button.on { color: var(--primary-deep); border-bottom-color: var(--primary); } /* ---------------- 服务项目 ---------------- */ .srv { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 13px 14px; margin-bottom: 9px; border: 1.5px solid transparent; transition: border-color .16s, background .16s; } .srv.on { border-color: var(--primary); background: var(--primary-soft); } .srv .srv-t { font-size: 16px; font-weight: 700; } .srv .srv-d { font-size: 16px; color: var(--text-sub); line-height: 1.7; margin-top: 3px; } .srv .srv-meta { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 16px; color: var(--text-faint); } .srv .srv-price { margin-left: auto; flex: none; font-size: 16px; font-weight: 700; color: var(--accent-deep); } /* ---------------- 日期条 ---------------- */ .date-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; } .date-strip::-webkit-scrollbar { display: none; } .dchip { flex: none; width: 56px; padding: 9px 0; border-radius: 12px; text-align: center; background: var(--card); border: 1.5px solid var(--line); transition: background-color .16s, border-color .16s; } .dchip .dw { font-size: 13px; color: var(--text-faint); } .dchip .dd { font-size: 16px; font-weight: 700; margin-top: 1px; } .dchip .dm { font-size: 16px; color: var(--text-faint); } .dchip.on { background: var(--primary); border-color: var(--primary); } .dchip.on .dw, .dchip.on .dm { color: rgba(255,255,255,.85); } .dchip.on .dd { color: #fff; } /* ---------------- 时段 ---------------- */ .slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .slot { padding: 12px 4px; border-radius: 11px; text-align: center; border: 1.5px solid var(--line); background: var(--card); font-size: 16px; font-weight: 600; transition: background-color .16s, color .16s, border-color .16s; } .slot small { display: block; font-size: 16px; font-weight: 400; color: var(--text-faint); margin-top: 2px; } .slot:disabled { background: var(--bg-alt); color: var(--text-faint); border-color: var(--line-soft); cursor: not-allowed; } .slot:disabled small { color: var(--text-faint); } .slot.on { background: var(--primary); border-color: var(--primary); color: #fff; } .slot.on small { color: rgba(255,255,255,.85); } /* ---------------- 预约单 ---------------- */ .appt { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 14px; margin-bottom: 10px; border-left: 3px solid var(--line); } .appt.s-booked { border-left-color: var(--accent); } .appt.s-confirmed { border-left-color: var(--primary); } .appt.s-done { border-left-color: #8FAF9F; } .appt.s-canceled { border-left-color: var(--line); opacity: .72; } .appt.s-noshow { border-left-color: var(--danger); } .appt .ap-head { display: flex; align-items: center; gap: 8px; } .appt .ap-t { font-size: 16px; font-weight: 700; flex: 1; min-width: 0; } .appt .ap-when { font-family: var(--serif); font-size: 16px; margin-top: 5px; } .appt .ap-meta { font-size: 16px; color: var(--text-sub); line-height: 1.75; margin-top: 5px; } .appt .ap-act { display: flex; gap: 8px; margin-top: 10px; } .st-badge { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 6px; flex: none; } .st-booked { color: var(--accent-deep); background: var(--accent-soft); } .st-confirmed { color: var(--primary-deep); background: var(--primary-soft); } .st-done { color: var(--text-sub); background: var(--bg-alt); } .st-canceled { color: var(--text-faint); background: var(--bg-alt); } .st-noshow { color: var(--danger); background: var(--danger-soft); } /* 待门店缴费激活（2026-09-23 两段式养护卡）：刻意用「待办」的暖色， 与「已激活」的绿色（st-confirmed）拉开距离 —— 这两者必须一眼可辨， 因为「现在能不能扫码施灸」完全取决于它是哪一个。 */ .st-pending { color: var(--warn-text); background: var(--warn-soft); } /* 机器人状态徽章（2026-09-25 机器人预约管理）。 类名与 server/lib/robot-availability.js 的 DEVICE_STATUS[*].cls 一一对应 —— **服务端下发 cls，前端不自己按状态拼类名**，否则加一种状态就会两边对不上。 四色刻意拉开：空闲=绿（能约）、施灸中=橙（等一会儿）、离线=黄（要找店员）、 停用=浅灰（门店主动停的，不是故障，别用红色吓人）。 */ .st-idle { color: var(--primary-deep); background: var(--primary-soft); } .st-running { color: var(--accent-deep); background: var(--accent-soft); } .st-offline { color: var(--warn-text); background: var(--warn-soft); } .st-disabled { color: var(--text-faint); background: var(--bg-alt); } /* ---------------- 管理后台 ---------------- */ .adm-stat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 14px; } .adm-stat .s { background: var(--card); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 12px 13px; } .adm-stat .s .v { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--primary-deep); } .adm-stat .s .k { font-size: 16px; color: var(--text-faint); margin-top: 2px; } .adm-stat .s.warn .v { color: var(--accent-deep); } .adm-row { background: var(--card); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 12px 13px; margin-bottom: 8px; } .adm-row .r1 { display: flex; align-items: center; gap: 8px; } .adm-row .nm { font-size: 16px; font-weight: 700; flex: 1; min-width: 0; } .adm-row .ph { font-size: 16px; color: var(--text-faint); margin-top: 3px; } .adm-row .r2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .adm-row .ap-meta { font-size: 16px; color: var(--text-sub); line-height: 1.7; margin-top: 4px; } .adm-row .ap-act { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; } .btn-xs { padding: 7px 12px; font-size: 16px; font-weight: 600; border-radius: 9px; border: 1.5px solid var(--line); color: var(--text-sub); background: var(--card); min-height: 40px; } .btn-xs.primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-xs.accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-xs.danger { background: var(--danger-soft); border-color: #EAD5D0; color: var(--danger); } .btn-xs:disabled { opacity: .45; } .filter-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .filter-bar::-webkit-scrollbar { display: none; } .fchip { flex: none; padding: 7px 13px; border-radius: 8px; font-size: 13px; background: var(--card); border: 1.5px solid var(--line); color: var(--text-sub); } .fchip.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } .sub-t { font-size: 13px; font-weight: 700; color: var(--text-sub); letter-spacing: 1px; margin: 14px 0 8px 2px; } /* 底部导航（会员侧）：由 #bottombar 承载，四个 tab 等分 */ .tabbar { /* ⚠️ 列数**跟着 TAB_ITEMS 走**，别写死 4 列：2026-09-23 底栏从 4 项变 5 项 （新增的那项在正中间），写死 4 列会让第 5 项掉到第二行。 auto-fit + minmax(0,1fr) 的实际列数 = 子项数，以后加减项都不用回来改这里。 */ flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; } .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; font-size: 13px; color: var(--text-faint); border-radius: 10px; } .tabbar button.on { color: var(--primary-deep); font-weight: 700; background: var(--primary-soft); } .tabbar button svg { width: 19px; height: 19px; } /* 长标签（目前只有「机器人艾灸服务」7 字）：5 栏在 375px 屏上每栏仅约 68px， 10.5px × 7 字 ≈ 74px 必然折断成「6 字 + 1 字」。降一档字号（9px × 7 ≈ 63px） 就能在常见机型上收成一行；320px 这类极窄屏上 text-wrap:balance 会把它 平分成「机器人艾 / 灸服务」两行，仍比 6+1 好看。 */ .tabbar button.t-long { font-size: 13px; } .tabbar button.t-long span { line-height: 1.15; } /* 底栏承载导航时收紧内边距，避免底栏过高挤压内容 */ .bottombar.as-tabs { padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); } /* ---------------- 三步流程条（机器人艾灸服务的 ①扫码 ②核销凭证 ③方案与准备） ---------------- 会员端「机器人艾灸服务」这条动线要跨两个页面（扫码页 = ①②，方案页 = ③）， 流程条让用户随时知道自己在第几步。样式放这里而不是各页