/* pages.css — 各页面特有的少量样式，后续轮次逐轮追加 */

/* ============================================================
   R04 · 用药记录（record-med.html）
   ============================================================ */

/* 容器：让 JS 塞进来的汇总条与药品卡匀速排布 */
.med-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---------- 日期切换条 ---------- */
.datebar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1);
  background-color: var(--color-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--color-card-line);
}

.datebar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--r-btn);
  color: var(--color-heading);
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.datebar__btn:active {
  background-color: var(--color-bg-muted);
  transform: scale(0.97);
}

.datebar__mid {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.datebar__day {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
  transition: opacity var(--dur-tap) var(--ease-out);
}

a.datebar__day:active {
  opacity: 0.6;
}

.datebar__sub {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

/* ---------- 当天概况 ---------- */
.med-sum {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--color-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--color-card-line);
}

.med-sum__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--sp-6);
  height: var(--sp-6);
}

.med-sum__main {
  flex: 1;
  min-width: 0;
}

.med-sum__title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.med-sum__desc {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

/* ---------- 药品卡 ---------- */
.med-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.med-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.med-card__name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
  word-break: break-word;
}

.med-card__dose {
  flex: none;
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.med-card__slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.med-card__foot {
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.med-card__foot.is-done {
  color: var(--color-primary-strong);
}

.med-card__foot.is-skip {
  color: var(--color-danger);
}

/* ---------- 时点圆按钮：三种外观 ---------- */
.slot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0;
  border: 1px solid var(--color-divider);
  border-radius: 100%;
  background-color: var(--color-bg-card);
  color: var(--color-text-sub);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.slot:active {
  background-color: var(--color-bg-muted);
  transform: scale(0.97);
}

.slot__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot__time {
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

/* 已打卡：实心勾 */
.slot.is-taken {
  border-color: var(--color-primary-strong);
  color: var(--color-heading);
}

.slot.is-taken .slot__time {
  font-weight: 600;
}

/* 漏服：斜线小圈 */
.slot.is-skip {
  border-color: var(--color-danger);
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
}

.part-skip__ring,
.part-skip__slash {
  stroke: currentColor;
}

/* ============================================================
   R04 · 用药计划（record-med-plan.html）
   ============================================================ */

.plan-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* 底部固定条要给内容区让出高度，别被自己的按钮盖住 */
body[data-page="record-med-plan"] .app-main {
  padding-bottom: calc(
    var(--tabbar-h) + env(safe-area-inset-bottom) + var(--touch-min) + var(--sp-6) + var(--sp-5)
  );
}

.page-fab {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-4));
  left: var(--sp-4);
  z-index: 30;
}

/* ---------- 计划列表行 ---------- */
.plan-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background-color: var(--color-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--color-card-line);
}

.plan-row__main {
  flex: 1;
  min-width: 0;
}

.plan-row__name {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
  word-break: break-word;
}

.plan-row__dose {
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.plan-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.plan-row__ops {
  display: flex;
  flex: none;
  gap: var(--sp-1);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--r-btn);
  color: var(--color-text-sub);
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.icon-btn:active {
  background-color: var(--color-bg-muted);
  transform: scale(0.97);
}

.icon-btn--danger {
  color: var(--color-danger);
}

/* ============================================================
   两个用药页共用的表单件
   ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.field__label {
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.field__input {
  width: 100%;
  min-height: var(--touch-min);
  padding: 0 var(--sp-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-btn);
  background-color: var(--color-bg-card);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
  transition: border-color var(--dur-tap) var(--ease-out);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

textarea.field__input {
  min-height: calc(var(--touch-min) * 2);
  padding: var(--sp-2) var(--sp-3);
  resize: none;
}

.field__hint {
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* 步进器 */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-btn);
  color: var(--color-primary-strong);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.stepper__btn:active {
  background-color: var(--color-primary-soft);
  transform: scale(0.97);
}

.stepper__val {
  min-width: var(--sp-6);
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--color-heading);
}

.stepper__unit {
  font-size: var(--fs-sub);
  color: var(--color-text-sub);
}

/* 时点输入：两列 */
.times {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}

/* 表单里的具体原因提示 */
.form-err {
  display: none;
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-danger);
}

.form-err.is-on {
  display: block;
}

.form-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.form-actions .btn {
  flex: 1;
}

/* 骨架占位：不用转圈，灰块 */
.skeleton {
  background-color: var(--color-bg-muted);
  border-radius: var(--r-card);
}

.skeleton--bar {
  height: var(--touch-min);
}

.skeleton--card {
  height: calc(var(--touch-min) * 2);
}

/* ============================================================
   R05 · 情绪记录（record-emotion.html）
   ============================================================ */

/* 底部固定按钮要给内容区让出高度 */
body[data-page="record-emotion"] .app-main {
  padding-bottom: calc(
    var(--tabbar-h) + env(safe-area-inset-bottom) + var(--touch-min) + var(--sp-6) + var(--sp-5)
  );
}

/* ---------- 日历卡 ---------- */
.emo-cal {
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
}

/* 日期数字 + 表情正好一格，不留空 */
.emo-cal .cal__cell {
  min-height: var(--sp-6);
}

.skeleton--cal {
  height: calc(var(--touch-min) * 6);
}

/* 月份级空态：贴在日历下方，不另起一张卡片 */
.emo-month-empty {
  padding: var(--sp-5) var(--sp-2) var(--sp-2);
}

/* ---------- 当天列表 ---------- */
.emo-listwrap.is-hidden {
  display: none;
}

.emo-day {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-1);
}

.emo-day__title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.emo-day__count {
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.emo-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.emo-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-1) var(--sp-3) var(--sp-4);
  background-color: var(--color-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--color-card-line);
}

