/* ==========================================================================
 * assets/app.css — 全站視覺基礎
 * ==========================================================================
 * 設計取向（SPEC 已拍板）：極簡實用、高對比、大按鈕。
 *
 * 使用情境決定了每一個取捨：
 *   - 老師在教室拿手機點名，手上可能有顏料、光線不一定好
 *       → 觸控目標最小 48px（主要按鈕 56px）、內文 17px 起跳、
 *         文字與背景對比一律 ≥ 7:1（WCAG AAA），不用細字重、不用淺灰字。
 *   - 教室電腦跑行政後台
 *       → 同一套 CSS 手機優先，768px 以上放寬版面。
 *   - 不做深色模式：教室環境亮度不定，固定的高對比淺色底最可預期，
 *     也少一組要維護的色票。要加的話從下面的 :root 變數著手。
 *
 * 命名規約：BEM 的簡化版 —— .block、.block--modifier、.block__element，
 * 狀態類別一律 is- 開頭（.is-busy / .is-checking / .is-active）。
 * 新功能頁請先找這裡有沒有現成元件，不要每頁自己寫一套。
 * ========================================================================== */

/* ── 色票與尺寸 ─────────────────────────────────────────────────────── */
:root {
  --c-bg:          #f4f5f7;
  --c-surface:     #ffffff;
  --c-text:        #14171a;   /* 對白底 16.9:1 */
  --c-text-soft:   #4a5158;   /* 對白底 8.3:1，仍在 AAA 內文標準之上 */
  --c-border:      #c9cfd6;
  --c-border-dark: #8d959d;

  --c-primary:     #14487a;   /* 深藍：對白字 8.6:1 */
  --c-primary-dk:  #0d3358;
  --c-primary-lt:  #e7eff7;

  --c-danger:      #a3241c;   /* 深紅：對白字 7.1:1 */
  --c-danger-dk:   #7d1a14;
  --c-danger-lt:   #fbeae9;

  --c-success:     #1a6134;
  --c-success-lt:  #e6f3ea;
  --c-warn:        #7a4b00;
  --c-warn-lt:     #fdf1dc;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --tap: 48px;        /* 觸控目標下限 */
  --tap-lg: 56px;     /* 主要動作按鈕 */

  --shadow: 0 1px 2px rgba(20, 23, 26, .08), 0 4px 12px rgba(20, 23, 26, .06);
}

/* ── 重置 ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* 🔴 hidden 屬性必須贏過所有 display 規則。
   瀏覽器預設樣式表只給 [hidden] { display: none }，那是【UA 樣式】——任何我們
   自己寫的 display 都會蓋過它。於是 <div class="toolbar" hidden> 會照樣顯示
   （.toolbar 有 display: flex），JS 設 el.hidden = true 看起來完全沒作用。
   這種 bug 不會報錯，只會讓「應該藏起來的東西」出現在不該看到的人面前。 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.35; font-weight: 700; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

/* 權限守衛跑完前先把內容藏起來，避免「閃一下內頁再被踢走」 */
body.is-checking .page { visibility: hidden; }

