/* =============================================================================
   ui/settings.css — 領域 G「設定與安全」
   頁面：通知設定（#view-alerts）、備份與遷移（#view-backup，含帳號 JSON）、
        安全與稽核（#view-audit：2FA 設定／停用、備援碼、裝置、紀錄）
   規則（完整說明見 docs/DESIGN.md）：
   - 每條規則都以 #view-alerts／#view-backup／#view-audit 或本領域 class（settings-…，或沿用
     既有的 alert-／backup-／account-backup-／security-／two-factor-／recovery-…）開頭。
   - 顏色、陰影、圓角、字級一律用 foundation 的 token，不寫色碼。
   - 共用元件（.panel、.status、.ui-*）直接使用，不在這裡改它們的基本外觀。
   - 不要寫 @layer：一般規則本來就會蓋過 foundation 的預設。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. 三頁共用：「左說明、右內容」分區
   每一區左欄一句話說這區做什麼，右欄放卡片或表格；≤ 900px 改成上下。
   ----------------------------------------------------------------------------- */
.alert-section, .backup-section, .account-backup-panel {
  display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: var(--sp-4) var(--sp-7);
  align-items: start; min-width: 0; padding: var(--sp-6) 0; border-top: 1px solid var(--line-2);
}
.alert-section-head, .backup-section-head { display: grid; gap: 6px; min-width: 0; align-content: start; }
.alert-section-head h3, .backup-section-head h3 { color: var(--ink); font-size: var(--fs-18); font-weight: 750; line-height: 1.35; }
.alert-section-head p, .backup-section-head p { color: var(--ink-3); font-size: var(--fs-14); line-height: var(--lh-long); }
.alert-section-head > button { justify-self: start; margin-top: var(--sp-2); }
.alert-section-head .alert-settings-updated { color: var(--ink-3); font-size: var(--fs-13); line-height: 1.5; }
.backup-section-body { display: grid; gap: var(--sp-4); min-width: 0; }
@media (max-width: 900px) {
  .alert-section, .backup-section, .account-backup-panel { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-5) 0; }
}

/* -----------------------------------------------------------------------------
   2. 頁面骨架：頁首數字的語氣色、載入與錯誤
   ----------------------------------------------------------------------------- */
#view-alerts .ui-page-head-stats > div[data-tone] strong,
#view-audit .ui-page-head-stats > div[data-tone] strong { color: var(--tone-value); }
.alert-page .alert-refresh-warning { margin-bottom: var(--sp-4); }
.alert-page .alert-refresh-warning::before { content: ""; width: 8px; height: 8px; flex: none; margin-top: 9px; border-radius: 50%; background: var(--tone-ink, var(--warn)); }
.alert-loading-panel .ui-spinner { margin-bottom: var(--sp-2); }
/* .alert-preference-panel is the scope app.js uses to find the「重新整理安全設定」button; it sits on the page root. */
.alert-page.alert-preference-panel { min-width: 0; }
.alert-page > .ui-page-head + .alert-section { border-top: 0; padding-top: var(--sp-2); }
.alert-page > .alert-guides { padding-bottom: var(--sp-2); }
.backup-page > .ui-page-head + .account-backup-panel { border-top: 0; padding-top: var(--sp-2); }

/* -----------------------------------------------------------------------------
   3. 通知設定：推播管道卡片
   ----------------------------------------------------------------------------- */
