/* =========================================================
   IPPA 廟宇廣播：介面樣式
   設計語彙：深廟紅（朱漆）為主色、金色只用在框線與點綴；
   唯一的「大動作」是匾額式的「開始廣播」按鈕，其餘保持安靜。
   ========================================================= */

/* ---------- 色票與字體 ---------- */
:root,
[data-bs-theme=light] {
  --ippa-paper: #F6F1EF;        /* 粉牆：頁面底色 */
  --ippa-surface: #FFFFFF;      /* 面板 */
  --ippa-surface-2: #FBF8F7;    /* 面板內的次要區塊 */
  --ippa-ink: #2A1A17;          /* 墨：主要文字 */
  --ippa-muted: #6B5753;        /* 次要文字（白底 6.6:1） */
  --ippa-line: #E2D6D2;         /* 框線 */
  --ippa-lacquer: #8B1E1E;      /* 朱漆：主色（白字 9.2:1） */
  --ippa-lacquer-hover: #731717;
  --ippa-lacquer-soft: #F6E5E3;
  --ippa-gold: #D4A73A;         /* 金：只做框線、點綴 */
  --ippa-gold-ink: #7A5A12;     /* 金色文字（白底 6:1） */
  --ippa-gold-soft: #FBF1D9;
  --ippa-alert: #C8102E;        /* 緊急停止（白字 5.9:1） */
  --ippa-alert-hover: #A50D26;
  --ippa-ok: #1E6B3A;
  --ippa-ok-soft: #E3F1E7;
  --ippa-warn: #8A5300;
  --ippa-warn-soft: #FCEFD6;
  --ippa-bad: #A3122A;
  --ippa-bad-soft: #FBE3E6;
  --ippa-focus: #1B4F9C;
  --ippa-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
  --ippa-font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", "MingLiU", serif;
  --ippa-header-h: 56px;
  --ippa-tabbar-h: 64px;

  --bs-body-bg: var(--ippa-paper);
  --bs-body-color: var(--ippa-ink);
  --bs-body-font-family: var(--ippa-font-sans);
  --bs-border-color: var(--ippa-line);
  --bs-secondary-color: var(--ippa-muted);
  --bs-tertiary-bg: var(--ippa-surface-2);
  --bs-link-color: var(--ippa-lacquer);
  --bs-link-color-rgb: 139, 30, 30;
  --bs-link-hover-color: var(--ippa-lacquer-hover);
  --bs-link-hover-color-rgb: 115, 23, 23;
  --bs-primary: var(--ippa-lacquer);
  --bs-primary-rgb: 139, 30, 30;
  --bs-focus-ring-color: rgba(27, 79, 156, .35);
}

[data-bs-theme=dark] {
  --ippa-paper: #1B1312;
  --ippa-surface: #261A18;
  --ippa-surface-2: #2E2120;
  --ippa-ink: #F3E9E4;
  --ippa-muted: #C2AFA9;
  --ippa-line: #43302D;
  --ippa-lacquer: #A8322B;      /* 深底上提亮的朱漆（白字 7:1 以上） */
  --ippa-lacquer-hover: #BF3D35;
  --ippa-lacquer-soft: #3A2220;
  --ippa-gold: #D9AE45;
  --ippa-gold-ink: #E3BE5E;
  --ippa-gold-soft: #3A2E17;
  --ippa-alert: #D42A3A;
  --ippa-alert-hover: #E63F4E;
  --ippa-ok: #7FD39B;
  --ippa-ok-soft: #1D3325;
  --ippa-warn: #F2C266;
  --ippa-warn-soft: #3A2E14;
  --ippa-bad: #FF8A97;
  --ippa-bad-soft: #3D1C21;
  --ippa-focus: #8DB4FF;

  --bs-body-bg: var(--ippa-paper);
  --bs-body-color: var(--ippa-ink);
  --bs-border-color: var(--ippa-line);
  --bs-secondary-color: var(--ippa-muted);
  --bs-tertiary-bg: var(--ippa-surface-2);
  --bs-link-color: #F0A99F;
  --bs-link-color-rgb: 240, 169, 159;
  --bs-link-hover-color: #FFC4BB;
  --bs-link-hover-color-rgb: 255, 196, 187;
  --bs-primary: var(--ippa-lacquer);
  --bs-primary-rgb: 168, 50, 43;
  --bs-focus-ring-color: rgba(141, 180, 255, .4);
}

/* ---------- 版面間距系統（與深淺色無關，所以獨立一組 :root） ----------
   --ippa-page-top：頁首（標題列）與頂部列之間的距離
   --ippa-page-x：內容左右內距（各頁一致，另與瀏海安全區取大者）
   --ippa-page-bottom：內容最後一個區塊下方的留白（手機另外加上導覽列高度與 Home 指示條）
   --ippa-gap：頁首、面板、卡片、分頁標籤之間的統一間距
   --ippa-panel-pad：面板內距
   --ippa-state-pad：載入中／空狀態／錯誤區塊的上下內距（靠上顯示，不撐成半個畫面） */
:root {
  --ippa-page-top: 12px;
  --ippa-page-x: 16px;
  --ippa-page-bottom: 24px;
  --ippa-gap: 12px;
  --ippa-panel-pad: 16px;
  --ippa-state-pad: 24px;
}
@media (min-width: 992px) {
  :root {
    --ippa-page-top: 24px;
    --ippa-page-x: 32px;
    --ippa-page-bottom: 32px;
    --ippa-gap: 16px;
    --ippa-panel-pad: 20px;
    --ippa-state-pad: 32px;
  }
}

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ippa-font-sans);
  font-size: 1.0625rem;  /* 17px：手機上閱讀較穩 */
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
}