/* ── 版面 ───────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}

.page { padding-bottom: 48px; }

/* ── 頂部列（內頁用）───────────────────────────────────────────────── */
.topbar {
  background: var(--c-primary);
  color: #fff;
  padding: 12px 0;
  box-shadow: var(--shadow);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar__who {
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.topbar__who .topbar__role {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: .82rem;
  font-weight: 600;
  vertical-align: 2px;
}

.topbar__title {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  opacity: .85;
  letter-spacing: .04em;
}

/* ── 卡片 ───────────────────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-top: 20px;
  box-shadow: var(--shadow);
}

.card__title {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.card__hint {
  margin: 0 0 16px;
  color: var(--c-text-soft);
  font-size: .92rem;
}

/* ── 表單 ───────────────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }

.label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: .95rem;
}

.input {
  display: block;
  width: 100%;
  min-height: var(--tap-lg);
  padding: 12px 14px;
  border: 2px solid var(--c-border-dark);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--c-text);
  /* 🔴 16px 以上：iOS Safari 在小於 16px 的輸入框上會自動放大整個頁面 */
  font-size: 17px;
  font-family: inherit;
  line-height: 1.4;
}

.input:focus {
  outline: 3px solid var(--c-primary);
  outline-offset: 1px;
  border-color: var(--c-primary);
}

.input:disabled { background: #eceef1; color: var(--c-text-soft); }

/* 密碼欄 + 顯示切換 */
.input-group { display: flex; gap: 8px; align-items: stretch; }
.input-group .input { flex: 1 1 auto; min-width: 0; }

/* 勾選框：整塊都可以點，手機上才好按 */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  background: #fbfcfd;
  cursor: pointer;
}

.checkbox-row:focus-within {
  border-color: var(--c-primary);
  outline: 3px solid var(--c-primary);
  outline-offset: 1px;
}

.checkbox-row input[type="checkbox"] {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 3px 0 0;
  accent-color: var(--c-primary);
  cursor: pointer;
}

.checkbox-row__text { font-weight: 700; }

.checkbox-row__hint {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: .88rem;
  color: var(--c-text-soft);
}

/* ── 按鈕 ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  background: #fff;
  color: var(--c-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}

.btn:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}

.btn:disabled, .btn.is-busy {
  opacity: .6;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.btn--primary:hover:not(:disabled) { background: var(--c-primary-dk); border-color: var(--c-primary-dk); }

.btn--ghost {
  background: #fff;
  border-color: var(--c-border-dark);
  color: var(--c-text);
}
.btn--ghost:hover:not(:disabled) { background: var(--c-primary-lt); border-color: var(--c-primary); }

.btn--danger {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}
.btn--danger:hover:not(:disabled) { background: var(--c-danger-dk); border-color: var(--c-danger-dk); }

/* 頂部列上的登出鈕：深藍底上要看得見 */
.btn--onbar {
  background: transparent;
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
}
.btn--onbar:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.btn--onbar:focus-visible { outline-color: #fff; }

.btn--lg { min-height: var(--tap-lg); font-size: 1.08rem; padding: 12px 24px; }
.btn--block { display: flex; width: 100%; }

/* ── 訊息橫幅 ───────────────────────────────────────────────────────── */
.alert {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 2px solid;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .97rem;
}

.alert--error   { background: var(--c-danger-lt);  border-color: var(--c-danger);  color: var(--c-danger-dk); }
.alert--success { background: var(--c-success-lt); border-color: var(--c-success); color: var(--c-success); }
.alert--info    { background: var(--c-primary-lt); border-color: var(--c-primary); color: var(--c-primary-dk); }
.alert--warn    { background: var(--c-warn-lt);    border-color: var(--c-warn);    color: var(--c-warn); }

/* ── 功能選單（內頁的入口清單）────────────────────────────────────── */
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap-lg);
  padding: 14px 16px;
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--c-text);
  font-weight: 700;
  text-decoration: none;
}

a.menu__item:hover { border-color: var(--c-primary); background: var(--c-primary-lt); }

.menu__item--disabled {
  background: #f0f2f4;
  color: var(--c-text-soft);
  border-style: dashed;
  cursor: default;
}

.menu__label { min-width: 0; }

/* menu__label 當連結用時：整塊 menu__item 都可點（stretched link），
   觸控目標最大化，右側的 badge 仍照常顯示在旁邊。 */
.menu__item { position: relative; }
a.menu__label { color: inherit; text-decoration: none; display: block; }
a.menu__label::after { content: ''; position: absolute; inset: 0; }
.menu__item:has(a.menu__label):hover {
  border-color: var(--c-primary);
  background: var(--c-primary-lt);
}
a.menu__label:focus-visible { outline: none; }
.menu__item:has(a.menu__label:focus-visible) {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}

.menu__desc {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: .87rem;
  color: var(--c-text-soft);
}

.badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dfe3e8;
  color: #40474e;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge--soon { background: #dfe3e8; color: #40474e; }
.badge--live { background: var(--c-success-lt); color: var(--c-success); }

/* ── 表格（F2 之後會用到）─────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.table th, .table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: middle;
}

.table th { background: #eef0f3; font-weight: 700; white-space: nowrap; }

/* ── 雜項 ───────────────────────────────────────────────────────────── */
.muted { color: var(--c-text-soft); }
.small { font-size: .88rem; }
.stack > * + * { margin-top: 12px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 載入中 */
.loading {
  padding: 32px 16px;
  text-align: center;
  color: var(--c-text-soft);
  font-weight: 600;
}

/* ── 登入頁 ─────────────────────────────────────────────────────────── */
.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.login__box {
  width: 100%;
  max-width: 420px;
}

.login__brand {
  text-align: center;
  margin-bottom: 20px;
}

.login__brand h1 { margin: 0; font-size: 1.45rem; }

.login__brand p {
  margin: 4px 0 0;
  color: var(--c-text-soft);
  font-size: .92rem;
}

.login__foot {
  margin-top: 18px;
  text-align: center;
  color: var(--c-text-soft);
  font-size: .85rem;
  line-height: 1.6;
}

/* ==========================================================================
 * 管理後台共用元件（F2/F3/F4 開工前先備好）
 * ==========================================================================
 * 這一段是【共用地基的一部分】，由主流程統一維護。
 * F2/F3/F4 三個功能頁平行開發時請【只使用、不修改】這裡的樣式——三個人同時
 * 改同一個檔案必然衝突。真的缺元件請回報，由主流程補進來。
 * ========================================================================== */

/* ── 頁首返回列 ─────────────────────────────────────────────────────── */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  color: var(--c-primary);
  text-decoration: none;
  font-weight: 600;
}
.backlink:hover { text-decoration: underline; }