.emo-row__face {
  display: flex;
  flex: none;
  padding-top: var(--sp-1);
  color: var(--color-heading);
}

.emo-row__main {
  flex: 1;
  min-width: 0;
}

.emo-row__top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.emo-row__time {
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
}

.emo-row__name {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.emo-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.emo-tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-4);
  padding: 0 var(--sp-2);
  border-radius: var(--r-tag);
  background-color: var(--color-bg-muted);
  color: var(--color-text-main);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
}

.emo-row__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
  word-break: break-word;
}

.emo-row__del {
  flex: none;
}

/* 当天没有记录：一行温和文案 + 文字按钮 */
.emo-day-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--color-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--color-card-line);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0 var(--sp-2);
  border-radius: var(--r-btn);
  color: var(--color-primary-strong);
  font-size: var(--fs-sub);
  font-weight: 500;
  transition: background-color var(--dur-tap) var(--ease-out);
}

.link-btn:active {
  background-color: var(--color-primary-soft);
}

/* ============================================================
   R05 · 「记一次」弹层
   ============================================================ */

.mood-sheet__date {
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.mood-faces {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-1);
}

.mood-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: calc(var(--touch-min) + var(--sp-5));
  padding: var(--sp-1) 0;
  border: 1px solid var(--color-divider);
  border-radius: var(--r-btn);
  background-color: var(--color-bg-card);
  color: var(--color-text-sub);
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.mood-pick:active {
  transform: scale(0.97);
}

.mood-pick.st-selected {
  background-color: var(--color-primary);
  border-color: var(--color-primary-strong);
  color: var(--color-text-invert);
}

/* 轮次 5：选中格是深绿底，猫脸圆底要翻成白的，否则黑猫压在深绿上看不清 */
.mood-pick.st-selected .part-face {
  background-color: var(--color-bg-card);
}

