/* ==========================================================================
   screens.css — 各畫面專屬樣式（s-*）
   規則：顏色只使用 var(--token)；版面以容器查詢（@container view）為主，
   導覽層級的切換才使用 media（md 600、lg 1024、is-short）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   共用：清單列（量測、施打、身體感受）與 master-detail 占位
   -------------------------------------------------------------------------- */
.s-measure-row,
.s-inject-row,
.s-se-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  color: var(--text);
  text-align: left;
  text-decoration: none;
  position: relative;
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.s-measure-row__date,
.s-inject-row__date,
.s-se-row__date {
  font-size: var(--fs-footnote);
  line-height: 1.3;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  min-width: 5.5em;
}
.s-measure-row__main,
.s-inject-row__main,
.s-se-row__main { min-width: 0; }
.s-measure-row__weight {
  font-size: var(--fs-title2);
  line-height: 1.25;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.s-measure-row__sub,
.s-inject-row__sub {
  margin-top: 2px;
  font-size: var(--fs-footnote);
  line-height: 1.4;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.s-measure-row__delta,
.s-inject-row__side { justify-self: end; text-align: right; }
.s-se-dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: var(--sp-1); }
.s-se-dots > span { width: 6px; height: 6px; border-radius: 50%; background: var(--heat-2); }

.s-measure-row.is-selected,
.s-inject-row.is-selected,
.s-se-row.is-selected {
  background: var(--primary-tint);
  box-shadow: inset 3px 0 0 var(--primary);
}

/* master 內：緊湊版面 */
.l-split__master .s-measure-row,
.l-split__master .s-inject-row,
.l-split__master .s-se-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-input);
  box-shadow: none;
  background: transparent;
}
.l-split__master .s-measure-row__date,
.l-split__master .s-inject-row__date,
.l-split__master .s-se-row__date {
  grid-column: 1 / -1;
  min-width: 0;
  font-size: var(--fs-caption);
  line-height: 1.2;
}
.l-split__master .s-measure-row__weight { font-size: var(--fs-title3); line-height: 1.2; }
.l-split__master .s-measure-row__sub { font-size: var(--fs-caption); }
.l-split__master .s-measure-row.is-selected,
.l-split__master .s-inject-row.is-selected,
.l-split__master .s-se-row.is-selected { background: var(--primary-tint); }

.s-split-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 320px;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  color: var(--text-3);
}
.s-split-empty .c-illus { width: min(240px, 60%); margin: 0 auto; }
.s-split-empty img, .s-split-empty svg { max-width: 100%; height: auto; }
.s-split-empty__title { font-size: var(--fs-title3); line-height: 1.4; font-weight: 600; color: var(--text-2); }
.s-split-empty__text { font-size: var(--fs-callout); line-height: 1.5; max-width: 28ch; }

/* --------------------------------------------------------------------------
   首頁／今天
   -------------------------------------------------------------------------- */
.s-home-greet {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.s-home-greet__text { min-width: 0; }
.s-home-greet__hello {
  font-size: var(--fs-title1);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.s-home-greet__date {
  margin-top: 2px;
  font-size: var(--fs-footnote);
  line-height: 1.4;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.s-home-greet__tools { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* 卡片網格（home 與 today 共用） */
.s-home-grid,
.s-today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: stretch;
}
.s-home-grid > *,
.s-today-grid > * { min-width: 0; }

@container view (min-width: 640px) {
  .s-home-grid,
  .s-today-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "checkin   checkin"
      "hero      hero"
      "reminder  memo"
      "visit     review"
      "activity  nutrition"
      "glucose   streak"
      "bodyfat   visceral"
      "badges    badges"
      "questions nudge";
  }
}
@container view (min-width: 960px) {
  .s-home-grid,
  .s-today-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "checkin   checkin   checkin"
      "hero      hero      reminder"
      "memo      visit     review"
      "activity  nutrition glucose"
      "bodyfat   visceral  streak"
      "badges    badges    questions"
      "nudge     nudge     nudge";
  }
}
@container view (min-width: 640px) {
  :is(.s-home-grid, .s-today-grid) > :is([data-card="checkin"], .s-today-checkin) { grid-area: checkin; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="hero"], .s-home-hero) { grid-area: hero; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="reminder"], .s-home-next) { grid-area: reminder; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="memo"], .c-memo) { grid-area: memo; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="visitPrep"], .s-today-visitprep) { grid-area: visit; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="review"], .s-home-review) { grid-area: review; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="activity"], .s-home-activity) { grid-area: activity; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="nutrition"], .s-home-nutrition) { grid-area: nutrition; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="glucose"], .s-home-glucose) { grid-area: glucose; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="bodyFat"], .s-home-mini--bodyfat) { grid-area: bodyfat; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="visceral"], .s-home-mini--visceral) { grid-area: visceral; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="streak"], .s-home-streak) { grid-area: streak; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="badges"], .s-home-badges) { grid-area: badges; }
  :is(.s-home-grid, .s-today-grid) > :is([data-card="questions"], .s-home-questions) { grid-area: questions; }
  :is(.s-home-grid, .s-today-grid) > .s-home-pro-nudge { grid-area: nudge; }
}

/* Hero：體重 | 進度環，下方 3 格統計 */
.s-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "weight ring"
    "stats  stats"
    "note   note";
  align-items: center;
  gap: var(--sp-4);
}
.s-home-hero__weight { grid-area: weight; min-width: 0; }
.s-home-hero__label { font-size: var(--fs-footnote); line-height: 1.4; color: var(--text-2); }
.s-home-hero__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-size: var(--fs-display);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.s-home-hero__unit { font-size: var(--fs-title3); line-height: 1.2; font-weight: 500; color: var(--text-2); }
.s-home-hero__date { margin-top: var(--sp-1); font-size: var(--fs-caption); line-height: 1.4; color: var(--text-3); }
.s-home-hero__ring {
  grid-area: ring;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  justify-self: end;
}
.s-home-hero__ring > * { max-width: 100%; max-height: 100%; }
.s-home-hero__ring svg { width: 100%; height: 100%; }
.s-home-hero .s-home-stats { grid-area: stats; }
.s-home-hero__note {
  grid-area: note;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-input);
  background: var(--warn-soft);
  color: var(--text-2);
  font-size: var(--fs-footnote);
  line-height: 1.6;
}
.s-home-hero.is-empty {
  display: block;
  text-align: center;
}
.s-home-hero.is-empty .c-illus { width: min(220px, 70%); margin: 0 auto var(--sp-3); }