/* ── 區塊標題列（標題 + 右側動作按鈕） ──────────────────────────────── */
.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-head .card__title { margin: 0; }

/* ── 工具列（搜尋、篩選） ───────────────────────────────────────────── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.toolbar .input { margin: 0; }
.toolbar__grow { flex: 1 1 220px; }

/* ── 表格增補（.table / .table-wrap 已在上面定義） ──────────────────── */
.table td.is-numeric, .table th.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.is-inactive td { color: var(--c-text-soft); background: #fafbfc; }

/* 手機上把表格改成卡片式：每一列自成一張卡，欄名用 data-label 顯示在左邊。
   用法：<td data-label="姓名">王小明</td> */
@media (max-width: 639px) {
  .table--cards, .table--cards thead, .table--cards tbody,
  .table--cards tr, .table--cards td { display: block; width: 100%; }
  .table--cards thead { display: none; }
  .table--cards tr {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    margin-bottom: 12px;
    padding: 6px 12px;
    background: var(--c-surface);
  }
  .table--cards td {
    border: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    text-align: right;
  }
  .table--cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--c-text-soft);
    text-align: left;
    flex: 0 0 auto;
  }
  .table--cards td:has(.row-actions) { justify-content: flex-end; }
  .table--cards td:has(.row-actions)::before { display: none; }
}

/* ── 表格的展開列（例如班級管理點開在籍名單）────────────────────────── */
.row-expand > td {
  background: var(--c-primary-lt);
  border-top: none;
}
.classroster { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.classroster li {
  /* flex-wrap 是必要的，不是保險：.classroster__meta 有 white-space: nowrap，
     窄螢幕上它會贏走所有空間，把左邊的名稱壓成兩三個字寬的細長條（320px 上
     實測班級名稱只剩 34px）。允許換行後，放不下的 meta 會掉到自己那一行，
     名稱維持完整寬度。 */
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}
/* flex-basis 8em 是這裡的關鍵：只加 flex-wrap 沒有用，因為中文的 min-content
   寬度是「一個字」，名稱會一路被壓到剩兩三個字寬也不觸發換行。給它一個換行前
   的基準寬度，放不下時才會把 meta 擠到下一行。 */
.classroster .classroster__name { font-weight: 700; flex: 1 1 8em; min-width: 0; }
.classroster .classroster__meta { margin-left: auto; font-size: .9rem; white-space: nowrap; }
.classroster li.is-owing { border-color: var(--c-danger); background: var(--c-danger-lt); }

@media (max-width: 639px) {
  /* 展開列不要套用卡片式的「欄名 / 值」左右對齊，它裝的是一整份名單 */
  .table--cards tr.row-expand { padding: 0; border: none; margin-bottom: 12px; }
  .table--cards tr.row-expand > td { display: block; text-align: left; padding: 12px; border-radius: var(--r-md); }
  .table--cards tr.row-expand > td::before { display: none; }
}

/* ── 行內強調（欠費金額、警示數字等） ───────────────────────────────── */
/* 用於句中或表格儲存格內需要跳出來的數值，語意上是「這個數字有問題」。
   不要拿 .field__error（那是表單欄位的錯誤訊息，字級小、語意不同）。 */
.is-danger  { color: var(--c-danger-dk);  font-weight: 700; }
.is-warn    { color: var(--c-warn);       font-weight: 700; }
.is-success { color: var(--c-success);    font-weight: 700; }

.badge--danger { background: var(--c-danger-lt); color: var(--c-danger-dk); }
.badge--warn   { background: var(--c-warn-lt);   color: var(--c-warn); }

/* ── 空狀態 ─────────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--c-text-soft);
}
.empty__title { font-weight: 700; color: var(--c-text); margin-bottom: 6px; }

/* ── 對話框（用原生 <dialog>，不要自己造 modal） ────────────────────────
   用法：
     <dialog class="dialog" id="edit-dlg">
       <form method="dialog" class="dialog__form"> … </form>
     </dialog>
   開啟 dlg.showModal()；關閉 dlg.close()。
   原生 <dialog> 自帶 ESC 關閉、焦點鎖定、backdrop，不需要 JS 套件。 */
.dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: none;
  border-radius: var(--r-lg);
  box-shadow: 0 10px 40px rgba(20, 23, 26, .25);
  color: var(--c-text);
  background: var(--c-surface);
}
.dialog::backdrop { background: rgba(20, 23, 26, .55); }
.dialog__form { padding: 22px 20px; margin: 0; }
.dialog__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.dialog__hint  { color: var(--c-text-soft); font-size: .9rem; margin: 0 0 18px; }
.dialog__foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}
.dialog__foot .btn { flex: 1 1 auto; }