.mood-pick__face {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mood-pick__name {
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
}

.mood-sheet__label {
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.mood-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tag-pill {
  min-height: var(--touch-min);
  padding: 0 var(--sp-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-tag);
  background-color: var(--color-bg-card);
  color: var(--color-text-main);
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out),
    color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.tag-pill:active {
  transform: scale(0.97);
}

/* 白字底用 primary-strong，小字才够 4.5:1 */
.tag-pill.st-selected {
  background-color: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
  color: var(--color-text-invert);
  font-weight: 500;
}

.mood-sheet__hint {
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* 未选心情时提示行为空，藏掉；此时「情绪类型」多加一档上间距，
   否则 12px 贴着猫脸太挤（父级是 * + * 的 margin，这条优先级更高能盖住） */
.mood-sheet__hint.is-empty {
  display: none;
}

.mood-sheet__hint.is-empty + .mood-sheet__label {
  margin-top: calc(var(--sp-3) + var(--sp-1));
}

.mood-sheet__hint.is-ok {
  color: var(--color-primary-strong);
}

.field__count {
  display: block;
  text-align: right;
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.field__count.is-max {
  color: var(--color-danger);
}

/* ============================================================
   R06 · 症状记录（record-symptom.html）
   ============================================================ */

/* 底部固定按钮要给内容区让出高度 */
body[data-page="record-symptom"] .app-main {
  padding-bottom: calc(
    var(--tabbar-h) + env(safe-area-inset-bottom) + var(--touch-min) + var(--sp-6) + var(--sp-5)
  );
}

/* ---------- 人体图卡 ---------- */
.sym-map-card {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.sym-map {
  display: flex;
  justify-content: center;
}

.sym-map .part-bodymap {
  max-width: calc(var(--sp-6) * 7);
}

.sym-map-hint {
  margin-top: var(--sp-2);
  text-align: center;
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.sym-map-hint.is-on {
  color: var(--color-primary-strong);
}

/* ---------- 当天记录列表 ---------- */
.sym-day {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-1);
}

.sym-day__title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.sym-day__count {
  flex: none;
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.sym-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sym-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-1) var(--sp-3) var(--sp-4);
  background-color: var(--color-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--color-card-line);
}

.sym-row__main {
  flex: 1;
  min-width: 0;
}

.sym-row__top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
}

.sym-row__part {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.sym-row__pain {
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
}

.sym-row__symptoms {
  margin-top: var(--sp-1);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
  word-break: break-word;
}

.sym-row__note {
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
  word-break: break-word;
}

.sym-row__pre {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.sym-row__face {
  display: flex;
  align-items: center;
  color: var(--color-heading);
}

.sym-row__prelabel {
  flex: none;
}

.sym-row__mood {
  color: var(--color-text-main);
}

.sym-row__del {
  flex: none;
}

/* ---------- 当天没有记录 ---------- */
.sym-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  background-color: var(--color-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--color-card-line);
  text-align: center;
}

.sym-empty__text {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* ============================================================
   R06 · 四步弹层
   ============================================================ */

.sym-steps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sym-steps__count {
  flex: none;
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-primary-strong);
  font-variant-numeric: tabular-nums;
}

.sym-steps__name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.sym-steps__bar {
  display: flex;
  flex: none;
  gap: var(--sp-1);
}

.sym-steps__seg {
  display: block;
  width: var(--sp-3);
  height: 2px;
  border-radius: var(--r-tag);
  background-color: var(--color-divider);
  transition: background-color var(--dur-page) var(--ease-out);
}

.sym-steps__seg.is-on {
  background-color: var(--color-primary-strong);
}

/* 只有当前步的块显示，其余保留在 DOM 里，切回去内容还在 */
.sym-step {
  display: none;
}

.sym-step.is-on {
  display: block;
}

.sym-step__q {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
  word-break: break-word;
}

.sym-step__hint {
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.sym-step .sym-map {
  margin-top: var(--sp-3);
}

.sym-step .mood-faces {
  margin-top: var(--sp-3);
}

.sym-step .field {
  margin-top: var(--sp-4);
}

/* 症状胶囊 */
.sym-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* 疼痛刻度：两行三列，每个都超过 44×44 */
.sym-pain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.sym-pain__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-btn);
  background-color: var(--color-bg-card);
  color: var(--color-text-main);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out),
    color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.sym-pain__btn:active {
  transform: scale(0.97);
}

.sym-pain__btn.st-selected {
  background-color: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
  color: var(--color-text-invert);
}

/* ---------- 弹层底部：原因 + 上一步 / 下一步 ---------- */
.sym-foot {
  margin-top: var(--sp-4);
}

.sym-foot__why {
  display: none;
  margin-bottom: var(--sp-2);
  text-align: center;
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.sym-foot__why.is-on {
  display: block;
}

.sym-foot__actions {
  display: flex;
  gap: var(--sp-3);
}

.sym-foot__actions .btn {
  flex: 1;
}

.sym-foot__prev.is-off {
  display: none;
}

.sym-foot .form-err {
  margin-top: var(--sp-2);
}

/* ============================================================
   R07 · 睡眠记录（record-sleep.html）
   ============================================================ */

/* 底部固定保存条要给内容区让出高度 */
body[data-page="record-sleep"] .app-main {
  padding-bottom: calc(
    var(--tabbar-h) + env(safe-area-inset-bottom) + var(--touch-min) + var(--sp-6) + var(--sp-5)
  );
}

/* 空容器不占位，避免 app-main 的兄弟间距漏出空白 */
#slp-error:empty,
#slp-hours-skel:empty {
  display: none;
}

/* 读取失败时收起表单 */
#slp-form.is-hidden {
  display: none;
}

/* ---------- 起床日说明卡 ---------- */
.slp-note {
  background-color: var(--color-primary-soft);
  border: 1px solid var(--color-divider);
  box-shadow: none;
}

.slp-note__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.slp-note__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
}

.slp-note__desc strong {
  font-weight: 600;
  color: var(--color-heading);
}

/* ---------- 时长卡：大字 + 滑条 + 加减 ---------- */
.slp-card .skeleton {
  margin-top: var(--sp-3);
}

.slp-hours {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}

.slp-hours__val {
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

.slp-hours__unit {
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.slp-ctrl {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.slp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-btn);
  background-color: var(--color-bg-card);
  color: var(--color-primary-strong);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.slp-btn:active {
  background-color: var(--color-primary-soft);
  transform: scale(0.97);
}

/* ---------- 滑条：Chrome / Firefox 各画一套 ---------- */
.slp-slider {
  flex: 1;
  min-width: 0;
  height: var(--touch-min);
  margin: 0;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.slp-slider::-webkit-slider-runnable-track {
  height: var(--sp-1);
  border-radius: var(--r-tag);
  background-color: var(--color-bg-muted);
}

.slp-slider::-webkit-slider-thumb {
  width: var(--sp-5);
  height: var(--sp-5);
  margin-top: calc((var(--sp-1) - var(--sp-5)) / 2);
  border: 2px solid var(--color-bg-card);
  border-radius: 100%;
  background-color: var(--color-primary-strong);
  -webkit-appearance: none;
}

.slp-slider::-moz-range-track {
  height: var(--sp-1);
  border-radius: var(--r-tag);
  background-color: var(--color-bg-muted);
}

.slp-slider::-moz-range-thumb {
  width: var(--sp-5);
  height: var(--sp-5);
  border: 2px solid var(--color-bg-card);
  border-radius: 100%;
  background-color: var(--color-primary-strong);
}

.slp-slider:focus {
  outline: none;
}

.slp-slider:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.slp-hint {
  margin-top: var(--sp-2);
  text-align: center;
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* ---------- 感受三选胶囊 ---------- */
.slp-feels {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.slp-feel {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0 var(--sp-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-tag);
  background-color: var(--color-bg-card);
  color: var(--color-text-main);
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out),
    color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.slp-feel:active {
  transform: scale(0.97);
}

/* 选中态白字底用 primary-strong，普通主色对比度不够 4.5:1 */
.slp-feel.st-selected {
  background-color: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
  color: var(--color-text-invert);
  font-weight: 500;
}

/* ============================================================
   R08 · 今日概览（index.html）
   ============================================================ */

.ov-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---------- 日期头：今天 + 星期 + 一句问候 ---------- */
.ov-hero {
  padding: var(--sp-2) var(--sp-1) 0;
}

.ov-hero__date {
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.ov-hero__greet {
  margin-top: var(--sp-1);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

/* ---------- 四张卡 ---------- */
.ov-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ov-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-card);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-card-line);
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.ov-card:active {
  background-color: var(--color-bg-muted);
  transform: scale(0.97);
}

.ov-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--color-primary-soft);
  color: var(--color-heading);
}

.ov-card__main {
  flex: 1;
  min-width: 0;
}

.ov-card__title {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.ov-card__status {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

/* 右侧标记：三态里的环 / 勾由 Parts 出图，圆点与空心圆在这里上色 */
.ov-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--sp-6);
  height: var(--sp-6);
  color: var(--color-text-sub);
}

.ov-mark__dot {
  fill: var(--color-primary);
}

.ov-mark__hollow {
  stroke: currentColor;
}

/* ---------- 全空引导块 ---------- */
.ov-guide {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-card);
  background-color: var(--color-primary-soft);
  color: var(--color-heading);
  transition: filter var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.ov-guide:active {
  filter: brightness(0.96);
  transform: scale(0.97);
}

.ov-guide__main {
  flex: 1;
  min-width: 0;
}

.ov-guide__title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.ov-guide__sub {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--color-text-main);
}

.ov-guide__arrow {
  flex: none;
}

/* ---------- 底部提示条：浅绿底，不用红色，可关闭 ---------- */
.ov-tip {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: var(--r-card);
  background-color: var(--color-primary-soft);
  color: var(--color-heading);
  transition: opacity var(--dur-tap) var(--ease-out);
}

.ov-tip.is-out {
  opacity: 0;
}

.ov-tip__link {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  padding-right: calc(var(--touch-min) + var(--sp-2));
  border-radius: var(--r-card);
  transition: transform var(--dur-tap) var(--ease-out);
}

.ov-tip__link:active {
  transform: scale(0.97);
}

.ov-tip__main {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.ov-tip__sub {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-main);
}

.ov-tip__close {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--r-btn);
  color: var(--color-heading);
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.ov-tip__close:active {
  background-color: var(--color-bg-card);
  transform: scale(0.97);
}

.ov-tip__x {
  width: var(--fs-h1);
  height: var(--fs-h1);
}

/* ============================================================
   R09 · 报告页图表底座（report-med.html / report-emotion.html）
   ============================================================ */

/* ---------- R12 · 报告分类导航：用药 / 情绪 / 症状 / 睡眠 / 总报告 ---------- */
/* 通栏吸在标题栏下方：负 margin 吃掉 .app-main 的上/左右内边距，
   自身再补回左右内边距，滚动时整条不透明，不会漏出底下的卡片。
   z-index 必须低于 .app-header(20)，两者才不打架。 */
.rep-tabs {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  z-index: 15;
  display: flex;
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0;
  padding: 0 var(--sp-4);
  background-color: var(--color-bg-page);
  border-bottom: 1px solid var(--color-divider);
}

/* 文字 tab + 下划线。刻意不做成胶囊：下面的「本周/本月」已经是胶囊，
   两级控件长得一样会分不清哪层在切什么。 */
.rep-tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--touch-min);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
  transition: color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.rep-tab::after {
  content: "";
  position: absolute;
  left: var(--sp-2);
  right: var(--sp-2);
  bottom: 0;
  height: 2px;
  border-radius: var(--r-tag);
  background-color: transparent;
  transition: background-color var(--dur-tap) var(--ease-out);
}

.rep-tab:active {
  color: var(--color-primary-strong);
  transform: scale(0.97);
}

/* 当前页：文字加深加粗 + 下划线，白字底一律用 primary-strong */
.rep-tab.is-active {
  color: var(--color-primary-strong);
  font-weight: 600;
}

.rep-tab.is-active::after {
  background-color: var(--color-primary-strong);
}

/* ---------- 周期切换：‹ [本周|本月] › ---------- */
/* 两侧箭头 + 中间两段按钮，单行排布；箭头固定 touch-min，窄屏也不挤 */
.period-nav {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
}

.period-nav__btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  min-height: var(--touch-min);
  border-radius: var(--r-card);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-secondary);
  color: var(--color-heading);
  font-size: var(--fs-h1);
  line-height: 1;
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
  padding-bottom: var(--sp-1);
}

/* 箭头是「‹ ›」字形，基线偏下，抬一点才视觉居中 */
.period-nav__btn:active {
  background-color: var(--color-primary-soft);
  transform: scale(0.97);
}

.period-bar {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background-color: var(--color-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--color-card-line);
}

.period-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  border-radius: var(--r-btn);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
  transition: background-color var(--dur-tap) var(--ease-out),
    color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.period-btn:active {
  transform: scale(0.97);
}

/* 白字底用 primary-strong，小字才够 4.5:1 */
.period-btn.is-active {
  background-color: var(--color-primary-strong);
  color: var(--color-text-invert);
  font-weight: 600;
}

/* 区间文字 */
.rep-hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* 切换栏下方的正文容器：卡片之间统一呼吸位 */
#rp-body > * + * {
  margin-top: var(--sp-4);
}

#rp-body:empty {
  display: none;
}

/* ---------- 图表容器 ---------- */
/* 固定高度 + 宽度撑满，ECharts 自己按容器重算，不产生横向滚动 */
.chart-canvas {
  width: 100%;
  height: calc(var(--sp-6) * 5);
  margin-top: var(--sp-3);
}

.chart-canvas--rank {
  height: calc(var(--sp-6) * 4);
}

/* 用药页：多了总体依从率主线，图给高一点，避免几条线挤在一起 */
.chart-canvas--tall {
  height: calc(var(--sp-6) * 6);
}

/* vendor 缺失时的兜底提示 */
.chart-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--sp-3);
  border-radius: var(--r-cell);
  background-color: var(--color-bg-muted);
  color: var(--color-text-sub);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  text-align: center;
}

/* ---------- 手动图例 ---------- */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--color-text-main);
}

.chart-legend__dot {
  flex: none;
  width: var(--sp-2);
  height: var(--sp-2);
  border-radius: var(--r-tag);
}

/* 主线（总体依从率）：短横条 + 虚线底纹，和折线上的虚线样式对得上 */
.chart-legend__bar {
  flex: none;
  width: var(--sp-5);
  height: var(--sp-1);
  border-radius: var(--r-tag);
}

/* 只有总依从率这条用虚线纹：横向 1px 实线 / 3px 空隙交替 */
.chart-legend__dash {
  flex: none;
  width: var(--sp-5);
  height: var(--sp-1);
  border-radius: var(--r-tag);
  background-image: repeating-linear-gradient(
    to right,
    currentColor 0,
    currentColor var(--sp-1),
    transparent var(--sp-1),
    transparent calc(var(--sp-1) * 2)
  );
}