.alert-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); min-width: 0; }
.alert-provider-card { display: grid; gap: var(--sp-4); align-content: start; }
.alert-provider-card > * + * { margin-top: 0; }
.alert-provider-card-title { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.alert-provider-card-title > div { min-width: 0; }
.alert-provider-card-title h3 { color: var(--ink); font-size: var(--fs-16); font-weight: 750; }
.alert-provider-card-title p { color: var(--ink-3); font-size: var(--fs-13); line-height: 1.5; }
.alert-provider-logo { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; color: var(--on-brand); background: var(--brand); }
.alert-provider-logo > svg { width: 24px; height: 24px; }
.alert-provider-card.line .alert-provider-logo { color: var(--on-ok); background: var(--ok-solid); }
.alert-provider-card.telegram .alert-provider-logo { color: var(--on-brand); background: var(--brand); }
.alert-provider-card[data-state="unset"] .alert-provider-logo { color: var(--ink-3); background: var(--surface-3); }
.alert-provider-safe-state { display: grid; gap: var(--sp-3); min-width: 0; }
.alert-provider-state-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); color: var(--ink-3); font-size: var(--fs-13); font-weight: 600; }
/* 未設定：三步驟說明 */
.alert-provider-steps { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.alert-provider-steps > li { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.6; }
.alert-provider-steps > li > b {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none; margin-top: 1px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2); font-family: var(--font-num); font-size: var(--fs-12); font-weight: 800;
}
.alert-provider-steps code { font-size: var(--fs-13); }
/* 已設定：機器人身分、事實格、Webhook、探索前提 */
.alert-bot-identity { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.alert-bot-identity > div { min-width: 0; }
.alert-bot-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; color: var(--ok); background: var(--ok-soft); }
.alert-bot-identity strong { display: block; color: var(--ink); font-size: var(--fs-15); line-height: 1.4; overflow-wrap: anywhere; }
.alert-bot-identity span { display: block; color: var(--ink-3); font-size: var(--fs-13); line-height: 1.5; overflow-wrap: anywhere; }
.alert-provider-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alert-webhook-box { display: grid; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); }
.alert-webhook-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.alert-webhook-title strong { color: var(--ink); font-size: var(--fs-14); }
.alert-webhook-box > p, .alert-webhook-actions p { color: var(--ink-3); font-size: var(--fs-13); line-height: 1.6; }
.alert-copy-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.alert-copy-row > input { flex: 1 1 220px; min-height: var(--h-sm); padding: 6px 10px; font-family: var(--font-mono); font-size: var(--fs-13); }
.alert-copy-row > button { flex: none; }
.alert-webhook-actions { display: grid; gap: var(--sp-2); justify-items: start; }
.alert-discovery-prerequisite {
  display: flex; gap: var(--sp-3); min-width: 0; padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-2); font-size: var(--fs-14); line-height: 1.6;
}
.alert-discovery-prerequisite > svg { flex: none; margin-top: 3px; color: var(--brand-ink); }
.alert-discovery-prerequisite strong { display: block; color: var(--ink); font-size: var(--fs-14); }
.alert-provider-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.alert-provider-actions:empty { display: none; }
/* 憑證表單：未設定時是「開始設定」主要按鈕，展開後成為表單；已設定時是低調的「重新驗證」連結 */
.alert-credential-details { min-width: 0; padding-top: var(--sp-3); border-top: 1px solid var(--line-2); }
.alert-credential-details > summary { font-size: var(--fs-15); }
.alert-credential-details[open] > summary { margin-bottom: var(--sp-3); }
.alert-credential-details > summary > svg { width: 18px; height: 18px; }
.alert-credential-details[open] > summary > svg { display: none; }
.alert-provider-card[data-state="unset"] .alert-credential-details:not([open]) > summary {
  display: inline-flex; justify-content: center; gap: var(--sp-2); min-height: var(--h-md); padding: 0 var(--sp-4);
  border-radius: var(--r-md); background: var(--brand); color: var(--on-brand); font-weight: 650; box-shadow: var(--sh-btn);
}
.alert-provider-card[data-state="unset"] .alert-credential-details:not([open]) > summary::before { display: none; }
.alert-provider-card[data-state="unset"] .alert-credential-details:not([open]) > summary:hover { background: var(--brand-hover); }
.alert-credential-form { display: grid; gap: var(--sp-3); min-width: 0; }
.alert-credential-form > button { justify-self: start; }

/* -----------------------------------------------------------------------------
   4. 通知設定：接收對象資料表（手機變卡片）
   ----------------------------------------------------------------------------- */