h1, h2, h3, .page-title, .panel-title, .auth-title, .modal-title {
  font-family: var(--ippa-font-serif);
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---------- 焦點與可及性 ---------- */
:focus-visible {
  outline: 3px solid var(--ippa-focus);
  outline-offset: 2px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.form-range:focus-visible {
  outline: 3px solid var(--ippa-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ippa-focus);
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 2000;
  padding: 10px 16px;
  background: var(--ippa-ink);
  color: var(--ippa-paper);
  border-radius: 6px;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ---------- 按鈕 ---------- */
.btn {
  --bs-btn-font-weight: 500;
  border-radius: 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
}
.btn-sm { min-height: 44px; padding-inline: .75rem; }   /* 小按鈕也維持 44px 點擊高度 */
.btn-lg-touch { min-height: 52px; padding-inline: 1.25rem; font-size: 1.0625rem; }
.btn-link { min-height: 44px; }

.btn-primary {
  --bs-btn-bg: var(--ippa-lacquer);
  --bs-btn-border-color: var(--ippa-lacquer);
  --bs-btn-hover-bg: var(--ippa-lacquer-hover);
  --bs-btn-hover-border-color: var(--ippa-lacquer-hover);
  --bs-btn-active-bg: var(--ippa-lacquer-hover);
  --bs-btn-active-border-color: var(--ippa-lacquer-hover);
  --bs-btn-disabled-bg: var(--ippa-lacquer);
  --bs-btn-disabled-border-color: var(--ippa-lacquer);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--ippa-lacquer);
  --bs-btn-border-color: var(--ippa-lacquer);
  --bs-btn-hover-bg: var(--ippa-lacquer-soft);
  --bs-btn-hover-color: var(--ippa-lacquer);
  --bs-btn-hover-border-color: var(--ippa-lacquer);
  --bs-btn-active-bg: var(--ippa-lacquer-soft);
  --bs-btn-active-color: var(--ippa-lacquer);
  --bs-btn-active-border-color: var(--ippa-lacquer);
}
[data-bs-theme=dark] .btn-outline-primary {
  --bs-btn-color: #F0A99F;
  --bs-btn-border-color: #C9554C;
  --bs-btn-hover-color: #FFC4BB;
  --bs-btn-active-color: #FFC4BB;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ippa-ink);
  --bs-btn-border-color: var(--ippa-line);
  --bs-btn-bg: var(--ippa-surface);
  --bs-btn-hover-bg: var(--ippa-surface-2);
  --bs-btn-hover-color: var(--ippa-ink);
  --bs-btn-hover-border-color: var(--ippa-muted);
  --bs-btn-active-bg: var(--ippa-surface-2);
  --bs-btn-active-color: var(--ippa-ink);
  --bs-btn-active-border-color: var(--ippa-muted);
  --bs-btn-disabled-color: var(--ippa-muted);
  --bs-btn-disabled-border-color: var(--ippa-line);
}
.btn-gold {
  --bs-btn-bg: var(--ippa-gold);
  --bs-btn-border-color: var(--ippa-gold);
  --bs-btn-color: #2A1A17;
  --bs-btn-hover-bg: #C2952A;
  --bs-btn-hover-border-color: #C2952A;
  --bs-btn-hover-color: #2A1A17;
  --bs-btn-active-bg: #C2952A;
  --bs-btn-active-color: #2A1A17;
}
.btn-outline-gold {
  --bs-btn-color: var(--ippa-gold-ink);
  --bs-btn-border-color: var(--ippa-gold);
  --bs-btn-hover-bg: var(--ippa-gold-soft);
  --bs-btn-hover-color: var(--ippa-gold-ink);
  --bs-btn-hover-border-color: var(--ippa-gold);
  --bs-btn-active-bg: var(--ippa-gold-soft);
  --bs-btn-active-color: var(--ippa-gold-ink);
}
.btn-alert {
  --bs-btn-bg: var(--ippa-alert);
  --bs-btn-border-color: var(--ippa-alert);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ippa-alert-hover);
  --bs-btn-hover-border-color: var(--ippa-alert-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ippa-alert-hover);
  --bs-btn-active-color: #fff;
}
.btn-outline-alert {
  --bs-btn-color: var(--ippa-bad);
  --bs-btn-border-color: var(--ippa-alert);
  --bs-btn-hover-bg: var(--ippa-bad-soft);
  --bs-btn-hover-color: var(--ippa-bad);
  --bs-btn-hover-border-color: var(--ippa-alert);
  --bs-btn-active-bg: var(--ippa-bad-soft);
  --bs-btn-active-color: var(--ippa-bad);
  --bs-btn-disabled-color: var(--ippa-muted);
  --bs-btn-disabled-border-color: var(--ippa-line);
}
.btn-preview.is-playing {
  --bs-btn-bg: var(--ippa-gold-soft);
  --bs-btn-border-color: var(--ippa-gold);
  --bs-btn-color: var(--ippa-gold-ink);
  --bs-btn-hover-bg: var(--ippa-gold-soft);
  --bs-btn-hover-color: var(--ippa-gold-ink);
}

/* 匾額式主按鈕：朱漆底、雙層金框、明體字。全站只有「開始廣播」使用 */
.plaque-btn {
  width: 100%;
  min-height: 76px;
  margin-top: .5rem;
  padding: 7px;
  border: 0;
  border-radius: 4px;
  background: var(--ippa-lacquer);
  color: #fff;
  box-shadow:
    inset 0 0 0 2px var(--ippa-gold),
    inset 0 0 0 6px var(--ippa-lacquer),
    inset 0 0 0 7px var(--ippa-gold);
  font-family: var(--ippa-font-serif);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: .3em;
  transition: background-color .15s ease-out;
}
.plaque-btn:hover { background: var(--ippa-lacquer-hover); color: #fff; }
.plaque-btn:active { transform: translateY(1px); }
.plaque-btn:disabled { opacity: .7; }
.plaque-inner {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-left: .3em; /* 抵銷字距造成的視覺偏移 */
}
.plaque-inner .bi { font-size: 1.5rem; letter-spacing: 0; }

/* 緊急停止：全寬、高、純紅；沒有播放時改成虛線外框，避免誤以為可按 */
.btn-stop {
  width: 100%;
  min-height: 64px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .12em;
  border-width: 2px;
}
.btn-stop .bi { font-size: 1.5rem; }
/* 沒有播放時仍可按（只停目前這一則），以紅色虛線外框表示「待命」 */
.btn-stop.is-idle {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--ippa-alert);
  --bs-btn-color: var(--ippa-bad);
  --bs-btn-hover-bg: var(--ippa-bad-soft);
  --bs-btn-hover-border-color: var(--ippa-alert);
  --bs-btn-hover-color: var(--ippa-bad);
  --bs-btn-active-bg: var(--ippa-bad-soft);
  --bs-btn-active-color: var(--ippa-bad);
  border-style: dashed;
}
.btn-stop:disabled { --bs-btn-disabled-opacity: .8; }

/* ---------- 系統橫幅 ---------- */
.sys-banner {
  position: sticky;
  top: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  padding-top: max(.625rem, env(safe-area-inset-top));
  font-size: .9375rem;
}
.sys-banner > .bi { font-size: 1.375rem; flex: none; }
.sys-banner-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sys-banner-sub { opacity: .9; font-size: .875rem; }
.sys-banner-offline { background: #3B2A00; color: #FFE7A8; }
.sys-banner-offline .btn-light { flex: none; }
.sys-banner-offline #offline-retry { min-height: 44px; }
/* 只有離線橫幅固定在頂端；其高度由 pwa.js 寫入 --ippa-banner-h，頂部列接在它下方 */
/* 新版本提示：手機固定在底部導覽列上方。放在頂端時會落在 iPhone 瀏海／狀態列底下
   （viewport-fit=cover + black-translucent），按不到 */
.sys-banner-update {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(var(--ippa-tabbar-h) + env(safe-area-inset-bottom));
  z-index: 1045; /* 高於導覽列（1030）與離線橫幅（1040），低於對話框（1050 起）與提示訊息 */
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: var(--ippa-gold);
  box-shadow: 0 -4px 14px rgba(42, 26, 23, .2);
}
/* 沒有底部導覽列（登入頁等）時貼齊畫面底部，並避開 Home 指示條 */
body:has(> .app:not([data-shell=full])) .sys-banner-update {
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 991.98px) {
  /* 橫幅顯示時內容底部多留一列，不擋住最後一個操作；提示訊息也往上移 */
  .has-update-banner .app[data-shell=full] .app-main {
    padding-bottom: calc(var(--ippa-tabbar-h) + env(safe-area-inset-bottom) + 48px + 1.5rem);
  }
  .has-update-banner .app[data-shell=full] ~ .toast-stack {
    bottom: calc(var(--ippa-tabbar-h) + env(safe-area-inset-bottom) + 48px + 12px);
  }
}
@media (min-width: 992px) {
  /* 桌機沒有瀏海，維持在頁面頂端 */
  .sys-banner-update { position: static; padding: 0; box-shadow: none; }
}
.sys-banner-action {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: #2A1A17;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.sys-banner-install {
  position: static;
  background: var(--ippa-gold-soft);
  color: var(--ippa-ink);
  border-bottom: 1px solid var(--ippa-gold);
}
.sys-banner-close { color: var(--ippa-ink); min-width: 44px; }

/* ---------- App 外殼 ---------- */
.app-header {
  position: sticky;
  top: var(--ippa-banner-h, 0px);
  z-index: 1030;
  min-width: 0;
  height: calc(var(--ippa-header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--ippa-surface);
  border-bottom: 1px solid var(--ippa-line);
}
/* 頂部列下緣一條金線，呼應匾額邊框 */
.app-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--ippa-gold);
  opacity: .55;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  color: var(--ippa-ink);
  text-decoration: none;
  min-width: 0;
}
.brand:hover { color: var(--ippa-ink); }
/* 離線橫幅已處理瀏海安全區，頂部列不再重複留白 */
.has-offline-banner .app-header { padding-top: 0; height: var(--ippa-header-h); }
.brand-logo { width: 36px; height: 36px; flex: none; }
.brand-name {
  font-family: var(--ippa-font-serif);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .08em;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;  /* 頁首空間不足時（例如手機加上時鐘）截斷，不把其他元素擠出畫面 */
}
.header-actions { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.header-btn { min-height: 44px; }
.user-btn {
  --bs-btn-color: var(--ippa-ink);
  --bs-btn-bg: var(--ippa-surface);
  --bs-btn-border-color: var(--ippa-line);
  --bs-btn-hover-color: var(--ippa-ink);
  --bs-btn-hover-bg: var(--ippa-surface-2);
  --bs-btn-hover-border-color: var(--ippa-muted);
  --bs-btn-active-color: var(--ippa-ink);
  --bs-btn-active-bg: var(--ippa-surface-2);
  --bs-btn-active-border-color: var(--ippa-muted);
  max-width: 46vw;
  min-width: 0;
}
/* 深色模式：框線提亮，避免看起來像停用 */
[data-bs-theme=dark] .user-btn {
  --bs-btn-border-color: #6E5550;
  --bs-btn-bg: var(--ippa-surface-2);
  --bs-btn-hover-bg: #3A2B29;
}
/* 窄螢幕（320px）：縮短品牌字與使用者名稱，避免頂部列橫向溢出 */
@media (max-width: 374.98px) {
  .brand-name { font-size: 1rem; letter-spacing: .02em; }
  .brand-logo { width: 30px; height: 30px; }
  .user-btn { max-width: 34vw; padding-inline: .5rem; }
  .header-actions { gap: .25rem; }
}
@media (max-width: 339.98px) {
  .brand-name { display: none; }
}
.user-btn .bi { font-size: 1.25rem; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 頁首真實時間時鐘（clock.js）：手機兩行精簡顯示，桌機單行含年份 */
.header-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex: none;
  line-height: 1.15;
  color: var(--ippa-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 手機：日期 13px、時間 18px（原本 11px／15px 太小）；日期改用主要文字色，戶外也看得清楚 */
.clock-line-date { font-size: .8125rem; font-weight: 500; color: var(--ippa-ink); }
.clock-time { font-size: 1.125rem; font-weight: 700; letter-spacing: .02em; }
.clock-year { display: none; }
/* 手機顯示時鐘時騰出空間（只在 <576px 且時鐘可見時生效）：
   使用者按鈕只留圖示（名稱仍在選單第一列，按鈕的無障礙名稱不變）。
   320px 寬時：左右內距 32 + 標誌 36 + 時鐘約 80 + 使用者按鈕約 64，品牌名稱仍有約 90px（不足時以刪節號截斷，
   <340px 時隱藏，見上方規則） */
@media (max-width: 575.98px) {
  .header-clock:not([hidden]) ~ .dropdown .user-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
/* 極窄螢幕（<375px）：時間字稍微縮小，品牌名稱才不會被擠到只剩一兩個字 */
@media (max-width: 374.98px) {
  .clock-line-date { font-size: .75rem; }
  .clock-time { font-size: 1.0625rem; letter-spacing: 0; }
}
@media (min-width: 992px) {
  .header-clock { flex-direction: row; align-items: baseline; gap: .5rem; margin-right: .5rem; }
  .clock-line-date { font-size: .9375rem; }
  .clock-year { display: inline; }
  .clock-time { font-size: 1.0625rem; }
}
.dropdown-item { min-height: 44px; display: flex; align-items: center; }

.app-main {
  padding:
    var(--ippa-page-top)
    max(var(--ippa-page-x), env(safe-area-inset-right))
    var(--ippa-page-bottom)
    max(var(--ippa-page-x), env(safe-area-inset-left));
  max-width: 880px;
  margin: 0 auto;
  outline: none;
}
/* 內容頁：直向單欄格線，所有區塊一律靠上排列（align-content:start），
   區塊之間只用 gap 控制距離，不再各自帶 margin，避免各頁間距不一致 */
.app[data-shell=full] .app-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--ippa-gap);
  padding-bottom: calc(var(--ippa-tabbar-h) + env(safe-area-inset-bottom) + var(--ippa-page-bottom));
}
.app[data-shell=full] .app-main > * { margin-top: 0; margin-bottom: 0; }
.app[data-shell=bare] .app-main { padding: 0; max-width: none; }
/* 開站載入中：此時還沒有頂部列，要自己避開 iPhone 狀態列；訊息靠上，不置中在畫面中間 */
.app[data-shell=none] .app-main { padding-top: calc(env(safe-area-inset-top) + var(--ippa-page-top)); }
.boot-loading { display: flex; gap: .5rem; align-items: center; justify-content: center; padding: var(--ippa-state-pad) 1rem; color: var(--ippa-muted); }

/* 手機：底部導覽列 */
.app-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: var(--ippa-surface);
  border-top: 1px solid var(--ippa-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.app-nav-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-nav-list > li { flex: 1; }
.app-nav-list > li.nav-desktop-only { display: none; }
.app-nav-link {
  height: var(--ippa-tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ippa-muted);
  text-decoration: none;
  font-size: .8125rem;
  position: relative;
}
.app-nav-link .bi { font-size: 1.375rem; }
.app-nav-link:hover { color: var(--ippa-ink); }
.app-nav-link.active { color: var(--ippa-lacquer); font-weight: 700; }
[data-bs-theme=dark] .app-nav-link.active { color: var(--ippa-gold-ink); }
.app-nav-link.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 3px;
  background: var(--ippa-gold);
  border-radius: 0 0 2px 2px;
}
.nav-label-full { display: none; }

/* 桌機：左側導覽欄 */
@media (min-width: 992px) {
  .app[data-shell=full] {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header" "nav main";
    min-height: 100vh;
  }
  .app[data-shell=full] .app-header { grid-area: header; }
  .app[data-shell=full] .app-nav {
    grid-area: nav;
    position: sticky;
    top: calc(var(--ippa-banner-h, 0px) + var(--ippa-header-h) + 3px);
    align-self: start;
    height: calc(100vh - var(--ippa-banner-h, 0px) - var(--ippa-header-h) - 3px);
    border-top: 0;
    border-right: 1px solid var(--ippa-line);
    /* 上內距與內容區相同，第一個導覽項目和頁面標題同一條水平線開始 */
    padding: var(--ippa-page-top) .75rem;
  }
  /* 電腦版內容頁滿版（只在桌機斷點內調整，手機維持原樣）：拿掉 880px 上限，左右內距用 --ippa-page-x */
  .app[data-shell=full] .app-main {
    grid-area: main;
    width: 100%;
    max-width: none;
    padding: var(--ippa-page-top) var(--ippa-page-x) var(--ippa-page-bottom);
  }
  .app-nav-list { flex-direction: column; gap: 2px; }
  .app-nav-list > li { flex: none; }
  .app-nav-list > li.nav-desktop-only { display: block; }
  .app-nav-link {
    height: auto;
    min-height: 48px;
    flex-direction: row;
    justify-content: flex-start;
    gap: .75rem;
    padding: 0 .875rem;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--ippa-ink);
  }
  .app-nav-link:hover { background: var(--ippa-surface-2); }
  .app-nav-link.active { background: var(--ippa-lacquer-soft); }
  .app-nav-link.active::before {
    top: 10px;
    bottom: 10px;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 0 2px 2px 0;
  }
  .nav-label-full { display: inline; }
  .nav-label-short { display: none; }
}

/* ---------- 頁面標題與面板 ---------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: var(--ippa-gap);   /* 內容頁裡由 .app-main 的 gap 控制，這裡只是後備 */
}
.page-title { font-size: 1.75rem; margin: 0; outline: none; }
.page-subtitle { margin: .25rem 0 0; color: var(--ippa-muted); font-size: .9375rem; max-width: 40em; }
.page-actions, .page-actions-row { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 575.98px) {
  .page-actions, .page-actions-row { width: 100%; }
  .page-actions-row > .btn, .page-actions > .btn { flex: 1; }
}

.panel {
  background: var(--ippa-surface);
  border: 1px solid var(--ippa-line);
  border-radius: 10px;
  padding: var(--ippa-panel-pad);
  margin-bottom: var(--ippa-gap);   /* 內容頁裡由 .app-main 的 gap 控制，這裡只是後備 */
}
.panel-narrow { max-width: 480px; }
.panel-title { font-size: 1.25rem; margin: 0 0 1rem; }
.panel-lead { color: var(--ippa-muted); margin-top: -.5rem; }
.sub-title {
  font-family: var(--ippa-font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 1.5rem 0 .5rem;
  color: var(--ippa-muted);
}

/* 狀態區塊：載入、空、錯誤 */
.state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: var(--ippa-state-pad) 1rem;   /* 靠上顯示：只留固定上下內距，不撐高、不垂直置中 */
  text-align: center;
  color: var(--ippa-muted);
}
.state-block[role=status] { flex-direction: row; justify-content: center; }
.state-block .bi { font-size: 1.75rem; }
.state-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--ippa-ink); }
.state-text { margin: 0 0 .5rem; max-width: 28em; }
.state-error { color: var(--ippa-bad); }
.state-empty {
  border: 1px dashed var(--ippa-line);
  border-radius: 10px;
  background: var(--ippa-surface);
}

