/* ============================================================
   糖庐 · 红糖花网站重构 UI 设计稿  共享样式
   设计 Token 在 tokens.css 单源定义（下方 @import），改色去那里。
   ============================================================ */
@import url('tokens.css');
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.6; }

/* ---------- 移动端页面外壳（375 基准，420 封顶） ---------- */
.phone { max-width: 400px; margin: 0 auto; --htnav-max: 400px; min-height: 100vh; min-height: 100dvh;
  background: var(--paper);
  display: flex; flex-direction: column; position: relative; }
.page-body { flex: 1; padding: 12px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
.page-body.no-tab { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Header ---------- */
.app-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px;
  background: linear-gradient(180deg, var(--paper-warm), var(--paper)); }
.app-header .avatar { width: 36px; height: 36px; border-radius: 50%; background: #EFE7DA;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  border: 1px solid var(--border-wash); flex: none; overflow: hidden; }
.app-header .avatar img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.3); } /* 品牌图白边约占一半：放大 30% 由圆的 overflow 裁掉，红标占比 49%→64% */
.app-header .brand { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.app-header .spacer { flex: 1; }
/* 子页返回链接：箭头 + 标题整体可点，命中区 ≥44×44，负 margin 抵消 padding 保持视觉不变 */
.app-header .back { display: flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px;
  margin: -10px 0 -10px -12px; padding: 10px 10px 10px 12px;
  color: var(--ink-muted); text-decoration: none; }
.app-header .back .brand { color: var(--ink); }
.app-header .hicon { width: 34px; height: 34px; border-radius: 50%; background: #fff;
  border: 1px solid var(--border-wash); display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--ink-light); position: relative; }
.app-header .hicon .dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--red-seal); }

/* ---------- 底部 Tab ---------- */
/* 高度含 iOS home 指示条安全区（viewport-fit=cover 后 env 生效，非刘海设备为 0 不变） */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 400px; height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; flex-shrink: 0;
  background: #fff; border-top: 1px solid var(--border-wash);
  display: flex; z-index: 100; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; color: var(--ink-muted); font-size: 10px; }
.tabbar a .ti { font-size: 19px; line-height: 1; }
.tabbar a .ti img { width: 22px; height: 22px; display: block; }
.tabbar a:not(.on) .ti img { filter: grayscale(1); opacity: .5; }
.tabbar a.on { color: var(--ink); font-weight: 600; }