.s-home-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--divider);
}
.s-home-stats__item { min-width: 0; text-align: center; }
.s-home-stats__label { font-size: var(--fs-caption); line-height: 1.3; letter-spacing: 0.02em; color: var(--text-3); }
.s-home-stats__value {
  margin-top: 2px;
  font-size: var(--fs-title3);
  line-height: 1.3;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* 矮螢幕：Hero 橫向排列 */
body.is-short .s-home-hero {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  grid-template-areas:
    "weight ring stats"
    "note   note note";
  gap: var(--sp-3) var(--sp-5);
}
body.is-short .s-home-hero__ring { width: 88px; height: 88px; }
body.is-short .s-home-hero .s-home-stats {
  padding-top: 0;
  border-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.is-short .s-home-greet { margin-bottom: var(--sp-2); }

/* 記錄提醒卡（原下次施打卡） */
.s-home-next {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid transparent;
}
.s-home-next__title { font-size: var(--fs-title3); line-height: 1.4; font-weight: 600; }
.s-home-next__meta { font-size: var(--fs-callout); line-height: 1.5; color: var(--text-2); }
.s-home-next__count {
  font-size: var(--fs-title2);
  line-height: 1.3;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.s-home-next__body { display: flex; align-items: center; gap: var(--sp-3); }
.s-home-next__map { flex: none; width: 56px; }
.s-home-next__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.s-home-next.is-today {
  background: var(--primary-tint);
  border-color: var(--primary-soft);
  color: var(--text);
}
.s-home-next.is-past,
.s-home-next.is-overdue {
  background: var(--surface);
  border-color: transparent;
  color: var(--text);
}
.s-home-next.is-done { background: var(--primary-soft); color: var(--text); }
.s-home-next.is-done .s-home-next__title { display: flex; align-items: center; gap: var(--sp-2); }
.s-home-next.is-done svg { color: var(--primary); }
.s-home-next__contact { padding-top: var(--sp-3); border-top: 1px solid var(--divider); font-size: var(--fs-footnote); line-height: 1.6; color: var(--text-2); }

/* 回診準備 */
.s-today-visitprep { display: flex; flex-direction: column; gap: var(--sp-3); }
.s-today-visitprep__stats { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.s-today-visitprep__stat { min-width: 0; }
.s-today-visitprep__num {
  font-size: var(--fs-title2);
  line-height: 1.2;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.s-today-visitprep__label { font-size: var(--fs-footnote); line-height: 1.4; color: var(--text-3); }
.s-today-visitprep__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }

/* 其他今天頁卡片（輕量版型） */
.s-today-checkin { display: flex; flex-direction: column; gap: var(--sp-3); }
.s-home-review,
.s-home-activity,
.s-home-questions,
.s-home-glucose { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-home-review__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.s-home-nutrition { display: flex; flex-direction: column; gap: var(--sp-3); }
.s-home-nutrition__quick { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 小卡（體脂、內臟脂肪） */
.s-home-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.s-home-mini__card,
.s-home-mini--bodyfat,
.s-home-mini--visceral {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.s-home-mini__label { font-size: var(--fs-footnote); line-height: 1.4; color: var(--text-2); }
.s-home-mini__value {
  font-size: var(--fs-title2);
  line-height: 1.25;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.s-home-mini__delta { font-size: var(--fs-footnote); line-height: 1.4; }
.s-home-mini__spark { margin-top: var(--sp-1); color: var(--chart-1); }
.s-home-mini__spark svg { display: block; width: 100%; height: 36px; }

/* 連續記錄 */
.s-home-streak { display: flex; flex-direction: column; gap: var(--sp-3); }
.s-home-streak__count {
  font-size: var(--fs-title3);
  line-height: 1.4;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.s-home-streak__dots { display: flex; flex-wrap: wrap; gap: 6px; }

/* 徽章列：橫向捲動、scroll-snap、隱藏捲軸 */
.s-home-badges {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sp-1);
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: var(--sp-1);
  -webkit-overflow-scrolling: touch;
}
.s-home-badges::-webkit-scrollbar { display: none; }
.s-home-badges > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Pro 推薦小卡 */
.s-home-pro-nudge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-card);
  background: var(--primary-tint);
  border: 1px solid var(--primary-soft);
  color: var(--text);
}
.s-home-pro-nudge__text { flex: 1; min-width: 0; font-size: var(--fs-callout); line-height: 1.5; color: var(--text-2); }
.s-home-pro-nudge__close { flex: none; }

/* 自訂版面編輯器（Pro） */
.s-home-layout-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
@container view (min-width: 640px) {
  .s-home-layout-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
}
.s-home-layout-editor__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
}
.s-home-layout-editor__item.is-off { background: var(--surface-2); color: var(--text-3); }
.s-home-layout-editor__item.is-dragging { opacity: 0.6; box-shadow: var(--shadow-2); }
.s-home-layout-editor__item.is-over { border-color: var(--primary); }
.s-home-layout-editor__handle { flex: none; color: var(--text-3); cursor: grab; touch-action: none; }
.s-home-layout-editor__label { flex: 1; min-width: 0; font-size: var(--fs-callout); line-height: 1.4; }
.s-home-layout-editor__btns { display: flex; gap: var(--sp-1); flex: none; }

/* --------------------------------------------------------------------------
   量測
   -------------------------------------------------------------------------- */
.s-measure-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-measure-month {
  position: sticky;
  top: calc(var(--topbar-h, 52px) + env(safe-area-inset-top, 0px));
  z-index: 2;
  margin: var(--sp-4) 0 var(--sp-2);
  padding: var(--sp-2) 0;
  background: var(--bg);
  font-size: var(--fs-footnote);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
}
.l-split__master .s-measure-month { top: 0; margin: var(--sp-2) 0 var(--sp-1); padding: var(--sp-1) var(--sp-3); }
.s-measure-form__device { display: flex; flex-direction: column; gap: var(--sp-3); }
.s-measure-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   施打（用藥記錄）
   -------------------------------------------------------------------------- */
.s-inject-body {
  max-width: 300px;
  margin-inline: auto;
}
.s-inject-body svg { display: block; width: 100%; height: auto; }
.s-inject-body__silhouette { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.s-inject-body__label { fill: var(--text-3); font-size: 10px; pointer-events: none; }
.s-inject-body__selected {
  margin-top: var(--sp-2);
  text-align: center;
  font-size: var(--fs-callout);
  line-height: 1.5;
  font-weight: 600;
  color: var(--primary);
}
.s-inject-body__hint { margin-top: var(--sp-1); text-align: center; font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-3); }
.s-inject-body__legend { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-caption); line-height: 1.4; color: var(--text-3); }

.s-inject-body .zone {
  fill: var(--surface-3);
  stroke: var(--text-3);
  stroke-opacity: 0.35;
  stroke-width: 1;
  cursor: pointer;
  transition: fill var(--dur-1) var(--ease), stroke var(--dur-1) var(--ease);
}
.s-inject-body .zone:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.s-inject-body .zone.is-suggested {
  fill: var(--primary-soft);
  stroke: var(--primary);
  stroke-opacity: 0.9;
  stroke-width: 2;
  animation: s-zone-pulse 1.8s var(--ease) infinite;
}
.s-inject-body .zone.is-recent {
  fill: url(#lw-hatch) var(--accent-soft);
  stroke: var(--accent-ink);
  stroke-opacity: 0.6;
  stroke-dasharray: 3 2;
}
.s-inject-body .zone.is-selected {
  fill: var(--primary);
  stroke: var(--primary-strong);
  stroke-opacity: 1;
  stroke-width: 2;
  stroke-dasharray: none;
  animation: none;
}
@keyframes s-zone-pulse {
  0%, 100% { stroke-opacity: 0.95; stroke-width: 2; }
  50% { stroke-opacity: 0.2; stroke-width: 6; }
}
@media (hover: hover) and (pointer: fine) {
  .s-inject-body .zone:hover { stroke: var(--primary); stroke-opacity: 1; stroke-width: 2; }
  .s-inject-body .zone.is-selected:hover { stroke: var(--primary-strong); }
}

/* 劑量歷程時間軸 */
.s-inject-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--sp-5); position: relative; }
.s-inject-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--divider);
}
.s-inject-timeline__item { position: relative; padding-bottom: var(--sp-4); font-size: var(--fs-callout); line-height: 1.5; }
.s-inject-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-5));
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--chart-marker);
}
.s-inject-timeline__item:last-child { padding-bottom: 0; }
.s-inject-timeline__meta { font-size: var(--fs-footnote); color: var(--text-3); }