/* ---------- 登入與改密碼 ---------- */
/* 登入卡片水平置中、垂直靠上：原本以 min-height:100dvh + align-items:center 垂直置中，
   iPhone 跳出鍵盤或橫向時卡片上緣會被推到狀態列底下；現在上方留固定距離（含瀏海安全區），
   高螢幕上也只多留一點（最多 64px），不會掉到畫面中間 */
.auth-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding:
    calc(env(safe-area-inset-top) + clamp(var(--ippa-page-top), 6vh, 64px))
    max(var(--ippa-page-x), env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + var(--ippa-page-bottom))
    max(var(--ippa-page-x), env(safe-area-inset-left));
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--ippa-surface);
  border: 1px solid var(--ippa-line);
  border-top: 4px solid var(--ippa-lacquer);
  border-radius: 10px;
  padding: 2rem 1.5rem 1.5rem;
}
.auth-brand { text-align: center; margin-bottom: 1rem; }
.auth-logo { width: 88px; height: 88px; }
.auth-brand-name {
  margin: .25rem 0 0;
  font-family: var(--ippa-font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .15em;
}
.auth-title {
  font-size: 1.125rem;
  text-align: center;
  color: var(--ippa-muted);
  font-family: var(--ippa-font-sans);
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: 1.5rem;
}
.auth-lead { color: var(--ippa-muted); }
.auth-note {
  margin: 1rem 0 0;
  padding-top: .875rem;
  border-top: 1px solid var(--ippa-line);
  color: var(--ippa-muted);
  font-size: .9375rem;
  text-align: center;
}
.pw-toggle,
.input-group > .btn-outline-secondary {
  min-width: 48px;
  --bs-btn-bg: var(--bs-body-bg);
  --bs-btn-border-color: var(--bs-border-color);
}
/* 深色模式：眼睛按鈕與「產生」按鈕的底色與深色輸入框一致 */
[data-bs-theme=dark] .input-group > .btn-outline-secondary {
  --bs-btn-bg: var(--bs-body-bg);
  --bs-btn-color: var(--ippa-ink);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--ippa-surface-2);
  --bs-btn-hover-color: var(--ippa-ink);
  --bs-btn-active-bg: var(--ippa-surface-2);
  --bs-btn-active-color: var(--ippa-ink);
}
.pw-counter:empty { display: none; }