.alert-destination-panel { display: grid; gap: var(--sp-3); min-width: 0; }
.alert-destination-counts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.alert-destination-counts .ui-tag b { margin-left: 2px; font-family: var(--font-num); }
.alert-destination-table { min-width: 960px; }
.alert-destination-table th, .alert-destination-table td { padding-inline: 10px; }
.alert-destination-table th:nth-child(n+2):nth-child(-n+8), .alert-destination-table td:nth-child(n+2):nth-child(-n+8) { text-align: center; }
.alert-destination-table th:last-child, .alert-destination-table td:last-child { text-align: right; }
.alert-destination-table td:first-child { min-width: 230px; }
.alert-destination-table .status { white-space: nowrap; }
.alert-destination-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; text-align: left; }
.alert-destination-cell > div { min-width: 0; }
.alert-destination-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; color: var(--brand-ink); background: var(--brand-soft); }
.alert-destination-avatar.line { color: var(--ok); background: var(--ok-soft); }
.alert-destination-avatar.telegram { color: var(--brand-ink); background: var(--brand-soft); }
.alert-destination-cell strong { display: block; color: var(--ink); font-size: var(--fs-15); line-height: 1.4; overflow-wrap: anywhere; }
.alert-destination-cell small { display: block; color: var(--ink-3); font-size: var(--fs-13); line-height: 1.5; overflow-wrap: anywhere; }
.alert-destination-cell .alert-destination-seen { color: var(--ink-3); font-size: var(--fs-12); }
.alert-topic-check { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; }
.alert-topic-check > input { width: 20px; height: 20px; }
.alert-mention-switch { min-height: 44px; vertical-align: middle; }
.alert-mention-na { color: var(--ink-3); font-size: var(--fs-13); }
.alert-destination-actions { justify-content: flex-end; flex-wrap: nowrap; }
.alert-destination-actions > button { white-space: nowrap; }
.alert-destination-row[data-state="pending"] > td:first-child { box-shadow: inset 4px 0 0 var(--warn-solid); }
.alert-destination-row[data-state="blocked"] .alert-destination-cell { opacity: .72; }
.alert-topic-notes {
  display: grid; gap: 6px; margin: 0; padding: var(--sp-3) var(--sp-4); list-style: none;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-13); line-height: 1.6;
}
.alert-topic-notes strong { color: var(--ink); }
.alert-empty { min-height: 180px; }

/* -----------------------------------------------------------------------------
   5. 通知設定：預告時間與「尚未儲存」浮動列
   ----------------------------------------------------------------------------- */
.alert-lead-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--sp-5); align-items: start; }
.alert-lead-form > * + * { margin-top: 0; }
.alert-lead-field { display: grid; gap: var(--sp-2); min-width: 0; }
.alert-lead-field > label { color: var(--ink); font-size: var(--fs-14); font-weight: 700; }
.alert-lead-input { display: flex; align-items: center; gap: var(--sp-3); }
.alert-lead-input > input { width: 128px; min-height: 52px; font-family: var(--font-num); font-size: var(--fs-24); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.alert-lead-input > span { color: var(--ink); font-size: var(--fs-16); font-weight: 700; }
.alert-lead-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alert-savebar {
  grid-column: 1 / -1; position: sticky; bottom: var(--sp-4); z-index: var(--z-sticky);
  display: none; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--inv); color: var(--on-inv); box-shadow: var(--sh-2);
}
.alert-lead-form.is-dirty .alert-savebar { display: flex; }
.alert-savebar > svg { flex: none; color: var(--coin); }
.alert-savebar-text { flex: 1 1 200px; font-size: var(--fs-15); font-weight: 700; }
.alert-savebar .actions { margin-left: auto; }
.alert-savebar button.secondary { --btn-bg: transparent; --btn-ink: var(--on-inv); --btn-line: var(--ink-4); --btn-bg-hover: transparent; --btn-line-hover: var(--on-inv); }
@media (max-width: 900px) {
  .alert-lead-form { grid-template-columns: minmax(0, 1fr); }
  .alert-savebar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-3)); }
}

