/* 阿橘+1 — 團主管理 LIFF（Sprint 214 state-based 重構；09A-P4 套用共用 design tokens）
 *
 * 09A-P4 原則（依 02_design_system.md，P2/P3 同一套）：
 *   - 品牌橘 --color-primary 只做識別（外框、選中底、徽章底），不承載白色內文字
 *   - 承載文字的主要動作一律 --color-action（白字 5.20:1）；白底上的橘字用 --color-action-text
 *   - 必讀文字 >=14px、輸入框 >=16px、可點 >=44px、主要控制項 >=48px
 *   - 每個畫面只有一個填滿動作色的主要按鈕，其餘為白底描邊或文字鈕
 *   - 語意色成對（深前景＋淺底），不做彩底白字徽章
 *   - --color-text-tertiary（#B0A090，2.54:1）退役，改 --color-text-soft
 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg-page); color: var(--color-text-primary);
  font-size: var(--font-size-body); line-height: var(--line-height-body);
  padding-bottom: calc(var(--space-6) + var(--safe-bottom));
}
#app { max-width: 480px; margin: 0 auto; }
button { font-family: inherit; }
/* 鍵盤焦點：全站規範（08C/09A），滑鼠點擊不出現 */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* error / loading */
.error-box { text-align: center; padding: 80px 20px; }
.error-icon { font-size: 48px; margin-bottom: var(--space-3); }
.error-msg { color: var(--color-text-primary); font-size: var(--font-size-body); line-height: var(--line-height-body); word-break: break-word; }
.error-retry-btn {
  display: inline-block; margin-top: var(--space-4); padding: 12px 28px; min-height: var(--control-height);
  background: var(--color-action); color: #fff; border: none; border-radius: var(--radius-md);
  font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer;
}
.error-retry-btn:active { background: var(--color-action-hover); }
.loading { text-align: center; padding: 80px 20px; color: var(--color-text-soft); font-size: var(--font-size-body); }
#loading .ahju-loading-text { color: var(--color-text-soft); animation: none; }   /* 共用 loading.css：#B0A090 只有 1.5:1，且 pulse 動畫低點 opacity .4 會把 6.77:1 拉到 2.1:1 */

/* header：09A §5 三段式 —— 標題 / 群組 context 永遠在標題下 / 單一狀態列。
 * 品牌橘改為頂端識別帶，文字全部站在白底上（原本白字疊橘底 2.36:1）。 */
.mgr-header {
  background: var(--color-bg-card); color: var(--color-text-primary);
  padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  box-shadow: inset 0 4px 0 var(--color-primary);
}
.mgr-title { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--color-text-strong); line-height: var(--line-height-tight); }
.mgr-group-name { font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin-top: var(--space-1); word-break: break-word; }
.mgr-restaurant { font-size: var(--font-size-sm); color: var(--color-text-soft); margin-top: 2px; word-break: break-word; }
.mgr-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.status-badge {
  display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: 1.4;
}
.status-badge.open { background: var(--color-success-surface); color: var(--color-success-fg); }
.status-badge.lock { background: var(--color-warning-surface); color: var(--color-warning-fg); }
.status-badge.none { background: var(--color-bg-sunken); color: var(--color-text-soft); border: 1px solid var(--color-border); }
.mgr-stats { font-size: var(--font-size-sm); color: var(--color-text-soft); }

/* main content */
.main-content { padding: var(--space-4) var(--space-4) var(--space-2); }

/* info card */
.info-card {
  background: var(--color-bg-card); border-radius: var(--radius-lg); padding: var(--space-4);
  margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-light);
}
.info-card-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-soft); margin-bottom: var(--space-2); }