.s-inject-overview { display: flex; flex-direction: column; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   身體感受（side-effects）
   -------------------------------------------------------------------------- */
.s-se-heat { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.s-se-heat__note { margin-top: var(--sp-2); font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-3); }
.s-se-heat__insight { margin-top: var(--sp-3); font-size: var(--fs-callout); line-height: 1.6; color: var(--text-2); }
.s-se-heat__detail { margin-top: var(--sp-2); min-height: 1.5em; font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* 看規律（選填）：details 收合 */
.s-se-pattern {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.s-se-pattern > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-title3);
  line-height: 1.4;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.s-se-pattern > summary::-webkit-details-marker { display: none; }
.s-se-pattern > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform var(--dur-2) var(--ease);
}
.s-se-pattern[open] > summary::after { transform: rotate(-135deg); }
.s-se-pattern > summary:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: var(--r-card); }
.s-se-pattern__body { padding: 0 var(--sp-5) var(--sp-5); }
@media (hover: hover) and (pointer: fine) {
  .s-se-pattern > summary:hover { background: var(--surface-2); }
}

/* 紅旗就醫提醒 */
.s-se-redflag {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-card);
  background: var(--danger-soft);
  color: var(--text);
  border: 1px solid var(--danger);
}
.s-se-redflag__icon { flex: none; color: var(--danger); }
.s-se-redflag__body { min-width: 0; }
.s-se-redflag__title { font-size: var(--fs-title3); line-height: 1.4; font-weight: 650; }
.s-se-redflag__text { margin-top: var(--sp-1); font-size: var(--fs-callout); line-height: 1.6; color: var(--text-2); }
.s-se-redflag__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.s-se-redflag__call {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border-radius: var(--r-btn);
  background: var(--danger);
  color: var(--surface);
  font-weight: 600;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   飲食與飲水
   -------------------------------------------------------------------------- */
.s-nut-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@container view (min-width: 560px) {
  .s-nut-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container view (min-width: 960px) {
  .s-nut-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.s-nut-protein { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.s-nut-protein__note { font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-3); }

.s-nut-water { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.s-nut-water__cup {
  position: relative;
  width: 96px;
  height: 120px;
  background: var(--surface-3);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}
.s-nut-water__fill {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--fill, 0) * 1%);
  max-height: 100%;
  background: var(--primary);
  opacity: 0.85;
  transition: height var(--dur-3) var(--ease);
}
.s-nut-water__fill::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--primary-strong);
  opacity: 0.35;
}
.s-nut-water__value { font-size: var(--fs-title2); line-height: 1.3; font-weight: 650; font-variant-numeric: tabular-nums; }
.s-nut-water__quick { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }

.s-nut-kcal { display: flex; flex-direction: column; gap: var(--sp-3); }

.s-nut-meals { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@container view (min-width: 640px) {
  .s-nut-meals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.s-nut-meal { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-nut-meal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.s-nut-meal__title { font-size: var(--fs-title3); line-height: 1.4; font-weight: 600; }
.s-nut-meal__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--divider);
  font-size: var(--fs-callout);
  line-height: 1.4;
}
.s-nut-meal__meta { font-size: var(--fs-footnote); color: var(--text-3); font-variant-numeric: tabular-nums; }
.s-nut-date { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* --------------------------------------------------------------------------
   趨勢
   -------------------------------------------------------------------------- */
.s-trends-metrics {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: var(--sp-1);
  -webkit-overflow-scrolling: touch;
}
.s-trends-metrics::-webkit-scrollbar { display: none; }
.s-trends-metrics > * { flex: none; }

.s-trends-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.s-trends-main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.s-trends-side { min-width: 0; }
.s-trends-chart { position: relative; min-height: 240px; }
.s-trends-chart .c-chart { cursor: default; }
.s-trends-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
@container view (min-width: 560px) {
  .s-trends-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.s-trends-summary__label { font-size: var(--fs-caption); line-height: 1.3; letter-spacing: 0.02em; color: var(--text-3); }
.s-trends-summary__value { margin-top: 2px; font-size: var(--fs-title3); line-height: 1.3; font-weight: 650; }
.s-trends-mini-table {
  max-height: 60dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.s-trends-gap {
  font-size: var(--fs-caption);
  line-height: 1.3;
  font-style: italic;
  color: var(--text-3);
  fill: var(--text-3);
}
.s-trends-note { font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-3); }

@media (min-width: 600px) {
  .s-trends-chart { min-height: 280px; }
}
@media (min-width: 1024px) {
  body:not(.is-short) .s-trends-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-6);
  }
  body:not(.is-short) .s-trends-chart { min-height: clamp(280px, 40vh, 420px); }
  body:not(.is-short) .s-trends-side { position: sticky; top: var(--sp-4); }
}

/* 週報表格 */
.s-table-wrap,
.s-table__scroll,
div.s-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.s-table,
.s-table table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-callout);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
table.s-table { background: var(--surface); }
.s-table th,
.s-table td {
  padding: 10px 12px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--divider);
}
.s-table thead th {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-footnote);
  font-weight: 600;
}
.s-table tbody th { font-weight: 600; color: var(--text); text-align: left; }
.s-table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  box-shadow: 1px 0 0 var(--divider);
}
.s-table thead tr > :first-child { background: var(--surface-2); z-index: 3; }
.s-table td.is-missing,
.s-table tr.is-missing td {
  font-style: italic;
  color: var(--text-3);
}
.s-table tr.is-missing > :first-child { font-style: normal; color: var(--text); }
.s-table td.is-up { color: var(--up); }
.s-table td.is-down { color: var(--down); }
.s-table td.is-flat { color: var(--flat); }
@media (min-width: 1024px) {
  body:not(.is-short) .s-table-wrap,
  body:not(.is-short) .s-table__scroll,
  body:not(.is-short) div.s-table {
    max-height: calc(100dvh - 200px);
    overflow: auto;
  }
  body:not(.is-short) .s-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  body:not(.is-short) .s-table thead tr > :first-child { z-index: 4; }
}