/* -----------------------------------------------------------------------------
   6. 通知設定：完整設定教學（摺疊）
   ----------------------------------------------------------------------------- */
.alert-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); min-width: 0; }
.alert-guide { padding: var(--sp-3) var(--sp-4); }
.alert-guide > * + * { margin-top: var(--sp-3); }
.alert-guide > summary { min-height: 52px; gap: var(--sp-3); color: var(--ink); }
.alert-guide > summary::before { order: 2; margin-left: auto; color: var(--ink-4); }
.alert-guide > summary > span:last-child { display: grid; gap: 2px; min-width: 0; }
.alert-guide > summary strong { color: var(--ink); font-size: var(--fs-15); }
.alert-guide > summary small { color: var(--ink-3); font-size: var(--fs-13); font-weight: 400; line-height: 1.45; }
.alert-guide-number { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; color: var(--brand-ink); background: var(--brand-soft); }
.alert-guide.line .alert-guide-number { color: var(--ok); background: var(--ok-soft); }
.alert-guide > ol { display: grid; gap: var(--sp-2); margin: 0; padding-left: 1.4em; color: var(--ink-2); font-size: var(--fs-14); line-height: var(--lh-long); }
.alert-guide code { font-size: var(--fs-13); }
@media (max-width: 1024px) {
  .alert-provider-grid, .alert-guide-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  /* Foundation turns these tables into cards; the desktop min-widths must not reintroduce horizontal scrolling. */
  .alert-destination-table { min-width: 0; }
  .alert-destination-table th, .alert-destination-table td { padding-inline: 12px; }
  .alert-destination-table td { text-align: left; }
  .alert-destination-table td:first-child { min-width: 0; }
  .alert-topic-check { justify-content: flex-start; min-height: 32px; }
  .alert-mention-switch { min-height: 32px; }
  .alert-destination-actions { flex-wrap: wrap; }
  .alert-destination-row[data-state="pending"] { border-color: var(--warn-line); box-shadow: inset 4px 0 0 var(--warn-solid); }
  .alert-destination-row[data-state="pending"] > td:first-child { box-shadow: none; }
  .alert-provider-facts { grid-template-columns: minmax(0, 1fr); }
  .alert-lead-summary { grid-template-columns: minmax(0, 1fr); }
  .alert-savebar .actions { width: 100%; margin-left: 0; }
  .alert-savebar .actions > button { flex: 1 1 120px; }
}

/* -----------------------------------------------------------------------------
   7. 備份與遷移：帳號搬家檔（匯出／匯入）
   ----------------------------------------------------------------------------- */