.chart-legend__item--main .chart-legend__name {
  font-weight: 600;
  color: var(--color-heading);
}

.chart-legend__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(var(--sp-6) * 3);
}

/* 图表口径说明：陈述事实，不含评价 */
.chart-cap {
  margin-top: var(--sp-3);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* ---------- 统计卡（用药页三张） ---------- */
.rep-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.rep-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: var(--r-cell);
  background-color: var(--color-bg-muted);
}

.rep-stat__label {
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.rep-stat__val {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.rep-stat__note {
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* ---------- 峰谷双卡（情绪页） ---------- */
.rep-peaks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

.rep-peak {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background-color: var(--color-bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--color-card-line);
  border-left: 2px solid var(--color-accent);
}

/* 最高峰走主绿、最低谷走暖金，两张卡一眼能分 */
.rep-peak--high {
  border-left-color: var(--color-primary);
}

.rep-peak--low {
  border-left-color: var(--color-accent);
}

.rep-peak__label {
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.rep-peak__val {
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.rep-peak__date {
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.rep-peak__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.rep-tag-none {
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* ---------- 骨架屏补充形状 ---------- */
.skeleton--chart {
  height: calc(var(--sp-6) * 5);
}

.skeleton--cards {
  height: calc(var(--touch-min) * 2 + var(--sp-4));
}

/* 窄屏：三列统计卡挤不下时改成两列，峰谷双卡保持并排 */
@media (max-width: 360px) {
  .rep-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .rep-peaks {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   R10 · 症状 / 睡眠 / 总数据
   ============================================================ */

/* 四格统计：症状页与睡眠页都用，两列两行，375px 下不挤 */
.rep-stats--four {
  grid-template-columns: repeat(2, 1fr);
}

/* 图表下的明细行：疼痛排行、情绪占比、睡眠感受占比 */
.sym-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}

.sym-detail__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
}

.sym-detail__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sym-detail__name {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 600;
  color: var(--color-heading);
}

.sym-detail__val {
  flex: none;
  min-width: 0;
  text-align: right;
  color: var(--color-text-sub);
}

/* 明细里的表情：只在图下出现，尺寸跟着小字走 */
.sym-detail__face {
  display: inline-flex;
  color: var(--color-text-sub);
}

.sym-detail__face svg {
  width: var(--fs-h2);
  height: var(--fs-h2);
}

/* ---------- 疼痛最剧烈：DOM 横条 ---------- */
/* 不用画布：右侧「8 分 · 2 次」在窄屏会被画布边界裁掉，DOM 里永远不会 */
.pain-rank {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-3);
}

.pain-rank__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "name track val"
    "sub  sub   sub";
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-divider);
}

.pain-rank__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pain-rank__name {
  grid-area: name;
  font-weight: 600;
  color: var(--color-heading);
}

/* 轨道 + 填充：条长 = 最高分 ÷ 10 */
.pain-rank__track {
  grid-area: track;
  height: var(--sp-2);
  border-radius: var(--r-tag);
  background-color: var(--color-bg-muted);
  overflow: hidden;
}

.pain-rank__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-tag);
  background-color: var(--color-primary);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.pain-rank__val {
  grid-area: val;
  font-size: var(--fs-sub);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-main);
}

.pain-rank__sub {
  grid-area: sub;
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

/* ---------- 症状日历（周历 7 格 / 月历 6×7） ---------- */
.sym-cal {
  margin-top: var(--sp-3);
}

.sym-cal__head,
.sym-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
}

.sym-cal__head {
  margin-bottom: var(--sp-1);
}

.sym-cal__wd {
  text-align: center;
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

/* 只读格子：36px 高，月历整块 ≈230px，比一张图还矮 */
.sym-cal__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  height: calc(var(--sp-6) + var(--sp-1));
  border-radius: var(--r-tag);
  background-color: var(--color-bg-muted);
  color: var(--color-text-main);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* 周历一天一格，可以给高一点 */
.sym-cal--week .sym-cal__cell {
  height: var(--touch-min);
}

.sym-cal__d {
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.sym-cal__n {
  font-size: var(--fs-tiny);
  font-weight: 600;
  line-height: var(--lh-tight);
}

/* 次数深浅：1 浅 / 2 中 / 3 及以上最深。
 * 最深那档用 primary-strong 打底 + 反白字，小字才够 4.5:1。 */
.sym-cal__cell.is-l1 {
  background-color: var(--color-primary-soft);
}

.sym-cal__cell.is-l2 {
  background-color: var(--color-secondary);
}

.sym-cal__cell.is-l3 {
  background-color: var(--color-primary-strong);
  color: var(--color-text-invert);
}

/* 非本月 / 还没到的日子：透明底、灰字，不显示次数 */
.sym-cal__cell.is-out,
.sym-cal__cell.is-future {
  background-color: transparent;
  color: var(--color-text-sub);
}

/* 今天：内描边（用 inset 阴影，不挤格子内宽） */
.sym-cal__cell.is-today {
  box-shadow: inset 0 0 0 2px var(--color-heading);
}

/* 深色格子上的今天改用暖金描边，不然看不清 */
.sym-cal__cell.is-l3.is-today {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

/* 打印转图用的 .print-chart-img 的默认隐藏写在 app.css 第 9 节，
 * 不能写在这里：本文件在 app.css 之后加载，同优先级会盖掉 @media print 里的 display:block。 */

/* ---------- 总数据：文字小结 ---------- */
.summary-lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-normal);
  color: var(--color-heading);
}

.summary-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.summary-text p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
}

.summary-text__k {
  font-weight: 600;
  color: var(--color-heading);
}

/* ---------- 总数据：指标表 ---------- */
.rep-table {
  width: 100%;
  margin-top: var(--sp-3);
  border-collapse: collapse;
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
}

.rep-table__caption {
  padding-bottom: var(--sp-2);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
  text-align: left;
}

.rep-table th,
.rep-table td {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  vertical-align: top;
}

.rep-table thead th {
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--color-text-sub);
}

.rep-table tbody th {
  font-weight: 600;
  color: var(--color-heading);
}

.rep-table td {
  color: var(--color-text-main);
}

.rep-table tbody tr:last-child th,
.rep-table tbody tr:last-child td {
  border-bottom: 0;
}

/* 数字列右对齐 + 等宽数字，小数点才对得齐 */
.rep-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 对比列用中性色：涨跌不染色，避免读成「好 / 坏」 */
.rep-table__delta {
  text-align: right;
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
}

/* ---------- 总数据：导出按钮区 ---------- */
.rep-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.rep-actions .btn svg {
  flex: none;
}

.rep-actions__note {
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
  text-align: center;
}

/* ============================================================
   R11 · 个人栏目（me.html / me-settings.html / me-feedback.html）
   ============================================================ */

/* 空容器不占位：提醒条 / 错误区没内容时不留出 .app-main 的间距 */
#set-warn:empty,
#set-error:empty,
#me-error:empty {
  display: none;
}