/* ---------- 立即廣播 ---------- */
.now-panel {
  border-left: 4px solid var(--ippa-line);
  /* 捲動到這裡時留出頂部列（與離線橫幅）的高度 */
  scroll-margin-top: calc(var(--ippa-banner-h, 0px) + var(--ippa-header-h) + env(safe-area-inset-top) + var(--ippa-page-top));
}
.now-panel.is-live { border-left-color: var(--ippa-alert); }
.live-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .25rem;
  font-weight: 700;
  color: var(--ippa-bad);
}
.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ippa-alert);
  animation: ippa-pulse 1.6s ease-in-out infinite;
}
@keyframes ippa-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
.now-title {
  font-family: var(--ippa-font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  overflow-wrap: anywhere;
}
.now-meta { margin: 0; color: var(--ippa-muted); overflow-wrap: anywhere; }
.now-idle { margin: 0; color: var(--ippa-muted); font-size: 1.0625rem; }
.stop-controls { display: grid; gap: .625rem; margin-top: 1rem; }
.poll-error { margin: .75rem 0 0; font-size: .875rem; color: var(--ippa-warn); }
.queue-list { margin: 0; padding-left: 1.5rem; }
.queue-list li { padding: .375rem 0; border-bottom: 1px solid var(--ippa-line); }
.queue-list li:last-child { border-bottom: 0; }
.queue-title { display: block; font-weight: 500; overflow-wrap: anywhere; }
.queue-intro { display: block; font-size: .875rem; color: var(--ippa-muted); overflow-wrap: anywhere; }

.form-block { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.form-block-title {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .5rem;
  float: none;
  width: auto;
}
.choice-group { display: grid; gap: .5rem; }
.choice-group-inline { grid-template-columns: repeat(2, 1fr); }
.choice { position: relative; }
.choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-label {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 52px;
  padding: .625rem .875rem;
  border: 1px solid var(--ippa-line);
  border-radius: 8px;
  background: var(--ippa-surface);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.choice-label::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ippa-muted);
  border-radius: 50%;
}
.choice-input:checked + .choice-label {
  border-color: var(--ippa-lacquer);
  background: var(--ippa-lacquer-soft);
  font-weight: 700;
}
.choice-input:checked + .choice-label::before {
  border-color: var(--ippa-lacquer);
  background: radial-gradient(circle, var(--ippa-lacquer) 0 45%, transparent 50%);
}
[data-bs-theme=dark] .choice-input:checked + .choice-label { border-color: #C9554C; }
.choice-input:focus-visible + .choice-label { outline: 3px solid var(--ippa-focus); outline-offset: 2px; }
.choice-input:disabled + .choice-label { opacity: .5; cursor: not-allowed; }
.pick-row { display: flex; gap: .5rem; margin-top: .5rem; }
.pick-row .form-select { flex: 1; min-width: 0; }
.pick-row .btn { flex: none; }
.confirm-list { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: .75rem 0 0; }
.confirm-list dt { color: var(--ippa-muted); font-weight: 500; }
.confirm-list dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- 分頁標籤 ---------- */
.seg-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--ippa-gap);
  border-bottom: 1px solid var(--ippa-line);
}
.seg-tab {
  flex: 1;
  min-height: 48px;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--ippa-muted);
  font-size: 1.0625rem;
  font-weight: 500;
}
.seg-tab.active { color: var(--ippa-ink); font-weight: 700; border-bottom-color: var(--ippa-lacquer); }
[data-bs-theme=dark] .seg-tab.active { border-bottom-color: var(--ippa-gold); }
@media (min-width: 768px) { .seg-tab { flex: none; padding: 0 1.5rem; } }

