/* =============================================================================
   ui/activities.css — 領域 E「活動」
   頁面：金幣活動（#view-events）、舊引擎批次紀錄（#view-batches）
   對話框：活動詳情（題目、AI 建議、選帳號、預覽送出、人工接手各狀態、答錯重送）、
          同步觀影、批次詳情
   規則（完整說明見 docs/DESIGN.md）：
   - 每條規則都以 #view-events／#view-batches 或本領域 class（activities-…，或沿用既有的
     event-／activity-／batch-／watch-／manual-takeover-…）開頭。
   - 顏色、陰影、圓角、字級一律用 foundation 的 token，不寫色碼。
   - 共用元件（.panel、.status、.ui-*、帳號挑選器、.ui-hourline、.ui-checklist）直接使用。
   - 不要寫 @layer：一般規則本來就會蓋過 foundation 的預設。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. 金幣活動頁：頁首「下一場」、下一場橫幅、工具列、依日期分組的議程表
   ----------------------------------------------------------------------------- */
#view-events .event-head-countdown { color: var(--brand-ink); font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#view-events .event-page-head h2 .ui-num { font-family: var(--font-num); }

/* 下一場橫幅：時間磚｜狀態晶片＋名稱＋說明｜倒數｜主要按鈕 */
#view-events .event-nextup-slot:empty { display: none; }
#view-events .event-nextup {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-4); padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--brand-line); border-radius: var(--r-lg);
  background: linear-gradient(118deg, var(--brand-soft), transparent 58%), var(--card-sheen), var(--surface); box-shadow: var(--sh-1);
}
#view-events .event-nextup[data-state="active"] { border-color: var(--ok-line); background: linear-gradient(118deg, var(--ok-soft), transparent 58%), var(--card-sheen), var(--surface); }
#view-events .event-nextup-time {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 100px; min-height: 84px; padding: 10px 14px;
  border-radius: 14px; background: var(--brand); color: var(--on-brand); text-align: center; box-shadow: var(--sh-btn);
}
#view-events .event-nextup[data-state="active"] .event-nextup-time { background: var(--ok-solid); color: var(--on-ok); }
#view-events .event-nextup-time small { font-size: var(--fs-13); font-weight: 700; line-height: 1.3; }
#view-events .event-nextup-time b { font-family: var(--font-num); font-size: var(--fs-28); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#view-events .event-nextup-main { display: grid; gap: 6px; min-width: 0; }
#view-events .event-nextup-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#view-events .event-nextup-main h3 { color: var(--ink); font-size: var(--fs-20); font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
#view-events .event-nextup-main p { color: var(--ink-2); font-size: var(--fs-15); line-height: 1.6; overflow-wrap: anywhere; }
#view-events .event-nextup-countdown { display: grid; justify-items: end; gap: 2px; text-align: right; }
#view-events .event-nextup-countdown small { color: var(--ink-3); font-size: var(--fs-13); font-weight: 650; }
#view-events .event-nextup-countdown .ui-countdown.is-text { font-size: var(--fs-24); font-weight: 800; }
#view-events .event-nextup[data-state="active"] .ui-countdown { color: var(--ok); }
#view-events .event-nextup-action { display: grid; }
#view-events .event-nextup-action > button { white-space: nowrap; }
#view-events .event-nextup-action > small { max-width: 220px; color: var(--ink-3); font-size: var(--fs-13); line-height: 1.55; text-align: right; }

/* 工具列：第一列搜尋＋類型；第二列獎池晶片、「只看進行中且還有名額」、筆數 */
#view-events .event-list-toolbar { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; gap: var(--sp-3) var(--sp-4); }
#view-events .event-list-toolbar > label { flex: none; }
#view-events .event-filter-search .field-shell > input { min-height: 44px; }
#view-events .event-filter-type select { min-height: 44px; }
#view-events .event-filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); grid-column: 1 / -1;
  margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid var(--line-2);
}
#view-events .event-pool-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
#view-events .event-pool-filter > span { color: var(--ink-3); font-size: var(--fs-13); font-weight: 650; white-space: nowrap; }
#view-events .event-pool-filter-options > .ui-chip b { min-width: 18px; text-align: center; }
#view-events .event-filter-summary { margin-left: auto; color: var(--ink-3); font-size: var(--fs-13); font-weight: 600; text-align: right; }