/* ---------- 15.1 个人页：头像区 ---------- */
.me-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.me-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--touch-min) + var(--sp-4));
  height: calc(var(--touch-min) + var(--sp-4));
  border-radius: 100%;
  background-color: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.me-hero__main {
  flex: 1;
  min-width: 0;
}

.me-hero__name {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
  word-break: break-word;
}

/* 头像右侧第二行：性别 · 疾病背景 */
.me-hero__meta {
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
  word-break: break-word;
}

/* 用 button 实现的入口行：撑满整行，文字左对齐 */
.me-link--btn {
  width: 100%;
  text-align: left;
  background-color: transparent;
}

/* ---------- 15.2 个人页：表单 ---------- */
.me-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.me-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.me-pill {
  min-height: var(--touch-min);
  padding: 0 var(--sp-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-btn);
  background-color: var(--color-bg-card);
  color: var(--color-text-main);
  font-size: var(--fs-body);
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.me-pill:active {
  transform: scale(0.97);
}

.me-pill.is-on {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  font-weight: 600;
}

/* 只存在本机 / 仅自己可见的说明条 */
.me-priv {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-tag);
  background-color: var(--color-bg-muted);
  color: var(--color-text-sub);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
}

.me-priv svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-primary-strong);
}

/* ---------- 15.3 个人页：统计行 ---------- */
.me-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.me-stat {
  padding: var(--sp-3);
  border-radius: var(--r-tag);
  background-color: var(--color-bg-muted);
  text-align: center;
}

.me-stat__val {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

.me-stat__label {
  margin-top: var(--sp-1);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* ---------- 15.4 个人页：入口列表 ---------- */
.me-links {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-2);
}

.me-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch-min);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-divider);
  transition: transform var(--dur-tap) var(--ease-out);
}

.me-link:last-child {
  border-bottom: none;
}

.me-link:active {
  transform: scale(0.97);
}

.me-link__icon {
  flex: none;
  color: var(--color-primary-strong);
}

.me-link__main {
  flex: 1;
  min-width: 0;
}

.me-link__label {
  display: block;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--color-text-main);
}

.me-link__desc {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.me-link__arrow {
  flex: none;
  color: var(--color-text-sub);
}

/* ---------- 15.5 个人页：页脚免责声明 ---------- */
.me-foot {
  padding-top: var(--sp-4);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
  text-align: center;
}

/* ---------- 15.6 设置页：分组与主题色卡 ---------- */
.set-hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.theme-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.theme-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-btn);
  background-color: var(--color-bg-card);
  transition: border-color var(--dur-tap) var(--ease-out),
    background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.theme-opt:active {
  transform: scale(0.97);
}

.theme-opt.is-on {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

.theme-chip {
  width: 100%;
  height: var(--sp-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-tag);
}

/* 色卡必须同时显示三种主题，靠当前主题的变量做不到，
 * 所以这三条用的是与 app.css 两个主题覆盖块完全相同的色值。 */
.theme-chip.is-matcha {
  background-color: #DCEBDF;
  border-color: #6E9C7C;
}

.theme-chip.is-warm {
  background-color: #EFE3CE;
  border-color: #A08D6B;
}

.theme-chip.is-plain {
  background-color: #EDEFEE;
  border-color: #7C8A82;
}

.theme-opt__name {
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--color-text-main);
}

.theme-opt.is-on .theme-opt__name {
  color: var(--color-primary-strong);
  font-weight: 600;
}

/* ---------- 15.7 设置页：周起始日分段 ---------- */
.set-seg {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.set-seg__btn {
  flex: 1;
  min-height: var(--touch-min);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-btn);
  background-color: var(--color-bg-card);
  color: var(--color-text-main);
  font-size: var(--fs-body);
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.set-seg__btn:active {
  transform: scale(0.97);
}

.set-seg__btn.is-on {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  font-weight: 600;
}

/* ---------- 15.8 设置页：备份三件套 ---------- */
.bk-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-2);
}

.bk-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

.bk-row:last-child {
  border-bottom: none;
}

.bk-row__main {
  flex: 1;
  min-width: 0;
}

.bk-row__title {
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--color-text-main);
}