/* ---------- 列表項目（音檔、排程、帳號、紀錄） ---------- */
.audio-list, .sched-list, .user-list, .log-list, .audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ippa-gap);   /* 卡片之間與面板之間同一個間距 */
}
.audio-item, .sched-item, .user-item, .log-item {
  background: var(--ippa-surface);
  border: 1px solid var(--ippa-line);
  border-radius: 10px;
  padding: 1rem;
}
.is-off { background: var(--ippa-surface-2); }
.is-off .sched-title, .is-off .user-name-title { color: var(--ippa-muted); }
.list-hint { color: var(--ippa-muted); font-size: .9375rem; }
.audio-title-row, .sched-head, .user-head, .log-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .625rem;
  margin-bottom: .375rem;
}
.audio-title, .sched-title, .user-name-title, .log-title {
  font-family: var(--ippa-font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  color: var(--ippa-muted);
  font-size: .9375rem;
}
.meta-filename { overflow-wrap: anywhere; }
.clip-summary {
  margin: .625rem 0 0;
  padding: .5rem .75rem;
  border-radius: 6px;
  background: var(--ippa-gold-soft);
  color: var(--ippa-ink);
  font-size: .9375rem;
}
.audio-actions, .item-actions, .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .875rem;
  align-items: center;
}
@media (max-width: 575.98px) {
  .audio-actions > .btn, .item-actions > .btn { flex: 1 1 calc(50% - .25rem); }
  .audio-actions > .btn-preview { flex-basis: 100%; }
}

.kv-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .125rem 1rem;
  margin: .25rem 0 0;
  font-size: .9375rem;
}
.kv-list dt { color: var(--ippa-muted); font-weight: 400; }
.kv-list dd { margin: 0; overflow-wrap: anywhere; }