/* restaurant row (multi-restaurant) */
.rest-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding: 4px 0; border-bottom: 1px solid var(--color-divider); min-height: var(--tap-min);
}
.rest-row:last-of-type { border-bottom: none; }
.rest-row-name { font-size: var(--font-size-body); font-weight: var(--font-weight-medium); word-break: break-word; }
.rest-row-remove {
  color: var(--color-error-fg); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer;
  padding: 0 var(--space-3); min-height: var(--tap-min); display: inline-flex; align-items: center; flex-shrink: 0;
  border-radius: var(--radius-sm); background: none; border: none;
}
.rest-row-remove:active { background: var(--color-error-surface); }
.btn-add-rest {
  width: 100%; min-height: var(--tap-min); padding: 10px; margin-top: var(--space-2);
  border: 2px dashed var(--color-primary); border-radius: var(--radius-sm);
  background: var(--color-bg-card); color: var(--color-action-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.btn-add-rest:active { background: var(--color-primary-light); }

/* stat row */
.stat-row { display: flex; gap: var(--space-4); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.stat-time { font-size: var(--font-size-sm); color: var(--color-text-soft); margin-top: 6px; }

/* action buttons（OPEN 狀態）：一個畫面一個 primary */
.action-row { display: flex; gap: 10px; margin-top: var(--space-3); }
.action-btn {
  flex: 1; padding: 12px; border-radius: var(--radius-md); border: none;
  font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer; text-align: center;
  min-height: var(--control-height);
}
.action-btn.primary { background: var(--color-action); color: #fff; }
.action-btn.primary:active { background: var(--color-action-hover); }
.action-btn.secondary { background: var(--color-bg-card); color: var(--color-text-primary); border: 1.5px solid var(--color-border-strong); }
.action-btn.secondary:active { background: var(--color-bg-page); }

/* big CTA buttons */
.primary-big-btn {
  display: block; width: 100%; min-height: var(--control-height); padding: 14px; margin-bottom: var(--space-2);
  background: var(--color-action); color: #fff; border: none; border-radius: var(--radius-md);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); cursor: pointer; text-align: center;
}
.primary-big-btn:active { background: var(--color-action-hover); }
.primary-big-btn:disabled { background: #D8CFC2; color: #7A6E5E; cursor: default; }
.secondary-big-btn {
  display: block; width: 100%; min-height: var(--control-height); padding: 12px; margin-bottom: var(--space-2);
  background: var(--color-bg-card); color: var(--color-text-primary); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
  font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer; text-align: center;
}
.secondary-big-btn:active { background: var(--color-bg-page); }
.hint-text { text-align: center; font-size: var(--font-size-sm); color: var(--color-text-soft); margin: 0 0 var(--space-3); }

/* more section (collapsible) */
.more-section { padding: 0 var(--space-4) var(--space-4); }
.collapsible-header {
  min-height: var(--tap-min); padding: var(--space-2) 0; color: var(--color-text-soft); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.collapsible-header:active { color: var(--color-text-primary); }
.collapsible-content { background: var(--color-bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }

/* small grid cards (quick actions 2x2) */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-card-sm {
  background: var(--color-bg-card); border-radius: 14px; padding: 18px 12px;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-primary);
  box-shadow: var(--shadow-sm); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  -webkit-tap-highlight-color: transparent; transition: transform 0.1s;
}
.grid-card-sm:active { transform: scale(0.96); }
.grid-card-sm .sm-icon { font-size: 26px; }

/* tool list rows */
.tool-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 52px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tool-row:last-child { border-bottom: none; }
.tool-row:active { background: var(--color-bg-hover); }
.tool-label { flex: 1; font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.tool-arrow { font-size: 18px; color: var(--color-text-soft); }
.tool-row.danger .tool-label { color: var(--color-error-fg); }

/* action chips (status card inline buttons) */
.action-chip {
  min-height: var(--tap-min); padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong); background: var(--color-bg-hover);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-primary);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.action-chip:active { background: var(--color-primary-light); }
.action-chip.danger { border-color: var(--color-error-fg); background: var(--color-error-surface); color: var(--color-error-fg); }
.grid-card-sm.danger { color: var(--color-error-fg); border: 1px solid var(--color-error-fg); }

/* T6: phone section */
.phone-section {
  background: var(--color-bg-card); border-radius: var(--radius-md); padding: var(--space-4);
  margin-top: var(--space-3); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-light);
}
.phone-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding: 2px 0; border-bottom: 1px solid var(--color-divider); min-height: var(--tap-min);
}
.phone-row:last-child { border-bottom: none; }
.phone-name { font-size: var(--font-size-body); font-weight: var(--font-weight-medium); word-break: break-word; }
.phone-btn {
  color: var(--color-action-text); text-decoration: none; font-weight: var(--font-weight-bold); font-size: var(--font-size-body);
  min-height: var(--tap-min); display: inline-flex; align-items: center; padding: 0 var(--space-2); flex-shrink: 0;
  border-radius: var(--radius-sm); white-space: nowrap;
}
.phone-btn:active { background: var(--color-primary-light); }

/* announce templates */
.announce-templates { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.template-btn {
  background: var(--color-bg-card); border: 1px solid var(--color-primary); color: var(--color-action-text);
  min-height: var(--tap-min); padding: 6px 12px; border-radius: var(--radius-pill); font-size: var(--font-size-sm); cursor: pointer;
}
.template-btn:active { background: var(--color-primary-light); }

/* T7: share button（次要動作：白底描邊，品牌橘做識別） */
.share-btn {
  display: block; width: 100%; min-height: var(--control-height); padding: 12px; margin-top: var(--space-2);
  background: var(--color-bg-card); color: var(--color-action-text); border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md); font-size: var(--font-size-body); font-weight: var(--font-weight-bold);
  cursor: pointer; text-align: center;
}
.share-btn:active { background: var(--color-primary-light); }
.sm-icon { font-size: 16px; flex-shrink: 0; }

/* modal */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5) var(--space-5) calc(var(--space-5) + var(--safe-bottom));
}
.modal-box {
  background: var(--color-bg-card); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5);
  width: 100%; max-width: 360px; max-height: 80vh; overflow-y: auto;
}
.modal-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text-strong); margin-bottom: var(--space-1); }
.modal-subtitle { font-size: var(--font-size-body); color: var(--color-text-primary); line-height: var(--line-height-body); margin-bottom: var(--space-4); }
.modal-actions { display: flex; gap: 10px; margin-top: var(--space-4); }
.modal-cancel {
  display: block; width: 100%; min-height: var(--control-height); padding: 12px; margin-top: var(--space-3);
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-card);
  color: var(--color-text-primary); font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer;
}
.modal-ok {
  flex: 1; min-height: var(--control-height); padding: 12px; border: none; border-radius: var(--radius-md);
  background: var(--color-action); color: #fff; font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer;
}
.modal-ok:active { background: var(--color-action-hover); }
.modal-actions .modal-cancel { flex: 1; margin-top: 0; }   /* 只在並排列裡才拿掉上邊距（transfer modal 的取消要留距離） */
.link-btn {
  background: none; border: none; color: var(--color-text-soft); font-size: var(--font-size-sm);
  text-decoration: underline; cursor: pointer; min-height: var(--tap-min); padding: 0 var(--space-3);
}
.list-note { text-align: center; padding: var(--space-5); color: var(--color-text-soft); font-size: var(--font-size-sm); }