.bk-row__desc {
  margin-top: var(--sp-1);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.bk-row__btn {
  flex: none;
  min-height: var(--touch-min);
  padding: 0 var(--sp-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-btn);
  background-color: var(--color-bg-card);
  color: var(--color-primary-strong);
  font-size: var(--fs-sub);
  font-weight: 500;
  transition: background-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.bk-row__btn:active {
  background-color: var(--color-primary-soft);
  transform: scale(0.97);
}

.bk-row__btn.is-danger {
  border-color: var(--color-danger);
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
}

.bk-row__btn.is-busy {
  opacity: 0.45;
  pointer-events: none;
}

/* 备份提醒条 */
.bk-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-tag);
  background-color: var(--color-primary-soft);
  color: var(--color-heading);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
}

.bk-warn__text {
  flex: 1;
  min-width: 0;
}

.bk-warn__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* R12：热区补到 44，图标本身仍是 20，靠负 margin 不把提醒条撑高 */
  width: var(--touch-min);
  height: var(--touch-min);
  margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0;
  border-radius: var(--r-tag);
  color: var(--color-heading);
  transition: background-color var(--dur-tap) var(--ease-out);
}

.bk-warn__close:active {
  background-color: var(--color-bg-card);
}

.bk-meta {
  margin-top: var(--sp-2);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* 导入方式选择 */
.imp-file {
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
  word-break: break-all;
}

.imp-choice {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.imp-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch-min);
  padding: var(--sp-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--r-btn);
  background-color: var(--color-bg-card);
  text-align: left;
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out);
}

.imp-opt:active {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.imp-opt__main {
  flex: 1;
  min-width: 0;
}

.imp-opt__title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.imp-opt__desc {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.set-ver {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

/* ---------- 15.9 联系我们页 ---------- */
.fb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.fb-pill {
  min-height: var(--touch-min);
  padding: 0 var(--sp-4);
  border: 1px solid var(--color-divider);
  border-radius: 100%;
  background-color: var(--color-bg-card);
  color: var(--color-text-main);
  font-size: var(--fs-sub);
  transition: background-color var(--dur-tap) var(--ease-out),
    border-color var(--dur-tap) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.fb-pill:active {
  transform: scale(0.97);
}

.fb-pill.is-on {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  font-weight: 600;
}

.fb-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-tag);
  background-color: var(--color-bg-muted);
  color: var(--color-text-sub);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
}

.fb-note svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-primary-strong);
}

.fb-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-2);
}

.fb-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

.fb-item:last-child {
  border-bottom: none;
}

.fb-item__main {
  flex: 1;
  min-width: 0;
}

.fb-item__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.fb-item__type {
  padding: 0 var(--sp-2);
  border-radius: var(--r-tag);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.fb-item__text {
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
  white-space: pre-wrap;
  word-break: break-word;
}

.fb-item__contact {
  margin-top: var(--sp-1);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
  word-break: break-all;
}

/* ===== 报告入口页（轮次 2 新增） ===== */
.rep-lead {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.rep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.rep-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92px;
  padding: var(--sp-4);
  border: 1px solid var(--color-card-line);
  border-radius: 20px;
  background-color: var(--color-bg-card);
  text-decoration: none;
  transition: background-color var(--dur-tap) var(--ease-out);
}

.rep-cell:active {
  background-color: var(--color-bg-muted);
}

.rep-cell__icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: var(--sp-2);
  color: var(--color-primary);
}

.rep-cell__icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.rep-cell__title {
  font-size: var(--fs-h2);
  color: var(--color-text-main);
}

.rep-cell__desc {
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  color: var(--color-text-sub);
}

.rep-block {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--color-card-line);
  border-radius: 20px;
  background-color: var(--color-bg-card);
  text-decoration: none;
}

.rep-block__icon {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.rep-block__icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.rep-block__body {
  flex: 1;
  min-width: 0;
}

.rep-block__title {
  display: block;
  font-size: var(--fs-h2);
  color: var(--color-text-main);
}

.rep-block__desc {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
}

.rep-block__arrow {
  flex: none;
  font-size: var(--fs-h1);
  color: var(--color-secondary);
}

/* ---------- 顶部装饰：一条横线 + 一只猫 ---------- */

.cat-line {
  position: relative;
  height: 0;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-4);
  border-top: 1.5px solid var(--color-cat-line);
}

.cat-line__cat {
  position: absolute;
  right: var(--sp-4);
  bottom: 0;
  display: block;
  width: auto;
  height: 58px;
  pointer-events: none;
}

/* 报告页用小一号 */
.cat-line--sm .cat-line__cat {
  height: 44px;
}

/* ---------- 首页卡片图标：换成猫图片 ---------- */

.ov-card__icon img {
  display: block;
  width: auto;
  height: 26px;
}

/* ============================================================
   R13 · 症状页：两对并排卡 + 页尾两格统计
   ------------------------------------------------------------
   四张并排卡共用一套 .sym-bar 行结构：
     上行  名称（左）· 数值（右）
     下行  细柱
   名称不再塞进柱子里（半屏 133px 内放不下白字），改为独占一行。
   半屏宽下 ECharts 横向柱的类目轴放不下，所以这一段全是纯 DOM，
   ECharts 只留在上面的散点图。
   ============================================================ */

/* 两列容器：375px 屏下可用宽 = 375 − 16×2 = 343，减去 12 的 gap 每列 165.5，
   足够放「名称 + 数值」两格。只有 320 这种极窄屏才退回单列。 */
.sym-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.sym-pair__card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
}

.sym-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* 每行等分剩余高度：部位只有 4 个（五行只剩四行）时，
   四行会均匀撑开，与右边五行的卡底部齐平，不留大块空白 */