/* 徽章 */
.badge { font-weight: 500; font-size: .8125rem; padding: .35em .6em; border-radius: 4px; }
.badge-gold { background: var(--ippa-gold-soft); color: var(--ippa-gold-ink); border: 1px solid var(--ippa-gold); }
.badge-on { background: var(--ippa-ok-soft); color: var(--ippa-ok); }
.badge-off { background: var(--ippa-surface-2); color: var(--ippa-muted); border: 1px solid var(--ippa-line); }
.badge-warn { background: var(--ippa-warn-soft); color: var(--ippa-warn); }
.badge-bad { background: var(--ippa-bad-soft); color: var(--ippa-bad); }
.badge-row { display: flex; flex-wrap: wrap; gap: .375rem; }
.role-badge { border: 1px solid currentColor; background: transparent; }
.role-admin { color: var(--ippa-lacquer); }
[data-bs-theme=dark] .role-admin { color: #F0A99F; }
.role-operator { color: var(--ippa-gold-ink); }
.role-viewer { color: var(--ippa-muted); }

/* 播放紀錄狀態（顏色 + 圖示 + 文字，不只靠顏色辨識） */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 4px;
  font-size: .875rem;
  font-weight: 700;
}
.tone-ok.status-badge { background: var(--ippa-ok-soft); color: var(--ippa-ok); }
.tone-bad.status-badge { background: var(--ippa-bad-soft); color: var(--ippa-bad); }
.tone-warn.status-badge { background: var(--ippa-warn-soft); color: var(--ippa-warn); }
.tone-live.status-badge { background: var(--ippa-lacquer-soft); color: var(--ippa-lacquer); }
[data-bs-theme=dark] .tone-live.status-badge { color: #F0A99F; }
.tone-neutral.status-badge { background: var(--ippa-surface-2); color: var(--ippa-muted); }
.log-item { border-left-width: 4px; }
.tone-border-ok { border-left-color: var(--ippa-ok); }
.tone-border-bad { border-left-color: var(--ippa-bad); }
.tone-border-warn { border-left-color: var(--ippa-warn); }
.tone-border-live { border-left-color: var(--ippa-lacquer); }
.log-time { margin: 0 0 .25rem; color: var(--ippa-muted); font-size: .9375rem; }
.log-error {
  margin: .625rem 0 0;
  padding: .5rem .75rem;
  background: var(--ippa-bad-soft);
  color: var(--ippa-bad);
  border-radius: 6px;
  font-size: .9375rem;
  overflow-wrap: anywhere;
}
.filter-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--ippa-gap); }
.filter-bar .form-select { max-width: 240px; }
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: var(--ippa-gap);
}
/* 只有一頁時分頁列是空的：整個拿掉，不在格線裡多佔一個間距 */
.pager:empty { display: none; }
.pager-text { color: var(--ippa-muted); font-size: .9375rem; text-align: center; }

/* ---------- 排程 ---------- */
.switch-lg { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding-left: 0; margin: 0 .5rem 0 0; }
.switch-lg .form-check-input { width: 3rem; height: 1.6rem; margin: 0; float: none; cursor: pointer; }
.switch-lg .form-check-label { cursor: pointer; }
.form-check-input:checked { background-color: var(--ippa-lacquer); border-color: var(--ippa-lacquer); }
.day-group { display: grid; grid-template-columns: repeat(7, 1fr); gap: .375rem; }
.day-toggle {
  min-height: 48px;
  border: 1px solid var(--ippa-line);
  border-radius: 8px;
  background: var(--ippa-surface);
  color: var(--ippa-ink);
  font-weight: 700;
  font-size: 1.0625rem;
}
.day-toggle[aria-pressed=true] { background: var(--ippa-lacquer); border-color: var(--ippa-lacquer); color: #fff; }

/* ---------- 錄音 ---------- */
.rec-stage { min-height: 260px; }
.rec-lead { color: var(--ippa-muted); }
.rec-center { display: flex; justify-content: center; padding: 1rem 0; }
.rec-button {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 6px solid var(--ippa-lacquer-soft);
  background: var(--ippa-lacquer);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  font-size: 1rem;
  font-weight: 700;
}
.rec-button .bi { font-size: 2.5rem; }
.rec-button.is-recording { background: var(--ippa-alert); border-color: var(--ippa-bad-soft); }
.rec-remaining {
  font-family: var(--ippa-font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin: .5rem 0;
}
.rec-remaining.is-ending { color: var(--ippa-bad); }
.rec-bar { height: 8px; border-radius: 4px; background: var(--ippa-surface-2); overflow: hidden; border: 1px solid var(--ippa-line); }
.rec-bar-fill { height: 100%; width: 0; background: var(--ippa-alert); }
.rec-player, .clip-full-player { width: 100%; margin-top: .25rem; }

/* ---------- 片段編輯 ---------- */
.clip-section + .clip-section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ippa-line); }
.clip-section-title { font-size: 1.0625rem; margin-bottom: .5rem; }
.pos-row { margin: .5rem 0; color: var(--ippa-muted); font-variant-numeric: tabular-nums; }
.start-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.start-value {
  margin: 0;
  font-family: var(--ippa-font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nudge-group { display: flex; gap: .375rem; }
.nudge-btn { min-width: 60px; }
.range-field { margin-top: 1.25rem; }
.range-head { display: flex; justify-content: space-between; align-items: baseline; }
.range-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ippa-lacquer); }
[data-bs-theme=dark] .range-value { color: var(--ippa-gold-ink); }
.range-scale { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--ippa-muted); }
.range-lg { height: 2.75rem; }   /* 加大觸控範圍 */
.range-lg::-webkit-slider-thumb { width: 1.75rem; height: 1.75rem; margin-top: -.6rem; background: var(--ippa-lacquer); }
.range-lg::-moz-range-thumb { width: 1.75rem; height: 1.75rem; background: var(--ippa-lacquer); }
.range-lg::-webkit-slider-runnable-track { height: .55rem; }
.range-lg::-moz-range-track { height: .55rem; }
.clip-check { margin: 1.25rem 0 0; padding: .625rem .75rem; border-radius: 6px; background: var(--ippa-surface-2); font-variant-numeric: tabular-nums; }
.clip-check.is-error { background: var(--ippa-bad-soft); color: var(--ippa-bad); }
.dirty-note { color: var(--ippa-warn); }