.backup-page .backup-security-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.account-backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); min-width: 0; }
.account-backup-card { display: grid; gap: var(--sp-4); align-content: start; }
.account-backup-card > * + * { margin-top: 0; }
.account-backup-card > header { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.account-backup-card > header > div { min-width: 0; }
.account-backup-card > header h3 { color: var(--ink); font-size: var(--fs-16); font-weight: 750; }
.account-backup-card > header p { color: var(--ink-3); font-size: var(--fs-13); line-height: 1.55; }
.account-backup-card-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; color: var(--brand-ink); background: var(--brand-soft); }
.import-card .account-backup-card-icon { color: var(--warn); background: var(--warn-soft); }
.account-backup-steps { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-2); }
.account-backup-card form > button, #account-backup-import { width: 100%; }
.account-backup-status.success { color: var(--ok); font-weight: 600; }
.account-backup-status.error { color: var(--bad); font-weight: 600; }
.account-backup-file-status { padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-13); line-height: 1.6; overflow-wrap: anywhere; }
.account-backup-file-status.error { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.account-backup-inspection { display: grid; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); border: 1px solid var(--ok-line); border-radius: var(--r-lg); background: var(--ok-soft); }
.account-backup-inspection-head { display: flex; gap: var(--sp-3); min-width: 0; }
.account-backup-inspection-head > svg { flex: none; margin-top: 2px; color: var(--ok); }
.account-backup-inspection h4 { color: var(--ink); font-size: var(--fs-15); }
.account-backup-inspection p { color: var(--ink-2); font-size: var(--fs-14); line-height: 1.6; }
.account-backup-label-list { display: flex; flex-wrap: wrap; gap: 6px; }
.account-backup-label-list > span { padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-13); font-weight: 600; overflow-wrap: anywhere; }
.account-backup-inspection-note { color: var(--ink-3); font-size: var(--fs-13); }
.account-backup-import-result { display: grid; gap: var(--sp-3); min-width: 0; padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-sheen), var(--surface); box-shadow: var(--sh-1); }
.account-backup-import-result h3 { color: var(--ink); font-size: var(--fs-16); }
.account-backup-import-result > p { color: var(--ink-2); }
.account-backup-progress { display: grid; gap: var(--sp-2); }
.account-backup-progress > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); }
.account-backup-progress strong { color: var(--ink); }
.account-backup-progress span { color: var(--ink-2); font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.account-backup-progress small { color: var(--ink-3); }
.account-backup-result-list { display: grid; gap: 6px; }
.account-backup-result-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.account-backup-result-row > div { min-width: 0; }
.account-backup-result-row strong { display: block; color: var(--ink); font-size: var(--fs-14); overflow-wrap: anywhere; }
.account-backup-result-row small { display: block; color: var(--ink-3); font-size: var(--fs-13); overflow-wrap: anywhere; }
.account-backup-sync-notice, .account-backup-interruption {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); padding: 12px 16px;
  border: 1px solid var(--tone-line, var(--line)); border-radius: var(--r-lg); background: var(--tone-soft, var(--surface-2));
  color: var(--ink-2); font-size: var(--fs-14); line-height: 1.6;
}
.account-backup-sync-notice strong, .account-backup-interruption strong { display: block; width: 100%; color: var(--ink); }
.account-backup-interruption { --tone-line: var(--bad-line); --tone-soft: var(--bad-soft); }
.account-backup-sync-notice > button { margin-left: auto; }
.account-backup-import-note { color: var(--ink-3); font-size: var(--fs-13); line-height: var(--lh-long); }

/* -----------------------------------------------------------------------------
   8. 備份與遷移：整庫加密備份指令與搬站檢查
   ----------------------------------------------------------------------------- */
.backup-command-grid { display: grid; gap: var(--sp-4); min-width: 0; }
.backup-command-card { display: grid; gap: var(--sp-3); }
.backup-command-card > * + * { margin-top: 0; }
.backup-command-card > header { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.backup-command-card > header > div { flex: 1; min-width: 0; }
.backup-command-card h3 { color: var(--ink); font-size: var(--fs-16); font-weight: 750; }
.backup-command-card header p { color: var(--ink-3); font-size: var(--fs-13); line-height: 1.55; }
.backup-step { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-family: var(--font-num); font-size: var(--fs-14); font-weight: 800; }
.backup-safety-label { flex: none; }
.backup-command-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; min-width: 0; }
.backup-command-row > pre { margin: 0; }
.backup-checklist-grid .ui-row-icon { color: var(--brand-ink); background: var(--brand-soft); }
.backup-checklist-grid .ui-row-icon > b { font-family: var(--font-num); font-size: var(--fs-14); }
.backup-checklist-grid .ui-row-main p { min-width: 0; color: var(--ink-2); font-size: var(--fs-14); overflow-wrap: anywhere; }
.backup-checklist-grid .ui-row-main code { font-size: var(--fs-13); }
.backup-final-note { color: var(--ink-3); font-size: var(--fs-13); line-height: var(--lh-long); }
@media (max-width: 1024px) {
  .account-backup-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .backup-command-row { grid-template-columns: 1fr; }
  .backup-command-row > button { width: 100%; }
  .backup-command-card > header { flex-wrap: wrap; }
}