/* ── 表單並排（窄螢幕自動變單欄） ───────────────────────────────────── */
.field-row { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 520px) {
  .field-row--2 { grid-template-columns: 1fr 1fr; }
  .field-row--3 { grid-template-columns: repeat(3, 1fr); }
}

/* 必填標記 */
.label .req { color: var(--c-danger); margin-left: 2px; }

/* 欄位層級的錯誤訊息 */
.field__error { color: var(--c-danger-dk); font-size: .88rem; margin-top: 5px; }
.input.is-invalid { border-color: var(--c-danger); }

/* ── 點名名單（F5）──────────────────────────────────────────────────────
   使用情境決定了每一個取捨：老師站在教室裡、單手拿手機、手上可能有顏料。
     - 不用 <select> 下拉選狀態：下拉要「點開 → 選 → 關閉」三個動作，而且展開時
       會蓋住旁邊的名字，容易點到隔壁學生。改成四顆並排的按鈕，一次點擊完成。
     - 未點／已點用左側色條區分，不只用文字：色條在餘光裡就看得到，掃一眼就知道
       還剩誰沒點。
     - 欠費整列換底色而不是只把數字標紅：老師的視線焦點在名字上，不在數字上。 */
.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.roster__item {
  border: 1px solid var(--c-border);
  border-left: 5px solid var(--c-border-dark);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: 12px 14px;
}
.roster__item.is-marked { border-left-color: var(--c-success); }
.roster__item.is-owing {
  background: var(--c-danger-lt);
  border-color: var(--c-danger);
  border-left-color: var(--c-danger);
}

.roster__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.roster__name { font-weight: 700; font-size: 1.08rem; }
.roster__meta { font-size: .88rem; color: var(--c-text-soft); margin-left: auto; }

.statusbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.statusbtn {
  min-height: var(--tap);
  padding: 6px 4px;
  border: 1px solid var(--c-border-dark);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.statusbtn:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.statusbtn[aria-pressed="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.statusbtn:disabled { opacity: .55; cursor: progress; }

/* 每一列自己的儲存狀態。失敗的訊息【不自動消失】——老師必須看得到哪一筆沒存進去。 */
.savechip { font-size: .82rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.savechip--saving { background: #e4e7ea; color: var(--c-text-soft); }
.savechip--ok     { background: var(--c-success-lt); color: var(--c-success); }
.savechip--fail   { background: var(--c-danger-lt);  color: var(--c-danger-dk); }

/* 作品進度：點名之後才展開（多數學生不會每堂都寫，預設展開只會讓名單變長） */
.progress { margin-top: 10px; }
.progress__toggle {
  background: none; border: none; padding: 6px 0; font: inherit;
  color: var(--c-primary); text-decoration: underline;
  cursor: pointer; min-height: 36px;
}
.progress__body { margin-top: 8px; }
.progress__body textarea.input { min-height: 76px; resize: vertical; }

/* 「還有幾人未點」黏在畫面頂端：名單滾到一半時仍看得到，避免以為點完了就離開 */
.marksum {
  position: sticky; top: 0; z-index: 5;
  padding: 10px 14px; margin-bottom: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow);
  font-weight: 700;
}
.marksum.is-done { background: var(--c-success-lt); border-color: var(--c-success); color: var(--c-success); }

/* ── 家長端（F6）──────────────────────────────────────────────────────
   大部分版面借用既有元件（.card / .stack / .table--cards / .classroster /
   .empty / .badge / .is-danger），這裡只補「剩餘堂數」那個大字數字沒有
   現成樣式可用。 */
.balance-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 0;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}

/* ── 桌機 ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: 1.7rem; }
  .container { padding: 0 24px; }
  .card { padding: 26px 28px; }
  .menu { grid-template-columns: repeat(2, 1fr); }
  .dialog__foot .btn { flex: 0 0 auto; }
}

/* ── 尊重使用者的減少動態設定 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}