/* ---------- 系統狀態 ---------- */
.tile-grid { display: grid; grid-template-columns: 1fr; gap: .625rem; }
@media (min-width: 576px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
.tile {
  border: 1px solid var(--ippa-line);
  border-left: 4px solid var(--ippa-line);
  border-radius: 8px;
  padding: .75rem .875rem;
  background: var(--ippa-surface-2);
}
.tile.tone-ok { border-left-color: var(--ippa-ok); }
.tile.tone-warn { border-left-color: var(--ippa-warn); }
.tile.tone-bad { border-left-color: var(--ippa-bad); }
.tile-label { margin: 0; color: var(--ippa-muted); font-size: .875rem; }
.tile-value { margin: .125rem 0 0; font-size: 1.1875rem; font-weight: 700; overflow-wrap: anywhere; }
.tile.tone-bad .tile-value { color: var(--ippa-bad); }
.tile.tone-warn .tile-value { color: var(--ippa-warn); }
.tile-sub { margin: 0; color: var(--ippa-muted); font-size: .875rem; overflow-wrap: anywhere; white-space: pre-line; }
.tile-sub:empty { display: none; }
.status-meta { margin: .75rem 0 0; color: var(--ippa-muted); font-size: .875rem; }
.status-meta:empty { display: none; }
.playback-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0 0 .75rem;
  padding: .5rem .75rem;
  border-radius: 8px;
  background: var(--ippa-surface-2);
  border: 1px solid var(--ippa-line);
  overflow-wrap: anywhere;
}
.playback-line.is-live { border-color: var(--ippa-alert); }
.playback-line .live-dot { flex: none; }
.playback-label { font-weight: 700; }
.playback-sub { color: var(--ippa-muted); font-size: .875rem; }

/* ---------- 電腦版滿版排版（只在 ≥992px 生效；手機版不受影響） ---------- */
@media (min-width: 992px) {
  /* 狀態看板依寬度自動多欄 */
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (min-width: 1200px) {
  /* 立即廣播：目前播放與發出廣播並排；只有一個面板（檢視者）時自動佔滿 */
  /* 原本這裡的 grid 沒有設定 align-content，主內容區被外層格線撐滿整個視窗高度時，
     多出來的高度會平均分給每一列，標題列被撐高、頁首文字（align-items:flex-end）沉到列底，
     面板之間也出現大片空白。現在沿用 .app-main 的 align-content:start 與 gap，只改欄數 */
  .app[data-shell=full] .app-main[data-page=broadcast] {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    align-items: start;
  }
  .app-main[data-page=broadcast] > .page-head { grid-column: 1 / -1; }
  /* 系統狀態：主機看板滿版，通知設定與加入主畫面並排 */
  .app[data-shell=full] .app-main[data-page=status] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .app-main[data-page=status] > .page-head,
  .app-main[data-page=status] > .status-main { grid-column: 1 / -1; }
  /* 清單類（音檔、排程、帳號、播放紀錄）改為多欄卡片；操作紀錄維持單欄表格式清單 */
  .audio-list, .sched-list, .user-list, .log-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
    align-items: start;
  }
}
.push-state { display: flex; align-items: center; font-weight: 700; margin-bottom: 0; }
.push-state.is-on { color: var(--ippa-ok); }
.steps { margin: 0; padding-left: 1.5rem; }
.steps li { padding: .2rem 0; }

/* ---------- 操作紀錄 ---------- */
.audit-list { gap: 0; background: var(--ippa-surface); border: 1px solid var(--ippa-line); border-radius: 10px; }
.audit-item { padding: .75rem 1rem; border-bottom: 1px solid var(--ippa-line); }
.audit-item:last-child { border-bottom: 0; }
.audit-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.audit-action { font-weight: 700; }
.audit-time { color: var(--ippa-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.audit-meta { margin: .125rem 0 0; color: var(--ippa-muted); font-size: .875rem; overflow-wrap: anywhere; }
.audit-detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .125rem .75rem;
  margin: .375rem 0 0;
  padding: .375rem .625rem;
  background: var(--ippa-surface-2);
  border-radius: 4px;
  font-size: .875rem;
}
/* 所有欄位標籤統一灰色；提高權重，避免被其他規則（例如自動偵測或連結樣式）染成藍色 */
.audit-list .audit-detail-list > dt {
  color: var(--ippa-muted);
  font-weight: 400;
  text-decoration: none;
}
.audit-list .audit-detail-list > dd { margin: 0; color: var(--ippa-ink); overflow-wrap: anywhere; }
.audit-detail {
  margin: .375rem 0 0;
  padding: .375rem .5rem;
  background: var(--ippa-surface-2);
  border-radius: 4px;
  font-size: .8125rem;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 8rem;
  overflow: auto;
  color: var(--ippa-ink);
}

/* ---------- 對話框 ---------- */
.modal-content { background: var(--ippa-surface); border-color: var(--ippa-line); border-radius: 10px; }
.modal-header { border-bottom-color: var(--ippa-line); }
.modal-footer { border-top-color: var(--ippa-line); gap: .5rem; }
.modal-title { font-size: 1.25rem; overflow-wrap: anywhere; }
.dialog-message { font-size: 1.0625rem; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down .modal-content { border-radius: 0; }
  .modal-footer { flex-wrap: nowrap; }
  .modal-footer > .btn { flex: 1; margin: 0; }
}
/* SweetAlert2（ui.js swalOptions）：沿用面板與朱漆色票，深色模式跟著 CSS 變數切換 */
.ippa-swal-container.swal2-backdrop-show { background: rgba(27, 19, 18, .55); }
.swal2-popup.ippa-swal {
  width: min(32rem, calc(100vw - 2rem));
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--ippa-surface);
  color: var(--ippa-ink);
  border: 1px solid var(--ippa-line);
  border-top: 4px solid var(--ippa-lacquer);
  border-radius: 10px;
  font-family: var(--ippa-font-sans);
  font-size: 1rem;
}
.ippa-swal .swal2-title.ippa-swal-title {
  padding: 0;
  margin: 0 0 .5rem;
  color: var(--ippa-ink);
  font-family: var(--ippa-font-serif);
  font-size: 1.375rem;
  overflow-wrap: anywhere;
}
.ippa-swal .swal2-html-container.ippa-swal-text {
  margin: 0;
  padding: 0;
  color: var(--ippa-ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
}
.ippa-swal .confirm-list { text-align: left; }
.ippa-swal .swal2-icon { margin: .25rem auto 1rem; }
.ippa-swal .swal2-icon.swal2-warning { border-color: var(--ippa-alert); color: var(--ippa-alert); }
.ippa-swal .swal2-icon.swal2-info { border-color: var(--ippa-gold); color: var(--ippa-gold-ink); }
.ippa-swal .swal2-actions.ippa-swal-actions {
  width: 100%;
  margin: 1.25rem 0 0;
  padding: 0;
  gap: .5rem;
  justify-content: flex-end;
}
.ippa-swal .swal2-actions .btn { margin: 0; min-height: 48px; }
.ippa-swal .swal2-actions .btn:focus-visible { outline: 3px solid var(--ippa-focus); outline-offset: 2px; box-shadow: none; }
/* 手機：按鈕滿寬直向堆疊，主要按鈕在上 */
@media (max-width: 575.98px) {
  .ippa-swal .swal2-actions.ippa-swal-actions { flex-direction: column; align-items: stretch; }
  .ippa-swal .swal2-actions .btn { width: 100%; }
  .ippa-swal .swal2-actions .swal2-confirm { order: -1; }
}
/* 新版本提示（pwa.js）：置中對話框、大按鈕，手機上單手也好按 */
.ippa-swal-update .swal2-actions .btn { min-height: 56px; font-size: 1.125rem; font-weight: 700; }
.ippa-swal-update .swal2-loader { border-color: var(--ippa-lacquer) transparent var(--ippa-lacquer) transparent; }
.upload-progress { height: 10px; margin-top: .5rem; }
.upload-progress .progress-bar { width: 0; background: var(--ippa-lacquer); }

/* ---------- 背景轉檔／上傳中的列（library.js 的 audio-job） ---------- */
.audio-job .audio-main { min-width: 0; }
.job-status {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ippa-ink);
  overflow-wrap: anywhere;
}
.job-status.text-danger,
.audio-job .text-danger .job-status {
  color: var(--ippa-bad) !important;   /* 覆寫 Bootstrap 固定紅色，深色模式改用較亮的 danger 色 */
}
.audio-job .text-danger { color: var(--ippa-bad) !important; }
.audio-job-list > li > .audio-job:has(.text-danger) {
  border-color: var(--ippa-alert);
  background: var(--ippa-bad-soft);
}
.audio-job .upload-progress {
  height: 12px;                         /* 至少 8px，手機上看得清楚 */
  margin: .25rem 0 .625rem;
  border: 1px solid var(--ippa-line);
  border-radius: 6px;
  background: var(--ippa-surface-2);
}
.audio-job .upload-progress .progress-bar { transition: width .4s ease; }
.audio-job .upload-progress .progress-bar.bg-secondary { background: var(--ippa-muted) !important; }
.audio-job .audio-actions > .btn { min-height: 44px; min-width: 44px; }
@media (prefers-reduced-motion: reduce) {
  .audio-job .upload-progress .progress-bar { transition: none; }
}