/* -----------------------------------------------------------------------------
   9. 安全與稽核
   ----------------------------------------------------------------------------- */
.security-workspace { display: grid; gap: var(--sp-5); min-width: 0; }
.security-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; min-width: 0; }
.security-two-factor-card { display: grid; gap: var(--sp-4); align-content: start; }
.security-two-factor-card > * + * { margin-top: 0; }
.security-two-factor-state { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.security-two-factor-state > div { min-width: 0; }
.security-two-factor-state h2 { font-size: var(--fs-18); }
.security-two-factor-state p { color: var(--ink-2); font-size: var(--fs-14); line-height: 1.6; }
.security-two-factor-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; color: var(--ink-3); background: var(--surface-3); }
.security-two-factor-icon > svg { width: 26px; height: 26px; }
.security-two-factor-card[data-state="on"] .security-two-factor-icon { color: var(--ok); background: var(--ok-soft); }
.security-two-factor-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.security-two-factor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.security-sessions-card { display: grid; gap: var(--sp-4); align-content: start; }
.security-sessions-card > * + * { margin-top: 0; }
.security-sessions-card .ui-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.security-concurrent-note { margin: 0; }
.security-device-table { min-width: 1000px; }
.security-device-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 220px; }
.security-device-cell > div { min-width: 0; }
.security-device-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; color: var(--ink-3); background: var(--surface-3); }
.security-device-row.current .security-device-icon { color: var(--brand-ink); background: var(--brand-soft); }
.security-device-row.current > td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
.security-device-cell strong { display: block; color: var(--ink); font-size: var(--fs-15); line-height: 1.4; overflow-wrap: anywhere; }
.security-device-cell small { display: block; color: var(--ink-3); font-size: var(--fs-13); line-height: 1.5; }
.security-device-table td:last-child, .security-device-table th:last-child { text-align: right; }
.security-table-ua { display: inline-block; max-width: 440px; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.5; overflow-wrap: anywhere; }
.security-event-outcome.challenge { --tone-ink: var(--brand-ink); --tone-soft: var(--brand-soft); --tone-line: var(--brand-line); }
.security-audit-action { font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }
.security-audit-details { max-height: 160px; }
.security-audit-table td:last-child { min-width: 320px; }
.security-section-error { color: var(--bad); font-weight: 600; }
@media (max-width: 900px) {
  .security-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .security-two-factor-facts { grid-template-columns: minmax(0, 1fr); }
  .security-two-factor-actions > button { width: 100%; }
  .security-device-table { min-width: 0; }
  .security-device-table td:last-child { text-align: left; }
  .security-device-row.current > td:first-child { box-shadow: none; }
  .security-device-row.current { border-color: var(--brand-line); box-shadow: inset 4px 0 0 var(--brand); }
  .security-device-cell { min-width: 0; }
  .security-table-ua { max-width: none; }
  .security-audit-table td:last-child { min-width: 0; }
}

/* -----------------------------------------------------------------------------
   10. 兩步驟驗證對話框（設定：確認密碼 → 掃描 QR 或輸入金鑰 → 輸入驗證碼 → 保存備援碼；停用）
   對話框不在 #view-audit 裡，所以規則以 .two-factor-… 開頭。
   ----------------------------------------------------------------------------- */