/* ---------- 通用组件 ---------- */
.card { background: #fff; border: 1px solid var(--border-wash); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft); }
.pill { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; }
.pill-red { background: var(--red-wash); color: var(--red-seal); font-weight: 600; }
.pill-dark { background: rgba(44,44,44,0.55); color: #fff; }
.pill-green { background: var(--green-wash); color: var(--green-bamboo); font-weight: 600; }
.pill-gold { background: var(--gold-wash); color: var(--gold); font-weight: 600; }
.pill-line { background: #fff; border: 1px solid var(--border-wash); color: var(--ink-light); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px;
  border-radius: var(--radius-sm); font-size: 13px; text-decoration: none; border: none; cursor: pointer; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-bamboo { background: var(--green-bamboo); color: #fff; }
.btn-red { background: var(--red-seal); color: #fff; }
.btn-ghost { background: #fff; border: 1px solid var(--border-wash); color: var(--ink-light); }
.btn-block { display: flex; width: 100%; padding: 12px; font-size: 15px; border-radius: var(--radius-lg); }

.section-title { display: flex; align-items: baseline; margin: 20px 2px 10px; }
.section-title .t { font-family: var(--serif); font-size: 16px; font-weight: 700; }
.section-title .more { margin: -8px -8px -8px auto; padding: 8px 8px 8px 14px;
  font-size: 12px; color: var(--ink-muted); text-decoration: none; }

.divider-text { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px;
  color: var(--ink-light); font-family: var(--serif); font-size: 14px; font-weight: 600; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-wash)); }
.divider-text::after { background: linear-gradient(90deg, var(--border-wash), transparent); }

.list-item { display: flex; gap: 12px; align-items: center; background: #fff;
  border: 1px solid var(--border-wash); border-radius: var(--radius-lg); padding: 12px 14px; }
.list-item .thumb { width: 48px; height: 48px; border-radius: var(--radius-md); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 22px; }
.list-item .thumb img { width: 30px; height: 30px; object-fit: contain; }
.list-item .tt { font-size: 14px; font-weight: 600; line-height: 1.4; }
.list-item .st { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }

.menu-list { background: #fff; border: 1px solid var(--border-wash); border-radius: var(--radius-lg);
  overflow: hidden; }
.menu-list a { display: flex; align-items: center; gap: 10px; padding: 13px 14px; text-decoration: none;
  color: var(--ink); font-size: 14px; border-bottom: 1px solid var(--border-wash); }
.menu-list a:last-child { border-bottom: none; }
.menu-list a .arr { margin-left: auto; color: var(--ink-muted); font-size: 12px; }
.menu-list a .sub { margin-left: auto; color: var(--ink-muted); font-size: 11px; }
.menu-list a .sub + .arr { margin-left: 6px; }

/* 滑块（装饰性静态展示） */
.slider { padding: 6px 2px 2px; }
.slider .track { height: 6px; border-radius: 3px; background: var(--border-wash); position: relative; }
.slider .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--red-seal), #D4766F); }
.slider .knob { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--red-seal); transform: translate(-50%, -50%);
  box-shadow: var(--shadow-soft); }
.slider .marks { display: flex; justify-content: space-between; font-size: 10px;
  color: var(--ink-muted); margin-top: 6px; }

/* 选项 chips / 单选卡 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 13px; border-radius: var(--radius-full); border: 1px solid var(--border-wash);
  background: #fff; font-size: 13px; color: var(--ink-light); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.on-red { background: var(--red-wash); color: var(--red-seal); border-color: var(--red-seal); font-weight: 600; }
/* 表单选项 chip 选中前置 ✓：强制暗色/反色算法会抹掉底色描边，字符标记不受颜色影响 */
.chips[data-name] .chip.on-red::before { content: "✓"; margin-right: 3px; font-weight: 700; }
.opt-card { display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--border-wash); border-radius: var(--radius-lg); padding: 13px 14px; font-size: 14px; }
.opt-card.on { border-color: var(--red-seal); background: var(--red-wash); }
.opt-card .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-wash); flex: none; }
.opt-card.on .radio { border-color: var(--red-seal); background: var(--red-seal);
  box-shadow: inset 0 0 0 3px #fff; }

.note { font-size: 11px; color: var(--ink-muted); line-height: 1.6; }
.tag { background: var(--paper-warm); border: 1px solid var(--border-wash); border-radius: 4px;
  padding: 1px 7px; font-size: 11px; color: var(--ink-light); }

/* ---------- 首页 Banner ---------- */
.banner { border-radius: var(--radius-xl); padding: 18px 18px 16px; position: relative;
  overflow: hidden; min-height: 128px; }
.banner .deco { position: absolute; right: 10px; bottom: 2px; font-size: 64px; opacity: 0.12; }
/* 整图 banner：设计稿自带文案，整卡可点 */
.banner.bnr-img { padding: 0; overflow: hidden; display: block; }
.banner.bnr-img img { width: 100%; display: block; }
.banner h3 { font-family: var(--serif); font-size: 18px; font-weight: 700; margin: 8px 0 4px; color: #2C2C2C; }
.banner p { font-size: 12px; color: #6B6560; margin-bottom: 12px; max-width: 240px; }
.dots { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: #D8D2C6; }
.dots i.on { width: 16px; background: var(--red-seal); }

/* 快捷入口 */
.quick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.quick-grid .q { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.quick-grid .qi { width: 44px; height: 44px; border-radius: var(--radius-md); background: #fff;
  border: 1px solid var(--border-wash); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.quick-grid .qi img { width: 28px; height: 28px; object-fit: contain; }
.quick-grid .qt { font-size: 10px; color: var(--ink-light); }

/* 金句卡 */
.quote-card { background: #fff; border: 1px solid var(--border-wash); border-left: 3px solid var(--red-seal);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-top: 14px; }
.quote-card .q-text { font-family: var(--serif); font-size: 14px; line-height: 1.9; color: var(--ink); }
.quote-card .q-by { text-align: right; font-size: 11px; color: var(--ink-muted); margin-top: 6px; }

/* 文章卡 */
.article-card { background: #fff; border: 1px solid var(--border-wash); border-radius: var(--radius-lg);
  overflow: hidden; }
.article-card .cover { height: 110px; position: relative; display: flex; align-items: center; justify-content: center; }
.article-card .cover .ce { font-size: 44px; opacity: 0.18; }
.article-card .cover .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card .cover .pin { position: absolute; top: 8px; left: 8px; z-index: 1; }
.article-card .a-body { padding: 10px 12px 12px; }
.article-card .a-title { font-family: var(--serif); font-size: 14px; font-weight: 700; line-height: 1.5; }
.article-card .a-ex { font-size: 12px; color: var(--ink-light); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .a-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.article-card .a-meta .views { margin-left: auto; font-size: 11px; color: var(--ink-muted); }

/* 课程卡 */
.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.course-card { background: #fff; border: 1px solid var(--border-wash); border-radius: var(--radius-lg); overflow: hidden; }
.course-card .cthumb { height: 76px; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.course-card .cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-card .cinfo { padding: 9px 10px 10px; }
.course-card .cname { font-size: 13px; font-weight: 600; }
.course-card .cbadge { margin-top: 5px; }

/* 横滑 */
.hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }

/* 分类标签栏 */
.cat-bar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.cat-bar::-webkit-scrollbar { display: none; }
.cat-bar .cat { flex: none; padding: 6px 14px; border-radius: 20px; font-size: 13px;
  background: #fff; color: var(--ink-light); border: 1px solid var(--border-wash); text-decoration: none; }
.cat-bar .cat.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- 个人中心 ---------- */
.profile-head { background: linear-gradient(180deg, var(--paper-warm), var(--paper));
  padding: 18px 16px 16px; }
.pf-top { display: flex; gap: 12px; align-items: center; }
.pf-avatar { width: 56px; height: 56px; border-radius: 50%; background: #EFE7DA; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  border: 1px solid var(--border-wash); }
.pf-name { font-size: 16px; font-weight: 700; }
.pf-tags { display: flex; gap: 6px; margin-top: 4px; }
.pf-credit { margin-left: auto; text-align: right; }
.pf-credit .n { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--red-seal); }
.pf-credit .l { font-size: 10px; color: var(--ink-muted); }
.level-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-light);
  margin: 12px 2px 5px; }
.level-row .lv { color: var(--red-seal); font-weight: 600; }

/* 勋章 */
.badge-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.badge-row::-webkit-scrollbar { display: none; }
.badge-item { flex: none; text-align: center; width: 64px; }
.badge-item .b { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  border: 2px solid var(--gold); background: linear-gradient(135deg, #F7EBC9, #EDD9A3); }
.badge-item .n { font-size: 10px; color: var(--ink-light); margin-top: 5px; }
.badge-item.locked .b { filter: grayscale(1); opacity: 0.55; border-color: #C6BDA6; background: #E7E1D2; }
.badge-item.locked .n { color: var(--ink-muted); }
.badge-item .b img { width: 38px; height: 38px; object-fit: contain; }

/* 图标图片（老板设计稿 SVG/WebP 替换 emoji 占位） */
.pf-svc-ico img { width: 30px; height: 30px; object-fit: contain; }
.pf-course-ico { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; vertical-align: -5px; margin-right: 2px; }
.menu-list a .mi { width: 18px; flex: none; display: flex; align-items: center; justify-content: center; }
.menu-list a .mi img { width: 18px; height: 18px; object-fit: contain; display: block; }

/* ---------- 医师端（宽版） ---------- */
.wide { max-width: 860px; margin: 0 auto; --htnav-max: 860px; min-height: 100vh; background: var(--paper); }
.page-body.wide-pad { padding: 18px 22px 40px; }
.wide-topbar { background: #fff; border-bottom: 1px solid var(--border-wash); padding: 12px 120px 12px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -18px -22px 16px; }
.wide-topbar.flush { margin-bottom: 0; }
#mod-form-wrap { margin: 0 -22px; background: #fff; }
.mod-chip { padding: 5px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; }
.mod-a { background: var(--red-wash); color: var(--red-seal); }
.mod-b { background: var(--green-wash); color: var(--green-bamboo); }
.mod-c { background: var(--gold-wash); color: var(--gold); }
.wide-cols { display: flex; gap: 0; align-items: stretch; }
.wide-nav { width: 180px; flex: none; border-right: 1px solid var(--border-wash); padding: 14px 0; background: #FBF9F4; }
.wide-nav .nv { padding: 10px 18px; font-size: 13px; color: var(--ink-light); display: flex; gap: 8px; align-items: center; }
.wide-nav .nv.on { color: var(--ink); font-weight: 600; background: var(--red-wash);
  border-right: 3px solid var(--red-seal); }
.wide-nav .nv .lock { margin-left: auto; font-size: 10px; color: var(--ink-muted); }
.wide-main { flex: 1; padding: 18px 22px 40px; }
.form-sec { background: #fff; border: 1px solid var(--border-wash); border-radius: var(--radius-xl);
  padding: 16px 18px; margin-bottom: 14px; }
.form-sec h4 { font-family: var(--serif); font-size: 15px; font-weight: 700; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; }
.kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px; font-size: 12px; }
.kv .k { color: var(--ink-muted); }
.kv .v { color: var(--ink); font-weight: 600; }
.map-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--border-wash); font-size: 13px; }
.map-row:last-child { border-bottom: none; }
.map-mark { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; }
.mark-o { background: var(--green-wash); color: var(--green-bamboo); border: 1px solid var(--green-bamboo); }
.mark-d { background: var(--gold-wash); color: var(--gold); border: 1px solid var(--gold); }
.mark-x { background: #F0EDE6; color: var(--ink-muted); border: 1px solid var(--border-wash); }
.vas-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 5px 0; }
.vas-bar .lbl { width: 130px; color: var(--ink-light); flex: none; }
.vas-bar .slider { flex: 1; min-width: 0; }
.vas-track { flex: 1; height: 8px; border-radius: 4px; background: var(--border-wash); position: relative; }
.vas-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--green-bamboo); }

/* 医师端表单栅格（桌面多列，手机由下方媒体查询收成单列） */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-fu { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 10px; }
.reason-input { width: 170px; }
/* 栅格/弹性子项允许收缩到内容最小宽度以下（iOS date 输入框固有最小宽度会撑破列） */
.kv > *, .grid2 > *, .grid-fu > *, .emr-np-form .form-field { min-width: 0; }
/* 板块标题允许换行；手机上说明性小字独占一行，避免标题被挤断 */
.form-sec h4 { flex-wrap: wrap; }

/* EMR 患者列表：手机卡片（桌面隐藏，桌面走表格） */
.emr-pcards { display: none; }
.emr-pcard { padding: 13px 14px; margin-bottom: 10px; }
.emr-pcard .pc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emr-pcard .pc-name { font-size: 15px; font-weight: 700; }
.emr-pcard .pc-meta { font-size: 12px; color: var(--ink-light); margin-top: 3px; }
.emr-pcard .pc-mods { margin-left: auto; display: flex; gap: 4px; }
.emr-pcard .pc-actions { display: flex; gap: 8px; margin-top: 10px; }
.emr-pcard .pc-actions .btn { flex: 1; padding: 8px 4px; font-size: 12px; white-space: nowrap; }
.emr-pcard .pc-actions form { flex: 1; display: flex; margin: 0; }
.emr-pcard .pc-actions form .btn { width: 100%; }
/* 新建散客表单：手机端字段弹性铺满 */
.emr-np-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.emr-np-form .form-field { margin: 0; }

/* 病历文档风 */
.doc-page { background: #fff; border: 1px solid var(--border-wash); border-radius: var(--radius-md);
  padding: 28px 30px; font-size: 13px; line-height: 1.9; box-shadow: var(--shadow-soft); }
.doc-page h2 { font-family: var(--serif); text-align: center; font-size: 18px; margin-bottom: 4px; }
.doc-page .doc-sub { text-align: center; font-size: 11px; color: var(--ink-muted); margin-bottom: 18px; }
.doc-page h5 { font-family: var(--serif); font-size: 14px; margin: 16px 0 4px; color: var(--red-seal); }
.doc-page p { margin: 3px 0; }
.doc-page .u { border-bottom: 1px solid var(--ink-light); padding: 0 4px; }

/* 预警卡 */
.alert-card { border-radius: var(--radius-lg); padding: 13px 15px; margin-bottom: 10px; background: #fff; }
.alert-high { border: 1px solid #E4B7B4; border-left: 4px solid var(--red-seal); }
.alert-mid { border: 1px solid var(--border-wash); border-left: 4px solid var(--gold); }
.alert-card .a-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.alert-card .a-time { margin-left: auto; font-size: 11px; color: var(--ink-muted); font-weight: 400; }
.alert-card .a-desc { font-size: 12px; color: var(--ink-light); margin-top: 5px; }

table.tb { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
table.tb th { text-align: left; padding: 9px 10px; color: var(--ink-muted); font-weight: 500;
  border-bottom: 1px solid var(--border-wash); }
table.tb td { padding: 9px 10px; border-bottom: 1px solid var(--border-wash); }
table.tb tr:last-child td { border-bottom: none; }

/* 简条形图 */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 6px 4px 0; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars .bar i { width: 70%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #D4766F, var(--red-seal)); display: block; }
.bars .bar span { font-size: 10px; color: var(--ink-muted); }

/* ---------- 呼吸深度阶梯（单选） ---------- */
.breath-ladder { margin-top: 12px; }
.breath-step { display: flex; align-items: center; gap: 0; cursor: pointer; }
.breath-step .node { display: flex; flex-direction: column; align-items: center; width: 26px; flex: none; }
.breath-step .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-wash);
  background: #fff; z-index: 1; }
.breath-step .line { width: 2px; height: 16px; background: var(--border-wash); }
.breath-step:last-child .line { display: none; }
.breath-step .lbl { flex: 1; padding: 10px 13px; margin: 3px 0; border-radius: var(--radius-lg);
  border: 1px solid var(--border-wash); background: #fff; font-size: 13px; color: var(--ink-light);
  display: flex; align-items: center; gap: 8px; }
.breath-step.on .dot { border-color: var(--red-seal); background: var(--red-seal); box-shadow: 0 0 0 3px var(--red-wash); }
.breath-step.on .lbl { border-color: var(--red-seal); background: var(--red-wash); color: var(--ink); font-weight: 600; }
.breath-step.on .lbl::before { content: "✓"; color: var(--red-seal); font-weight: 700; }
.breath-step .ref { margin-left: auto; font-size: 10px; color: var(--green-bamboo); font-weight: 600; }
.breath-step .ref-ideal { margin-left: auto; font-size: 10px; color: var(--gold); font-weight: 600; }

/* 开关 */
.switch-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; }
.switch { width: 42px; height: 24px; border-radius: 12px; background: var(--border-wash); position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-soft); }
.switch.on { background: var(--red-seal); }
.switch.on::after { left: 21px; }

/* 步骤条（问诊单） */
.stepper { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }
.stepper .st-item { flex: 1; text-align: center; font-size: 11px; color: var(--ink-muted); }
.stepper .st-item .cir { width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 4px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: #fff; border: 1px solid var(--border-wash); color: var(--ink-muted); }
.stepper .st-item.on .cir { background: var(--red-seal); border-color: var(--red-seal); color: #fff; font-weight: 700; }
.stepper .st-item.done .cir { background: var(--green-bamboo); border-color: var(--green-bamboo); color: #fff; }
.stepper .st-item.on { color: var(--ink); font-weight: 600; }

.form-field { margin-bottom: 12px; }
.form-field .fl { font-size: 12px; color: var(--ink-light); margin-bottom: 5px; display: block; }
.fi { width: 100%; min-width: 0; padding: 11px 13px; border-radius: var(--radius-md);
  border: 1px solid var(--border-wash); background: var(--paper); font-size: 14px; color: var(--ink); }
.photo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.photo-cell { aspect-ratio: 1; border-radius: var(--radius-md); border: 1px dashed var(--border-wash);
  background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 20px; color: var(--ink-muted); }
.photo-cell span { font-size: 9px; margin-top: 3px; }
.photo-cell.has { border-style: solid; border-color: var(--green-bamboo); background: var(--green-wash); color: var(--green-bamboo); }
.photo-cell.has { position: relative; padding: 0; overflow: hidden; cursor: zoom-in; display: block; }
.photo-cell.has img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.photo-cell .pg-tag { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0;
  font-size: 9px; line-height: 1.7; background: rgba(0, 0, 0, .45); color: #fff; text-align: center; }

/* ---------- 医师端/后台 手机与 Pad 适配 ---------- */
@media (max-width: 768px) {
  .wide { max-width: 100%; }
  .page-body.wide-pad { padding: 12px 16px 32px; }
  .wide-cols { flex-direction: column; }
  .wide-nav { width: 100%; border-right: none; border-bottom: 1px solid var(--border-wash);
    display: flex; overflow-x: auto; padding: 8px 10px; gap: 4px; background: #fff; }
  .wide-nav .nv { flex: none; padding: 8px 13px; border-radius: var(--radius-full);
    border: 1px solid var(--border-wash); white-space: nowrap; }
  .wide-nav .nv.on { border-color: var(--red-seal); border-right: 1px solid var(--red-seal); }
  .wide-nav .nv .lock { margin-left: 4px; }
  .wide-main { padding: 14px 0 40px; }
  .kv { grid-template-columns: 1fr 1fr; }
  .kv.kv-1m { grid-template-columns: 1fr; }
  .grid2, .grid-fu { grid-template-columns: 1fr; }
  .map-row { flex-wrap: wrap; }
  .reason-input { width: 100%; }
  .emr-ptable { display: none; }
  .emr-pcards { display: block; }
  .emr-np-form .form-field { flex: 1 1 140px; }
  .emr-np-form .form-field .fi { width: 100% !important; }
  .emr-np-form .btn { flex: 1 1 100%; }
  .doc-page { padding: 18px 16px; }
  .wide-topbar { padding: 10px 78px 10px 12px; gap: 8px; margin: -12px -16px 12px; }
  .wide-topbar.flush { margin-bottom: 0; }
  #mod-form-wrap { margin: 0 -16px; }
  .vas-bar .lbl { width: 100px; }
  .form-sec h4 .note { flex: 1 1 100%; }
  /* iOS 日期框：去掉原生外观（高度/字号与其他输入框不一致且固有最宽会挤破布局），点按仍弹原生选择器 */
  input[type="date"].fi { -webkit-appearance: none; appearance: none; }
}

/* ---------- 开始站桩入口卡（站桩页） ---------- */
.practice-entry { margin-top: 12px; padding: 18px 16px 16px; text-align: center;
  background: linear-gradient(180deg, #F7F1E5, #F1E9DA); }
.practice-entry .acc { display: flex; justify-content: center; gap: 18px; font-size: 12px; color: var(--ink-light); }
.practice-entry .acc b { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.practice-entry .goal { margin: 12px auto 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-light); background: #fff; border: 1px solid var(--border-wash);
  padding: 5px 14px; border-radius: 999px; }
.practice-entry .goal b { color: var(--red-seal); }
.big-start { width: 128px; height: 128px; border-radius: 50%; margin: 16px auto 8px;
  background: radial-gradient(circle at 32% 28%, #D4766F, var(--red-seal) 62%, #9E4440);
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(184,84,80,0.38); text-decoration: none; }
.big-start .bs-ico { font-size: 30px; }
.big-start .bs-ico img { width: 38px; height: 38px; display: block; filter: brightness(0) invert(1); }
.big-start .bs-txt { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 2px; margin-top: 2px; }
.practice-entry .side-opts { display: flex; justify-content: center; gap: 26px; margin-top: 8px; }
.practice-entry .side-opts a { font-size: 12px; color: var(--ink-light); text-decoration: none; }

/* ---------- 站桩进行时（沉浸暗色） ---------- */
/* 计时页无输入框：整页禁选中，避免 iOS 长按弹出拷贝菜单 */
.zen, .zen * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.zen { max-width: 400px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; color: #EDE6D8;
  background: linear-gradient(180deg, #24201B, #2F2921 55%, #262119);
  display: flex; flex-direction: column; padding: 18px 20px 30px; position: relative; }
.zen .zen-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #A79C8B; }
.zen .zen-top .keep { display: flex; align-items: center; gap: 4px; }
.zen .zen-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; }
.breath-ring { width: 230px; height: 230px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center; }
.breath-ring::before, .breath-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(212,118,111,0.45); animation: breathe 8s ease-in-out infinite; }
.breath-ring::after { animation-delay: 4s; border-color: rgba(237,230,216,0.25); }
@keyframes breathe { 0%,100% { transform: scale(0.86); opacity: .35; } 50% { transform: scale(1.08); opacity: .9; } }
.zen .timer { font-family: var(--serif); font-size: 58px; font-weight: 700; letter-spacing: 2px; color: #F5EFE2; }
.zen .timer-sub { font-size: 12px; color: #A79C8B; margin-top: 10px; }
.zen .timer-sub b { color: #D4766F; font-weight: 600; }
.zen .goal-bar { width: 200px; height: 4px; border-radius: 2px; background: rgba(237,230,216,0.15); margin-top: 16px; }
.zen .goal-bar i { display: block; height: 100%; width: 72%; border-radius: 2px;
  background: linear-gradient(90deg, #D4766F, #E8B48A); }
.zen .media-card { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(237,230,216,0.14);
  border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.zen .media-card .m-title { font-size: 13px; color: #EDE6D8; }
.zen .media-card .m-sub { font-size: 11px; color: #A79C8B; margin-top: 1px; }
.zen .media-card .m-btn { margin-left: auto; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(212,118,111,0.9); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.zen .media-chips { display: flex; gap: 8px; margin-top: 10px; justify-content: center; }
.zen .media-chips span { font-size: 11px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(237,230,216,0.2); color: #A79C8B; }
.zen .media-chips span.on { background: rgba(212,118,111,0.18); border-color: rgba(212,118,111,0.6); color: #E8B48A; }
.zen .zen-controls { display: flex; align-items: center; justify-content: center; gap: 42px; margin-top: 26px; }
.zen .ctrl-small { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(237,230,216,0.25);
  color: #EDE6D8; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.zen .ctrl-end { width: 84px; height: 84px; border-radius: 50%; background: #D4766F; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; box-shadow: 0 8px 26px rgba(212,118,111,0.45); }
.zen .ctrl-end b { font-family: var(--serif); font-size: 15px; }
.zen .ctrl-hint { text-align: center; font-size: 10px; color: #8D8375; margin-top: 10px; }

/* 继续上次练习 弹层（站桩计时页）：宣纸卡 + 朱砂主按钮，必须二选一，点背板不关闭 */
.zen-mask { position: fixed; inset: 0; background: rgba(20, 17, 13, 0.72); z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 28px; }
.zen-modal { width: 100%; max-width: 320px; background: var(--paper); color: var(--ink);
  border-radius: var(--radius-2xl); padding: 24px 20px 20px; text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.zen-modal .zm-title { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.zen-modal .zm-hint { font-size: 12px; color: var(--ink-light); margin-top: 6px; }
.zen-modal .zm-btn { display: block; width: 100%; margin-top: 14px; padding: 12px;
  border-radius: var(--radius-lg); border: 1px solid var(--border-wash);
  background: transparent; color: var(--ink-light); font-size: 15px;
  font-family: var(--serif); font-weight: 700; cursor: pointer; }
.zen-modal .zm-btn.zm-primary { background: var(--red-seal); border-color: var(--red-seal);
  color: #fff; box-shadow: 0 8px 22px rgba(184, 84, 80, 0.35); }
.zen-modal .zm-btn:disabled { opacity: 0.55; }
.zen-modal .zm-sub { font-size: 11px; color: var(--ink-muted); margin-top: 5px; }

/* 打卡记录页：刚保存的记录朱砂描边高亮 */
.ckr-card.ckr-just { border-color: var(--red-seal);
  box-shadow: 0 0 0 3px var(--red-wash), var(--shadow-soft); }

/* 完成页 */
.done-hero { text-align: center; padding: 34px 20px 8px; }
.done-hero .t1 { font-size: 14px; color: var(--ink-light); }
.done-hero .t2 { font-family: var(--serif); font-size: 52px; font-weight: 700; color: var(--red-seal); line-height: 1.2; }
.done-hero .t2 span { font-size: 18px; color: var(--ink-light); }
.done-stats { display: flex; justify-content: space-around; text-align: center; margin: 18px 0 4px; }
.done-stats .n { font-family: var(--serif); font-size: 19px; font-weight: 700; }
.done-stats .l { font-size: 10px; color: var(--ink-muted); margin-top: 2px; }

/* ============================================================
   暗色模式变体（沿用全站 data-theme 机制，02 文档 §3/§4）
   白底卡片 → #26241F，边框 → #3A362F，品牌红不变
   ============================================================ */
[data-theme="dark"] {
  --paper: #1C1C1E;
  --paper-warm: #26241F;
  --ink: #E8E4DC;
  --ink-light: #B8B2A8;
  --ink-muted: #8A8478;
  --red-wash: rgba(184, 84, 80, 0.18);
  --green-wash: rgba(74, 124, 89, 0.22);
  --gold-wash: rgba(185, 143, 62, 0.20);
  --border-wash: #3A362F;
  --shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
[data-theme="dark"] .phone { background: var(--paper); }
[data-theme="dark"] .card,
[data-theme="dark"] .list-item,
[data-theme="dark"] .menu-list,
[data-theme="dark"] .opt-card,
[data-theme="dark"] .chip,
[data-theme="dark"] .form-sec,
[data-theme="dark"] .doc-page,
[data-theme="dark"] .alert-card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .article-card,
[data-theme="dark"] .quote-card,
[data-theme="dark"] table.tb,
[data-theme="dark"] .tabbar,
[data-theme="dark"] .wide-topbar,
[data-theme="dark"] .app-header .hicon,
[data-theme="dark"] .quick-grid .qi,
[data-theme="dark"] .cat-bar .cat,
[data-theme="dark"] .practice-entry .goal,
[data-theme="dark"] .breath-step .lbl,
[data-theme="dark"] .stepper .st-item .cir,
[data-theme="dark"] .breath-step .dot,
[data-theme="dark"] .pill-line,
[data-theme="dark"] .btn-ghost { background: #26241F; border-color: #3A362F; color: var(--ink); }
[data-theme="dark"] .chip { color: var(--ink-light); }
[data-theme="dark"] .chip.on { background: var(--ink); color: #1C1C1E; border-color: var(--ink); }
[data-theme="dark"] .btn-ink { background: #E8E4DC; color: #1C1C1E; }
[data-theme="dark"] .cat-bar .cat.on { background: var(--ink); color: #1C1C1E; border-color: var(--ink); }
/* 占位封面/缩略框：模板带浅色内联渐变，暗色下统一压深（需 !important 盖内联） */
[data-theme="dark"] .article-card .cover,
[data-theme="dark"] .course-card .cthumb,
[data-theme="dark"] .list-item .thumb { background: #26241F !important; }
[data-theme="dark"] .chip.on-red { background: rgba(184, 84, 80, 0.35); color: #E89A94; border-color: var(--red-seal); }
[data-theme="dark"] .opt-card.on { background: var(--red-wash); border-color: var(--red-seal); }
[data-theme="dark"] .opt-card.on .radio { box-shadow: inset 0 0 0 3px #26241F; }
[data-theme="dark"] .breath-step.on .lbl { background: rgba(184, 84, 80, 0.35); border-color: var(--red-seal); color: var(--ink); }
[data-theme="dark"] .tabbar a { color: var(--ink-muted); }
[data-theme="dark"] .tabbar a.on { color: var(--ink); }
[data-theme="dark"] .menu-list a { color: var(--ink); border-bottom-color: #3A362F; }
[data-theme="dark"] .list-item .st,
[data-theme="dark"] .note { color: var(--ink-muted); }
[data-theme="dark"] .app-header { background: linear-gradient(180deg, #26241F, #1C1C1E); }
[data-theme="dark"] .app-header .avatar,
[data-theme="dark"] .pf-avatar { background: #3A352C; border-color: #3A362F; }
[data-theme="dark"] .profile-head { background: linear-gradient(180deg, #26241F, #1C1C1E); }
[data-theme="dark"] .wide-nav { background: #221F1A; border-right-color: #3A362F; }
[data-theme="dark"] #mod-form-wrap { background: #26241F; border-bottom-color: #3A362F; }
[data-theme="dark"] .wide-nav .nv { color: var(--ink-light); }
[data-theme="dark"] .wide-nav .nv.on { color: var(--ink); }
[data-theme="dark"] .fi { background: #1C1C1E; border-color: #3A362F; color: var(--ink); }
[data-theme="dark"] .photo-cell { background: #1C1C1E; border-color: #3A362F; }
[data-theme="dark"] .photo-cell.has { background: var(--green-wash); border-color: var(--green-bamboo); }
[data-theme="dark"] .tag { background: #26241F; border-color: #3A362F; color: var(--ink-light); }
[data-theme="dark"] .badge-item.locked .b { background: #26241F; border-color: #3A362F; }
[data-theme="dark"] .mark-x { background: #26241F; border-color: #3A362F; }
[data-theme="dark"] .kv .v { color: var(--ink-light); }
[data-theme="dark"] .kv .k { color: var(--ink-muted); }
[data-theme="dark"] .map-row { border-bottom-color: #3A362F; }
[data-theme="dark"] table.tb th { color: var(--ink-muted); border-bottom-color: #3A362F; }
[data-theme="dark"] table.tb td { border-bottom-color: #3A362F; }
[data-theme="dark"] .doc-page .u { border-bottom-color: var(--ink-light); }
[data-theme="dark"] .alert-high { border-color: #5A3A38; border-left-color: var(--red-seal); }
[data-theme="dark"] .alert-mid { border-color: #3A362F; border-left-color: var(--gold); }
[data-theme="dark"] .vas-track { background: #3A362F; }
[data-theme="dark"] .slider .track { background: #3A362F; }
[data-theme="dark"] .slider .knob { background: #26241F; }
[data-theme="dark"] .switch::after { background: #B8B2A8; }
[data-theme="dark"] .practice-entry { background: linear-gradient(180deg, #2A2620, #241F19); }
[data-theme="dark"] .dots i { background: #4A443A; }
/* 暗色：仅站桩带练熊猫图标（#33312E 墨线 SVG，深色底上不可读）滤成朱砂红 #B85450；
   其他快捷图标自带配色，保持原样（2026-09-16 老板定） */
[data-theme="dark"] .quick-grid .qi img[src*="qi-practice"] {
  filter: brightness(0) saturate(100%) invert(34%) sepia(95%) saturate(233%) hue-rotate(313deg) brightness(105%) contrast(131%);
}
@media (max-width: 768px) {
  [data-theme="dark"] .wide-nav { background: #26241F; border-bottom-color: #3A362F; }
}

/* ---------- 问诊单填写页大字版（患者端 ×1.3，2026-10-10） ----------
   只挂在患者问诊/复诊流程模板的 .consult-lg 外层容器上生效；
   .fi/.chip/.note/.form-field/.kv 基类被医师端共用，绝不在基类上改值 */
.consult-lg { font-size: 18px; }
.consult-lg .fi { font-size: 18px; }
.consult-lg .chips { gap: 10px; }
.consult-lg .chip { font-size: 17px; padding: 9px 17px; }
.consult-lg .form-field .fl { font-size: 15px; }
.consult-lg .note { font-size: 14px; }
.consult-lg .stepper .st-item { font-size: 14px; }
.consult-lg .stepper .st-item .cir { width: 32px; height: 32px; font-size: 15px; }
.consult-lg .btn { font-size: 17px; }
.consult-lg .btn-block { font-size: 19px; padding: 14px; }
.consult-lg .photo-cell span, .consult-lg .photo-cell .pg-tag { font-size: 12px; }
.consult-lg .kv { font-size: 15px; }