/* =========================================================
   components.css — 所有共用元件樣式
   前綴：c-；內部以 BEM；狀態類 is-*
   顏色一律使用 var(--token)
   ========================================================= */

/* ---------- 通用輔助 ---------- */
.c-num, .c-n, .c-stat-n__value, .c-counter__value, .c-delta, .c-product__price { font-variant-numeric: tabular-nums; }
.c-muted { color: var(--text-3); font-size: var(--fs-footnote); line-height: 1.4; }

:where(.c-btn, .c-chip, .c-seg__opt, .c-scale__opt, .c-scale__clear, .c-stepper__btn, .c-toggle__input, .c-list__item, .c-card--link, .c-product, .c-scene-chip, .c-fav__use, .c-body__zone, .c-help-btn, .c-action-grid__btn, .c-swatch, .c-learn-card, .c-question__btn, .c-contact__link, .c-heat__cell, .c-privacy-line__toggle, .c-sev__opt):focus-visible,
:where(.c-body__zone, .c-scale__opt, .c-product, .c-swatch):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.c-card a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------- 卡片 ---------- */
.c-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5);
  color: var(--text);
  min-width: 0;
}
.c-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.c-card__title { margin: 0; font-size: var(--fs-title3); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.c-card__subtitle { margin: 2px 0 0; font-size: var(--fs-footnote); line-height: 1.4; color: var(--text-3); }
.c-card__action { flex: none; }
.c-card__body > * + * { margin-top: var(--sp-3); }
.c-card--hero { background: var(--grad-hero); padding-left: calc(var(--sp-5) + 4px); overflow: hidden; }
.c-card--hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); }
.c-card--flat { background: var(--surface-2); box-shadow: none; }
.c-card--tint { background: var(--primary-tint); box-shadow: none; }
.c-card--warm { background: var(--accent-soft); box-shadow: none; }
.c-card--tight { padding: var(--sp-4); }
.c-card--link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.c-card--link:active { transform: scale(.99); }
.c-card.is-collapsed { display: none; }

/* ---------- 按鈕 ---------- */
.c-btn {
  --btn-bg: var(--surface-2); --btn-fg: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-btn);
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-size: var(--fs-body); font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.c-btn:active { transform: scale(.98); }
.c-btn[disabled], .c-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.c-btn--primary { --btn-bg: var(--primary); --btn-fg: var(--text-on-primary); min-height: 52px; }
.c-btn--secondary { --btn-bg: var(--primary-soft); --btn-fg: var(--primary); }
.c-btn--ghost { --btn-bg: transparent; --btn-fg: var(--primary); }
.c-btn--danger { --btn-bg: var(--danger); --btn-fg: var(--text-on-primary); }
.c-btn--danger-soft { --btn-bg: var(--danger-soft); --btn-fg: var(--danger); }
.c-btn--block { display: flex; width: 100%; }
.c-btn--sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-callout); }
.c-btn--icon { width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; border-radius: 50%; }
.c-btn--fab { position: fixed; right: var(--sp-5); bottom: calc(56px + env(safe-area-inset-bottom) + var(--sp-4)); width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 50%; --btn-bg: var(--primary); --btn-fg: var(--text-on-primary); box-shadow: var(--shadow-fab); z-index: 20; }
.c-btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.c-btn.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--btn-fg); border-right-color: transparent;
  animation: c-spin .7s linear infinite;
}
.c-btn.is-done { pointer-events: none; }
.c-btn__check { width: 28px; height: 28px; }
.c-btn__check circle { fill: none; stroke: currentColor; stroke-width: 2; opacity: .4; }
.c-btn__check path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: c-draw var(--dur-3) var(--ease) forwards; }
.c-btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.c-btn-row--end { justify-content: flex-end; }
.c-btn-row > .c-btn--grow { flex: 1 1 auto; }
@keyframes c-spin { to { transform: rotate(360deg); } }
@keyframes c-draw { to { stroke-dashoffset: 0; } }

/* ---------- 分段控制 ---------- */
.c-seg {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px; background: var(--surface-3); border-radius: var(--r-chip); max-width: 100%;
}
.c-seg--block { display: grid; width: 100%; }
.c-seg__thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--seg-count, 2));
  transform: translateX(calc(var(--seg-index, 0) * 100%));
  background: var(--surface); border-radius: var(--r-chip); box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring); pointer-events: none;
}
.c-seg__opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: 36px; padding: 0 var(--sp-4); border: 0; background: transparent; color: var(--text-2);
  font: inherit; font-size: var(--fs-callout); font-weight: 600; white-space: nowrap; cursor: pointer; border-radius: var(--r-chip);
}
.c-seg__opt[aria-checked="true"], .c-seg__opt[aria-selected="true"], .c-seg__opt.is-active { color: var(--text); }
.c-seg--scroll { display: flex; overflow-x: auto; scrollbar-width: none; }
.c-seg--scroll::-webkit-scrollbar { display: none; }
.c-seg--scroll .c-seg__opt { flex: none; }
.c-seg--scroll .c-seg__opt.is-active { background: var(--surface); box-shadow: var(--shadow-1); }