/* legacy close-time modal classes（仍可能被舊 markup 引用，值改成 token） */
.closetime-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.closetime-chip {
  min-height: var(--tap-min); padding: 8px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-border-strong);
  background: var(--color-bg-card); color: var(--color-text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer;
}
.closetime-chip.active { background: var(--color-primary-light); color: var(--color-action-text); border-color: var(--color-primary); }
.closetime-input {
  width: 100%; min-height: var(--control-height); padding: 12px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
  font-size: var(--font-size-body); margin-bottom: 4px; text-align: center;
}
.closetime-input:focus { border-color: var(--color-primary); outline: none; }

/* T3: group selector */
.group-select-btn {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px;
  padding: var(--space-3); margin-bottom: var(--space-2); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg-card); cursor: pointer;
  text-align: left; transition: border-color 0.15s;
}
.group-select-btn:active { border-color: var(--color-primary); background: var(--color-bg-hover); }
.gs-dot { font-size: 18px; flex-shrink: 0; }
.gs-info { flex: 1; min-width: 0; }
.gs-name { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-text-primary); word-break: break-word; }
.gs-sub { font-size: var(--font-size-sm); color: var(--color-text-soft); margin-top: 2px; }

/* transfer list */
.transfer-list { display: flex; flex-direction: column; gap: var(--space-2); }
.transfer-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--control-height); padding: 10px 14px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-card); cursor: pointer;
  font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-text-primary); text-align: left;
}
.transfer-btn:active { border-color: var(--color-primary); background: var(--color-bg-hover); }
.transfer-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-light);
  color: var(--color-action-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* toast */
.toast {
  position: fixed; bottom: calc(var(--space-6) + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--color-text-strong); color: #fff; padding: 10px 20px; border-radius: var(--radius-pill);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); z-index: 200; max-width: calc(100% - 32px);
  cursor: pointer; animation: toastIn 0.3s ease; text-align: center;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── No Group Guide / Not Owner Guide ── */
.empty-state-container {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 24px; text-align: center; gap: var(--space-2);
  min-height: 80vh;
}
.empty-state-icon { font-size: 48px; margin-bottom: var(--space-2); }
.empty-state-title { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--color-text-strong); }
.empty-state-steps { text-align: left; margin: var(--space-4) auto; max-width: 260px; }
.empty-state-note { font-size: var(--font-size-sm); color: var(--color-text-soft); margin-top: var(--space-5); }
.guide-step-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--font-size-body); color: var(--color-text-primary); margin-bottom: 10px;
}
.guide-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-action); color: #fff; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); flex-shrink: 0;
}
.primary-action {
  background: var(--color-action); color: #fff; border: none; min-height: var(--control-height); padding: 12px 24px;
  border-radius: var(--radius-md); font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.primary-action:active { background: var(--color-action-hover); }
.secondary-action {
  background: var(--color-bg-card); color: var(--color-text-primary); border: 1.5px solid var(--color-border-strong);
  min-height: var(--tap-min); padding: 10px 24px; border-radius: var(--radius-md); font-size: var(--font-size-body);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ── Frequent Restaurant Pills ── */
.freq-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.freq-pill {
  min-height: var(--tap-min); padding: 8px 16px; border: 1.5px solid var(--color-primary); border-radius: var(--radius-pill);
  background: var(--color-bg-card); color: var(--color-action-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.freq-pill:active { background: var(--color-primary-light); }
.freq-pill-multi {
  font-size: var(--font-size-xs); color: var(--color-text-soft); background: var(--color-bg-sunken);
  border-radius: 4px; padding: 1px 5px; margin-left: 4px;
}

/* ── Close Time Card ── */
.ct-not-set { background: var(--color-warning-surface) !important; border-color: var(--color-primary) !important; }
.ct-warning { font-size: var(--font-size-body); color: var(--color-warning-fg); font-weight: var(--font-weight-bold); margin-bottom: 10px; }
.ct-error {
  font-size: var(--font-size-sm); color: var(--color-error-fg); background: var(--color-error-surface);
  border: 1px solid var(--color-error-fg); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3); line-height: var(--line-height-body); word-break: break-word;
}
/* 公告結果未知：不是錯誤紅、也不是成功綠 —— 「請先查看群組」 */
.ct-error--unknown { color: var(--color-warning-fg); background: var(--color-warning-surface); border-color: var(--color-warning-fg); }
.ct-error-action { display: block; min-height: 44px; margin-top: var(--space-2); padding: 0 var(--space-4); border: 1px solid currentColor;
  border-radius: var(--radius-md); background: transparent; color: inherit; font: inherit; font-weight: var(--font-weight-bold); cursor: pointer; }
.ct-notice-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.ct-notice-actions .ct-display-change { margin: 0;
}
.ct-options { display: flex; gap: 10px; }
.ct-option {
  flex: 1; min-height: var(--control-height); padding: 12px 10px; border: 2px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-card); cursor: pointer; text-align: center;
}
.ct-option:active { border-color: var(--color-primary); background: var(--color-bg-hover); }
.ct-option.active { border-color: var(--color-primary); background: var(--color-primary-light); }
.ct-opt-icon { font-size: 28px; margin-bottom: 6px; }
.ct-opt-label { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.ct-opt-desc { font-size: var(--font-size-sm); color: var(--color-text-soft); margin-top: 2px; }
.ct-display { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ct-display-value { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-text-strong); }
.ct-display-change {
  background: var(--color-bg-card); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  min-height: var(--tap-min); padding: 6px 14px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-action-text); cursor: pointer;
}
.ct-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.ct-chip {
  min-height: var(--tap-min); padding: 8px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-bg-card); color: var(--color-text-primary); font-size: var(--font-size-body); cursor: pointer;
}
.ct-chip:active { background: var(--color-primary-light); border-color: var(--color-primary); }
.ct-chip.active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-action-text); font-weight: var(--font-weight-bold); }
.ct-custom { display: flex; gap: var(--space-2); align-items: center; }
.ct-custom input {
  flex: 1; min-width: 0; min-height: var(--control-height); padding: 8px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-size: var(--font-size-body); background: var(--color-bg-card); color: var(--color-text-primary); font-family: inherit;
}
.ct-custom input:focus { border-color: var(--color-primary); outline: none; box-shadow: var(--focus-ring); }
.ct-apply {
  min-height: var(--control-height); padding: 8px 16px; background: var(--color-action); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer; white-space: nowrap;
}
.ct-apply:active { background: var(--color-action-hover); }

/* ── Pre-Open Step UI ── */
.step-header { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--color-text-strong); padding: var(--space-4) 0 var(--space-1); text-align: center; }
.step-subtitle { font-size: var(--font-size-sm); color: var(--color-text-soft); text-align: center; margin-bottom: var(--space-4); word-break: break-word; }
.summary-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
  padding: 12px 0; border-bottom: 1px solid var(--color-divider);
}
.summary-row:last-child { border-bottom: none; }
.summary-label { font-size: var(--font-size-sm); color: var(--color-text-soft); flex-shrink: 0; }
.summary-value { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-text-primary); text-align: right; word-break: break-word; }
.ct-option.full-width { width: 100%; display: flex; align-items: center; gap: var(--space-3); text-align: left; }

/* 開團結果失敗：留在確認畫面、保留已選收單方式，給出下一步（不只 2.5 秒 toast） */
.open-failed {
  background: var(--color-error-surface); border: 1px solid var(--color-error-fg); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-3);
}
.open-failed-title { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-error-fg); margin-bottom: var(--space-1); }
/* Batch 25：結果不明（目前還沒開團／已有開團中的團／暫時無法確認）不是失敗 → 警示色，不用錯誤紅 */
.open-failed--unknown { background: var(--color-warning-surface); border-color: var(--color-warning-fg); }
.open-failed--unknown .open-failed-title { color: var(--color-warning-fg); }
.open-failed-msg { font-size: var(--font-size-sm); color: var(--color-text-primary); line-height: var(--line-height-body); word-break: break-word; }
.open-failed-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.open-failed-actions .primary-big-btn, .open-failed-actions .secondary-big-btn { margin-bottom: 0; }