/* --------------------------------------------------------------------------
   照片
   -------------------------------------------------------------------------- */
.s-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(104px, 28vw, 180px), 1fr));
  gap: var(--sp-2);
}
.s-photos-grid__item {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  cursor: pointer;
}
.s-photos-grid__item img,
.s-photos-grid > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s-photos-grid__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-2);
  background: var(--surface);
  opacity: 0.9;
  color: var(--text);
  font-size: var(--fs-caption);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.s-photos-grid__item.is-selected { outline: 3px solid var(--primary); outline-offset: -3px; }
.s-photos-grid__item:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.s-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.s-compare__item { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.s-compare__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--surface-3);
}
.s-compare__caption { font-size: var(--fs-footnote); line-height: 1.4; color: var(--text-2); text-align: center; font-variant-numeric: tabular-nums; }
.s-compare__meta { display: flex; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-callout); line-height: 1.5; font-variant-numeric: tabular-nums; }

/* 滑桿覆蓋模式 */
.s-compare--slider {
  position: relative;
  display: block;
  max-width: 480px;
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface-3);
  --pos: 50%;
}
.s-compare--slider img,
.s-compare__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-compare__layer--top,
.s-compare--slider .s-compare__top {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.s-compare__layer--top img,
.s-compare--slider .s-compare__top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  pointer-events: none;
}
.s-compare__range {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-3);
  width: calc(100% - 2 * var(--sp-3));
  accent-color: var(--primary);
  cursor: ew-resize;
}
@media (min-width: 1024px) {
  body:not(.is-short) .s-compare { max-height: 72dvh; }
  body:not(.is-short) .s-compare__item img { max-height: 72dvh; width: auto; max-width: 100%; margin-inline: auto; }
  body:not(.is-short) .s-compare--slider { max-height: 72dvh; width: min(480px, calc(72dvh * 3 / 4)); }
}

/* --------------------------------------------------------------------------
   回診報告
   -------------------------------------------------------------------------- */
.s-report-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.s-report-settings { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.s-report-preview {
  min-width: 0;
  overflow-x: auto;
  container-type: inline-size;
  container-name: report;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-2);
}
@media (min-width: 1024px) {
  body:not(.is-short) .s-report-layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  body:not(.is-short) .s-report-settings { position: sticky; top: var(--sp-4); }
}
body.is-short .s-report-preview { display: none; }

.s-report-paper {
  --pp-bg: var(--paper-bg, white);
  --pp-text: var(--paper-text, rgb(24 61 53));
  --pp-text-2: var(--paper-text-2, rgb(82 100 92));
  --pp-accent: var(--paper-accent, rgb(37 107 87));
  --pp-border: color-mix(in srgb, var(--pp-text) 16%, var(--pp-bg));

  /* 紙張內一律使用紙張配色（深色模式下也維持白底） */
  --text: var(--pp-text);
  --text-2: var(--pp-text-2);
  --text-3: var(--pp-text-2);
  --surface: var(--pp-bg);
  --surface-2: color-mix(in srgb, var(--pp-text) 6%, var(--pp-bg));
  --surface-3: color-mix(in srgb, var(--pp-text) 10%, var(--pp-bg));
  --border: var(--pp-border);
  --divider: var(--pp-border);
  --primary: var(--pp-accent);
  --chart-1: var(--pp-accent);
  --chart-ma: var(--pp-accent);
  --chart-grid: color-mix(in srgb, var(--pp-text) 12%, var(--pp-bg));

  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 794px);
  aspect-ratio: 1 / 1.414;
  margin-inline: auto;
  padding: clamp(16px, 4cqi, 40px);
  background: var(--pp-bg);
  color: var(--pp-text);
  box-shadow: var(--shadow-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-footnote);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
@container report (max-width: 793px) {
  .s-report-paper { width: 794px; max-width: none; padding: 40px; font-size: 13px; }
}
.s-report-paper h1,
.s-report-paper h2,
.s-report-paper h3 { color: var(--pp-text); }
.s-report-paper__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 2px solid var(--pp-accent);
}
.s-report-paper__title { font-size: var(--fs-title2); line-height: 1.3; font-weight: 700; }
.s-report-paper__meta { font-size: var(--fs-caption); line-height: 1.5; color: var(--pp-text-2); text-align: right; }
.s-report-paper__footer {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--pp-border);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--pp-text-2);
}
.s-report-paper__watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(3rem, 14cqi, 7rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--pp-text);
  opacity: 0.07;
  transform: rotate(-24deg);
  pointer-events: none;
  user-select: none;
}
.s-report-paper table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.s-report-paper th,
.s-report-paper td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--pp-border); white-space: nowrap; }
.s-report-paper th:first-child,
.s-report-paper td:first-child { text-align: left; position: static; box-shadow: none; }
.s-report-paper td.is-missing { font-style: italic; color: var(--pp-text-2); }

/* A4 第一頁：頂部問題、中段時間軸、下段圖表與筆數 */
.s-report-card {
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--sp-4);
  min-height: 0;
}
.s-report-card__top { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-report-card__questions { margin: 0; padding-left: 1.4em; font-size: var(--fs-callout); line-height: 1.6; }
.s-report-card__timeline { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-2); }
.s-report-card__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(28px, 1fr);
  gap: 2px;
  border: 1px solid var(--pp-border);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
}
.s-report-card__week { min-width: 0; font-size: var(--fs-caption); line-height: 1.4; text-align: center; }
.s-report-card__week.is-missing { font-style: italic; color: var(--pp-text-2); }
.s-report-card__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.s-report-card__section-title { font-size: var(--fs-footnote); line-height: 1.4; font-weight: 700; color: var(--pp-accent); letter-spacing: 0.02em; }