/* ---------- 晶片 ---------- */
.c-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.c-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.c-chips--scroll::-webkit-scrollbar { display: none; }
.c-chips--scroll > * { flex: none; }
.c-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-chip);
  background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-callout); font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.c-chip[aria-pressed="true"], .c-chip.is-active, .c-chip.is-selected { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft); font-weight: 600; }
.c-chip[disabled] { opacity: .5; cursor: not-allowed; }
.c-chip--static { cursor: default; }
.c-chip__dots { display: inline-flex; gap: 2px; margin-left: var(--sp-1); }
.c-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

/* ---------- 表單欄位 ---------- */
.c-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.c-field + .c-field { margin-top: var(--sp-3); }
.c-field__label { font-size: var(--fs-footnote); line-height: 1.3; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.c-field__req { color: var(--accent-ink); }
.c-field__control { position: relative; display: flex; align-items: center; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-input); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.c-field__control:focus-within { border-color: var(--primary); background: var(--surface); }
.c-field__input, .c-field__select, .c-field__textarea {
  flex: 1; min-width: 0; width: 100%; min-height: 48px; padding: 0 var(--sp-4);
  background: transparent; color: var(--text); border: 0; outline: 0; border-radius: var(--r-input);
  font: inherit; font-size: max(16px, 1rem); line-height: 1.4; font-variant-numeric: tabular-nums;
}
.c-field__textarea { min-height: 96px; padding: var(--sp-3) var(--sp-4); resize: vertical; }
.c-field__select { appearance: none; padding-right: var(--sp-8); }
.c-field__input::placeholder, .c-field__textarea::placeholder { color: var(--text-3); }
.c-field__unit { flex: none; padding-right: var(--sp-4); color: var(--text-3); font-size: var(--fs-callout); pointer-events: none; }
.c-field__hint { font-size: var(--fs-footnote); line-height: 1.4; color: var(--text-3); }
.c-field__error { display: flex; align-items: flex-start; gap: var(--sp-1); font-size: var(--fs-footnote); line-height: 1.4; color: var(--up); }
.c-field.is-error .c-field__control { border-color: var(--up); }
.c-field__tag { font-size: var(--fs-caption); padding: 1px var(--sp-2); border-radius: var(--r-chip); background: var(--accent-soft); color: var(--accent-ink); }
.c-field-row { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.c-field-row > .c-field + .c-field { margin-top: 0; }
.c-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* 開關 */
.c-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--tap); cursor: pointer; }
.c-toggle__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-toggle__label { font-size: var(--fs-body); line-height: 1.4; }
.c-toggle__hint { font-size: var(--fs-footnote); color: var(--text-3); line-height: 1.4; }
.c-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-toggle__track { flex: none; position: relative; width: 50px; height: 30px; border-radius: var(--r-chip); background: var(--surface-3); border: 1px solid var(--border); transition: background var(--dur-2) var(--ease); }
.c-toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-spring); }
.c-toggle__input:checked + .c-toggle__track { background: var(--primary); border-color: var(--primary); }
.c-toggle__input:checked + .c-toggle__track::after { transform: translateX(20px); }
.c-toggle__input:focus-visible + .c-toggle__track { outline: 3px solid var(--primary); outline-offset: 2px; }

/* 步進器 */
.c-stepper { display: inline-flex; align-items: center; gap: var(--sp-2); }
.c-stepper__btn { width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: inherit; }
.c-stepper__btn[disabled] { opacity: .4; cursor: not-allowed; }
.c-stepper__value { min-width: 64px; text-align: center; font-size: var(--fs-title3); font-weight: 600; font-variant-numeric: tabular-nums; }
.c-stepper__unit { font-size: var(--fs-footnote); color: var(--text-3); font-weight: 400; margin-left: 2px; }

/* ---------- 程度選擇 c-scale（0–3，可清除為未填） ---------- */
.c-scale-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; }
.c-scale-row + .c-scale-row { border-top: 1px solid var(--divider); }
.c-scale-row__label { font-size: var(--fs-body); line-height: 1.3; min-width: 0; }
.c-scale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.c-scale__opt {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--sp-2);
  border: 2px solid transparent; border-radius: var(--r-input);
  background: var(--heat-n-0); color: var(--text); font: inherit; font-size: var(--fs-footnote); line-height: 1.2; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease-spring);
}
.c-scale__opt[data-value="1"] { background: var(--heat-n-1); }
.c-scale__opt[data-value="2"] { background: var(--heat-n-2); }
.c-scale__opt[data-value="3"] { background: var(--heat-n-3); }
.c-scale__opt[aria-checked="true"], .c-scale__opt.is-selected { border-color: var(--primary); transform: scale(1.06); font-weight: 700; }
.c-scale__clear { min-height: 36px; padding: 0 var(--sp-2); border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: var(--fs-footnote); text-decoration: underline; cursor: pointer; }
.c-scale__clear[hidden] { display: none; }
.c-scale.is-unset .c-scale__opt { background: var(--surface-2); }
.c-scale-legend { font-size: var(--fs-caption); color: var(--text-3); }
/* 舊名相容 */
.c-sev { display: flex; gap: var(--sp-2); }
.c-sev__opt { min-width: var(--tap); min-height: var(--tap); border-radius: 50%; border: 2px solid transparent; background: var(--heat-n-0); color: var(--text); font: inherit; cursor: pointer; }
.c-sev__opt[aria-checked="true"] { border-color: var(--primary); }