.sym-pair__card > .sym-bar {
  flex: 1;
}

.sym-bar__row {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  border-radius: var(--r-tag);
}

/* 可点的行：点击热区上下各补 4px，不把行本身撑高 */
.sym-bar__row.is-openable {
  cursor: pointer;
  padding: var(--sp-1) 0;
}

/* 名称行 */
.sym-bar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
}

.sym-bar__name {
  min-width: 0;
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--color-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 展开时名称转主色 + 加粗；左侧 2px 竖线由 ::before 画在整行的顶部，
   从名称一路贯到柱子，作为「当前看的是这一行」的提示 */
.sym-bar__row.is-openable {
  position: relative;
}

.sym-bar__row.is-open::before {
  content: "";
  position: absolute;
  top: var(--sp-1);
  bottom: var(--sp-1);
  left: 0;
  width: 2px;
  border-radius: 1px;
  background-color: var(--color-primary);
}

.sym-bar__row.is-open {
  padding-left: var(--sp-2);
}

.sym-bar__row.is-open .sym-bar__name {
  font-weight: 600;
  color: var(--color-heading);
}

.sym-bar__val {
  flex: none;
  font-size: var(--fs-tiny);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  color: var(--color-text-sub);
}

.sym-bar__row.is-open .sym-bar__val {
  color: var(--color-primary-strong);
  font-weight: 600;
}

/* 轨道 + 填充：条长按 pct 走，最小 4px 宽保证 0 值也看得见柱头 */
.sym-bar__track {
  display: block;
  height: var(--sp-2);
  border-radius: var(--r-tag);
  background-color: var(--color-bg-muted);
  overflow: hidden;
}

.sym-bar__fill {
  display: block;
  min-width: var(--sp-1);
  height: 100%;
  border-radius: var(--r-tag);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* 展开后的说明：默认不占位，点开才出现 */
.sym-bar__note {
  display: none;
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--color-text-sub);
  word-break: break-word;
}

.sym-bar__row.is-open .sym-bar__note {
  display: block;
}

/* 页尾统计卡：与用药页同构（白卡 + 浅绿格），只留两格 */
.rep-stats--two {
  grid-template-columns: repeat(2, 1fr);
}

/* 情绪页统计格：「8 / 30 天」这种长数字在 1fr 三列里会被折成两行。
   给横向最小宽度 96px，装不下就靠 overflow-x 横向滚动，
   而不是让数字折行把字号视觉上压小（舍曲林页那 0.1px 的越界同理被这只手接住）。 */
.rep-stats--scroll {
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  overflow-x: auto;
  scrollbar-width: none;
}

.rep-stats--scroll::-webkit-scrollbar {
  display: none;
}

/* 格内数字不换行：宁可整格横向滚动，也不把「8 / 30 天」切成两行 */
.rep-stats--scroll .rep-stat__val {
  white-space: nowrap;
}

/* 0 条的那一档：整行压淡，让「没有」和「有但少」一眼分开 */
.sym-bar__row.is-zero .sym-bar__name,
.sym-bar__row.is-zero .sym-bar__val {
  color: var(--color-text-sub);
  opacity: 0.55;
}

.sym-bar__row.is-zero .sym-bar__track {
  background-color: var(--color-divider);
}

/* 极窄屏（<340）：单列堆叠，165px 以下是名称被截成省略号的临界点 */
@media (max-width: 340px) {
  .sym-pair {
    grid-template-columns: 1fr;
  }
}

/* 打印：并排卡保持两列（纸比手机宽），展开的说明一并印出。
   放在最后，覆盖上面窄屏断点带来的单列。
   注意：本轮之前症状页本来就是 7 张整行卡上纸，现在两对并排会挤成半宽，
   所以除了强制两列，还要把并排卡还原成整行，保证纸上仍是竖排单栏。 */
@media print {
  .sym-pair {
    display: block;
  }

  .sym-pair__card {
    padding: var(--sp-3);
  }

  .sym-pair__card + .sym-pair__card {
    margin-top: var(--sp-3);
  }

  .sym-bar__row.is-open .sym-bar__note {
    display: block;
  }
}

/* ============================================================
   R14 · 联系我们（me-feedback.html）：改为跳转外部问卷
   ------------------------------------------------------------
   表单整块撤掉，只留一张引导卡 + 一个外链大按钮。
   卡片本身复用全局 .card，这里只补「圆形图标」和「引导语」两处。
   ============================================================ */

/* 卡片顶部的圆形图标：浅绿底 + 主色描边，尺寸与个人页头像一致 */
.fb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--touch-min) + var(--sp-4));
  height: calc(var(--touch-min) + var(--sp-4));
  margin: 0 auto;
  border-radius: 100%;
  background-color: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

/* 引导语：三段之间 8px。用正文色 #33413A 而不是 --color-text-sub，
   4 行正文才够 4.5:1 的对比度。p 的 margin 已在 app.css 全局归零。 */
.fb-lead {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text-main);
}

/* 末句连同 🌱 锁成一段不可断行的整体：不加的话，414 这种宽度下
   🌱 会被 CJK 换行规则甩到下一行，孤零零占一行。
   断行点因此落在逗号处，读起来也更自然。 */
.fb-tail {
  white-space: nowrap;
}

/* 打印时整行撤掉。app.css 里的 .no-print 是单类权重 (0,1,0)，会被后面
   pages.css 的 .form-actions 按顺序盖掉，所以这里用两类的
   .form-actions.no-print (0,2,0) 把它接住，靠权重而不是强制覆盖。 */
@media print {
  .form-actions.no-print {
    display: none;
  }
}