/* 地球決策日 DECISION - 通用樣式
   管理後台走淺色簡潔風；投影畫面(display.html)走深色大字風，另外在HTML內用<style>覆寫。 */

:root {
  --color-primary: #1f6f54;
  --color-primary-dark: #14503b;
  --color-bg: #f6f7f5;
  --color-card: #ffffff;
  --color-border: #e2e5e0;
  --color-text: #1c231f;
  --color-muted: #6b756f;
  --color-danger: #c0392b;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a { color: var(--color-primary); }

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.top-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.top-bar h1 { margin: 0; font-size: 1.5rem; }
.top-bar .subtitle { color: var(--color-muted); font-size: 0.9rem; }

/* 2026-09-10新增：頂部列標題改用LOGO圖片（原本是純文字h1）。*/
.topbar-logo { display: block; height: 44px; width: auto; }

/* 2026-09-10新增：登入頁（index.html）最上方標題改用LOGO圖片（原本是純文字h1）。
   LOGO跟下方「請選擇要開啟的頁面」那個.card色塊，兩者都直接放在同一個.page
   容器裡、左右都沒有各自的margin，寬度基準相同，所以LOGO用容器寬度的三分之二
   （66.6667%）就會等於色塊寬度的三分之二，且視窗縮放時仍保持這個比例關係。*/
.index-logo { display: block; width: 66.6667%; height: auto; margin: 0 auto 20px; }

.mode-hint {
  background: #eef6f1;
  border: 1px solid #cfe6da;
  color: #2c5c46;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.card h2, .card h3 { margin-top: 0; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.85rem; color: var(--color-muted); margin-bottom: 4px; }
.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
}
.field textarea { min-height: 90px; resize: vertical; }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* 「建立新場次」輸入框：字級跟旁邊的「建立場次」按鈕（.btn，0.9rem）對齊，
   不然瀏覽器預設的輸入框字級會比按鈕文字小一截，看起來不協調。 */
.inline-form input[type="text"] {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
}
.btn:hover { background: #f1f2ef; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-danger { color: var(--color-danger); border-color: #eccfca; }
.btn-danger:hover { background: #fbeceb; }
.btn-sm { padding: 4px 10px; font-size: 0.8rem; }

.muted { color: var(--color-muted); font-size: 0.9rem; }

.session-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.session-card-head h3 { margin: 0; }
.session-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.badge { font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; background: #eee; }
.badge-draft { background: #fdf1d8; color: #8a6414; }
.badge-live { background: #dcf3e6; color: #1c6b45; }
.badge-ended { background: #eee; color: #666; }

.team-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.team-row:last-child { border-bottom: none; }
.team-score { font-weight: bold; }

/* 世界得分區塊：組數門檻按鈕（未達10組／10組以上）放在最左側，進階挑戰（上限
   加倍）按鈕放在最右側，中間是兩列指標名稱＋±1調整，用grid排版——第1欄是門檻
   按鈕（左右並排放在同一欄，grid-row跨滿兩列，高度等於兩項指標合起來的高度），
   第2欄是兩列指標各自的icon/名稱/±1調整（維持原本樣式跟位置），第3欄是進階
   挑戰按鈕（單一按鈕，grid-row一樣跨滿兩列）。 */
.world-score-section { margin-bottom: 4px; }
.world-score-block { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 10px 14px; align-items: stretch; }
.world-score-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; grid-column: 2; }
.world-score-row-1 { grid-row: 1; }
.world-score-row-2 { grid-row: 2; }
.world-score-icon { font-size: 1.4rem; }
.world-score-label { flex: 1; min-width: 90px; font-weight: bold; }
.world-score-controls { display: flex; align-items: center; gap: 8px; }
.world-score-value { min-width: 48px; text-align: center; font-weight: bold; font-variant-numeric: tabular-nums; }
.world-score-divider { border: none; border-top: 1px solid var(--color-border); margin: 14px 0; }
.world-tier-row { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: row; gap: 6px; }
.world-tier-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; white-space: nowrap; padding: 6px 10px; font-size: 0.9rem; }
.world-tier-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.world-double-row { grid-column: 3; grid-row: 1 / 3; display: flex; }
.world-double-btn { display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; white-space: nowrap; padding: 6px 12px; font-size: 0.9rem; min-width: 76px; }
.world-double-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* 國家參賽狀態（2026-09-18新增，見session.html／js/session.js）：圓形國旗（emoji）
   排成自動換行的格狀，圓的下方顯示國家名稱。預設半透明（.country-item本身沒有
   .active）、圓形正中央疊一層「未參賽」文字；點一下切成.active後變不透明、
   蓋在上面的「未參賽」文字隱藏。 */
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 18px 10px; }
.country-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; user-select: none; }
.country-circle {
  width: 64px; height: 64px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: var(--color-card); border: 2px solid var(--color-border);
  opacity: 0.5; transition: opacity 0.15s ease, border-color 0.15s ease;
}
.country-item.active .country-circle {
  opacity: 1; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(31, 111, 84, 0.15);
}
.country-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: bold; color: #fff; background: rgba(0, 0, 0, 0.45);
  border-radius: 50%; text-align: center; line-height: 1.2;
}
.country-item.active .country-status { display: none; }
.country-name { margin-top: 6px; font-size: 0.78rem; text-align: center; color: var(--color-text); }

/* 歡迎畫面背景圖片上傳（場次基本資訊卡片） */
.bg-field-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bg-upload-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bg-thumb {
  width: 96px; height: 72px; border-radius: 8px; overflow: hidden; flex: 0 0 auto;
  border: 1px solid var(--color-border); background: #eee;
}
.bg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-upload-actions { display: flex; flex-direction: column; gap: 6px; }
/* 牌面設計圖片（文化體驗頁籤）縮圖：正方形（1:1），跟歡迎畫面背景圖片縮圖的
   16:9長方形不同，共用其餘.bg-thumb的外框樣式。 */
.bg-thumb-square { width: 96px; height: 96px; }

/* 「我的所有場次」頁面「預設圖片設定」卡片：左中右三格，分別對應歡迎畫面背景／
   文化體驗卡牌面／世界事件卡牌面，各自獨立一欄置中排版。窄螢幕自動改成單欄堆疊。 */
.default-images-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* 2026-09-09：新增「世界行動卡牌面」後從3欄變成4欄，寬螢幕一列四欄排滿
   （歡迎畫面背景／文化體驗卡牌面／世界行動卡牌面／世界事件卡牌面），
   視窗縮小到放不下四欄時改成2x2四宮格，而不是一路擠成單欄。 */
@media (max-width: 820px) {
  .default-images-grid { grid-template-columns: repeat(2, 1fr); }
}
.default-image-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.default-image-col h4 { margin: 0; font-size: 0.95rem; }
.default-image-col .bg-thumb { width: 100%; max-width: 200px; height: auto; aspect-ratio: 16 / 9; }
.default-image-col .bg-thumb-square { aspect-ratio: 1 / 1; }
.default-image-col .btn { width: 100%; max-width: 200px; }

/* 右側投影畫面按鈕欄（開啟投影畫面／複製連結）：
   整欄的寬高由JS（session.js的syncOpenDisplayBtnSize）量測左邊快速控制列
   實際高度後直接設定成正方形（flexbox的align-items:stretch搭配aspect-ratio在
   部分瀏覽器對「先決定高度、寬度才跟著算」這種方向支援不穩定，改用JS量測比較可靠）；
   欄內用flex-direction:column分成上下三塊：上面「開啟投影畫面」佔最大比例，
   中間「複製投影畫面連結」較小，下面新增的「下一階段」（見session.js的
   PHASE_ORDER循環邏輯）比例介於兩者之間——因為主持人操作過程中會一直重複按，
   比純輔助性質的複製連結更需要好按的高度（flex 2 / 1 / 1.3的比例）。 */
.display-btn-col {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
}
.display-btn-col .btn-square { flex: 2 1 0; width: 100%; }
/* 「複製投影畫面連結」按鈕：按鈕本身滿版（跟「開啟投影畫面」一樣寬），
   裡面文字的整體寬度固定是按鈕寬度的60%（不是滿版塞滿），文字字級由JS
   （session.js的syncCopyLinkBtnTextSize）依按鈕實際寬度即時計算。 */
.btn-copy-link {
  flex: 1 1 0; width: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  white-space: nowrap; padding: 4px 8px;
}
.btn-copy-link .copy-link-text { display: inline-block; white-space: nowrap; line-height: 1.2; font-size: 0.82rem; }

/* 「下個階段」按鈕：固定顯示「下個階段」文字，字級由session.js的
   syncOpenDisplayBtnTextSize()同步成跟「開啟投影畫面」按鈕裡「開啟」那行
   文字一樣大（inline style設定，這裡的font-size只是還沒同步前的備援值）。
   顏色用跟「目前階段」控制列群組標籤同一個紅色（--color-danger，見上面
   .quick-group-label-current），跟其他按鈕的綠色（.btn-primary）區隔開來，
   寫在.btn-primary規則之後（同樣單一class的specificity下，後寫的生效）
   直接覆寫掉背景／邊框色。 */
.btn-next-phase {
  flex: 1.3 1 0; width: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  white-space: nowrap; font-size: 1rem; font-weight: bold; padding: 4px 8px;
  background: var(--color-danger); border-color: var(--color-danger);
}
.btn-next-phase:hover { background: #a5311f; border-color: #a5311f; }

/* 正方形的「開啟投影畫面」按鈕：文字分兩行「開啟」／「投影畫面」。
   不用字距撐開（字距不變），改用字級放大：「開啟」只有2個字，字級是「投影畫面」
   （4個字）的2倍，兩行文字的整體寬度因此看起來一樣寬。
   這裡的font-size只是JS還沒執行前的預設值／備援值：實際字級由session.js的
   syncOpenDisplayBtnTextSize()依按鈕當下實際高度即時計算並用inline style覆寫，
   讓兩行文字的整體高度固定等於按鈕高度的75%、且等比例縮放。 */
.btn-square {
  padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
}
.btn-square-line { display: block; white-space: nowrap; letter-spacing: 0; }
.btn-square-line-short { font-size: 1.6rem; line-height: 1; font-weight: bold; }
.btn-square-line-long { font-size: 0.8rem; line-height: 1; }

.auth-box {
  max-width: 360px;
  margin: 80px auto;
  text-align: center;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px 24px;
}
/* 2026-09-10新增：登入畫面（Google登入／本機驗證碼共用）最上方的LOGO。 */
.auth-box .auth-logo { display: block; height: 72px; width: auto; margin: 0 auto 16px; }
.auth-box form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.auth-box input[type="password"] {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  text-align: center;
}

/* 2026-09-10新增：登入頁與管理後台所有頁面（投影畫面不用）底部的公司資訊／
   版本號頁尾。version-line預設hidden，抓到GitHub版本號（見js/version.js）
   才會顯示出來，抓不到就只顯示上面公司資訊那一行，不留下空白或錯誤字樣。 */
.app-footer {
  max-width: 960px;
  margin: 32px auto 0;
  padding: 16px 20px 32px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}
.app-footer #version-line { margin-top: 2px; }

.link-box {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.link-box a { word-break: break-all; }

/* 跨頁籤快速控制列（場次控制台）：每個功能群組獨立一行，按鈕比一般按鈕大1.5倍。
   .quick-bar-row把控制列本身跟右邊的投影畫面按鈕欄（.display-btn-col）放同一行，
   align-items:stretch讓按鈕欄自動跟控制列一樣高，控制列則用flex:1吃掉剩下的寬度。 */
.quick-bar-row { display: flex; align-items: stretch; gap: 14px; margin-bottom: 8px; }
.quick-actions-bar {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 16px 18px;
}
.quick-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quick-group-label {
  font-size: 1.17rem; font-weight: bold; color: #fff; background: var(--color-primary);
  padding: 5px 15px; border-radius: 999px; letter-spacing: 1px; flex: 0 0 auto;
}
/* 目前回合階段（跟「下一階段」按鈕循環的四個階段對應，見session.js的
   PHASE_ORDER／render()）：對應那一組的標籤底色從綠色（--color-primary）
   換成紅色（--color-danger），讓主持人一眼看出現在正在跑哪個階段。 */
.quick-group-label-current { background: var(--color-danger); }
.quick-group-status { font-size: 1.05rem; color: var(--color-muted); }

/* 響應式斷點（980px）：修正一個實際發生過的版面bug——.display-btn-col的正方形
   寬高是用JS量測.quick-actions-bar「目前」的高度算出來的，但.display-btn-col的
   寬度變大又會回頭吃掉.quick-actions-bar的可用寬度，讓裡面的按鈕換行、高度變更高，
   形成「越量越高、越高越窄、越窄越換行」的無窮迴圈，視窗窄到某個臨界寬度
   （實測約900~950px）就會整個爆版（按鈕欄暴衝成幾乎滿版的巨大正方形），
   而且因為迴圈當下記到的高度已經爆掉，就算把視窗放大回來也不會恢復正常。
   修法：視窗寬度低於980px時，改成整欄依CSS直接排版（不再用JS把寬高互相
   套進迴圈），.quick-bar-row改直向堆疊，.display-btn-col改橫向排列固定高度，
   JS那邊（session.js的syncOpenDisplayBtnSize）偵測到這個斷點時也會跳過正方形
   寬高計算、清掉先前設定的inline樣式，讓這裡的CSS規則生效。
   .display-btn-col的order設為-1，讓它在直向堆疊時排在.quick-actions-bar
   上面（HTML原本的順序是控制列在前、按鈕欄在後，這裡只是視覺順序調整，
   不影響原本的DOM結構／其他程式邏輯）。 */
@media (max-width: 980px) {
  .quick-bar-row { flex-direction: column; align-items: stretch; }
  /* flex-wrap讓「下個階段」可以自己換到第二行：.btn-next-phase給
     flex-basis:100%，在wrap的容器裡，一個項目的basis是100%時一定會被擠到
     下一行（不管前面兩個按鈕實際加起來多寬），不用另外包一層HTML容器就能做出
     「開啟／複製連結」並排一行、「下個階段」自己獨占下一行、橫跨兩者寬度的版面。 */
  .display-btn-col { flex-direction: row; flex-wrap: wrap; width: 100%; height: auto; order: -1; }
  .display-btn-col .btn-square { flex: 2 1 0; width: auto; height: 64px; }
  .btn-copy-link { flex: 1 1 0; height: 64px; }
  .btn-next-phase { flex: 1 1 100%; height: 64px; font-size: 0.95rem; }
}

/* 快速控制列裡的按鈕：比一般 .btn 大 1.5 倍（padding／字級都放大） */
.quick-group .btn { padding: 12px 24px; font-size: 1.35rem; border-radius: 8px; }
.quick-group .btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* 「計時器」群組：拆成上下兩行。第一行是群組名稱＋倒數秒數輸入欄（外面顯示「秒」）＋
   緊鄰在旁邊的「開始倒數」按鈕（秒數輸入欄跟「秒」字之間、還有「秒」字跟開始倒數
   按鈕之間都是同一組的正常間距，不特別拉開）；第二行是「停止倒數」「重置」跟
   狀態文字說明。倒數秒數的設定原本在「基本設定」頁籤的獨立卡片，現在直接整合在這裡，
   不用另外切頁籤。 */
.quick-group-timer { display: flex; flex-direction: column; gap: 10px; }
.timer-duration-field { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.timer-duration-input {
  width: 90px; padding: 10px 12px; font-size: 1.3rem; text-align: center;
  border: 1px solid var(--color-border); border-radius: 8px; font-family: inherit; color: var(--color-text);
}
.timer-duration-unit { font-size: 1.1rem; color: var(--color-muted); flex: 0 0 auto; }

/* 頁籤 */
/* flex-wrap: 頁籤從4個增加到6個（新增國家行動／自由貿易）後，窄螢幕會放不下，
   讓它自動換行，比硬擠在一行或另外做水平捲動更單純可靠。 */
.tabs-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.tab-btn {
  appearance: none; border: none; background: none; cursor: pointer;
  padding: 10px 18px; font-size: 0.95rem; font-family: inherit; color: var(--color-muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: bold; }

/* 題庫一覽（文化體驗頁籤）：可捲動列表，每行左邊一個勾選框決定是否納入這個場次的抽卡範圍。
   標題列跟每一行都用同一組grid欄寬，確保直向對齊。 */
.quiz-bank-header,
.quiz-bank-row {
  display: grid; grid-template-columns: 24px 130px 1fr 1.3fr; gap: 12px; align-items: center;
  padding: 8px 12px;
}
.quiz-bank-header {
  font-size: 0.78rem; color: var(--color-muted); font-weight: bold;
  border: 1px solid var(--color-border); border-bottom: none; border-radius: 8px 8px 0 0;
  background: #f2f3f0;
}
.quiz-bank-list {
  max-height: 480px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 0 0 8px 8px;
}
.quiz-bank-row {
  border-bottom: 1px solid var(--color-border); cursor: pointer; font-size: 0.9rem;
}
.quiz-bank-row:last-child { border-bottom: none; }
.quiz-bank-row:hover { background: #f8f9f7; }
.quiz-bank-row input[type="checkbox"] { width: 16px; height: 16px; }
.quiz-bank-row .qb-region { color: var(--color-muted); }
.quiz-bank-row .qb-topic { }
.quiz-bank-row .qb-ng { color: var(--color-danger); font-size: 0.85rem; }
.quiz-bank-row.qb-excluded { opacity: 0.55; }

/* 題庫一覽標題列「情境主題」欄旁的小篩選下拉選單：選一個主題只篩選畫面顯示的列
   （不影響任何勾選狀態），選「全部主題」恢復顯示整份題庫。 */
.qb-topic-header {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.qb-topic-filter {
  font-family: inherit; font-size: 0.7rem; font-weight: normal; color: var(--color-text);
  padding: 2px 4px; border: 1px solid var(--color-border); border-radius: 5px; background: #fff;
  max-width: 130px; cursor: pointer;
}
.qb-topic-filter:hover { border-color: var(--color-primary); }

/* 世界事件一覽（世界事件頁籤）：跟上面題庫一覽共用同一組.quiz-bank-*樣式，
   只有欄寬（事件名稱／事件效果，文字通常比題庫的地區/主題/NG說明長；
   最後多一欄「加權」顯示抽選權重3/2/1）用這裡的grid-template-columns覆寫。
   （原本還有「分類」欄，使用者確認完全用不到之後已經拿掉，欄位跟著減少一格。） */
.event-bank-header,
.event-bank-row {
  grid-template-columns: 24px 1fr 1.6fr 56px;
}
.qb-weight-select {
  width: 48px; text-align: center; font-weight: bold; font-family: inherit; font-size: 0.9rem;
  padding: 3px 2px; border: 1px solid var(--color-border); border-radius: 5px; background: #fff;
  color: var(--color-text); cursor: pointer;
}
.qb-weight-select:hover { border-color: var(--color-primary); }

/* 匯入題庫差異確認 */
.diff-group { margin-bottom: 16px; }
.diff-group h4 { margin: 0 0 8px; font-size: 0.95rem; }
.diff-row {
  padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; font-size: 0.85rem;
  border: 1px solid var(--color-border);
}
.diff-row-added { background: #eef8f1; border-color: #cfe6da; }
.diff-row-modified { background: #fdf6e3; border-color: #eddcae; }
.diff-row-removed { background: #fbeceb; border-color: #eccfca; }
.diff-field-change { display: block; color: var(--color-muted); margin-top: 3px; }
.diff-field-change b { color: var(--color-text); font-weight: normal; }
.diff-field-change .diff-old { color: #c0392b; text-decoration: line-through; }
.diff-field-change .diff-new { color: #1c6b45; }

.quiz-preview { margin-top: 14px; }
.quiz-preview-option {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.opt-tag { float: right; font-size: 0.75rem; padding: 1px 8px; border-radius: 999px; }
.opt-tag-ng { background: #fbeceb; color: var(--color-danger); }
.opt-tag-ok { background: #dcf3e6; color: #1c6b45; }

[hidden] { display: none !important; }

/* ============================================================
   主持人遙控器（remote.html）相關樣式
   ============================================================ */

/* 「主持人遙控器」按鈕：放在.display-btn-col最上面（開啟投影畫面的上方），
   樣式比照.btn-copy-link（同樣是長按鈕、不是正方形），純文字不加圖示
   （使用者確認過不需要小圖示）。寬版（≥980px）時跟其他三顆按鈕一樣用
   flex-grow分配.display-btn-col的高度；窄版（<980px）時獨立佔一整行，
   見下面@media (max-width: 980px)裡的.btn-remote-link規則。 */
.btn-remote-link {
  flex: 0.8 1 0; width: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  white-space: nowrap; font-size: 1rem;
}

/* QR視窗（按「主持人遙控器」按鈕後跳出）：半透明黑底遮罩置中顯示白色卡片，
   卡片內放QR碼＋複製連結按鈕。用[hidden]屬性控制顯示/隱藏（跟專案裡其他
   彈出視窗的慣例一致），不用額外的JS class切換。 */
.qr-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.qr-modal-box {
  position: relative;
  background: var(--color-card);
  border-radius: 14px;
  padding: 24px 20px 20px;
  width: 280px;
  max-width: 100%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.qr-modal-close {
  position: absolute; top: 8px; right: 10px;
  border: none; background: none; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: var(--color-muted); padding: 6px;
}
.qr-modal-title { font-weight: bold; font-size: 1.1rem; margin: 4px 0 16px; }
.qr-modal-qr {
  width: 200px; height: 200px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.qr-modal-qr img { display: block; width: 100%; height: 100%; }
.qr-modal-copy-btn { width: 100%; height: 46px; font-size: 0.98rem; }
.qr-modal-hint { font-size: 0.75rem; color: var(--color-muted); margin: 10px 0 0; line-height: 1.5; }

@media (max-width: 980px) {
  /* 窄版下「主持人遙控器」自己獨佔一整行（放在「開啟投影畫面／複製連結」
     那一排的上面，順序靠HTML本身的先後，這裡只需要讓它強制換行、給固定高度）。 */
  .btn-remote-link { flex: 1 1 100%; height: 56px; font-size: 1rem; }
}

/* ============================================================
   remote.html（主持人遙控器頁面）專用：直接沿用.quick-actions-bar／
   .quick-group等控制列樣式，這裡只補頁面本身跟「下個階段」獨立站一整行
   （在session.html裡「下個階段」是.display-btn-col裡的一員，靠flex-grow
   跟其他按鈕分配高度；remote.html沒有.display-btn-col，所以直接把它獨立
   放在控制列卡片下面，固定樣式即可，不需要JS再去同步字級）。 */
.remote-page .quick-actions-bar { margin-bottom: 14px; }
.remote-page .btn-next-phase {
  width: 100%; height: 56px; font-size: 1.15rem;
}
.remote-status-badge {
  font-size: 0.78rem; background: #eef6f1; border: 1px solid #cfe6da;
  color: #2c5c46; padding: 4px 10px; border-radius: 999px; flex: 0 0 auto;
}