/* ---------- 底部表單／置中對話框 ---------- */
.c-sheet-backdrop {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--text) 40%, transparent);
  animation: c-fade var(--dur-2) var(--ease);
}
.c-sheet-backdrop.is-closing { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.c-sheet {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: 92dvh;
  background: var(--surface); color: var(--text);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-2);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(var(--drag-y, 0px));
  animation: c-sheet-up var(--dur-2) var(--ease);
}
.c-sheet.is-dragging { transition: none; animation: none; }
.c-sheet__handle { flex: none; width: 40px; height: 5px; margin: var(--sp-2) auto var(--sp-1); border-radius: var(--r-chip); background: var(--surface-3); touch-action: none; cursor: grab; }
.c-sheet__header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5) var(--sp-3); }
.c-sheet__title { margin: 0; font-size: var(--fs-title3); line-height: 1.3; font-weight: 600; }
.c-sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-5) var(--sp-5); }
.c-sheet__footer { flex: none; display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid var(--divider); }
.c-sheet__footer > .c-btn { flex: 1; }
.c-sheet--dialog { border-radius: var(--r-sheet); width: min(560px, 92vw); max-height: 86dvh; padding-bottom: 0; transform: none; animation: c-sheet-pop var(--dur-2) var(--ease); }
.c-sheet--dialog .c-sheet__handle { display: none; }
.c-sheet--dialog .c-sheet__header { padding-top: var(--sp-5); }
.c-sheet--dialog.c-sheet--full { width: min(720px, 94vw); }
.c-sheet-backdrop:has(.c-sheet--dialog) { align-items: center; }
@keyframes c-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes c-sheet-up { from { transform: translateY(100%); } to { transform: translateY(var(--drag-y, 0px)); } }
@keyframes c-sheet-pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (orientation: landscape) and (max-height: 500px) {
  .c-sheet, .c-sheet--dialog { max-height: 96dvh; }
}

/* 動作格（快速新增 2x3） */
.c-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.c-action-grid__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 96px; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-callout); font-weight: 600; text-align: center; cursor: pointer;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.c-action-grid__btn:active { transform: scale(.97); }
.c-action-grid__icon { color: var(--primary); }
@container view (min-width: 480px) { .c-action-grid--auto { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 原生 dialog ---------- */
.c-dialog {
  width: min(420px, 92vw); max-height: 86dvh; padding: var(--sp-6); border: 1px solid var(--border);
  border-radius: var(--r-card); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2);
}
.c-dialog::backdrop { background: color-mix(in srgb, var(--text) 40%, transparent); }
.c-dialog[open] { animation: c-sheet-pop var(--dur-2) var(--ease); }
.c-dialog__title { margin: 0 0 var(--sp-2); font-size: var(--fs-title3); line-height: 1.3; font-weight: 600; }
.c-dialog__text { margin: 0 0 var(--sp-4); font-size: var(--fs-callout); line-height: 1.55; color: var(--text-2); }
.c-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }
.c-dialog__actions > .c-btn { flex: 1 1 120px; }

/* ---------- Toast ---------- */
.c-toast {
  display: flex; align-items: center; gap: var(--sp-3); max-width: min(480px, 92vw); margin: 0 auto var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-input);
  background: var(--text); color: var(--bg); box-shadow: var(--shadow-2);
  font-size: var(--fs-callout); line-height: 1.4; pointer-events: auto;
  animation: c-toast-in var(--dur-2) var(--ease);
}
.c-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.c-toast__text { flex: 1; min-width: 0; }
.c-toast__action { flex: none; min-height: 36px; padding: 0 var(--sp-2); border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.c-toast--success .c-toast__text::before { content: "✓ "; }
@keyframes c-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 慶祝彩帶（16 片、1.0 秒） ---------- */
.c-confetti { position: fixed; top: 0; left: 50%; width: 220px; height: 0; margin-left: -110px; pointer-events: none; z-index: 90; }
.c-confetti__piece {
  position: absolute; top: 12vh; left: calc(var(--i, 0) * 6.25%); width: 8px; height: 12px; border-radius: 2px; opacity: 0;
  background: var(--primary);
  animation: c-confetti-fall 1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 30ms);
}
.c-confetti__piece:nth-child(4n+2) { background: var(--accent); }
.c-confetti__piece:nth-child(4n+3) { background: var(--chart-marker); }
.c-confetti__piece:nth-child(4n) { background: var(--down); }
@keyframes c-confetti-fall {
  0% { opacity: 1; transform: translateY(-20px) rotate(0); }
  100% { opacity: 0; transform: translateY(120px) translateX(var(--dx, 12px)) rotate(240deg); }
}

/* ---------- 空狀態 ---------- */
.c-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); }
.c-empty__illus { width: min(240px, 70%); height: auto; margin-bottom: var(--sp-2); }
.c-empty__title { margin: 0; font-size: var(--fs-title3); line-height: 1.3; font-weight: 600; }
.c-empty__text { margin: 0 0 var(--sp-3); max-width: 32ch; font-size: var(--fs-callout); line-height: 1.55; color: var(--text-2); }