/* 附頁 */
.s-report-annex {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 2px dashed var(--pp-border, var(--border));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  break-before: page;
  page-break-before: always;
}
.s-report-annex__title { font-size: var(--fs-title3); line-height: 1.4; font-weight: 700; }

/* --------------------------------------------------------------------------
   匯入精靈
   -------------------------------------------------------------------------- */
.s-import-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.s-import-map__list { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.s-import-map__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--divider);
}
.s-import-map__header { font-size: var(--fs-callout); line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.s-import-preview { min-width: 0; overflow: auto; max-height: 60dvh; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-1); }
.s-import-errors { max-height: 40dvh; overflow: auto; }
@media (min-width: 1024px) {
  body:not(.is-short) .s-import-map { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); gap: var(--sp-6); align-items: start; }
}

/* --------------------------------------------------------------------------
   設定
   -------------------------------------------------------------------------- */
.s-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.s-settings-index { display: none; }
.s-settings-content { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.s-settings-section { scroll-margin-top: calc(var(--topbar-h, 52px) + var(--sp-4)); }
.s-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--divider);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.s-settings-row:first-child { border-top: 0; }
.s-settings-row__hint { font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-3); }
.s-settings-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 1024px) {
  body:not(.is-short) .s-settings-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  body:not(.is-short) .s-settings-index {
    display: block;
    position: sticky;
    top: calc(var(--topbar-h, 52px) + var(--sp-4));
    margin: 0;
    padding: 0;
    list-style: none;
  }
  body:not(.is-short) .s-settings-index a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: var(--fs-callout);
    text-decoration: none;
  }
  body:not(.is-short) .s-settings-index a.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body:not(.is-short) .s-settings-index a:hover { background: var(--surface-2); }
}

/* --------------------------------------------------------------------------
   引導
   -------------------------------------------------------------------------- */
.s-onb {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
}
.s-onb__main,
.s-onb__card { display: contents; }
.s-onb__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) var(--page-x) var(--sp-3);
}
.s-onb__dots { display: flex; align-items: center; gap: 6px; }
.s-onb__dots > span,
.s-onb__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-chip);
  background: var(--surface-3);
  transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.s-onb__dots > .is-done,
.s-onb__dot.is-done { background: var(--primary-soft); }
.s-onb__dots > .is-active,
.s-onb__dot.is-active { width: 24px; background: var(--primary); }
.s-onb__skip { min-height: var(--tap); padding: 0 var(--sp-2); color: var(--text-2); font-size: var(--fs-callout); }
.s-onb__aside,
.s-onb__illus {
  display: grid;
  place-items: center;
  padding: var(--sp-2) var(--page-x);
}
.s-onb__aside .c-illus,
.s-onb__illus .c-illus { width: min(240px, 60vw); margin: 0 auto; }
.s-onb__aside img, .s-onb__aside svg,
.s-onb__illus img, .s-onb__illus svg { display: block; max-width: 100%; height: auto; }
.s-onb__brand { display: none; }
.s-onb__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--page-x) var(--sp-6);
  overflow-y: auto;
}
.s-onb__title { font-size: var(--fs-title1); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.s-onb__sub { font-size: var(--fs-body); line-height: 1.6; color: var(--text-2); }
.s-onb__disclaimer {
  max-height: 40dvh;
  overflow-y: auto;
  padding: var(--sp-4);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-callout);
  line-height: 1.7;
  color: var(--text-2);
}
.s-onb__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.s-onb__option {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 2px solid var(--border);
  text-align: left;
  cursor: pointer;
}
.s-onb__option.is-selected { border-color: var(--primary); background: var(--primary-tint); }
.s-onb__summary { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-onb__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--page-x) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--divider);
}

/* 引導完成：示範與開始兩張大卡 */
.s-onb-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.s-onb-choice__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sp-2);
  min-height: 140px;
  padding: var(--sp-5);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-1);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.s-onb-choice__card.is-primary { background: var(--primary-tint); border-color: var(--primary); }
.s-onb-choice__icon { color: var(--primary); }
.s-onb-choice__title { font-size: var(--fs-title3); line-height: 1.4; font-weight: 650; }
.s-onb-choice__text { font-size: var(--fs-callout); line-height: 1.5; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .s-onb-choice__card:hover { border-color: var(--primary); box-shadow: var(--shadow-2); }
}

