/* ===== 按鈕 ===== */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5);
  font-size: var(--text-sm); font-weight: 550; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius-md);
  cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease), transform .18s var(--ease),
              border-color .18s var(--ease), opacity .18s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); }
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }
.btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-muted); }
.btn--ghost:hover { --btn-bg: var(--surface-2); --btn-fg: var(--text); }
.btn--danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); }
.btn--block { width: 100%; }
.btn--sm { min-height: 34px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading::before {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  color: var(--text-muted); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ===== 卡片 ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.card--flush { padding: 0; overflow: hidden; }
.card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.card__body { padding: var(--space-5); }

/* ===== 統計 ===== */
.stat__label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; }
.stat__value {
  margin-top: var(--space-1);
  font-size: var(--text-lg); font-weight: 650; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__value--accent { color: var(--accent); }
.stat__value--warm { color: var(--warm); }
.stat__hint { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-faint); }

/* ===== 進度條 ===== */
.progress { display: block; }
.progress__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-2);
}
.progress__amount { font-size: var(--text-lg); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.progress__goal { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.progress__track {
  height: 10px; background: var(--surface-2);
  border-radius: var(--radius-full); overflow: hidden;
}
.progress__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--warm)));
  border-radius: var(--radius-full);
  transition: width .6s var(--ease);
}
.progress__foot { margin-top: var(--space-2); display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-muted); }

/* ===== 徽章 ===== */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 550; white-space: nowrap;
  background: var(--surface-2); color: var(--text-muted);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--pending   { background: var(--warning-soft); color: var(--warning); }
.badge--received  { background: var(--success-soft); color: var(--success); }
.badge--exported  { background: var(--accent-soft);  color: var(--accent); }
.badge--cancelled { background: var(--surface-2);    color: var(--text-faint); }
.badge--rejected  { background: var(--danger-soft);  color: var(--danger); }

/* ===== 表單 ===== */
.field { display: block; }
.field__label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 550; }
.field__req { color: var(--danger); }
.field__hint { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.field__error { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--danger); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: var(--space-3) var(--space-3);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.textarea { min-height: 96px; resize: vertical; }
.field.is-invalid .input, .field.is-invalid .select { border-color: var(--danger); }
.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); cursor: pointer; }
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }

/* 金額快速按鈕 */
.amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.amount-chip {
  min-height: 44px; font-size: var(--text-sm); font-weight: 550;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.amount-chip:hover { border-color: var(--accent); color: var(--accent); }
.amount-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ===== 列表（手機為卡片、桌面為表格觀感） ===== */
.list { list-style: none; margin: 0; padding: 0; }
.list__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  transition: background-color .18s var(--ease);
}
.list__item:first-child { border-top: 0; }
.list__item:hover { background: var(--bg-tint); }
.list__main { min-width: 0; }
.list__title { font-size: var(--text-sm); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__sub { margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); }
.list__side { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.list__amount { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===== 空狀態 ===== */
.empty { padding: var(--space-12) var(--space-5); text-align: center; }
.empty__icon {
  margin: 0 auto var(--space-4); width: 44px; height: 44px;
  display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft); border-radius: var(--radius-full);
}
.empty__title { font-size: var(--text-sm); font-weight: 600; }
.empty__text { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.empty__action { margin-top: var(--space-5); }

/* ===== 骨架載入 ===== */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg-tint) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ===== 提示條 ===== */
.notice {
  display: flex; gap: var(--space-3);
  padding: var(--space-4);
  font-size: var(--text-sm);
  background: var(--accent-soft); color: var(--text);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  border-radius: var(--radius-md);
}
.notice--warm { background: var(--warm-soft); border-color: color-mix(in oklab, var(--warm) 30%, transparent); }
.notice__icon { flex: none; color: var(--accent); }
.notice--warm .notice__icon { color: var(--warm); }

/* ===== 首頁橫額圖片 ===== */
.hero-banner { display: block; width: 100%; max-height: 180px; object-fit: cover; object-position: center; }
@media (min-width: 768px) { .hero-banner { max-height: 280px; } }

/* ===== 分頁標籤 ===== */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); font-weight: 550; color: var(--text-muted);
  background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ===== 上傳區 ===== */