/* ---------- 變化箭頭 c-delta ---------- */
.c-delta { display: inline-flex; align-items: center; gap: 2px; padding: 2px var(--sp-2); border-radius: var(--r-chip); font-size: var(--fs-footnote); line-height: 1.3; font-weight: 600; white-space: nowrap; }
.c-delta--down, .c-delta.is-down { color: var(--down); }
.c-delta--up, .c-delta.is-up { color: var(--up); }
.c-delta--flat, .c-delta.is-flat { color: var(--flat); }
.c-delta.is-neutral { color: var(--text-2); background: var(--surface-2); }
.c-delta.is-toward-goal { color: var(--down); background: var(--positive-soft, var(--primary-soft)); }
.c-delta.is-away-goal { color: var(--text-2); background: var(--calm-soft, var(--surface-2)); }
.c-delta.is-masked { color: var(--text-3); background: var(--surface-2); }

/* ---------- 徽章 / Pro 標籤 ---------- */
.c-badge { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-1); width: 88px; flex: none; text-align: center; scroll-snap-align: start; }
.c-badge__img { width: 64px; height: 64px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.c-badge__title { font-size: var(--fs-caption); line-height: 1.3; color: var(--text-2); }
.c-badge.is-locked { filter: grayscale(1); opacity: .45; }
.c-badge-row { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--sp-1); scrollbar-width: none; }
.c-badge-row::-webkit-scrollbar { display: none; }

.c-pro-tag { display: inline-flex; align-items: center; gap: 2px; padding: 1px var(--sp-2); border-radius: var(--r-chip); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-caption); line-height: 16px; font-weight: 600; letter-spacing: .02em; vertical-align: middle; }

/* 預覽型鎖定 */
.c-pro-gate { position: relative; border-radius: var(--r-card); overflow: hidden; }
.c-pro-gate__preview { filter: blur(8px); pointer-events: none; user-select: none; }
.c-pro-gate__card { position: absolute; left: 50%; top: 50%; width: min(320px, 88%); transform: translate(-50%, -50%); padding: var(--sp-4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); text-align: center; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
.c-pro-gate__title { margin: 0; font-size: var(--fs-title3); font-weight: 600; }
.c-pro-gate__text { margin: 0; font-size: var(--fs-callout); line-height: 1.5; color: var(--text-2); }

/* 主題色票 */
.c-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.c-swatch { position: relative; width: var(--tap); height: var(--tap); border-radius: 50%; border: 3px solid var(--surface); background: var(--swatch, var(--primary)); box-shadow: 0 0 0 1px var(--border); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-on-primary); }
.c-swatch[aria-checked="true"], .c-swatch.is-selected { box-shadow: 0 0 0 3px var(--primary); }
.c-swatch[data-accent="sage"] { --swatch: var(--primary); }
.c-swatch .c-pro-tag { position: absolute; right: -10px; bottom: -8px; }

/* 付費方案卡 */
.c-product { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; padding: var(--sp-4) var(--sp-5); border: 2px solid var(--border); border-radius: var(--r-card); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.c-product + .c-product { margin-top: var(--sp-3); }
.c-product[aria-checked="true"], .c-product.is-selected { border-color: var(--primary); background: var(--primary-tint); }
.c-product__name { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.c-product__sub { font-size: var(--fs-footnote); color: var(--text-3); line-height: 1.4; }
.c-product__price { font-size: var(--fs-title3); font-weight: 700; white-space: nowrap; }
.c-product__price.is-placeholder { font-size: var(--fs-callout); font-weight: 500; color: var(--text-3); }

/* ---------- 清單列 ---------- */
.c-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.c-list__item { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-3) var(--sp-4); color: var(--text); text-decoration: none; background: transparent; border: 0; width: 100%; font: inherit; text-align: left; cursor: pointer; }
.c-list__item + .c-list__item, li + li > .c-list__item { border-top: 1px solid var(--divider); }
.c-list__icon { flex: none; color: var(--primary); display: inline-flex; }
.c-list__main { flex: 1; min-width: 0; }
.c-list__title { font-size: var(--fs-body); line-height: 1.4; }
.c-list__sub { font-size: var(--fs-footnote); line-height: 1.4; color: var(--text-3); }
.c-list__end { flex: none; color: var(--text-3); display: inline-flex; align-items: center; gap: var(--sp-2); }
.c-list__item.is-selected { background: var(--primary-tint); box-shadow: inset 3px 0 0 var(--primary); }
.c-list-group-title { margin: var(--sp-5) 0 var(--sp-2); padding: 0 var(--sp-1); font-size: var(--fs-footnote); font-weight: 600; letter-spacing: .02em; color: var(--text-3); }

/* ---------- 進度與圖表元件 ---------- */
.c-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.c-ring__svg { transform: rotate(-90deg); }
.c-ring__track { fill: none; stroke: var(--surface-3); }
.c-ring__bar { fill: none; stroke: var(--grad-ring); stroke-linecap: round; transition: stroke-dashoffset var(--dur-ring) var(--ease); }
.c-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--fs-title3); font-weight: 700; font-variant-numeric: tabular-nums; }

.c-bar { display: flex; flex-direction: column; gap: var(--sp-1); }
.c-bar__head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-footnote); color: var(--text-2); }
.c-bar__track { height: 8px; border-radius: var(--r-chip); background: var(--surface-3); overflow: hidden; }
.c-bar__fill { height: 100%; width: calc(var(--p, 0) * 1%); border-radius: inherit; background: var(--primary); transition: width var(--dur-3) var(--ease); }
.c-bar__fill.is-plain { background: var(--chart-ma); }

.c-spark { display: block; width: 100%; height: 36px; }
.c-spark__line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.c-week-dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-1); }
.c-week-dots__dot { aspect-ratio: 1; border-radius: 50%; background: var(--surface-3); }
.c-week-dots__dot.is-filled, .c-week-dots__dot.is-active { background: var(--primary); }

.c-chart { position: relative; width: 100%; }
.c-chart__svg { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.c-chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.c-chart__axis { fill: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.c-chart__line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-chart__ma { fill: none; stroke: var(--chart-ma); stroke-width: 4; opacity: .5; stroke-linecap: round; stroke-linejoin: round; }
.c-chart__dot { fill: var(--surface); stroke: var(--chart-1); stroke-width: 2; }
.c-chart__target { stroke: var(--chart-target); stroke-width: 1.5; stroke-dasharray: 5 4; }
.c-chart__marker { stroke: var(--chart-marker); stroke-width: 1.5; stroke-dasharray: 4 3; }
.c-chart__marker-label { fill: var(--chart-marker); font-size: 11px; font-weight: 600; }
.c-chart__gap { stroke: var(--chart-gap, var(--chart-grid)); stroke-width: 1.5; stroke-dasharray: 2 4; }
.c-chart__gap-label { fill: var(--text-3); font-size: 11px; }
.c-chart__cross { stroke: var(--text-3); stroke-width: 1; }
.c-chart__tip { position: absolute; z-index: 2; pointer-events: none; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--text); color: var(--bg); font-size: var(--fs-footnote); line-height: 1.4; white-space: nowrap; box-shadow: var(--shadow-2); transform: translate(-50%, -110%); }
.c-chart__count { font-size: var(--fs-caption); color: var(--text-3); }

/* 熱圖 */
.c-heat { display: grid; grid-template-columns: auto repeat(7, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.c-heat__corner, .c-heat__col, .c-heat__row { font-size: var(--fs-caption); line-height: 1.2; color: var(--text-3); display: flex; align-items: center; }
.c-heat__col { justify-content: center; }
.c-heat__row { padding-right: var(--sp-2); white-space: nowrap; color: var(--text-2); }
.c-heat__cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 40px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--heat-n-0); color: var(--text); font: inherit; font-size: var(--fs-caption); line-height: 1.1; font-variant-numeric: tabular-nums; cursor: pointer;
}
.c-heat__cell[data-level="1"], .c-heat__cell.is-l1 { background: var(--heat-n-1); }
.c-heat__cell[data-level="2"], .c-heat__cell.is-l2 { background: var(--heat-n-2); }
.c-heat__cell[data-level="3"], .c-heat__cell.is-l3 { background: var(--heat-n-3); }
.c-heat__cell.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.c-heat__cell.is-insufficient {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0, var(--surface-2) 4px, var(--surface-3) 4px, var(--surface-3) 8px);
  border: 1px dashed var(--text-3); color: var(--text-3); cursor: default;
}
.c-heat__n { font-size: 10px; color: var(--text-3); }
.c-heat__note { margin: var(--sp-2) 0 0; font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-3); }
.c-heat__insight { margin: var(--sp-3) 0 0; font-size: var(--fs-callout); line-height: 1.5; color: var(--text-2); }
.c-n { font-size: var(--fs-caption); line-height: 1.2; color: var(--text-3); letter-spacing: .02em; }
.c-stat-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-stat-n__label { font-size: var(--fs-caption); color: var(--text-3); letter-spacing: .02em; }
.c-stat-n__value { font-size: var(--fs-title3); line-height: 1.2; font-weight: 700; }
.c-stat-n__n { font-size: var(--fs-caption); color: var(--text-3); }
.c-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-3); }

/* ---------- 人體部位圖 ---------- */
.c-body { display: block; width: 100%; max-width: 220px; margin: 0 auto; }
.c-body--compact { max-width: 120px; }
.c-body__shape { fill: var(--surface-3); stroke: var(--border); }
.c-body__zone { fill: var(--surface); stroke: var(--text-3); stroke-width: 1.5; cursor: pointer; transition: fill var(--dur-1) var(--ease); }
.c-body__zone.is-selected { fill: var(--primary); stroke: var(--primary-strong); }
.c-body__zone.is-suggested { stroke: var(--primary); stroke-width: 2.5; animation: c-pulse 1.8s var(--ease) infinite; }
.c-body__zone.is-recent { fill: url(#c-body-hatch); stroke-dasharray: 4 3; }
.c-body__hatch-line { stroke: var(--text-3); stroke-width: 1.5; }
.c-body__caption { margin: var(--sp-2) 0 0; text-align: center; font-size: var(--fs-callout); color: var(--text-2); }
@keyframes c-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .3; } }

/* ---------- 趨勢摘要、時間軸 ---------- */
.c-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--sp-5); position: relative; }
.c-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--surface-3); }
.c-timeline__item { position: relative; padding: 0 0 var(--sp-4) var(--sp-2); }
.c-timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--sp-5) + 0px); top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); }
.c-timeline__title { font-size: var(--fs-body); line-height: 1.4; }
.c-timeline__sub { font-size: var(--fs-footnote); color: var(--text-3); }

/* ---------- 紅旗與提示卡 ---------- */
.c-redflag { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-card); background: var(--danger-soft); color: var(--text); }
.c-redflag__icon { flex: none; color: var(--danger); }
.c-redflag__title { margin: 0 0 var(--sp-2); font-size: var(--fs-body); line-height: 1.4; font-weight: 700; }
.c-redflag__list { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); font-size: var(--fs-callout); line-height: 1.55; }
.c-redflag__foot { margin: 0; font-size: var(--fs-callout); font-weight: 600; }
.c-redflag__call { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--danger); font-weight: 700; }
.c-notice { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-input); background: var(--surface-2); font-size: var(--fs-callout); line-height: 1.55; color: var(--text-2); }
.c-notice--warm { background: var(--accent-soft); color: var(--accent-ink); }
.c-notice--info { background: var(--primary-tint); }

/* ---------- 私密、示範橫幅、求助 ---------- */
.c-privacy-line { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-input); background: var(--primary-tint); color: var(--text-2); font-size: var(--fs-footnote); line-height: 1.5; }
.c-privacy-line__head { display: flex; align-items: center; gap: var(--sp-2); color: var(--primary); font-weight: 600; }
.c-privacy-line__toggle { margin-left: auto; min-height: 36px; padding: 0 var(--sp-2); border: 0; background: transparent; color: var(--primary); font: inherit; font-size: var(--fs-footnote); cursor: pointer; }
.c-privacy-line__more { margin: 0; padding-left: var(--sp-5); }
.c-privacy-line__more[hidden] { display: none; }

.c-demo-banner { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-footnote); line-height: 1.4; font-weight: 600; border-bottom: 1px solid var(--border); }
.c-demo-banner .c-btn { --btn-bg: var(--surface); --btn-fg: var(--accent-ink); min-height: 36px; }

.c-help-btn { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-chip); background: var(--surface); color: var(--primary); font: inherit; font-size: var(--fs-footnote); font-weight: 600; text-decoration: none; cursor: pointer; }
.c-help-btn--compact { width: var(--tap); padding: 0; justify-content: center; }

/* ---------- 今天感覺、活動 ---------- */
.c-checkin { display: flex; flex-direction: column; }
.c-checkin__item { padding: var(--sp-3) 0; }
.c-checkin__item + .c-checkin__item { border-top: 1px solid var(--divider); }
.c-checkin__label { margin: 0 0 var(--sp-2); font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.c-checkin__levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.c-checkin__lv { min-height: var(--tap); padding: var(--sp-2); border: 2px solid transparent; border-radius: var(--r-input); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-footnote); line-height: 1.25; cursor: pointer; }
.c-checkin__lv[aria-checked="true"], .c-checkin__lv.is-selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.c-checkin__summary { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- 學習卡、看診問題、聯絡資訊 ---------- */
.c-learn-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow-1); }
.c-learn-card__title { margin: 0; font-size: var(--fs-title3); font-weight: 600; line-height: 1.35; }
.c-learn-card__sub { margin: 0; font-size: var(--fs-callout); line-height: 1.55; color: var(--text-2); }
.c-learn-card__list { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-callout); line-height: 1.6; color: var(--text-2); }
.c-edu-tag { display: inline-flex; align-items: center; gap: var(--sp-1); align-self: flex-start; padding: 2px var(--sp-2); border-radius: var(--r-chip); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-caption); line-height: 16px; letter-spacing: .02em; }

.c-question { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-input); background: var(--surface-2); }
.c-question + .c-question { margin-top: var(--sp-2); }
.c-question__text { flex: 1; min-width: 0; font-size: var(--fs-body); line-height: 1.5; overflow-wrap: anywhere; }
.c-question__actions { flex: none; display: flex; gap: 2px; }
.c-question__btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.c-question.is-priority { background: var(--primary-tint); box-shadow: inset 3px 0 0 var(--primary); }
.c-question.is-priority .c-question__btn[data-act="priority"] { color: var(--primary); }
.c-question.is-asked .c-question__text { color: var(--text-3); text-decoration: line-through; }

.c-contact { display: flex; flex-direction: column; gap: var(--sp-2); }
.c-contact__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-input); background: var(--surface-2); }
.c-contact__name { font-size: var(--fs-body); line-height: 1.4; overflow-wrap: anywhere; }
.c-contact__link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); color: var(--primary); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.c-contact__empty { font-size: var(--fs-callout); color: var(--text-3); }

/* ---------- 回診備忘、計數 ---------- */
.c-memo { display: flex; flex-direction: column; gap: var(--sp-3); }
.c-memo__note { font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-3); }
.c-memo__log { list-style: none; margin: 0; padding: 0; }
.c-memo__log-item { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-callout); border-top: 1px solid var(--divider); }
.c-memo__log-item.is-undone { color: var(--text-3); text-decoration: line-through; }
.c-counter { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-input); background: var(--surface-2); }
.c-counter__label { font-size: var(--fs-callout); color: var(--text-2); line-height: 1.4; }
.c-counter__value { font-size: var(--fs-title1); line-height: 1.1; font-weight: 700; }
.c-counter__value.is-unknown { color: var(--text-3); font-weight: 500; }
.c-confirm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); border: 1px solid var(--border); background: var(--primary-tint); color: var(--text); font-size: var(--fs-callout); line-height: 1.5; }
.c-confirm-strip__text { flex: 1 1 200px; min-width: 0; }
.c-confirm-strip__actions { display: flex; gap: var(--sp-2); }

/* ---------- 每週回顧 ---------- */
.c-review-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.c-review-days__day { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); font-size: var(--fs-caption); color: var(--text-3); }
.c-review-days__dot { width: 100%; max-width: 36px; aspect-ratio: 1; border-radius: 50%; background: var(--surface-2); border: 2px dashed var(--surface-3); }
.c-review-days__day.is-filled .c-review-days__dot, .c-review-days__dot.is-filled { background: var(--primary); border: 2px solid var(--primary); }

/* ---------- 外食情境、常吃組合 ---------- */
.c-scene-row { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.c-scene-row::-webkit-scrollbar { display: none; }
.c-scene-chip { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); padding: 0 var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-chip); background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-callout); font-weight: 500; cursor: pointer; }
.c-scene-chip[aria-pressed="true"], .c-scene-chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); font-weight: 600; }
.c-fav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-input); background: var(--surface-2); }
.c-fav + .c-fav { margin-top: var(--sp-2); }
.c-fav__title { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.c-fav__items { font-size: var(--fs-footnote); color: var(--text-3); line-height: 1.4; }
.c-fav__use { flex: none; min-height: 40px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-btn); background: var(--primary-soft); color: var(--primary); font: inherit; font-size: var(--fs-callout); font-weight: 600; cursor: pointer; }

/* ---------- 裝置數值區段 ---------- */
.c-device-section { margin: var(--sp-4) 0 0; padding: var(--sp-4); border: 1px dashed var(--border); border-radius: var(--r-card); background: var(--surface-2); }
.c-device-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.c-device-section__title { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.c-device-section__model { font-size: var(--fs-footnote); color: var(--text-3); }
.c-device-section__note { margin: 0 0 var(--sp-3); font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-3); }

/* ---------- 勾選清單 ---------- */
.c-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.c-check-list__item { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap); padding: var(--sp-2) 0; cursor: pointer; font-size: var(--fs-body); line-height: 1.5; }
.c-check-list__item + .c-check-list__item { border-top: 1px solid var(--divider); }
.c-check-list__box { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--primary); }
.c-check-list__hint { display: block; font-size: var(--fs-footnote); color: var(--text-3); }

/* ---------- 匯入：可能重複清單 ---------- */
.c-dup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.c-dup-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-input); background: var(--surface-2); border-left: 3px solid transparent; }
.c-dup-list__main { font-size: var(--fs-callout); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.c-dup-list__meta { font-size: var(--fs-footnote); color: var(--text-3); }
.c-dup-list__decide { display: inline-flex; gap: var(--sp-1); }
.c-dup-list__row.is-conflict { background: var(--warn-soft); border-left-color: var(--warn, var(--up)); }
.c-dup-list__row.is-conflict .c-dup-list__meta { color: var(--up); }
.c-dup-list__decide.is-conflict { padding: 2px; border-radius: var(--r-chip); background: var(--warn-soft); box-shadow: 0 0 0 1px var(--warn, var(--up)); }
@container view (max-width: 480px) { .c-dup-list__row { grid-template-columns: 1fr; } }

/* ---------- 記錄提醒提示 ---------- */
.c-occurrence-prompt { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.c-occurrence-prompt__text { margin: 0; font-size: var(--fs-callout); line-height: 1.55; color: var(--text-2); }
.c-occurrence-prompt__meta { font-size: var(--fs-footnote); color: var(--text-3); font-variant-numeric: tabular-nums; }
.c-occurrence-prompt__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.c-occurrence-prompt__actions > .c-btn { flex: 1 1 140px; }

/* ---------- 輸出結果說明 ---------- */
.c-result-note { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-left: 3px solid transparent; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-footnote); line-height: 1.5; }
.c-result-note.is-fallback, .c-result-note[data-status="fallback"] { border-left-color: var(--warn, var(--up)); background: var(--warn-soft); }
.c-result-note.is-error, .c-result-note[data-status="failed"] { border-left-color: var(--danger); background: var(--danger-soft); }
.c-result-note__action { margin-left: auto; flex: none; min-height: 36px; padding: 0 var(--sp-2); border: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- 遮蔽設定清單 ---------- */
.c-mask-list { list-style: none; margin: 0; padding: 0; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.c-mask-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 52px; padding: var(--sp-2) var(--sp-4); }
.c-mask-list__item + .c-mask-list__item { border-top: 1px solid var(--divider); }
.c-mask-list__label { font-size: var(--fs-body); line-height: 1.4; }
.c-mask-list__item.is-on .c-mask-list__label { color: var(--primary); font-weight: 600; }
.u-masked { letter-spacing: .1em; }

/* ---------- 清除資料步驟 ---------- */
.c-wipe-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); counter-reset: wipe; }
.c-wipe-steps__item { counter-increment: wipe; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-3); font-size: var(--fs-callout); line-height: 1.4; }
.c-wipe-steps__item::before { content: counter(wipe); flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-2); font-size: var(--fs-caption); font-weight: 700; }
.c-wipe-steps__item.is-active { color: var(--text); }
.c-wipe-steps__item.is-done { color: var(--text); }
.c-wipe-steps__item.is-done::before { content: "✓"; background: var(--primary-soft); color: var(--down); }
.c-wipe-steps__item.is-error { background: var(--danger-soft); color: var(--danger); }
.c-wipe-steps__item.is-error::before { content: "!"; background: var(--danger); color: var(--text-on-primary); }
.c-wipe-steps__msg { margin-left: auto; font-size: var(--fs-footnote); }

/* ---------- 分享圖片：勾選與預覽 ---------- */
.c-share-select { display: flex; flex-direction: column; gap: var(--sp-1); }
.c-share-select__item { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-input); background: var(--surface-2); cursor: pointer; }
.c-share-select__item.is-checked { background: var(--primary-tint); }
.c-share-select__box { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--primary); }
.c-share-select__label { font-size: var(--fs-body); line-height: 1.4; }
.c-share-select__hint { display: block; font-size: var(--fs-footnote); color: var(--text-3); }
.c-share-select__warn { margin: var(--sp-2) 0 0; font-size: var(--fs-footnote); line-height: 1.5; color: var(--text-2); }
.c-share-preview { width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 1080 / 1350; border-radius: var(--r-card); background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-1); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.c-share-preview__img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-seg__thumb, .c-btn, .c-toggle__track, .c-toggle__track::after, .c-bar__fill, .c-ring__bar, .c-toast, .c-sheet, .c-sheet-backdrop, .c-dialog[open], .c-body__zone, .c-scale__opt { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .c-confetti { display: none; }
  .c-body__zone.is-suggested { animation: none; }
}

/* ---------- 指標裝置：觸控與滑鼠 ---------- */
@media (pointer: coarse) {
  .c-btn, .c-chip, .c-seg__opt, .c-scale__clear, .c-list__item, .c-help-btn, .c-fav__use { min-height: var(--tap); }
  .c-chip { min-width: var(--tap); justify-content: center; }
  .c-question__btn { width: var(--tap); height: var(--tap); }
}
@media (pointer: fine) {
  .c-btn { min-height: 40px; }
  .c-btn--primary { min-height: 44px; }
  .c-btn--icon { width: 40px; height: 40px; min-height: 40px; }
  .c-btn--sm { min-height: 36px; }
  .c-stepper__btn { width: 40px; height: 40px; }
  .c-chip, .c-seg__opt { min-height: 36px; }
  .c-field__input, .c-field__select { min-height: 44px; }
}

/* ---------- 滑鼠 hover ---------- */
@media (hover: hover) and (pointer: fine) {
  .c-card--link:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
  .c-list__item:hover { background: var(--surface-2); }
  .c-btn--primary:hover, .c-btn--danger:hover { background: var(--primary-strong); }
  .c-btn--danger:hover { background: var(--danger); opacity: .9; }
  .c-btn--secondary:hover { background: var(--primary-soft); filter: brightness(.97); }
  .c-btn--ghost:hover { background: var(--primary-tint); }
  .c-btn:not(.c-btn--primary):not(.c-btn--secondary):not(.c-btn--ghost):not(.c-btn--danger):hover { background: var(--surface-3); }
  .c-chip:hover { border-color: var(--text-3); }
  .c-scene-chip:hover { border-color: var(--text-3); }
  .c-chart__svg { cursor: crosshair; }
  .c-body__zone:hover { outline: 2px solid var(--primary); outline-offset: 1px; }
  .c-heat__cell:not(.is-insufficient):hover { border-color: var(--text-3); }
  .c-product:hover { border-color: var(--text-3); }
  .c-action-grid__btn:hover { background: var(--surface-3); }
  .c-checkin__lv:hover, .c-scale__opt:hover { border-color: var(--text-3); }
  .c-learn-card:hover { box-shadow: var(--shadow-2); }
  .c-question__btn:hover, .c-toast__action:hover { background: var(--surface-3); }
}

/* ---------- 矮螢幕（手機橫式） ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .c-empty { padding: var(--sp-4); }
  .c-empty__illus { display: none; }
  .c-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-action-grid__btn { min-height: 72px; }
  .c-btn--fab { bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }
  .c-dialog { max-height: 96dvh; }
}

/* ---------- 容器查詢：窄欄也要排版正確 ---------- */
@container view (min-width: 640px) {
  .c-field-row--3 { grid-template-columns: repeat(3, 1fr); }
  .c-checkin__levels { gap: var(--sp-3); }
}
@container view (max-width: 420px) {
  .c-checkin__levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-scale-row { flex-direction: column; align-items: flex-start; }
  .c-heat { gap: 3px; }
}