.two-factor-dialog > .ui-steps { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-2); }
.two-factor-modal-intro { color: var(--ink-2); font-size: var(--fs-15); line-height: var(--lh-long); }
.two-factor-qr-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: start; min-width: 0; }
.two-factor-qr-shell { display: grid; gap: var(--sp-2); justify-items: center; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.two-factor-qr-shell > canvas { border-radius: var(--r-md); }
.two-factor-setup-copy { display: grid; gap: var(--sp-3); min-width: 0; }
.two-factor-setup-copy h3 { color: var(--ink); font-size: var(--fs-16); }
.two-factor-howto { display: grid; gap: var(--sp-2); margin: 0; padding-left: 1.3em; color: var(--ink-2); font-size: var(--fs-14); line-height: 1.65; }
.two-factor-secret { display: grid; gap: 4px; min-width: 0; padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.two-factor-secret > span { color: var(--ink-3); font-size: var(--fs-13); font-weight: 600; }
.two-factor-secret > code { padding: 0; background: transparent; color: var(--ink); font-size: var(--fs-16); font-weight: 700; letter-spacing: .12em; overflow-wrap: anywhere; }
.two-factor-dialog input.ui-code { max-width: 260px; }
.two-factor-code-field { font-family: var(--font-mono); letter-spacing: .06em; }
.recovery-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; counter-reset: recovery; }
.recovery-code-list > li {
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: 10px 14px; counter-increment: recovery;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
  color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-16); font-weight: 700; letter-spacing: .08em; overflow-wrap: anywhere;
}
.recovery-code-list > li::before { content: counter(recovery, decimal-leading-zero); flex: none; color: var(--ink-3); font-family: var(--font-num); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0; }
.two-factor-codes-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.two-factor-codes-actions > button { flex: 1 1 200px; }
@media (max-width: 600px) {
  .two-factor-qr-layout { grid-template-columns: 1fr; justify-items: center; }
  .two-factor-setup-copy { width: 100%; }
  .recovery-code-list { grid-template-columns: 1fr; }
  .two-factor-dialog input.ui-code { max-width: none; }
}

/* -----------------------------------------------------------------------------
   11. 依頁面狀態前進的步驟條（純 CSS，不動 JS）
   - 匯入卡：檢查完成（匯入鈕出現）→ 前兩步完成、第三步進行中
   - 匯出卡：下載完成（狀態列 success）→ 兩步皆完成
   - 2FA 設定：驗證碼欄位已輸入內容（欄位會自動聚焦，所以不以聚焦判斷）→ 第二步完成、第三步進行中
   ----------------------------------------------------------------------------- */
.import-card:has(#account-backup-import:not(.hidden)) .account-backup-steps > li:nth-child(-n+2),
.export-card:has(.account-backup-status.success) .account-backup-steps > li,
.two-factor-dialog:has(#two-factor-confirm-code:not(:placeholder-shown)) > .ui-steps > li:nth-child(2) { color: var(--ink-2); }
.import-card:has(#account-backup-import:not(.hidden)) .account-backup-steps > li:nth-child(-n+2) > b,
.export-card:has(.account-backup-status.success) .account-backup-steps > li > b,
.two-factor-dialog:has(#two-factor-confirm-code:not(:placeholder-shown)) > .ui-steps > li:nth-child(2) > b {
  border-color: var(--ok-solid); color: transparent; background: var(--ok-solid) var(--check-glyph) center / 14px no-repeat; box-shadow: none;
}
.import-card:has(#account-backup-import:not(.hidden)) .account-backup-steps > li:nth-child(-n+2)::before,
.export-card:has(.account-backup-status.success) .account-backup-steps > li::before,
.two-factor-dialog:has(#two-factor-confirm-code:not(:placeholder-shown)) > .ui-steps > li:nth-child(-n+3)::before { background: var(--ok-solid); }
.import-card:has(#account-backup-import:not(.hidden)) .account-backup-steps > li:nth-child(3),
.two-factor-dialog:has(#two-factor-confirm-code:not(:placeholder-shown)) > .ui-steps > li:nth-child(3) { color: var(--ink); }
.import-card:has(#account-backup-import:not(.hidden)) .account-backup-steps > li:nth-child(3) > b,
.two-factor-dialog:has(#two-factor-confirm-code:not(:placeholder-shown)) > .ui-steps > li:nth-child(3) > b {
  border-color: var(--brand); color: var(--on-brand); background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}