/* ── Success Overlay ── */
.success-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); display: none;
  align-items: center; justify-content: center; z-index: 200; padding: var(--space-5);
}
.success-content {
  background: var(--color-bg-card); border-radius: var(--radius-lg); padding: 32px 24px;
  text-align: center; max-width: 300px; animation: popIn 0.3s ease;
}
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-icon { font-size: 48px; margin-bottom: var(--space-3); }
.success-title { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--color-text-strong); margin-bottom: var(--space-1); }
.success-desc { font-size: var(--font-size-sm); color: var(--color-success-fg); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.success-detail { font-size: var(--font-size-sm); color: var(--color-text-soft); margin-bottom: var(--space-2); word-break: break-word; }
.success-hint { font-size: var(--font-size-sm); color: var(--color-text-soft); }

/* ── Group Buy Stock ── */
.gb-stock-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: 4px; }
.gb-stock-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-sm); }
.gb-stock-name { color: var(--color-text-primary); font-weight: var(--font-weight-medium); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: var(--space-2); }
.gb-stock-ok { color: var(--color-text-soft); }
.gb-stock-unlimited { color: var(--color-text-soft); }
.gb-stock-low { color: var(--color-warning-fg); font-weight: var(--font-weight-bold); }
.gb-stock-soldout { color: var(--color-error-fg); font-weight: var(--font-weight-bold); }