/* md：置中卡片 */
@media (min-width: 600px) {
  .s-onb {
    width: min(560px, 100%);
    min-height: min(760px, calc(100dvh - 2 * var(--sp-8)));
    margin: var(--sp-8) auto;
    background: var(--surface);
    border-radius: var(--r-sheet);
    box-shadow: var(--shadow-2);
    overflow: hidden;
  }
  .s-onb__footer { background: var(--surface); }
  .s-onb__aside .c-illus,
  .s-onb__illus .c-illus { width: min(280px, 50%); }
}
/* lg：左右對半，左為插畫（純色），右為步驟表單 */
@media (min-width: 1024px) {
  body:not(.is-short) .s-onb {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
  }
  body:not(.is-short) .s-onb__aside,
  body:not(.is-short) .s-onb__illus {
    grid-column: 1;
    grid-row: 1 / -1;
    padding: var(--sp-10);
    background: var(--primary-tint);
  }
  body:not(.is-short) .s-onb__aside .c-illus,
  body:not(.is-short) .s-onb__illus .c-illus { width: min(420px, 80%); }
  body:not(.is-short) .s-onb__top { grid-column: 2; grid-row: 1; padding-inline: var(--sp-10); }
  body:not(.is-short) .s-onb__body {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    padding-inline: var(--sp-10);
    box-sizing: content-box;
  }
  body:not(.is-short) .s-onb__footer {
    grid-column: 2;
    grid-row: 3;
    background: var(--bg);
    padding-inline: var(--sp-10);
  }
}
/* 手機橫式：隱藏插畫，表單分兩欄 */
body.is-short .s-onb {
  display: flex;
  width: 100%;
  min-height: 100dvh;
  height: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
}
body.is-short .s-onb__aside,
body.is-short .s-onb__illus { display: none; }
body.is-short .s-onb__top { padding-block: var(--sp-2); }
body.is-short .s-onb__footer { background: var(--bg); padding-block: var(--sp-2); flex-direction: row; }
body.is-short .s-onb__footer > * { flex: 1; }
body.is-short .s-onb__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-2);
}
body.is-short .s-onb__body > :is(.s-onb__title, .s-onb__sub, .s-onb__disclaimer) { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   鎖定畫面
   -------------------------------------------------------------------------- */
.s-lock {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sp-6) + env(safe-area-inset-top, 0px)) var(--sp-6) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  background: var(--grad-hero);
  color: var(--text);
  overflow-y: auto;
}
.s-lock[hidden] { display: none; }
.s-lock__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 400px;
}
.s-lock__brand { display: grid; place-items: center; width: 96px; height: 96px; color: var(--primary); }
.s-lock__brand .c-illus { width: 100%; }
.s-lock__brand img, .s-lock__brand svg { display: block; max-width: 100%; height: auto; }
.s-lock__title { font-size: var(--fs-title3); line-height: 1.4; font-weight: 600; text-align: center; }
.s-lock__msg { min-height: 1.5em; font-size: var(--fs-callout); line-height: 1.5; color: var(--text-2); text-align: center; }
.s-lock__msg.is-error { color: var(--up); }
.s-lock__dots { display: flex; gap: var(--sp-4); padding: var(--sp-2) 0; }
.s-lock__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: transparent;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease-spring);
}
.s-lock__dot.is-filled { background: var(--primary); transform: scale(1.1); }
.s-lock__dots.is-error .s-lock__dot { border-color: var(--up); }
.s-lock__dots.is-shake { animation: s-lock-shake 360ms var(--ease); }
@keyframes s-lock-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
.s-lock__keys {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  justify-content: center;
  gap: var(--sp-4);
}
.s-lock__key {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--text);
  font-size: var(--fs-title2);
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.s-lock__key:active { transform: scale(0.94); background: var(--primary-soft); }
.s-lock__key--blank { visibility: hidden; box-shadow: none; }
.s-lock__key--del { background: transparent; box-shadow: none; color: var(--text-2); }
.s-lock__key:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.s-lock__forgot { min-height: var(--tap); padding: 0 var(--sp-3); color: var(--text-2); font-size: var(--fs-callout); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .s-lock__key:hover { background: var(--primary-soft); }
}
/* md 以上：置中 400px 面板 */
@media (min-width: 600px) {
  .s-lock__panel {
    padding: var(--sp-8);
    border-radius: var(--r-sheet);
    background: var(--surface-2);
    box-shadow: var(--shadow-2);
    border: 1px solid var(--border);
  }
}
/* 手機橫式：兩欄，左為品牌與 PIN 點，右為鍵盤 */
body.is-short .s-lock { padding: var(--sp-3) var(--sp-6); }
body.is-short .s-lock__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-flow: row;
  align-items: center;
  justify-items: center;
  column-gap: var(--sp-8);
  row-gap: var(--sp-2);
  max-width: 720px;
  padding: var(--sp-3) var(--sp-6);
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.is-short .s-lock__panel > * { grid-column: 1; }
body.is-short .s-lock__panel > .s-lock__keys { grid-column: 2; grid-row: 1 / span 6; grid-template-columns: repeat(3, 56px); gap: var(--sp-3); }
body.is-short .s-lock__key { width: 56px; height: 56px; font-size: var(--fs-title3); }
body.is-short .s-lock__brand { width: 56px; height: 56px; background: var(--primary-tint); border-radius: 50%; }

/* --------------------------------------------------------------------------
   付費牆 #/pro
   -------------------------------------------------------------------------- */
.s-pro { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 880px; margin-inline: auto; }
.s-pro__head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
.s-pro__head .c-illus { width: min(320px, 80%); margin: 0 auto; }
.s-pro__title { font-size: var(--fs-title1); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.s-pro__sub { font-size: var(--fs-body); line-height: 1.6; color: var(--text-2); }
.s-pro__focus {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-card);
  background: var(--primary-tint);
  border-left: 4px solid var(--primary);
  font-size: var(--fs-callout);
  line-height: 1.6;
  color: var(--text);
}
.s-pro__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.s-pro__feature { display: flex; align-items: flex-start; gap: var(--sp-3); }
.s-pro__feature-icon,
.s-pro__features li > svg:first-child {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}
.s-pro__feature-title { font-size: var(--fs-body); line-height: 1.4; font-weight: 600; }
.s-pro__feature-text { font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-2); }
.s-pro__buy,
.s-pro__plans { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.s-pro__legal { font-size: var(--fs-footnote); line-height: 1.6; color: var(--text-3); }
.s-pro__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-footnote); }
.s-pro__links a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap); display: inline-flex; align-items: center; }
.s-pro__status { padding: var(--sp-4); border-radius: var(--r-card); background: var(--primary-soft); text-align: center; font-weight: 600; }

@media (min-width: 600px) {
  .s-pro,
  .s-pro.l-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-8);
    row-gap: 0;
    align-items: start;
  }
  .s-pro > * { margin-bottom: var(--sp-4); }
  .s-pro > :is(.s-pro__head, .s-pro__focus, .s-pro__legal, .s-pro__links, .s-pro__status) { grid-column: 1 / -1; }
  .s-pro > .s-pro__features { grid-column: 1; grid-row: span 6; }
  .s-pro > :is(.s-pro__buy, .s-pro__plans, .s-pro__cta, .s-pro__restore) { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   法律頁（privacy.html、terms.html）
   -------------------------------------------------------------------------- */
.s-legal {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--sp-6) var(--page-x) var(--sp-10);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
}
.s-legal h1 { font-size: var(--fs-title1); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--sp-4); }
.s-legal h2 { font-size: var(--fs-title3); line-height: 1.4; font-weight: 600; margin: var(--sp-8) 0 var(--sp-3); }
.s-legal p { margin: 0 0 var(--sp-4); }
.s-legal ol,
.s-legal ul { margin: 0 0 var(--sp-4); padding-left: 1.6em; }
.s-legal li { margin-bottom: var(--sp-2); }
.s-legal a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.s-legal table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font-size: var(--fs-callout); }
.s-legal th,
.s-legal td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; }
.s-legal__updated { font-size: var(--fs-footnote); color: var(--text-3); }

/* --------------------------------------------------------------------------
   更多／我的
   -------------------------------------------------------------------------- */
.s-more-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
@media (min-width: 600px) {
  .s-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}
.s-me { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-me__privacy { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-me__status { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.s-me__list { display: flex; flex-direction: column; }
.s-me__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-1);
  border-top: 1px solid var(--divider);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-body);
}
.s-me__item:first-child { border-top: 0; }
.s-me__item > svg:first-child { color: var(--primary); flex: none; }
.s-me__item-label { flex: 1; min-width: 0; }
@media (hover: hover) and (pointer: fine) {
  .s-me__item:hover { background: var(--surface-2); border-radius: var(--r-sm); }
}

/* --------------------------------------------------------------------------
   記錄
   -------------------------------------------------------------------------- */
.s-record-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@container view (min-width: 560px) {
  .s-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container view (min-width: 960px) {
  .s-record-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.s-record-entry {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
  padding: var(--sp-4);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--text);
  text-decoration: none;
  text-align: left;
  transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.s-record-entry__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.s-record-entry__title { font-size: var(--fs-body); line-height: 1.4; font-weight: 600; }
.s-record-entry__sub { font-size: var(--fs-footnote); line-height: 1.4; color: var(--text-3); }
@media (hover: hover) and (pointer: fine) {
  .s-record-entry:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
}
.s-record-recent { display: flex; flex-direction: column; margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.s-record-recent__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--divider);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-callout);
  line-height: 1.4;
}
.s-record-recent__item:first-child { border-top: 0; }
.s-record-recent__icon { flex: none; color: var(--primary); }
.s-record-recent__text { flex: 1; min-width: 0; }
.s-record-recent__time { flex: none; font-size: var(--fs-footnote); color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .s-record-recent__item:hover { background: var(--surface-2); border-radius: var(--r-sm); }
}

/* --------------------------------------------------------------------------
   今天感覺如何、活動
   -------------------------------------------------------------------------- */
.s-checkin { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-checkin__activity { display: flex; flex-direction: column; gap: var(--sp-3); }
.s-checkin__types { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.s-checkin__minutes { display: flex; align-items: center; gap: var(--sp-3); }
.s-checkin__list { list-style: none; margin: 0; padding: 0; }
.s-checkin__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--divider);
  font-size: var(--fs-callout);
  font-variant-numeric: tabular-nums;
}
.s-checkin__week { font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   血糖
   -------------------------------------------------------------------------- */
.s-glucose-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  color: var(--text);
  text-align: left;
  text-decoration: none;
}
.s-glucose-row.is-selected { background: var(--primary-tint); box-shadow: inset 3px 0 0 var(--primary); }
.s-glucose-row__date { font-size: var(--fs-footnote); line-height: 1.3; color: var(--text-2); font-variant-numeric: tabular-nums; }
.s-glucose-row__context { font-size: var(--fs-callout); line-height: 1.4; }
.s-glucose-row__note { font-size: var(--fs-footnote); color: var(--text-3); overflow-wrap: anywhere; }
.s-glucose-row__value { font-size: var(--fs-title3); line-height: 1.3; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.s-glucose-note { font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-3); }
.l-split__master .s-glucose-row { padding: var(--sp-2) var(--sp-3); box-shadow: none; background: transparent; border-radius: var(--r-input); }
.l-split__master .s-glucose-row.is-selected { background: var(--primary-tint); }

/* --------------------------------------------------------------------------
   學習
   -------------------------------------------------------------------------- */
.s-learn { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-learn__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@container view (min-width: 560px) {
  .s-learn__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.s-learn__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@container view (min-width: 560px) {
  .s-learn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container view (min-width: 960px) {
  .s-learn__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.s-learn__footer { font-size: var(--fs-footnote); line-height: 1.6; color: var(--text-3); text-align: center; }
.s-learn-detail { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 720px; margin-inline: auto; }
.s-learn-detail__title { font-size: var(--fs-title1); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.s-learn-detail__lead { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.s-learn-detail h2 { margin: var(--sp-2) 0 0; font-size: var(--fs-title3); line-height: 1.4; font-weight: 600; }
.s-learn-detail ul { margin: 0; padding-left: 1.4em; font-size: var(--fs-body); line-height: 1.7; }
.s-learn-detail li { margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   看診問題
   -------------------------------------------------------------------------- */
.s-questions { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-questions__add { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-questions__group { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-questions__heading { font-size: var(--fs-footnote); line-height: 1.4; font-weight: 600; letter-spacing: 0.02em; color: var(--text-2); }
.s-questions__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.s-questions-present {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--page-x) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
}
.s-questions-present__bar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-4); }
.s-questions-present__list {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding-left: 1.5em;
  font-size: var(--fs-title2);
  line-height: 1.8;
  font-weight: 500;
}
.s-questions-present__list li { margin-bottom: var(--sp-5); overflow-wrap: anywhere; }
.s-questions-present__list li::marker { color: var(--primary); font-weight: 700; }

/* --------------------------------------------------------------------------
   需要協助
   -------------------------------------------------------------------------- */
.s-help { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-help__lead { font-size: var(--fs-callout); line-height: 1.6; color: var(--text-2); }
.s-help__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-btn);
  background: var(--danger);
  color: var(--surface);
  font-size: var(--fs-body);
  font-weight: 650;
  text-decoration: none;
}
.s-help__hotline { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-callout); line-height: 1.6; }
.s-help__hotline a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.s-help__list { margin: 0; padding-left: 1.4em; font-size: var(--fs-callout); line-height: 1.7; }

/* --------------------------------------------------------------------------
   每週回顧
   -------------------------------------------------------------------------- */
.s-review { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-review__summary,
.s-review__ask { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.s-review__counts { list-style: none; margin: 0; padding: 0; font-size: var(--fs-callout); line-height: 1.8; font-variant-numeric: tabular-nums; }
.s-review__missing { font-size: var(--fs-callout); line-height: 1.6; color: var(--text-2); }
.s-review__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (min-width: 600px) {
  .s-review { max-width: var(--content-max-form); margin-inline: auto; }
}
@media (min-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .s-review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-5);
    max-width: 1000px;
  }
  .s-review > :is(.s-review__head, .s-review__title) { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   診間出示、家屬出示
   -------------------------------------------------------------------------- */
.s-present,
.s-family {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}
.s-present__nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) var(--page-x) var(--sp-3);
}
.s-present__progress { display: flex; align-items: center; gap: 6px; }
.s-present__progress > span {
  width: 8px;
  height: 8px;
  border-radius: var(--r-chip);
  background: var(--surface-3);
  transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.s-present__progress > .is-active { width: 24px; background: var(--primary); }
.s-present__hint { display: none; font-size: var(--fs-footnote); color: var(--text-3); }
.s-present__track {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.s-present__track::-webkit-scrollbar { display: none; }
.s-present__card {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  min-width: 0;
  padding: var(--sp-4) max(var(--page-x), calc((100% - 900px) / 2)) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  font-size: var(--present-fs);
  line-height: 1.5;
}
.s-present__card-title { font-size: var(--fs-callout); line-height: 1.4; letter-spacing: 0.02em; font-weight: 600; color: var(--text-3); }
.s-present__big { font-size: var(--present-fs); line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.s-present__card ol,
.s-present__card ul { margin: 0; padding-left: 1.4em; }
.s-present__card li { margin-bottom: var(--sp-3); overflow-wrap: anywhere; }
.s-present__arrow { display: none; }
.s-family .s-present__card,
.s-family__card { padding-inline: max(var(--page-x), calc((100% - 720px) / 2)); }
.s-family__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.s-family__stat-value { font-size: var(--fs-title1); line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.s-family__stat-label { font-size: var(--fs-callout); color: var(--text-3); }
.s-family__share { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 1024px) {
  body:not(.is-short) .s-present__hint { display: block; }
}
body.is-short .s-present__card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-2);
  font-size: var(--fs-title2);
}
body.is-short .s-present__card > :is(.s-present__card-title) { grid-column: 1 / -1; }
body.is-short .s-present__big { font-size: var(--fs-title2); }

/* --------------------------------------------------------------------------
   外食情境
   -------------------------------------------------------------------------- */
.s-eat { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-eat__scenes {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: var(--sp-1);
  -webkit-overflow-scrolling: touch;
}
.s-eat__scenes::-webkit-scrollbar { display: none; }
.s-eat__scenes > * { flex: none; }
.s-eat__content { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.s-eat__combos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@container view (min-width: 560px) {
  .s-eat__combos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.s-eat__combo { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-eat__combo-title { font-size: var(--fs-body); line-height: 1.5; font-weight: 600; }
.s-eat__tips { margin: 0; padding-left: 1.4em; font-size: var(--fs-callout); line-height: 1.7; color: var(--text-2); }
.s-eat__favs { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 600px) {
  .s-eat__scenes { flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .s-eat {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
  .s-eat__scenes {
    position: sticky;
    top: var(--sp-4);
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: visible;
    gap: var(--sp-1);
  }
  .s-eat__scenes > * { width: 100%; justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   回診備忘
   -------------------------------------------------------------------------- */
.s-memo { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-memo__form,
.s-memo__history { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.s-memo__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--divider);
  font-size: var(--fs-callout);
  font-variant-numeric: tabular-nums;
}
.s-memo__row:first-child { border-top: 0; }
.s-memo__time { font-size: var(--fs-footnote); color: var(--text-3); }
@media (min-width: 600px) {
  .s-memo { max-width: var(--content-max-form); margin-inline: auto; }
}
@media (min-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .s-memo {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(280px, 1fr);
    gap: var(--sp-6);
    align-items: start;
    max-width: none;
    margin-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   雲端同步 #/sync、首次同步精靈
   -------------------------------------------------------------------------- */
.s-sync { display: flex; flex-direction: column; gap: var(--sp-4); max-width: var(--content-max-form); margin-inline: auto; }
.s-sync__section { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.s-sync__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--divider);
  font-size: var(--fs-callout);
  line-height: 1.5;
}
.s-sync__row:first-child { border-top: 0; }
.s-sync__hint { font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-3); }
.s-sync__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 狀態徽章 */
.s-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-chip);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-footnote);
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
}
.s-sync-badge::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
}
.s-sync-badge.is-idle { background: var(--primary-soft); color: var(--text); }
.s-sync-badge.is-idle::before { background: var(--primary); }
.s-sync-badge.is-running { background: var(--primary-tint); color: var(--text); }
.s-sync-badge.is-running::before { background: var(--primary); animation: s-sync-pulse 1.2s var(--ease) infinite; }
.s-sync-badge.is-offline,
.s-sync-badge.is-paused-pro,
.s-sync-badge.is-needs-passphrase,
.s-sync-badge.is-needs-keyring { background: var(--warn-soft); color: var(--text); }
.s-sync-badge.is-offline::before,
.s-sync-badge.is-paused-pro::before,
.s-sync-badge.is-needs-passphrase::before,
.s-sync-badge.is-needs-keyring::before { background: var(--accent-ink); }
.s-sync-badge.is-error,
.s-sync-badge.is-quota { background: var(--danger-soft); color: var(--text); }
.s-sync-badge.is-error::before,
.s-sync-badge.is-quota::before { background: var(--danger); }
@keyframes s-sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* 精靈步驟指示 */
.s-sync-steps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.s-sync-steps__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--fs-footnote);
  line-height: 1.3;
  color: var(--text-3);
}
.s-sync-steps__item:not(:last-child) { flex: 1; }
.s-sync-steps__item:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: var(--sp-3);
  height: 2px;
  border-radius: var(--r-chip);
  background: var(--surface-3);
}
.s-sync-steps__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-2);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-2) var(--ease);
}
.s-sync-steps__label { min-width: 0; overflow-wrap: anywhere; }
.s-sync-steps__item.is-active { color: var(--text); font-weight: 600; }
.s-sync-steps__item.is-active .s-sync-steps__num { background: var(--primary); color: var(--surface); }
.s-sync-steps__item.is-done { color: var(--text-2); }
.s-sync-steps__item.is-done .s-sync-steps__num { background: var(--primary-soft); color: var(--primary); }
.s-sync-steps__item.is-done:not(:last-child)::after { background: var(--primary-soft); }
@container view (max-width: 420px) {
  .s-sync-steps__label { display: none; }
  .s-sync-steps__item.is-active .s-sync-steps__label { display: block; }
}

/* 危險區 */
.s-sync-danger {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-card);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--text);
}
.s-sync-danger__title { font-size: var(--fs-title3); line-height: 1.4; font-weight: 650; }
.s-sync-danger__text { font-size: var(--fs-callout); line-height: 1.6; color: var(--text-2); }
.s-sync-danger__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 用量列 */
.s-sync-usage { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-sync-usage__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-footnote);
  line-height: 1.4;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.s-sync-usage__value { font-weight: 600; color: var(--text); }
.s-sync-usage__bar {
  position: relative;
  height: 8px;
  border-radius: var(--r-chip);
  background: var(--surface-3);
  overflow: hidden;
}
.s-sync-usage__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--fill, 0) * 1%);
  max-width: 100%;
  border-radius: var(--r-chip);
  background: var(--primary);
  transition: width var(--dur-3) var(--ease);
}
.s-sync-usage__bar.is-high .s-sync-usage__fill { background: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .s-sync-badge.is-running::before { animation: none; }
  .s-sync-steps__num,
  .s-sync-usage__fill { transition-duration: 0.01ms; }
}

/* --------------------------------------------------------------------------
   減少動態：停用本檔所有動畫
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .s-inject-body .zone.is-suggested { animation: none; stroke-width: 4; }
  .s-lock__dots.is-shake { animation: none; }
  .s-nut-water__fill,
  .s-lock__dot,
  .s-lock__key,
  .s-onb__dots > span,
  .s-onb__dot,
  .s-present__progress > span { transition-duration: 0.01ms; }
}