/* 「只看進行中且還有名額」是一顆開關樣子的切換鈕（JS 仍以 aria-pressed＋primary/secondary 切換） */
#view-events #event-ready-only {
  --btn-bg: var(--surface); --btn-ink: var(--ink-2); --btn-line: var(--line-strong); --btn-bg-hover: var(--surface-2);
  position: relative; gap: 10px; min-height: var(--h-sm); padding: 0 12px 0 8px; font-size: var(--fs-14); font-weight: 600; white-space: nowrap;
}
#view-events #event-ready-only::before { content: ""; width: 34px; height: 20px; flex: none; border-radius: var(--r-round); background: var(--line-strong); transition: background-color var(--t-mid) var(--ease); }
#view-events #event-ready-only::after {
  content: ""; position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--sh-1); transform: translateY(-50%); transition: transform var(--t-mid) var(--ease-spring);
}
#view-events #event-ready-only[aria-pressed="true"] { --btn-bg: var(--brand); --btn-ink: var(--on-brand); --btn-line: var(--brand); --btn-bg-hover: var(--brand-hover); --btn-line-hover: var(--brand-hover); }
#view-events #event-ready-only[aria-pressed="true"]::before { background: var(--on-brand); }
#view-events #event-ready-only[aria-pressed="true"]::after { background: var(--brand); transform: translate(14px, -50%); }

/* 議程表：日期分組列、時間、活動、狀態、類型、每帳號、名額、我的帳號、操作 */
#view-events .event-grid { margin: 0; }
#view-events .event-table th { white-space: nowrap; }
#view-events .event-table td { vertical-align: middle; }
#view-events .event-col-time { width: 118px; }
#view-events .event-col-reward { width: 96px; }
#view-events .event-col-action { width: 1%; text-align: right; }
#view-events .event-card td[data-label="操作"] > button { white-space: nowrap; }
#view-events .event-card.pool-exhausted .event-pool small, #view-events .event-card.pool-unknown .event-pool small { color: var(--ink-3); }
#view-events .event-card.pool-available .event-pool small { color: var(--ink-2); }
#view-events .event-day > th {
  padding: 9px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-size: var(--fs-14); font-weight: 700; white-space: normal;
}
#view-events .event-day > th > svg { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; color: var(--ink-3); }
#view-events .event-day-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 7px;
  border-radius: var(--r-round); background: var(--surface-3); color: var(--ink-2); font-family: var(--font-num); font-size: var(--fs-12); font-weight: 800;
}
#view-events .event-day.is-past > th { color: var(--ink-3); }
#view-events .event-time { display: grid; gap: 2px; }
#view-events .event-time b { color: var(--ink); font-family: var(--font-num); font-size: var(--fs-20); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#view-events .event-time small { color: var(--ink-3); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; }
#view-events .event-name { display: grid; gap: 2px; min-width: 0; }
#view-events .event-name strong { color: var(--ink); font-size: var(--fs-15); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
#view-events .event-name small { color: var(--ink-3); font-size: var(--fs-13); line-height: 1.45; }
#view-events .event-status { display: flex; flex-wrap: wrap; gap: 6px; }
#view-events .event-kind { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--fs-14); font-weight: 600; white-space: nowrap; }
#view-events .event-kind > svg { width: 17px; height: 17px; color: var(--ink-3); }
#view-events .event-reward { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#view-events .event-reward > svg { width: 18px; height: 18px; color: var(--coin); }
#view-events .event-reward b { color: var(--ink); font-family: var(--font-num); font-size: var(--fs-16); font-weight: 800; font-variant-numeric: tabular-nums; }
#view-events .event-reward small { color: var(--ink-3); font-size: var(--fs-12); font-weight: 650; }
#view-events .event-pool { display: grid; gap: 6px; min-width: 150px; }
#view-events .event-pool small { color: var(--ink-2); font-size: var(--fs-13); line-height: 1.45; }
#view-events .event-mine { display: grid; gap: 1px; }
#view-events .event-mine b { color: var(--ink); font-family: var(--font-num); font-size: var(--fs-15); font-weight: 800; font-variant-numeric: tabular-nums; }
#view-events .event-mine small { color: var(--ink-3); font-size: var(--fs-13); line-height: 1.45; }
#view-events .event-mine-empty { color: var(--ink-3); font-size: var(--fs-13); }
#view-events .event-card.is-next td { background: var(--brand-soft); }
#view-events .event-card.is-next > td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
#view-events .event-card.expired .event-time b, #view-events .event-card.expired .event-name strong { color: var(--ink-2); }
#view-events .event-card.expired .event-reward > svg { color: var(--ink-4); }
#view-events .event-card.expired .event-reward b { color: var(--ink-2); }
#view-events .event-table .table-empty td { padding: var(--sp-4); }
#view-events .event-table .table-empty .ui-state { min-height: 180px; }