/* ---------- 提示訊息 ---------- */
.toast-stack {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--ippa-tabbar-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .5rem .625rem .875rem;
  border-radius: 8px;
  background: var(--ippa-ink);
  color: var(--ippa-paper);
  font-size: .9375rem;
  box-shadow: 0 6px 20px rgba(42, 26, 23, .25);
  animation: ippa-toast-in .18s ease-out;
}
.toast-item > span { flex: 1; overflow-wrap: anywhere; }
.toast-success .bi:first-child { color: #8FD9A8; }
.toast-danger { background: var(--ippa-alert); color: #fff; }
.toast-warning .bi:first-child { color: #F2C266; }
.toast-info .bi:first-child { color: #A9C7FF; }
[data-bs-theme=dark] .toast-item:not(.toast-danger) { background: #F3E9E4; color: #2A1A17; }
[data-bs-theme=dark] .toast-success .bi:first-child { color: #1E6B3A; }
[data-bs-theme=dark] .toast-warning .bi:first-child { color: #8A5300; }
[data-bs-theme=dark] .toast-info .bi:first-child { color: #1B4F9C; }
.toast-close {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
}
@keyframes ippa-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 992px) {
  .toast-stack { left: auto; right: 1.5rem; transform: none; bottom: 1.5rem; }
}
.app[data-shell=bare] ~ .toast-stack { bottom: calc(env(safe-area-inset-bottom) + 16px); }

/* ---------- 下拉重新整理（pull-refresh.js） ---------- */
/* Android Chrome 一般瀏覽器模式：停用原生的下拉重新整理與捲動串連，避免和自製的下拉重新整理同時觸發 */
html, body { overscroll-behavior-y: contain; }
/* 指示器從頂部列下緣滑出（z-index 低於頂部列，收起時藏在它後面）；位移由 --ptr-pull 控制 */
.ptr {
  position: fixed;
  left: 50%;
  top: calc(var(--ippa-banner-h, 0px) + var(--ippa-header-h) + env(safe-area-inset-top));
  z-index: 1029;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  pointer-events: none;
  transform: translate(-50%, calc(var(--ptr-pull, 0px) - 100%));
  opacity: var(--ptr-progress, 0);
}
/* 離線橫幅已處理瀏海安全區；沒有頂部列（登入頁等）時接在安全區下方 */
.has-offline-banner .ptr { top: calc(var(--ippa-banner-h, 0px) + var(--ippa-header-h)); }
body:has(> .app:not([data-shell=full])) .ptr { top: env(safe-area-inset-top); }
.ptr.is-settling { transition: transform .2s ease-out, opacity .2s ease-out; }
.ptr-circle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ippa-surface);
  color: var(--ippa-muted);
  border: 1px solid var(--ippa-line);
  box-shadow: 0 4px 12px rgba(42, 26, 23, .18);
}
.ptr-icon {
  font-size: 1.25rem;
  transform: rotate(calc(var(--ptr-progress, 0) * 270deg));
}
.ptr-spinner { display: none; color: var(--ippa-lacquer); }
.ptr.is-armed .ptr-circle { color: var(--ippa-lacquer); border-color: var(--ippa-lacquer); }
.ptr.is-refreshing .ptr-icon { display: none; }
.ptr.is-refreshing .ptr-spinner { display: inline-block; }
.ptr-text {
  padding: .125rem .625rem;
  border-radius: 999px;
  background: var(--ippa-surface);
  color: var(--ippa-ink);
  border: 1px solid var(--ippa-line);
  font-size: .8125rem;
  white-space: nowrap;
}
[data-bs-theme=dark] .ptr-spinner { color: var(--ippa-gold-ink); }
[data-bs-theme=dark] .ptr.is-armed .ptr-circle { color: var(--ippa-gold-ink); border-color: var(--ippa-gold); }
/* 減少動態效果：指示器不跟著手指移動、箭頭不旋轉，只淡入顯示在固定位置 */
@media (prefers-reduced-motion: reduce) {
  .ptr { transform: translate(-50%, .5rem); }
  .ptr-icon { transform: none; }
}

/* ---------- 表單微調 ---------- */
.form-control-lg, .form-select-lg { font-size: 1.0625rem; min-height: 52px; }
.form-label { font-weight: 500; }
.form-text { color: var(--ippa-muted); }
.alert { border-radius: 8px; overflow-wrap: anywhere; }
.noscript { padding: 2rem; text-align: center; }

/* ---------- 尊重減少動態效果的設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .live-dot { animation: none; }
  .modal.fade .modal-dialog { transform: none !important; }
}