/* ── 08C-002：開團三步驟引導（未開團時的主畫面） ── */
.first-time-hint {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-warning-surface); color: var(--color-warning-fg);
  border-radius: var(--radius-md); padding: 6px 6px 6px 12px;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3);
}
.fth-mascot { width: 34px; height: 34px; flex-shrink: 0; }
.first-time-hint .fth-x {
  margin-left: auto; cursor: pointer; color: var(--color-warning-fg);
  font-size: 22px; line-height: 1; min-width: var(--tap-min); min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); flex-shrink: 0;
}
.setup-step {
  background: var(--color-bg-card); border-radius: 14px; padding: 14px;
  margin-bottom: 10px; border: 2px solid var(--color-border);
}
.setup-step.is-active { border-color: var(--color-primary); box-shadow: 0 2px 10px rgba(255,138,0,.14); }
.setup-step.is-done { border-color: var(--color-border); background: var(--color-bg-sunken); }
.setup-step.is-pending { background: var(--color-bg-sunken); border-color: var(--color-border); }
.setup-step.is-pending .step-title,
.setup-step.is-pending .step-body { color: var(--color-text-soft); }
.step-head { display: flex; align-items: center; gap: var(--space-2); }
.step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-border); color: var(--color-text-soft);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.setup-step.is-active .step-num { background: var(--color-action); color: #fff; }
.setup-step.is-done .step-num { background: var(--color-success-fg); color: #fff; }
.step-title { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.step-body { font-size: var(--font-size-sm); color: var(--color-text-soft); margin: 6px 0 0 32px; word-break: break-word; }
.step-actions { margin: 8px 0 0 32px; display: flex; flex-direction: column; gap: var(--space-1); }
.step-btn {
  width: 100%; min-height: var(--control-height); padding: 12px; border-radius: var(--radius-md); border: none;
  background: var(--color-action); color: #fff; font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer;
}
.step-btn:active { background: var(--color-action-hover); }
.step-btn.ghost { background: var(--color-bg-card); color: var(--color-text-primary); border: 1.5px solid var(--color-border-strong); }
.step-btn:disabled { background: #D8CFC2; color: #7A6E5E; cursor: default; }
/* 文字連結：視覺緊湊、命中區 44px（::after 擴張，P3 同法；不撐開步驟卡，主動作留在首屏） */
.step-link {
  background: none; border: none; padding: 6px 0; text-align: left; position: relative;
  color: var(--color-action-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: underline; cursor: pointer;
  line-height: 1.4;
}
.step-link::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: var(--tap-min); transform: translateY(-50%); }
/* 兩個文字連結相鄰時，行距要 >= 44px，擴張的命中區才不會壓到下一個（review R1-3） */
.step-link + .step-link { margin-top: 10px; }

/* 動態偏好：使用者要求減少動態時，關掉所有進場動畫（規範 §8.5） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 頁尾服務資訊（POLICY-SUPPORT-ENTRY）：條款／隱私／客服三個外連；必讀 ≥14px、點擊區 ≥44px、可換行、不蓋主要操作 ── */
.mgr-policy-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px;
  padding: var(--space-2) var(--space-4) var(--space-4);
}
.mgr-policy-links a {
  display: inline-flex; align-items: center; min-height: var(--tap-min, 44px); padding: 0 10px;
  font-size: var(--font-size-sm); color: var(--color-action-text); text-decoration: underline; text-underline-offset: 3px; border-radius: var(--radius-sm);
}
.mgr-policy-links a:active { background: var(--color-bg-hover); }

/* ── 官方訂購提示（AHJU-OFFICIAL-ORDER-FIRST-20260921；非阻塞）── */
/* FIRST-GROUP-UX NEW-4 */
.organizer-pays-note { margin: 0 0 12px; font-size: 0.85rem; line-height: 1.5; color: var(--color-text-soft, #6B5842); }
.official-order-hint { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--color-border-strong, #DDD2BF); background: var(--color-primary-bg, #FFF8F0); border-radius: 12px; }
.official-order-hint-text { color: var(--color-text-strong, #2D2D2D); font-weight: 600; font-size: 0.95rem; line-height: 1.5; }
.official-order-hint-sub { display: block; margin-top: 4px; color: var(--color-text-soft, #6B5842); font-weight: 400; font-size: 0.8rem; }
.official-order-hint-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.official-order-hint-go { flex: 1 1 140px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: var(--color-action, #C43E00); color: var(--color-text-inverse, #fff); border-radius: 10px; font-weight: 600; text-decoration: none; padding: 0 12px; box-sizing: border-box; }
.official-order-hint-stay { flex: 1 1 140px; min-height: 44px; background: #fff; color: var(--color-action-text, #B34000); border: 1px solid var(--color-border-strong, #DDD2BF); border-radius: 10px; font-weight: 600; font-size: 0.95rem; }

/* ── POST-CLOSE Batch 3：收單後第一屏 ── */
.post-close-card { text-align: left; }
.post-close-title { font-size: 1.15rem; font-weight: 700; color: var(--color-text-strong, #2D2D2D); margin-bottom: 4px; }
.post-close-rest { font-size: var(--font-size-md, 1rem); font-weight: 600; color: var(--color-text-strong, #2D2D2D); }
.post-close-time { font-size: var(--font-size-sm); color: var(--color-text-soft); margin-top: 2px; }
.post-close-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 8px 0 12px; }
.post-close-counts { font-size: 1rem; color: var(--color-text-strong, #2D2D2D); }
.post-close-total { font-size: 1.25rem; font-weight: 700; color: var(--color-text-strong, #2D2D2D); }
.post-close-cta { margin-bottom: 0; }
.next-steps-lead { font-size: var(--font-size-sm); color: var(--color-text-strong, #2D2D2D); line-height: 1.6; margin-bottom: 6px; }
.next-steps-list { margin: 0 0 4px; padding-left: 1.4em; line-height: 1.9; color: var(--color-text-strong, #2D2D2D); }
.official-after-close { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border, #EDE5D8); }
.official-after-close-go { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; margin-bottom: 8px;
  border: 1.5px solid var(--color-action, #C2410C); border-radius: 10px; color: var(--color-action-text, #9A3412); font-weight: 600; text-decoration: none; background: #fff; }
.official-after-close-name { color: var(--color-text-strong, #2D2D2D); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.official-after-close-go > span:last-child { white-space: nowrap; flex-shrink: 0; }
.official-after-close-note { font-size: var(--font-size-sm); color: var(--color-text-soft); line-height: 1.5; }
.post-close-secondary { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.secondary-small-btn { flex: 1 1 calc(50% - 8px); min-height: 44px; padding: 8px 10px; border: 1px solid var(--color-border, #EDE5D8); border-radius: 10px;
  background: #fff; color: var(--color-text-strong, #2D2D2D); font-size: var(--font-size-sm); cursor: pointer; }
.secondary-small-btn:active { background: var(--color-bg-page); }
.post-close-wallet-hint { text-align: left; }
.recent-new-header { margin-top: 4px; }

/* ── OPEN-GROUP-PROGRESS Batch 4：開團中進度卡 ── */
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.progress-head .info-card-title { margin-bottom: 0; }
.progress-updated { font-size: var(--font-size-sm); color: var(--color-text-soft, #7A6A55); white-space: nowrap; }
.progress-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0 12px; }
.progress-counts { font-size: 1.05rem; color: var(--color-text-strong, #2D2D2D); }
.progress-num { font-weight: 600; }
.progress-dot { color: var(--color-text-soft, #7A6A55); margin: 0 2px; }
.progress-total { font-size: 1.3rem; font-weight: 700; color: var(--color-text-strong, #2D2D2D); }
.progress-error { margin: -4px 0 10px; padding: 8px 10px; border-radius: 8px; background: #FFF4E5; color: #8A4B00; font-size: var(--font-size-sm); }
.progress-people-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-soft, #7A6A55); margin: 4px 0 6px; }
.progress-empty { font-size: var(--font-size-sm); color: var(--color-text-soft, #7A6A55); padding: 6px 0 2px; line-height: 1.5; }
.progress-row { padding: 9px 0; border-top: 1px solid var(--color-border, #EDE5D8); }
.progress-row:first-of-type { border-top: none; }
.progress-row-top, .progress-detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.progress-row-name { font-weight: 600; color: var(--color-text-strong, #2D2D2D); min-width: 0; overflow-wrap: anywhere; }
.progress-row-sum { flex-shrink: 0; white-space: nowrap; color: var(--color-text-strong, #2D2D2D); font-variant-numeric: tabular-nums; }
.progress-row-items { margin-top: 2px; font-size: var(--font-size-sm); color: var(--color-text-soft, #7A6A55); overflow-wrap: anywhere; line-height: 1.45; }
.progress-more { font-size: var(--font-size-sm); color: var(--color-text-soft, #7A6A55); padding-top: 6px; }
.progress-detail-toggle { display: block; width: 100%; min-height: 44px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--color-border, #EDE5D8);
  border-radius: 10px; background: #fff; color: var(--color-action, #C43E00); font-size: var(--font-size-body); font-weight: 600; cursor: pointer; }
.progress-detail-toggle:active { background: var(--color-bg-page); }
.progress-detail-toggle:focus-visible, #btn-close-batch:focus-visible { outline: var(--focus-width, 3px) solid var(--focus-color, #B34000); outline-offset: 2px; }
.progress-detail { margin-top: 10px; }
.progress-detail-person { padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; background: var(--color-bg-page, #F7F3EC); }
.progress-detail-line { margin-top: 6px; }
.progress-detail-item { color: var(--color-text-strong, #2D2D2D); overflow-wrap: anywhere; }
.progress-detail-spec { font-size: var(--font-size-sm); color: var(--color-text-soft, #7A6A55); overflow-wrap: anywhere; }
.action-btn:disabled { background: #D8CFC2; color: #7A6E5E; cursor: default; }
.close-hint { margin: 6px 4px 14px; font-size: var(--font-size-sm); color: var(--color-text-soft, #7A6A55); }

/* ── SAFE-ORDER-REMINDER Batch 6：提醒大家點餐（次要動作，不與結束點餐搶視覺） ── */
.reminder-wrap { margin: 10px 0 4px; }
.reminder-btn { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-border, #EDE5D8);
  border-radius: var(--radius-md, 12px); background: #fff; color: var(--color-text-strong, #2D2D2D);
  font-size: var(--font-size-body); font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.reminder-btn:active { background: var(--color-bg-page); }
.reminder-btn:disabled { background: #F4EFE7; color: #7A6E5E; cursor: default; }
.reminder-btn:focus-visible { outline: var(--focus-width, 3px) solid var(--focus-color, #B34000); outline-offset: 2px; }
.reminder-note { margin-top: 6px; font-size: var(--font-size-sm); color: #8A4B00; text-align: center; }


/* ══ 09A-P5 團主管理：目前這一團＋下一步優先；實心橘只給一個主要動作 ══════════════════ */
/* 頁首：有團時「本團管理」退成小字眉標，餐廳名是大字，群組名小字（DOM 順序不變，用 order 排） */
.mgr-header { display: flex; flex-direction: column; }
.mgr-header.has-batch .mgr-title { order: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-soft); }
.mgr-header.has-batch .mgr-restaurant {
  order: 1; display: block; margin-top: 2px;
  font-size: 1.3rem; font-weight: 800; color: var(--color-text-strong); line-height: 1.3;
}
.mgr-header.has-batch .mgr-group-name { order: 2; font-size: var(--font-size-sm); color: var(--color-text-soft); margin-top: 2px; }
.mgr-header .mgr-status-row { order: 3; }
.status-badge.open::before, .status-badge.lock::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
  background: currentColor;
}
.mgr-stats { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }

/* 主要動作卡：結束點餐全寬實心；分享／點餐頁並排次要；提醒在下 */
.next-action-card { margin-bottom: var(--space-3); }
.next-action-card .action-row { margin-top: 0; }
.next-action-card .action-btn.primary { flex: 1 1 100%; min-height: 52px; font-size: 1.05rem; }
.secondary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.secondary-row .share-btn, .secondary-row .action-btn.secondary {
  margin-top: 0; min-height: var(--tap-min, 44px); padding: 10px 8px;
  background: var(--color-bg-card); color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
  font-size: var(--font-size-body); font-weight: var(--font-weight-bold);
}
.next-action-card .reminder-wrap { margin-top: 10px; }
.next-action-card .close-hint { margin-top: 6px; }

/* 收單時間：預覽一行（今天／明天）＋取消 */
.ct-preview { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--color-text-strong); min-height: 1.4em; }
.ct-cancel {
  display: block; width: 100%; min-height: var(--tap-min, 44px); margin-top: 8px;
  background: none; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
  color: var(--color-text-primary); font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer;
}

/* 毀滅性確認：紅色確認鈕（不用主要動作的橘） */
.modal-ok.danger { background: var(--color-error-fg, #B3261E); }
.modal-ok.danger:active { background: #8C1D18; }

/* 開團前確認：官方入口是外框連結（與 P4 同一決策：介面只加簡單外連），實心只留「確認開團」 */
.official-order-hint-go {
  background: var(--color-bg-card); color: var(--color-action-text);
  border: 1.5px solid var(--color-action-text);
}

/* 未開團：「最近完成」的查看總單降為次要 —— 這個畫面的主要動作是開新的一團 */
#main-content .post-close-card.recent .primary-big-btn { background: var(--color-bg-card); color: var(--color-action-text); border: 1.5px solid var(--color-action-text); }

/* 更多管理：真按鈕、可聚焦；一列一個 */
.collapsible-header {
  width: 100%; background: none; border: none; text-align: left; font: inherit;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-soft);
}
#grid-more { display: block; }
.tool-row { width: 100%; background: var(--color-bg-card); border: none; border-bottom: 1px solid var(--color-divider); font: inherit; text-align: left; color: inherit; }
.tool-row.danger { margin-top: 0; border-top: 6px solid var(--color-bg-page); }
.collapsible-header:focus-visible, .tool-row:focus-visible, .ct-cancel:focus-visible, .modal-ok:focus-visible, .modal-cancel:focus-visible,
.secondary-row button:focus-visible { outline: var(--focus-width, 3px) solid var(--focus-color, #B34000); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .action-btn, .tool-row, .modal-ok { transition: none; }
}

/* 09A-P5 review round */
/* 快到截止／已過截止：獨立提示籤（文字仍在，不只靠顏色） */
.deadline-soon {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--color-warning-surface); color: var(--color-warning-fg); font-weight: var(--font-weight-bold);
}
/* 追加時間說明 */
.addition-note {
  margin: 0 0 var(--space-3); padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--color-warning-surface); color: var(--color-warning-fg);
  font-size: var(--font-size-sm); line-height: 1.5;
}
/* 收單時間編輯：取消／確認同一列 */
.ct-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ct-actions .ct-cancel { margin-top: 0; }
.ct-actions .ct-apply { width: 100%; min-height: var(--tap-min, 44px); }
.ct-custom input[type="time"] { width: 100%; }
/* 收單後官方入口置中 */
.official-after-close-go { justify-content: center; text-align: center; }