/* 「已結束」與「名額已滿」在活動情境不是錯誤，用 muted（foundation 預設把 .status.expired 當帳號失效的紅色） */
#view-events .status.expired, #view-events .status.exhausted,
.activity-detail .status.expired, .activity-detail-unavailable .status.expired,
#view-batches .status.expired, .batch-detail .status.expired {
  --tone-ink: var(--ink-3); --tone-soft: var(--surface-3); --tone-line: var(--line);
}

/* -----------------------------------------------------------------------------
   2. 活動詳情（桌機右側面板 860px；≤900px 外殼自動變回置中對話框）
   ----------------------------------------------------------------------------- */
#modal:has(.activity-detail) { --modal-side-w: 860px; }
.activity-detail { gap: var(--sp-4); }
.activity-detail-head { display: grid; gap: var(--sp-2); }
.activity-detail-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.activity-detail-chips .ui-tag { font-weight: 650; }
.activity-detail-sub { color: var(--ink-2); font-size: var(--fs-14); line-height: 1.65; overflow-wrap: anywhere; }
.activity-detail-sub a { font-weight: 650; white-space: nowrap; }
.activity-detail-image {
  position: relative; display: block; overflow: hidden; max-height: 280px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); text-decoration: none;
}
.activity-detail-image img { width: 100%; max-height: 280px; object-fit: cover; }
.activity-detail-image span {
  position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--toast-bg); color: var(--toast-ink); font-size: var(--fs-12); font-weight: 700;
}
.activity-steps { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); }
.activity-steps > li { font-size: var(--fs-14); }
.activity-detail-fact dd { font-variant-numeric: tabular-nums; }
.activity-detail-facts.ui-facts > div.reward dd, .activity-detail-facts.ui-facts > div.success dd { color: var(--ok); }
.activity-detail-facts.ui-facts > div.danger dd { color: var(--bad); }
.activity-detail-facts.ui-facts > div.warn dd { color: var(--warn); }
.activity-detail .ui-section-head h3 { font-size: var(--fs-16); }
.activity-detail .ui-section-head p { color: var(--ink-2); font-size: var(--fs-14); line-height: 1.65; }
.activity-description .pre-wrap { color: var(--ink-2); font-size: var(--fs-15); }
.activity-answer, .activity-watch { gap: var(--sp-4); }
.activity-raw > summary { font-size: var(--fs-14); }
.activity-raw pre { max-height: 360px; }

/* 消費回饋：活動辦法 */
.activity-rules { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-sheen), var(--surface); }
.activity-section-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.activity-section-heading h3 { font-size: var(--fs-16); }
.activity-rule-list { display: grid; gap: 8px; margin: 0; padding-left: 1.3em; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.65; }
.activity-rule-list li::marker { color: var(--brand-ink); font-weight: 800; }
.activity-store-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 12px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface-2);
}
.activity-store-note > div { flex: 1 1 260px; min-width: 0; }
.activity-store-note strong { display: block; color: var(--ink); font-size: var(--fs-15); }
.activity-store-note p { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.6; }
.activity-store-note button { flex: none; }

/* 以特定帳號狀態重新讀取（次要工具，收在摺疊裡） */
.activity-detail-tools > summary { font-size: var(--fs-14); }
.activity-detail-tools[open] { padding: 0 var(--sp-4) var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); }
.activity-detail-tools[open] > summary { margin: 0 calc(-1 * var(--sp-4)) var(--sp-3); padding: 0 var(--sp-4); border-bottom: 1px solid var(--line-2); }
.activity-detail-tools-body { display: grid; gap: var(--sp-3); }
.activity-detail-tools-body > button { justify-self: start; }
.activity-detail-tools-body .account-native-picker label { font-size: var(--fs-14); }

/* 提示框：快取／已結束／尚未開始／獎池已滿／答錯重送 */
.activity-detail .ui-notice, .activity-detail-unavailable .ui-notice { font-size: var(--fs-15); }
.activity-detail .ui-notice > div > span, .activity-detail .ui-notice > div > p { display: block; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.65; }
.activity-live-warning[data-tone="muted"] { --tone-ink: var(--ink-3); --tone-soft: var(--surface-2); --tone-line: var(--line); }
.activity-reanswer-notice > svg:first-child { color: var(--warn); }

/* AI 託管作答＋AI 建議 */
.activity-ai-panel { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--ai-line); border-radius: var(--r-lg); background: var(--ai-soft); }
.activity-ai-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3); }
.activity-ai-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--ai-solid); color: var(--on-ai); }
.activity-ai-icon > svg { width: 20px; height: 20px; }
.activity-ai-head > div { flex: 1 1 260px; min-width: 0; }
.activity-ai-head h3 { color: var(--ink); font-size: var(--fs-16); }
.activity-ai-head p { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.65; }
.activity-ai-head > button { flex: none; align-self: center; }
#activity-ai-result { display: grid; gap: var(--sp-3); min-width: 0; }
#activity-ai-result > .muted, #activity-ai-result > .error-text { font-size: var(--fs-14); }
.activity-ai-notice { background: var(--surface); }
.activity-ai-notice > div > span { display: block; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.65; }
.ai-suggestion-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ai-suggestion-item { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--ai-line); border-radius: var(--r-md); background: var(--surface); }
.ai-suggestion-item strong { color: var(--ink); font-size: var(--fs-14); line-height: 1.45; overflow-wrap: anywhere; }
.ai-suggestion-item span { color: var(--ai); font-size: var(--fs-14); font-weight: 700; overflow-wrap: anywhere; }
.ai-suggestion-item small { color: var(--ink-3); font-size: var(--fs-13); line-height: 1.5; overflow-wrap: anywhere; }
.ai-suggestion-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 題目卡＋選項按鈕：選中＝品牌框；AI 建議晶片在選項右側 */
.activity-questions { display: grid; gap: var(--sp-3); }
.question { display: grid; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-sheen), var(--surface); box-shadow: var(--sh-1); }
.question-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.question-number { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2); font-family: var(--font-num); font-size: var(--fs-13); font-weight: 800; }
.question-head h4 { flex: 1 1 240px; min-width: 0; margin: 0; color: var(--ink); font-size: var(--fs-16); font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.question-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.question-flags:empty { display: none; }
.question-hint { color: var(--ink-3); font-size: var(--fs-13); }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
/* Option = key ｜ text, with any flag (AI 建議) on its own line under the text so long answers never squeeze. */
.option {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 6px; min-height: 52px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink);
  font-size: var(--fs-15); font-weight: 500; line-height: 1.45; cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.option:hover { border-color: var(--ink-4); background: var(--row-hover); }
.option > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.option:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.option:has(> input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.option-key { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; align-self: start; border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2); font-family: var(--font-num); font-size: var(--fs-13); font-weight: 800; }
.option:has(> input:checked) .option-key { background: var(--brand); color: var(--on-brand); }
.option-text { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.option-flags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.option-flags:empty { display: none; }
.option:has(> .option-flags:empty) .option-key { grid-row: 1; align-self: center; }
.option.is-ai-suggested:not(:has(> input:checked)) { border-style: dashed; border-color: var(--ai-line); }
.question textarea { min-height: 88px; }

/* 套用帳號：挑選器上方放可得金幣與需重新登入提醒 */
.activity-accounts .ui-section-head > strong { flex: none; color: var(--ink); font-size: var(--fs-15); }
.activity-accounts .ui-section-head > strong .ui-num { color: var(--brand-ink); font-size: var(--fs-18); font-weight: 800; }
.activity-detail .check-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.activity-detail .ui-notice > button { align-self: center; }
.activity-detail .ui-dialog-foot > p .ui-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* 詳情無法取得：錯誤空狀態，事實格與提示框靠左排 */
.activity-detail-unavailable { gap: var(--sp-3); padding: var(--sp-5) var(--sp-2) var(--sp-3); }
.activity-detail-unavailable > h3 { font-size: var(--fs-18); }
.activity-detail-unavailable > p { max-width: 560px; color: var(--ink-2); font-size: var(--fs-15); }
.activity-detail-unavailable > .ui-notice, .activity-detail-unavailable > .ui-facts { width: 100%; justify-self: stretch; text-align: left; }
.activity-detail-unavailable > .ui-facts { color: var(--ink); }
.activity-unavailable-icon > svg { width: 26px; height: 26px; }
.activity-unavailable-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); width: 100%; margin-top: var(--sp-2); }
.activity-unavailable-actions > * { flex: 1 1 220px; justify-content: center; }

/* -----------------------------------------------------------------------------
   3. 人工接手（問卷與觀影共用）：可接管＝橘、禁止＝紅、處理中＝藍、需完整選號＝橘
   ----------------------------------------------------------------------------- */
.manual-takeover-state {
  --activities-mt-ink: var(--warn); --activities-mt-soft: var(--warn-soft); --activities-mt-line: var(--warn-line);
  display: grid; gap: var(--sp-3); min-width: 0; padding: var(--sp-4);
  border: 1px solid var(--activities-mt-line); border-left-width: 4px; border-radius: var(--r-lg);
  background: var(--card-sheen), var(--surface); box-shadow: var(--sh-1);
}
.manual-takeover-state.available, .manual-takeover-state.scope-incomplete, .manual-takeover-state.timed-out { --activities-mt-ink: var(--warn); --activities-mt-soft: var(--warn-soft); --activities-mt-line: var(--warn-line); }
.manual-takeover-state.blocked { --activities-mt-ink: var(--bad); --activities-mt-soft: var(--bad-soft); --activities-mt-line: var(--bad-line); }
.manual-takeover-state.processing { --activities-mt-ink: var(--brand-ink); --activities-mt-soft: var(--brand-soft); --activities-mt-line: var(--brand-line); }
.manual-takeover-state.success { --activities-mt-ink: var(--ok); --activities-mt-soft: var(--ok-soft); --activities-mt-line: var(--ok-line); }
.manual-takeover-heading { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3); }
.manual-takeover-heading > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--activities-mt-ink); background: var(--activities-mt-soft); font-size: var(--fs-13); font-weight: 800; }
.manual-takeover-heading > span > svg { width: 20px; height: 20px; }
.manual-takeover-heading > div { min-width: 0; }
.manual-takeover-heading .eyebrow { color: var(--activities-mt-ink); }
.manual-takeover-heading h3 { color: var(--ink); font-size: var(--fs-16); line-height: 1.4; }
.manual-takeover-heading p:not(.eyebrow) { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.65; overflow-wrap: anywhere; }
.manual-takeover-heading > b {
  padding: 3px 9px; border: 1px solid var(--activities-mt-line); border-radius: var(--r-sm); background: var(--activities-mt-soft); color: var(--activities-mt-ink);
  font-size: var(--fs-13); font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.manual-takeover-state dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); }
.manual-takeover-state dl > div { min-width: 0; padding: 10px 14px; box-shadow: 1px 0 0 var(--line-2), 0 1px 0 var(--line-2); }
.manual-takeover-state dt { color: var(--ink-3); font-size: var(--fs-13); font-weight: 600; }
.manual-takeover-state dd { margin: 3px 0 0; color: var(--ink); font-size: var(--fs-15); font-weight: 700; overflow-wrap: anywhere; }
.manual-takeover-warning { margin: 0; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.65; overflow-wrap: anywhere; }
.manual-takeover-state.blocked .manual-takeover-warning { color: var(--bad); font-weight: 600; }
.manual-takeover-state > button { justify-self: start; min-height: var(--h-lg); }
.manual-takeover-state > .error-text { margin: 0; }

/* -----------------------------------------------------------------------------
   4. 同步觀影（置中 L）：說明、逐帳號播放卡、人工接手、頁尾按鈕
   ----------------------------------------------------------------------------- */
.watch-session { display: grid; gap: var(--sp-4); }
.watch-session-intro .ui-num { font-family: var(--font-num); }
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.watch-card { display: grid; gap: 10px; min-width: 0; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-sheen), var(--surface); box-shadow: var(--sh-1); transition: border-color var(--t-mid); }
.watch-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.watch-card-head strong { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font-size: var(--fs-15); text-overflow: ellipsis; white-space: nowrap; }
.watch-card-head small { color: var(--ink-3); font-family: var(--font-num); font-size: var(--fs-13); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.watch-card-done { display: none; }
.watch-card .player, .watch-card > iframe { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: var(--r-md); background: var(--media-bg); }
.watch-card .player > video, .watch-card .player > iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.watch-card .progress { height: 8px; overflow: hidden; border-radius: var(--r-round); background: var(--surface-3); }
.watch-card .progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand); transition: width var(--t-mid) linear, background-color var(--t-mid); }
.watch-card.is-complete { border-color: var(--ok-line); }
.watch-card.is-complete .progress > span { background: var(--ok-solid); }
.watch-card.is-complete .watch-card-head small { color: var(--ok); }
.watch-card.is-complete .watch-card-done { display: inline-flex; }
.watch-grid > .error-text { grid-column: 1 / -1; }
.watch-actions > button { white-space: nowrap; }
/* 全部達標、可以送出時，「開始全部播放」退為次要，「確認完成並送出」變成主要 */
.watch-session:has(#complete-watch:not(:disabled)) #play-all { --btn-bg: var(--surface); --btn-ink: var(--ink); --btn-line: var(--line-strong); --btn-bg-hover: var(--surface-2); --btn-line-hover: var(--ink-4); --btn-shadow: none; }
.watch-session #complete-watch:not(:disabled) { --btn-bg: var(--brand); --btn-ink: var(--on-brand); --btn-line: var(--brand); --btn-bg-hover: var(--brand-hover); --btn-line-hover: var(--brand-hover); --btn-shadow: var(--sh-btn); }

/* -----------------------------------------------------------------------------
   5. 舊引擎批次紀錄頁與批次詳情
   ----------------------------------------------------------------------------- */
#view-batches .engine-v2-entry { margin-bottom: var(--sp-4); }
#view-batches .engine-v2-entry > div > span { display: block; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.65; }
#view-batches .batch-list-panel > .panel-header { margin-bottom: 0; }
#view-batches .batch-list-heading h3 { font-size: var(--fs-16); }
#view-batches .batch-list { margin-top: var(--sp-3); }
#view-batches .batch-table th { white-space: nowrap; }
#view-batches .batch-table td { vertical-align: middle; }
#view-batches .batch-col-action { width: 1%; text-align: right; }
#view-batches .batch-table td[data-label="操作"] > button { white-space: nowrap; }
#view-batches .batch-time { display: grid; gap: 1px; }
#view-batches .batch-time b { color: var(--ink); font-family: var(--font-num); font-size: var(--fs-15); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#view-batches .batch-time small { color: var(--ink-3); font-size: var(--fs-12); white-space: nowrap; }
#view-batches .batch-activity { display: grid; gap: 1px; min-width: 0; }
#view-batches .batch-activity strong { color: var(--ink); font-size: var(--fs-15); line-height: 1.45; overflow-wrap: anywhere; }
#view-batches .batch-activity small { color: var(--ink-3); font-family: var(--font-num); font-size: var(--fs-12); }
#view-batches .batch-action { color: var(--ink-2); font-size: var(--fs-14); font-weight: 600; white-space: nowrap; }
#view-batches .batch-count { font-family: var(--font-num); font-size: var(--fs-16); font-weight: 800; font-variant-numeric: tabular-nums; }
#view-batches .batch-result-summary { display: grid; gap: 5px; min-width: 190px; }
#view-batches .batch-result-summary strong { color: var(--ink); font-size: var(--fs-14); }
#view-batches .batch-result-summary span:not(.ui-meter) { color: var(--ink-3); font-size: var(--fs-12); line-height: 1.5; overflow-wrap: anywhere; }
.batch-origin { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-13); font-weight: 700; line-height: 1.35; white-space: nowrap; }
.batch-origin.hosting { border-color: var(--ai-line); background: var(--ai-soft); color: var(--ai); }
.batch-origin.correction { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.batch-origin.manual { border-color: var(--line); background: var(--surface-3); color: var(--ink-2); }
.batch-sync-state { display: block; margin-top: 4px; color: var(--ink-3); font-size: var(--fs-12); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.batch-sync-state.success { color: var(--ok); }
.batch-sync-state.failure { color: var(--bad); }
.batch-sync-state.pending { color: var(--brand-ink); }

.batch-detail { display: grid; gap: var(--sp-4); }
.batch-detail-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; min-width: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); }
.batch-detail-overview > div { min-width: 0; padding: 12px 14px; box-shadow: 1px 0 0 var(--line-2), 0 1px 0 var(--line-2); }
.batch-detail-overview > div > span:first-child { display: block; margin-bottom: 4px; color: var(--ink-3); font-size: var(--fs-13); font-weight: 600; }
.batch-detail-overview strong { display: block; color: var(--ink); font-size: var(--fs-15); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.batch-detail-overview code { display: inline-block; max-width: 100%; font-size: var(--fs-13); overflow-wrap: anywhere; }
.batch-detail-kpis .ui-kpi { padding: var(--sp-3) var(--sp-4); }
.batch-detail-kpis .ui-kpi-value { font-size: var(--fs-24); }
.batch-detail .table-wrap > table { min-width: 860px; }
.batch-detail-table th { white-space: nowrap; }
.batch-detail-table th:nth-child(5) { min-width: 118px; }
.batch-detail-table td { vertical-align: top; }
.batch-detail-account { display: flex; align-items: center; gap: 10px; min-width: 0; }
.batch-detail-account > div { display: grid; gap: 1px; min-width: 0; }
.batch-detail-account strong { color: var(--ink); font-size: var(--fs-15); white-space: nowrap; }
.batch-detail-account small { color: var(--ink-3); font-family: var(--font-num); font-size: var(--fs-12); font-weight: 600; }
.batch-detail-cell { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.batch-detail-cell .batch-sync-state { margin-top: 0; }
.batch-detail-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.batch-detail-line > small { color: var(--ink-3); font-size: var(--fs-12); font-weight: 650; white-space: nowrap; }
.batch-detail-line > .batch-sync-state { flex-basis: 100%; margin-top: 0; }
.batch-item-message { margin: 0 0 6px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad); font-size: var(--fs-13); font-weight: 600; line-height: 1.5; }
.batch-response-detail { min-width: 0; margin-top: 4px; }
.batch-response-detail summary { min-height: 32px; font-size: var(--fs-13); }
.batch-response-detail pre { max-width: 460px; max-height: 180px; margin-top: 6px; }
.batch-detail-table .actions { margin-top: 6px; }

/* -----------------------------------------------------------------------------
   6. 斷點
   ----------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  #view-events .event-nextup { grid-template-columns: auto minmax(0, 1fr); }
  #view-events .event-nextup-countdown { grid-column: 1; justify-items: start; text-align: left; }
  #view-events .event-nextup-action { grid-column: 2; justify-content: end; }
  #view-events .event-nextup-action > small { text-align: right; }
}

@media (max-width: 900px) {
  #view-events .event-nextup { padding: var(--sp-4); }
  .activity-detail .check-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .batch-detail .table-wrap > table { min-width: 760px; }
}

@media (max-width: 600px) {
  /* 頁首與橫幅 */
  #view-events .event-nextup { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); }
  #view-events .event-nextup-time { min-width: 86px; min-height: 76px; padding: 8px 10px; }
  #view-events .event-nextup-time b { font-size: var(--fs-24); }
  #view-events .event-nextup-countdown { grid-column: 1 / -1; grid-auto-flow: column; align-items: center; justify-content: space-between; padding-top: var(--sp-3); border-top: 1px solid var(--line-2); }
  #view-events .event-nextup-countdown .ui-countdown { font-size: var(--fs-32); }
  #view-events .event-nextup-action { grid-column: 1 / -1; }
  #view-events .event-nextup-action > button { width: 100%; }
  #view-events .event-nextup-action > small { max-width: none; text-align: left; }

  /* 工具列每個控制項一行 */
  #view-events .event-list-toolbar { grid-template-columns: minmax(0, 1fr); }
  #view-events .event-filter-row { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  #view-events .event-pool-filter { flex-direction: column; align-items: stretch; gap: 6px; }
  #view-events .event-pool-filter-options { width: 100%; }
  #view-events #event-ready-only { width: 100%; justify-content: flex-start; }
  #view-events .event-filter-summary { margin-left: 0; text-align: left; }

  /* 議程表變成卡片：日期列是小標題；時間與名稱是卡片抬頭；其餘欄位是「標籤：值」 */
  #view-events .event-day { display: block; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #view-events .event-day > th { display: flex; align-items: center; width: 100%; padding: 8px 2px 4px; border: 0; background: transparent; }
  #view-events .event-card > td[data-label="時間"], #view-events .event-card > td[data-label="活動"], #view-events .event-card > td[data-label="操作"] { display: block; }
  #view-events .event-card > td[data-label="時間"]::before, #view-events .event-card > td[data-label="活動"]::before, #view-events .event-card > td[data-label="操作"]::before { display: none; }
  #view-events .event-card > td[data-label="時間"] { padding: 12px 14px 0; border-bottom: 0; }
  #view-events .event-card > td[data-label="活動"] { padding: 6px 14px 12px; }
  #view-events .event-card > td[data-label="操作"] { padding: 10px 12px 12px; }
  #view-events .event-time { grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 10px; }
  #view-events .event-time small { white-space: normal; }
  #view-events .event-card.is-next { border-color: var(--brand); }
  #view-events .event-card.is-next td { background: var(--surface); }
  #view-events .event-card.is-next > td:first-child { box-shadow: none; }
  #view-events .event-pool { min-width: 0; }
  #view-events .event-table .table-empty td { padding: 0; }

  /* 活動詳情（手機底部抽屜）：步驟條只留目前步驟的文字，其他只留編號 */
  .activity-steps { flex-wrap: nowrap; gap: var(--sp-1); }
  .activity-steps > li:not([aria-current="step"]) { flex: none; width: 60px; overflow: hidden; }
  .activity-steps > li:first-child:not([aria-current="step"]) { width: 26px; }
  .activity-steps > li[aria-current="step"] { flex: 1; min-width: 0; }
  .activity-steps > li + li::before { width: 24px; }
  .activity-detail-chips .ui-tag { white-space: normal; }
  .activity-detail-sub a { white-space: normal; }
  .options { grid-template-columns: minmax(0, 1fr); }
  .activity-ai-head > button { width: 100%; }
  .ai-suggestion-list { grid-template-columns: minmax(0, 1fr); }
  .activity-detail .ui-notice { flex-wrap: wrap; }
  .activity-detail .ui-notice > button { flex: 1 1 100%; margin-left: 0; }
  .activity-unavailable-actions > * { flex-basis: 100%; }

  /* 人工接手 */
  .manual-takeover-heading { grid-template-columns: 40px minmax(0, 1fr); }
  .manual-takeover-heading > b { grid-column: 2; justify-self: start; }
  .manual-takeover-state dl { grid-template-columns: minmax(0, 1fr); }
  .manual-takeover-state > button { width: 100%; }

  /* 同步觀影 */
  .watch-grid { grid-template-columns: minmax(0, 1fr); }

  /* 批次 */
  #view-batches .ui-page-head-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #view-batches .ui-page-head-stats > div + div { border-left: 1px solid var(--line-2); }
  #view-batches .batch-result-summary { min-width: 0; }
  .batch-detail .table-wrap > table { min-width: 0; }
  .batch-response-detail pre { max-width: none; }
}