.upload-zone {
  display: grid; place-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-5); text-align: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-tint); cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.upload-zone:hover, .upload-zone.is-over { border-color: var(--accent); background: var(--accent-soft); }

/* ===== 排行榜 ===== */
.rank { display: flex; align-items: center; gap: var(--space-3); }
.rank__no {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  font-size: var(--text-xs); font-weight: 650; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--text-muted); border-radius: var(--radius-full);
}
.rank__no--top { background: var(--warm-soft); color: var(--warm); }
.rank__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__amount { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.leaderboard { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

/* ===== CR-01：首頁選擇卡 ===== */
.hero { padding-block: var(--space-10) var(--space-8); }
.hero__lead { margin-top: var(--space-3); max-width: 38rem; color: var(--text-muted); }
.hero__verse {
  margin-top: var(--space-5); padding-left: var(--space-4);
  border-left: 3px solid var(--warm); font-size: var(--text-sm); color: var(--text-muted);
}

.choices { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .choices { grid-template-columns: 1fr 1fr; } }

.choice {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.choice:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.choice__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-md);
}
.choice--warm .choice__icon { color: var(--warm); background: var(--warm-soft); }
.choice--warm:hover { border-color: var(--warm); }
.choice__title { font-size: var(--text-lg); font-weight: 650; letter-spacing: -0.01em; }
.choice__text { font-size: var(--text-sm); color: var(--text-muted); }
.choice__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.choice__points li { display: flex; gap: var(--space-2); align-items: flex-start; }
.choice__points svg { flex: none; margin-top: 3px; color: var(--accent); }
.choice--warm .choice__points svg { color: var(--warm); }
.choice__cta { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
.choice--warm .choice__cta { color: var(--warm); }
.choice__tag {
  position: absolute; top: var(--space-5); right: var(--space-5);
  font-size: var(--text-xs); font-weight: 600; color: var(--warm);
  background: var(--warm-soft); padding: 2px var(--space-2); border-radius: var(--radius-full);
}

/* ===== CR-01：單選卡（奉獻對象、記名程度） ===== */
.option-group { display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .option-group--2 { grid-template-columns: 1fr 1fr; } .option-group--3 { grid-template-columns: repeat(3, 1fr); } }
.option {
  position: relative; display: block; padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.option:hover { border-color: var(--accent); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.option__title::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.option__text { display: block; margin-top: var(--space-1); padding-left: calc(16px + var(--space-2)); font-size: var(--text-xs); color: var(--text-muted); }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.option:has(input:checked) .option__title::before { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--accent); }
.option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.checkbox.is-disabled { opacity: .5; cursor: not-allowed; }
.section-title { font-size: var(--text-sm); font-weight: 650; margin-bottom: var(--space-3); }
.summary { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.summary__row { display: flex; justify-content: space-between; gap: var(--space-3); }
.summary__row dt { color: var(--text-muted); }
.summary__row dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ref-box {
  padding: var(--space-4); text-align: center; border-radius: var(--radius-md);
  background: var(--warm-soft); border: 1px dashed color-mix(in oklab, var(--warm) 45%, transparent);
}
.ref-box__no { font-size: var(--text-lg); font-weight: 700; letter-spacing: .06em; color: var(--warm); font-variant-numeric: tabular-nums; }

/* ===== 站點風格 Modal（替代 alert/confirm/prompt） ===== */
#app-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
#app-modal[hidden] { display: none; }
.app-modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.55); }
.app-modal__card { position: relative; width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); }
.app-modal__body { font-size: var(--text-sm); color: var(--text); white-space: pre-line; line-height: 1.6; overflow-wrap: anywhere; }
.app-modal__input { margin-top: var(--space-3); }
.app-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }