/* 全站共用的設計 token 與元件。
 *
 * 這一檔是**唯一的設計來源**:顏色、字級、間距、圓角、陰影與所有跨頁元件。
 * 頁面自己的 <style> 只剩一種正當理由 —— 那個東西真的只有那一頁有,而且
 * 與該頁的領域模型綁在一起(目前只有 doc.html 的「公文紙張與畫布」那一層,
 * 它的對應物是 doc/layout.py 與 doc/render.py)。其餘一律收在這裡。
 *
 * 分區:
 *   §0 token   §1 基礎與表單   §2 按鈕與卡片   §3 訊息塊   §4 資料表
 *   §5 頁殼(置中頁 / 應用頁 / 帳號頁)          §6 導覽(步驟條 / 側邊選單)
 *   §7 浮層(彈窗 / 對話框 / 溢出選單 / toast)  §8 清單與晶片
 *   §9 模板與個人資料   §10 額度   §11 入口頁   §12 Email 頁   §13 公文頁
 */

/* ═══════════════════════ §0 token ═══════════════════════
 * 顏色體系不動:綠 = 主要、紅 = 破壞性、琥珀 = 警示。這一輪補的是
 * 「同一個角色以前被硬編碼成好幾個近似值」的那些 —— 灰階九個、琥珀九個、
 * 紅四個、紫兩處各寫一次;以及本來就缺的字族、字級、間距、圓角、陰影與
 * 焦點環。新增的 token 一律只是把既有的值收成一份,沒有引入新顏色。 */
:root{
  /* 底色與文字 */
  --paper:#F5F6F3; --card:#FFFFFF; --ink:#1C2321; --ink-2:#5C6660;
  --line:#D8DDD6;
  /* surface-2 = 卡片內的次級底(工具列、附件列、紀錄列、停用列);
     以前是 #FBFCFA 與 #FAFBF9 兩個差一階的值各寫了五次。 */
  --surface-2:#FBFCFA;
  --neutral-soft:#EEF0ED; --neutral-line:#C9CEC9; --neutral-ink:#6B736C;
  /* 主色:綠 */
  --green:#0B5D3B; --green-soft:#E4EFE8; --green-line:#C7DDD1;
  --green-tint:#F4F9F6;
  /* 破壞性:紅 */
  --red:#B33A3A; --red-soft:#FBE4E4; --red-line:#E8A79E;
  /* 警示:琥珀。amber-strong / amber-ink 是「線」與「深字」,
     以前寫成 #B07C00 / #7A5600 / #C79A1E / #8A5A00 四個值。 */
  --amber:#8A6100; --amber-soft:#FFF1D6; --amber-line:#E4CE8A;
  --amber-strong:#B07C00; --amber-ink:#7A5600; --amber-tint:#FFF3D6;
  /* SMTP 的第四個狀態(無法確認)。以前這一對紫色在 mm.css 與 index.html
     各硬寫一次 —— 四個狀態的顏色必須只有一份。 */
  --violet-soft:#F5E8FF; --violet:#6A3A8A;
  /* Email 欄的標示底(名單表格) */
  --mail-soft:#FFF6E8;
  /* 佔位文字:以前 doc 是 #9AA49E、index 是 #AAB2AC,而且對比不足 */
  --ph:#8A938C;
  --chip-bg:#FFFDF4;

  /* 字族。--sans 以前**從未定義**,doc.html 卻用了兩處 —— 於是層級徽章
     與畫布說明實際繼承了 .sheet 的標楷體。補上這一個 token 就修掉了。 */
  --sans:"Noto Sans TC",system-ui,sans-serif;
  --serif:"Noto Serif TC",serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;

  /* 字級尺度:以前是 25 個各自為政的值(.68 → 1.8rem)。
     body 那一階刻意獨立 —— 它是**內容**(信件內文、預覽正文),
     與介面文字的可讀性需求不同,不該跟著介面一起縮。 */
  --fs-xs:.72rem;    /* 徽章、識別字、頁碼 */
  --fs-sm:.78rem;    /* 小按鈕、表頭、次級說明 */
  --fs-base:.84rem;  /* hint、表格、清單 */
  --fs-md:.9rem;     /* 按鈕、輸入框、清單標題 */
  --fs-body:.95rem;  /* 長文內容:編輯器與預覽正文 */
  --fs-lg:1.02rem;   /* 區塊標題 h2 / 彈窗標題 */
  --fs-xl:1.3rem;    /* 應用頁頁首品牌 */
  --fs-2xl:1.7rem;   /* 置中頁品牌 */

  /* 間距尺度 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:22px; --s-6:32px;

  /* 圓角:--radius 保留為 --r-lg 的別名(既有呼叫點很多,不為了改名而改) */
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-pill:99px;
  --radius:var(--r-lg);

  /* 陰影三階:卡片(貼著紙面)/ 浮層(選單、抽屜)/ 覆蓋層(彈窗、對話框)。
     以前是五種各自為政的配方,所以彈窗浮不起來、抽屜卻比對話框還重。 */
  --sh-1:0 1px 2px rgba(28,35,33,.05);
  --sh-2:0 10px 28px rgba(28,35,33,.16);
  --sh-3:0 16px 40px rgba(28,35,33,.22);

  /* 焦點環:以前 .btn 完全沒有焦點樣式,輸入框則是白底上看不見的淺綠 */
  --focus-ring:0 0 0 3px rgba(11,93,59,.20);
}

/* ═══════════════════════ §1 基礎與表單 ═══════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:var(--fs-md);color:var(--ink)}

/* 連結:以前沒有任何全域規則,所以訊息塊裡的連結是瀏覽器預設藍,
   而 <a class="btn"> 會帶底線、和同一列的 <button class="btn"> 不一樣。 */
a{color:var(--green)}
a.btn,a.mi,a.ovfitem{text-decoration:none}

/* 焦點一律看得見(鍵盤操作的唯一線索)。滑鼠點擊不會觸發 :focus-visible,
   所以這不會讓按過的按鈕留著一圈外框。 */
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.btn:focus-visible,.mi:focus-visible,.ovfitem:focus-visible,
.mmsteps .sp:focus-visible,.chip:focus-visible{
  outline:2px solid var(--green);outline-offset:2px}

.hint{font-size:var(--fs-base);color:var(--ink-2);line-height:1.6}
.row{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
label.f{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:var(--s-1)}
.field{margin-bottom:var(--s-3)}
input[type=text],input[type=email],input[type=password],
input[type=number],input[type=date],select{
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-2) 10px;
  background:#fff;width:100%}
/* 焦點:綠框 + 柔環。舊的 outline 用 --green-soft(#E4EFE8),白底上等於沒有。 */
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--green);box-shadow:var(--focus-ring)}
::placeholder{color:var(--ph)}

/* ═══════════════════════ §2 按鈕與卡片 ═══════════════════════
   層級語意(已裁決,不推翻):主要 = 綠底、破壞性 = 紅底、次要 = 白底描邊。 */
.btn{border:1px solid var(--line);background:var(--card);border-radius:var(--r-md);
  padding:var(--s-2) var(--s-4);font-size:var(--fs-md);line-height:1.35;
  color:var(--ink);transition:.15s}
.btn:hover{border-color:var(--green);color:var(--green)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{filter:brightness(1.12);color:#fff}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{filter:brightness(1.08);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line);color:var(--ink)}
.btn.primary:disabled:hover{border-color:var(--green);color:#fff}
.btn.sm{padding:var(--s-1) 10px;font-size:var(--fs-sm)}

.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--sh-1)}

/* ═══════════════════════ §3 訊息塊(唯一一組配方) ═══════════════════════
 * 以前同一件事有六套:.notice(入口)/.authmsg(帳號頁)/.note(後台)/
 * .warnnote 與 .errnote(公文)/.skipbox 與 .retrybar(Email)—— 六種
 * padding、兩種圓角、四組自訂顏色。現在共用同一份底,差別只剩語意變體。 */
.msg,.notice,.authmsg,.conpage .note,.warnnote,.errnote,.skipbox,.retrybar{
  border:1px solid transparent;border-radius:var(--r-md);
  padding:10px 13px;font-size:var(--fs-base);line-height:1.7}
.msg.info,.notice.info,.authmsg.info{
  background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.msg.warn,.notice.warn,.authmsg.warn,.conpage .note,.warnnote,.skipbox,.retrybar{
  background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.msg.err,.authmsg.err,.errnote{
  background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
/* 訊息塊裡的連結要跟著文字的語意色,不能是瀏覽器預設藍 */
.msg a,.notice a,.authmsg a,.conpage .note a{color:inherit;font-weight:600}
/* 就地可改的下拉(Email 第 1 步的收件欄位):說明與選擇在同一個框裡,
   使用者不必在「哪一欄」與「去哪改」之間找對應 */
.msg .mailpick{display:inline-flex;align-items:center;gap:var(--s-2);
  margin-left:var(--s-3);font-weight:600;white-space:nowrap}
.msg .mailpick select{width:auto;min-width:160px;font-weight:400;
  padding:var(--s-1) var(--s-2)}
/* 顯示切換(呼叫端沿用既有的 .on) */
.notice,.authmsg{display:none}
.notice.on,.authmsg.on{display:block}

/* ═══════════════════════ §4 資料表 ═══════════════════════ */
table.tb{border-collapse:collapse;width:100%;font-size:var(--fs-base)}
table.tb th,table.tb td{border:1px solid var(--line);padding:5px 9px;
  text-align:left;max-width:240px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
table.tb th{background:var(--green-soft);color:var(--green);font-weight:600}
table.tb th.mailcol,table.tb td.mailcol{background:var(--mail-soft)}
.tblwrap{overflow:auto;max-height:300px;border-radius:var(--r-md);margin-top:10px}

/* 數字欄:右對齊 + **等寬數字**。以前是整段套 --mono,而 mono stack 沒有
   中日韓字,「不限(已用 0 點)」這種句子的中文會掉到另一套系統字 ——
   同一句話兩種字面。真正要的只是數字對齊,tabular-nums 就夠。 */
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.contb th.num,.contb td.num,.usagetb th.num,.usagetb td.num{text-align:right}
/* 額度用完(剩餘 0,或額度被改到低於已用):顯著標示,顏色沿用 --red */
.qzero{color:var(--red);font-weight:600}

/* ═══════════════════════ §5 頁殼 ═══════════════════════ */

/* ── 5a 置中頁殼:入口頁 / 管理後台 / 成員一覽共用 ──
   以前 admin 與 members 各自 <style> 了一份 wrap / topbar / brand / note,
   入口頁又另外寫了第三份。收成一份之後,「這幾頁長得一樣」是結構保證。 */
body.conpage{display:flex;align-items:flex-start;justify-content:center;
  padding:20px var(--s-5) 70px}
.conpage .wrap{max-width:1080px;width:100%}
.conpage .wrap.narrow{max-width:880px}      /* 欄位少的頁不要拉得太寬 */
.conpage .topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.conpage .brand{text-align:center;margin-bottom:18px}
.conpage .brand h1{font-family:var(--serif);font-size:var(--fs-2xl);
  color:var(--green);letter-spacing:.1em}
.conpage .brand p{color:var(--ink-2);font-size:var(--fs-base);margin-top:6px}
.conpage h2{font-size:var(--fs-lg);margin-bottom:var(--s-3);color:var(--green)}
.conpage .note{margin-bottom:14px}
/* 說明文字要有可讀行寬:後台那段 700 字的額度說明以前是整排 1080px 拉滿 */
.conpage .note{max-width:88ch}
.conpage .tbwrap+.hint{margin-top:10px}
.tbwrap{overflow-x:auto}

/* ── 5b 應用頁殼:Email 與公文兩個流程頁共用 ──
   兩頁以前各寫一份 header / .back / .sub / .spacer / main / .panel / .footbar,
   連品牌字級都不一樣(1.3 vs 1.2rem)。 */
header{background:var(--card);border-bottom:1px solid var(--line);
  padding:14px var(--s-6) 0}
header .hrow{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
header .brand{font-family:var(--serif);font-size:var(--fs-xl);color:var(--green);
  letter-spacing:.08em;font-weight:700}
header .sub{font-size:var(--fs-sm);color:var(--ink-2);font-family:var(--mono)}
/* 公文頁頁首的字型狀態(偵測不到標楷體就不能產出,所以它是紅字警告) */
.fontnote{font-size:var(--fs-sm);color:var(--ink-2);font-family:var(--mono)}
.fontnote.warn{color:var(--red);font-weight:700}
header .spacer,.spacer{flex:1}
.back{font-size:var(--fs-base);color:var(--ink-2);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-1) 11px}
.back:hover{border-color:var(--green);color:var(--green)}
main{max-width:1320px;margin:0 auto;padding:var(--s-5) var(--s-6) 60px}
.panel{display:none}
.panel.show{display:block}
h2{font-size:var(--fs-lg);margin-bottom:var(--s-3);color:var(--green)}
/* 主欄底部的前進 / 後退列(兩頁同款) */
.footbar{display:flex;justify-content:space-between;
  gap:var(--s-2);margin-top:var(--s-4)}

/* ── 5c 側欄面板:Email 的 .sidebox 與公文的 .side 是同一個元件 ──
   以前 padding 16 / 14、h3 .88 / .85rem、hr 15 / 13px 各寫一份。 */
.sidebox,.side{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--sh-1);
  position:sticky;top:14px;max-height:calc(100vh - 30px);overflow-y:auto}
.sidebox h3,.side h3{font-size:var(--fs-md);margin:0 0 var(--s-2);color:var(--green)}
.sidebox hr,.side hr{border:none;border-top:1px solid var(--line);margin:14px 0}
.sidebox .hint,.side .hint{font-size:var(--fs-base)}
#chipBox{display:flex;flex-wrap:wrap;align-content:flex-start}
.sidetoggle{display:none;width:100%;margin-bottom:10px}

/* ── 5d 帳號頁殼:登入 / 註冊 / 待啟用 / 無權限 / 忘記密碼五頁共用 ── */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--s-6) 20px}
.authbox{width:100%;max-width:390px}
.authbox .brand{text-align:center;margin-bottom:20px}
.authbox .brand h1{font-family:var(--serif);font-size:var(--fs-2xl);
  color:var(--green);letter-spacing:.1em}
.authbox .brand p{color:var(--ink-2);font-size:var(--fs-base);margin-top:6px}
.authbox .card{padding:24px var(--s-5)}
.authbox h2{font-size:var(--fs-lg);color:var(--green);margin-bottom:14px}
/* 表單送出鈕佔滿一行;**但 .row 裡的並排按鈕不算**(待啟用頁的
   「重新檢查 / 登出」、無權限頁的「回到入口 / 換一個帳號登入」以前
   會各自撐滿一整行,和全站其他並排按鈕列長得不一樣)。 */
.authbox form>.btn{width:100%;margin-top:var(--s-2)}
.authbox .row{gap:var(--s-2);margin-top:var(--s-4)}
.authbox .row .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
.authbox .alt{text-align:center;font-size:var(--fs-base);color:var(--ink-2);
  margin-top:14px}
/* :not(.btn) 是必要的 —— 重設成功後的「前往登入」是 <a class="btn primary">,
   吃到這條就會變成綠底綠字(這個對比 bug 在改版前就在)。 */
.authbox .alt a:not(.btn){color:var(--green);font-weight:600}
.authmsg{margin-bottom:var(--s-3)}

/* ═══════════════════════ §6 導覽 ═══════════════════════ */

/* ── 6a 步驟進度條(三頁共用,§1) ──
   遮擋成因是舊版把連接線鋪在整個步驟欄(left:0;right:0)、標籤文字又與
   圓點同一行,線必然橫穿文字。這裡改成兩層結構:連接線只存在於 .rail
   這一列(裡面只有圓點),標籤是它下方的獨立區塊 —— 版面上不可能相交。
   線段分左右兩半,首尾各藏一半,轉角處自然斷開。 */
.mmsteps{display:flex;width:100%;max-width:900px;margin-top:var(--s-3)}
/* 置中頁(入口)的步驟條要跟著頁面置中並窄一些。mountSteps 會覆寫掛載點的
   className,所以這件事只能由頁殼決定,不能在 markup 上多掛一個 class。 */
.conpage .mmsteps{margin:0 auto 20px;max-width:520px}
.mmsteps .sp{flex:1 1 0;min-width:0;padding:0 2px 10px;border:none;background:none;
  font:inherit;color:var(--ink-2);text-align:center;cursor:pointer}
.mmsteps .sp .rail{position:relative;display:block;height:22px}
.mmsteps .sp .rail::before,.mmsteps .sp .rail::after{
  content:"";position:absolute;top:10px;height:2px;background:var(--line)}
.mmsteps .sp .rail::before{left:0;right:calc(50% + 13px)}
.mmsteps .sp .rail::after{left:calc(50% + 13px);right:0}
.mmsteps .sp:first-child .rail::before,
.mmsteps .sp:last-child .rail::after{display:none}
.mmsteps .sp .dot{position:absolute;left:50%;top:1px;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;background:var(--card);
  border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-family:var(--mono);line-height:1}
.mmsteps .sp .lbl{display:block;margin-top:5px;font-size:var(--fs-base);
  line-height:1.35;overflow-wrap:anywhere}
.mmsteps .sp.done .dot{background:var(--green);border-color:var(--green);color:#fff}
.mmsteps .sp.done .rail::before,.mmsteps .sp.done .rail::after,
.mmsteps .sp.active .rail::before{background:var(--green)}
.mmsteps .sp.active .dot{border-color:var(--green);color:var(--green)}
.mmsteps .sp.active .lbl{color:var(--green);font-weight:700}
.mmsteps .sp:disabled{cursor:not-allowed;opacity:.5}
.mmsteps .sp:not(:disabled):hover .lbl{color:var(--green)}
@media(max-width:640px){
  .mmsteps .sp .lbl{font-size:var(--fs-xs)}
  .mmsteps .sp .dot{width:18px;height:18px;top:2px;font-size:.64rem}
  .mmsteps .sp .rail::before{right:calc(50% + 12px)}
  .mmsteps .sp .rail::after{left:calc(50% + 12px)}
}

/* ── 6b 側邊選單(五頁共用,§2) ── */
.mm-burger{border:1px solid var(--line);background:var(--card);border-radius:var(--r-md);
  width:36px;height:32px;display:inline-flex;flex-direction:column;gap:3px;
  align-items:center;justify-content:center;padding:0;flex:0 0 auto}
.mm-burger:hover{border-color:var(--green)}
.mm-burger i{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px}
.mm-burger:hover i{background:var(--green)}
.mm-drawer{position:fixed;inset:0;z-index:97;display:none}
.mm-drawer.on{display:block}
.mm-drawer .mask{position:absolute;inset:0;background:rgba(28,35,33,.38)}
.mm-drawer .dpanel{position:absolute;left:0;top:0;bottom:0;width:min(288px,86vw);
  background:var(--card);border-right:1px solid var(--line);overflow-y:auto;
  box-shadow:var(--sh-2);padding:14px 13px var(--s-5)}
.mm-drawer .dhead{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s-3)}
.mm-drawer .dhead b{font-family:var(--serif);color:var(--green);
  font-size:var(--fs-lg);letter-spacing:.06em}
.mm-drawer h4{font-size:var(--fs-sm);color:var(--ink-2);font-weight:600;
  letter-spacing:.05em;border-top:1px dashed var(--line);padding-top:10px;
  margin:var(--s-3) 0 6px}
.mm-drawer h4:first-of-type{border-top:none;padding-top:0}
.mm-drawer .mi{display:block;width:100%;text-align:left;border:1px solid transparent;
  background:none;border-radius:var(--r-md);padding:var(--s-2) 10px;
  font-size:var(--fs-md);color:var(--ink);text-decoration:none;margin-bottom:2px}
.mm-drawer .mi:hover{background:var(--green-soft);color:var(--green);
  border-color:var(--green)}
.mm-drawer .mi.cur{background:var(--green-soft);color:var(--green);font-weight:700}
.mm-drawer .mi small{display:block;font-size:var(--fs-xs);color:var(--ink-2);
  margin-top:1px}
.mm-drawer .mi:hover small{color:var(--green)}
/* 選單的帳號區塊 */
.mm-drawer .acct{border-bottom:1px solid var(--line);padding-bottom:11px;
  margin-bottom:var(--s-1)}
.mm-drawer .acct .who{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-2);margin-bottom:var(--s-2)}
.mm-drawer .acct .who b{font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.mm-drawer .acct .who small{display:block;font-size:var(--fs-xs);color:var(--ink-2);
  font-family:var(--mono);overflow:hidden;text-overflow:ellipsis}
.mm-drawer .acct .arow{display:flex;gap:6px}
.mm-drawer .acct .arow .btn{flex:1;text-align:center}

/* ═══════════════════════ §7 浮層 ═══════════════════════ */

/* ── 7a 共用彈窗(模板管理 / 紀錄查詢 / 個人資料 / 用量)──
   Email 頁的「寄出預覽」(.modal)以前是第二套殼,padding 與這裡差 1~2px、
   而且沒有陰影。兩者現在讀同一份宣告,只有 id 與內容不同。 */
.mmmodal,.modal{position:fixed;inset:0;background:rgba(28,35,33,.45);
  display:none;align-items:center;justify-content:center;padding:20px}
/* 外觀共用,**堆疊層級各自宣告** —— 它們本來就不同層:共用彈窗要疊在側邊
   選單(97)之上,寄出預覽是頁內的東西(90),而對話框(100)要疊在兩者
   之上(見 §7b 與 test_dialog_contract)。 */
.mmmodal{z-index:98}
.modal{z-index:90}
.mmmodal.on{display:flex}
.mmmodal .mbox,.modal .modal-box{background:var(--card);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);
  width:min(940px,100%);max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;overflow:hidden}
.modal .modal-box{width:min(760px,100%)}
.mmmodal .mhead,.modal .modal-head{display:flex;align-items:center;gap:10px;
  padding:13px var(--s-4);border-bottom:1px solid var(--line)}
.modal .modal-head{justify-content:space-between}
.mmmodal .mhead h2,.modal .modal-head h2{font-size:var(--fs-lg);color:var(--green);
  margin:0}
.mmmodal .mhead .sp8{flex:1}
.mmmodal .mtabs{display:flex;gap:6px;padding:10px var(--s-4) 0;flex-wrap:wrap}
.mmmodal .mtabs button{border:1px solid var(--line);background:var(--card);
  border-radius:var(--r-md) var(--r-md) 0 0;padding:6px 13px;
  font-size:var(--fs-base);color:var(--ink-2)}
.mmmodal .mtabs button.on{border-color:var(--green);border-bottom-color:var(--card);
  color:var(--green);font-weight:700;background:var(--green-soft)}
.mmmodal .mbody,.modal .modal-body{padding:14px var(--s-4) 18px;overflow-y:auto}

/* ── 7b 共用對話框(取代 window.prompt / confirm)──
   疊在共用彈窗(98)與側邊選單(97)之上:模板管理開著時仍要能在它上面
   問「確定刪除?」。輸入框與按鈕沿用本檔既有的 input / .btn 樣式,
   不另立一套設計語彙。 */
.mmdlg{position:fixed;inset:0;background:rgba(28,35,33,.45);z-index:100;
  display:none;align-items:center;justify-content:center;padding:20px}
.mmdlg.on{display:flex}
.mmdlg .dbox{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);width:min(430px,100%);padding:20px var(--s-5) 18px;
  box-shadow:var(--sh-3)}
.mmdlg .dttl{font-size:var(--fs-lg);color:var(--green);font-weight:700;
  margin-bottom:var(--s-2)}
/* 訊息保留呼叫端的換行(原生 confirm 的 \n 就是這樣排的) */
.mmdlg .dmsg{font-size:var(--fs-md);line-height:1.7;white-space:pre-line;
  margin-bottom:var(--s-3);overflow-wrap:anywhere}
.mmdlg .din{margin-bottom:14px}
.mmdlg .dact{display:flex;gap:var(--s-2);justify-content:flex-end}
/* 選項(目前只有額度模式在用):一列一個,整塊可點 —— 只點得到那顆小圓鈕
   的話,在觸控裝置上等於沒有。說明句用 .hint 的灰,不另立一種次要色。 */
.mmdlg .dchoice{display:flex;flex-direction:column;gap:6px;
  margin-bottom:var(--s-3)}
.mmdlg .dchoice label{display:flex;gap:var(--s-2);align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--r-md);padding:9px 11px;
  cursor:pointer;font-size:var(--fs-md)}
.mmdlg .dchoice label:hover{border-color:var(--green)}
.mmdlg .dchoice label:has(input:checked){border-color:var(--green);
  background:var(--green-soft)}
.mmdlg .dchoice input{width:auto;margin:3px 0 0;flex:none}
.mmdlg .dchoice small{display:block;color:var(--ink-2);font-size:var(--fs-xs);
  margin-top:2px}

/* ── 7c 列尾的「⋯」溢出選單(兩個後台共用;行為實作在 mm.js 一份)── */
.ovfbtn{font-size:var(--fs-lg);line-height:1;padding:5px 10px;letter-spacing:.05em}
.ovfmenu{position:absolute;z-index:97;min-width:200px;max-width:290px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:5px;
  display:flex;flex-direction:column;gap:2px}
.ovfitem{display:block;width:100%;text-align:left;background:none;border:none;
  border-radius:var(--r-sm);padding:7px 10px;font:inherit;font-size:var(--fs-base);
  color:var(--ink);white-space:normal}
.ovfitem:hover,.ovfitem:focus{background:var(--green-soft);outline:none}
.ovfitem.danger{color:var(--red)}
.ovfitem.danger:hover,.ovfitem.danger:focus{background:var(--red-soft)}
.ovfhint{display:block;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.5;
  margin-top:2px}

/* ── 7d 短暫提示與忙碌遮罩 ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:10px 20px;border-radius:var(--r-md);
  font-size:var(--fs-md);opacity:0;transition:.3s;pointer-events:none;z-index:99;
  max-width:80vw;text-align:center;box-shadow:var(--sh-2)}
.toast.on{opacity:.95}
.busy{position:fixed;inset:0;background:rgba(245,246,243,.72);display:none;
  align-items:center;justify-content:center;z-index:80;font-size:var(--fs-md);
  color:var(--green)}
.busy.on{display:flex}

/* ═══════════════════════ §8 清單與晶片 ═══════════════════════ */

/* ── 8a 狀態晶片:四個 SMTP 狀態的顏色只有這一份 ──
   以前 .mm-rs(紀錄)、.st(寄送清單)、.badge.bad 各寫一次同樣的四組色。 */
.mm-rs,.slog .st{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);
  border-radius:var(--r-sm);padding:1px 7px}
.mm-rs.accepted,.st.accepted{background:var(--green-soft);color:var(--green)}
.mm-rs.fail,.st.fail{background:var(--red-soft);color:var(--red)}
.mm-rs.skip,.st.skip{background:var(--amber-soft);color:var(--amber)}
.mm-rs.unknown,.st.unknown{background:var(--violet-soft);color:var(--violet)}
.st.wait{background:var(--neutral-soft);color:var(--ink-2)}
.st.doing{background:var(--amber-soft);color:var(--amber)}

/* ── 8b 徽章(Email 與公文共用一份底) ── */
.badge{display:inline-block;font-size:var(--fs-xs);border-radius:var(--r-sm);
  padding:1px 6px;margin-left:5px;vertical-align:1px}
.badge.custom,.badge.att,.badge.man{background:var(--amber-soft);color:var(--amber)}
.badge.bad{background:var(--red-soft);color:var(--red)}
.badge.grp{background:var(--green-soft);color:var(--green)}
.badge.warn{background:var(--amber-tint);color:var(--amber-ink)}
.badge.unv{background:var(--neutral-soft);color:var(--ink-2)}   /* 網域未驗證:低調 */
/* 角色徽章:清單、選單、待啟用頁共用 */
.rolebadge{display:inline-block;font-size:var(--fs-xs);padding:2px var(--s-2);
  border-radius:var(--r-pill);background:var(--green-soft);color:var(--green);
  font-weight:600;white-space:nowrap}
.rolebadge.off{background:var(--neutral-soft);color:var(--ink-2)}
.rolebadge.admin{background:var(--amber-soft);color:var(--amber)}
/* 能力不足時的就地說明(「沒作用時直接說明」——不是只有 title) */
.capnote{display:inline-block;font-size:var(--fs-sm);color:var(--amber);
  background:var(--amber-soft);border-radius:var(--r-sm);padding:3px 9px;
  margin-left:var(--s-2);vertical-align:middle}

/* ── 8c 可挑選的逐項清單:Email 的 .rcpt 與公文的 .ritem 是同一個元件 ── */
.rcpt-list,.rlist{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow-y:auto}
.rcpt-list{max-height:640px}
.rlist{max-height:78vh}
.rcpt,.ritem{padding:9px var(--s-3);border-bottom:1px solid var(--line);
  cursor:pointer;font-size:var(--fs-base);overflow-wrap:anywhere}
.rcpt:last-child,.ritem:last-child{border-bottom:none}
.rcpt:hover,.ritem:hover{background:var(--green-tint)}
.rcpt.sel,.ritem.sel{background:var(--green-soft);
  box-shadow:inset 3px 0 0 var(--green)}
.rcpt .em,.ritem .no{font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--ink-2);display:block}
.rcpt .em{overflow:hidden;text-overflow:ellipsis}
.ritem .blank{color:var(--red);font-size:var(--fs-xs)}
/* 狀態列(驗證狀態 / 附件 / 已修改):標示多時自動換行,不撐破側欄 */
.rcpt .tags{display:block;margin-top:3px}
.rcpt .tags .badge{margin:0 5px 3px 0}
/* 逐份清單的組標示:組內各列左緣一條淡綠帶(與 .sel 的選取線並存) */
.ritem.grp{position:relative;padding-left:18px}
.ritem.grp::before{content:"";position:absolute;left:var(--s-2);top:0;bottom:0;
  width:3px;background:var(--green-soft)}

/* ── 8d 附件清單:Email 的 .attach-list 與公文的 .alist 是同一個元件 ── */
.attach-list,.alist{list-style:none;font-size:var(--fs-base);margin-top:var(--s-2)}
.attach-list li,.alist li{display:flex;justify-content:space-between;
  align-items:center;gap:6px;padding:5px var(--s-2);border:1px solid var(--line);
  border-radius:var(--r-sm);margin-bottom:5px;background:var(--surface-2)}
.attach-list li span,.alist li span{min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.attach-list .x,.alist .x{color:var(--red);background:none;border:none;
  font-size:var(--fs-md);flex:0 0 auto}
.alist .pg{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-2);
  flex:0 0 auto}
.alist .empty{justify-content:flex-start;color:var(--ink-2);background:none;
  border-style:dashed}
/* 附件來源標示:「共同 / 此份(此封)」。修飾詞一律是 .own —— 刻意**不叫
   .x**,因為同一個 li 裡的 ✕ 移除鈕就是 .x,撞在一起時
   querySelector(".x") 會先抓到標籤,✕ 等於按不動(實際踩過)。 */
.src{display:inline-block;font-size:var(--fs-xs);border-radius:var(--r-sm);
  padding:1px 6px;margin-right:6px;background:var(--green-soft);color:var(--green)}
.src.own{background:var(--amber-soft);color:var(--amber)}
.alist li .src{flex:0 0 auto;margin-right:0}

/* ── 8e 欄位籤:長欄名不得溢出容器(§2) ── */
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--chip-bg);
  border:1.5px dashed var(--green);color:var(--green);border-radius:var(--r-sm);
  padding:var(--s-1) 10px;font-size:var(--fs-base);font-weight:600;cursor:grab;
  user-select:none;margin:0 6px var(--s-2) 0;
  max-width:100%;overflow-wrap:anywhere;word-break:break-word;
  text-align:left;line-height:1.35}
.chip:active{cursor:grabbing}
.chip::before{content:"⌗";font-family:var(--mono);opacity:.7;flex:0 0 auto}
.chip .chip-t{min-width:0;overflow-wrap:anywhere}
/* 內文裡的欄位籤。**刻意不設 font-weight / color / font-size** ——
   使用者可以把籤選起來設粗體、換顏色、改字級,而籤自帶的那三個屬性會與他
   要套的格式正面相撞:實測過,對一個已經是 font-weight:600 的東西按粗體,
   Chrome 判定成「取消粗體」並寫出 font-weight:normal,畫面上什麼都沒發生。
   所以辨識度一律靠底色與框線,那兩個不會跟任何字元格式衝突。 */
.mm-chip{display:inline-block;background:var(--neutral-soft);
  /* 框色跟著文字色走,只取 35%:直接用 currentColor 會讓**沒設過色**的籤
     框變成接近黑的 --ink(實測比現在深很多,每一份模板都會跟著變吵)。
     前一行的 var(--neutral-line) 同時是不支援 color-mix 時的 fallback。 */
  border:1px solid var(--neutral-line);
  border-color:color-mix(in srgb, currentColor 35%, transparent);
  border-radius:var(--r-sm);
  /* 底線與刪除線是 text-decoration,而它**不會傳進 inline-block**(規範:
     不傳播到 atomic inline-level 後代)。不明講 inherit 的話,含籤的整段
     套底線,線會在籤的兩側斷開 —— 但寄出的信裡值是一段普通文字,線是連的,
     於是編輯器顯示的與實際寄出的不一致。 */
  text-decoration-line:inherit;
  padding:0 6px;margin:0 1px;overflow-wrap:anywhere}
/* 籤被選取時的顏色。畫的是 Custom Highlight(見 index.html 的
   paintChipSelection),不是 class —— 所以 DOM 不會被動到。 */
::highlight(mmchipsel){background-color:var(--green-soft);color:var(--green)}
/* 可放欄位籤的目標:拖著籤經過時高亮,明示「放這裡」 */
.drop-on{background:rgba(11,93,59,.16) !important;
  box-shadow:0 0 0 2px var(--green) !important}
/* 移除區(側欄):只有在拖著「某個欄位裡的籤」時才亮起來,
   因為側欄籤本來就在側欄,拖回去沒有移除的意思。紅色 = 放開就拿掉。 */
.mm-rmzone{position:relative;outline:2px dashed var(--red);outline-offset:-3px;
  background:rgba(179,58,58,.05)}
.mm-rmzone::after{content:"放開即移除此欄位籤";position:sticky;top:0;left:0;
  display:block;z-index:3;background:var(--red);color:#fff;text-align:center;
  font-size:var(--fs-xs);padding:3px 6px;border-radius:var(--r-sm);
  margin-bottom:var(--s-1);pointer-events:none}

/* ── 8f 上傳區 ── */
.drop{border:2px dashed var(--line);border-radius:var(--r-lg);padding:34px 20px;
  text-align:center;color:var(--ink-2);background:var(--card);cursor:pointer;
  transition:.15s;font-size:var(--fs-md)}
.drop.on{border-color:var(--green);background:var(--green-soft);color:var(--green)}
/* 已載入是**結果**不是投放區:同樣的 34px 上下留白在只有一行字的時候
   看起來像一塊還在等你拖檔案的大空地。未載入狀態的可點擊面積不動。 */
.drop.done{border-style:solid;border-color:var(--green);background:var(--green-soft);
  color:var(--green);padding:14px 20px}
.drop b{color:var(--green)}

/* ═══════════════════════ §9 模板與個人資料 ═══════════════════════ */

/* 紀錄清單(Email / 公文共用結構) */
.mmhist details.bt{border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-2) var(--s-3);margin-bottom:var(--s-2);background:var(--surface-2)}
.mmhist details.bt>summary{cursor:pointer;font-size:var(--fs-base)}
.mmhist details.bt>summary:hover{color:var(--green)}
.mmhist details.bt>summary .bid{font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--ink-2);margin-left:6px}
/* 這一批是誰的。沿用用量清單的稱呼方式(自己標「(你)」),不另發明一套
   徽章 —— 紀錄裡出現別人的活動時,使用者要立刻知道那一列屬於誰。 */
.mmhist details.bt>summary .owner{font-size:var(--fs-xs);color:var(--ink-2);
  margin-left:var(--s-2)}
/* 「重寄失敗(N 封)」與它的說明:按鈕在 summary 裡,不隨批次摺疊 */
.mmhist details.bt>summary .rt{margin-left:var(--s-2);vertical-align:1px}
.mmhist details.bt>summary .rt-no{font-size:var(--fs-xs);color:var(--ink-2);
  margin-left:var(--s-2)}
.mmhist details.rw{border-top:1px dashed var(--line);margin-top:6px}
.mmhist details.rw>summary{cursor:pointer;font-size:var(--fs-base);padding:6px 2px;
  display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.mmhist details.rw>summary:hover{color:var(--green)}
.mmhist .tm,.mmhist .mono{font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--ink-2)}
.mmhist .who{font-weight:600}
.mmhist .sj{color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
/* 點數紀錄:池徽章 + 異動量。綠加紅減沿用全站的顏色語意,不另立一組;
   數字用 tabular-nums 對齊(**不是** --mono,那個 stack 沒有中日韓字)。 */
.mmhist .lgp{display:inline-block;font-size:var(--fs-xs);padding:1px 7px;
  border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2)}
.mmhist .lgd{font-weight:600;font-variant-numeric:tabular-nums}
.mmhist .lgd.up{color:var(--green)}
.mmhist .lgd.down{color:var(--red)}
.mmhist .lgd.zero{color:var(--ink-2);font-weight:400}
.mmhist .dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px var(--s-3);
  font-size:var(--fs-base);padding:var(--s-1) 2px 10px 14px}
.mmhist .dl b{color:var(--ink-2);font-weight:500}
.mmhist .dl span{overflow-wrap:anywhere}

/* 模板管理(側邊選單入口;與頁內面板共用同一套動作) */
.mmtpl .item{display:flex;gap:7px;align-items:center;padding:var(--s-2) 2px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.mmtpl .item .nm{flex:1 1 160px;min-width:0;overflow-wrap:anywhere;
  font-size:var(--fs-md)}
.mmtpl .item .tt{font-size:var(--fs-xs);color:var(--ink-2);font-family:var(--mono)}
.mmtpl .item .btn{flex:0 0 auto}
.mmtpl .top{display:flex;gap:7px;align-items:center;flex-wrap:wrap;
  margin-bottom:var(--s-2)}
/* 模板名稱按鈕:點名稱 = 預覽(與「預覽」鈕同一個動作,只是另一個點擊區) */
.mmtpl .item .tplnm{background:none;border:none;padding:0;text-align:left;
  color:var(--ink);font-size:var(--fs-md);text-decoration:underline dotted;
  text-underline-offset:3px}
.mmtpl .item .tplnm:hover{color:var(--green)}

/* 個人資料：簽名檔是可編輯 HTML 區，不能讓空白 div 高度歸零而無法點入。 */
.mmprofile .pform{display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:var(--s-2) var(--s-3)}
.mmprofile .pform>h3{grid-column:1/-1;color:var(--green);font-size:var(--fs-base);
  border-top:1px dashed var(--line);padding-top:10px;margin-top:5px}
.mmprofile .pform>h3:first-of-type{border-top:none;padding-top:0;margin-top:0}
.mmprofile .pform>.pname{grid-column:2;min-width:0}
.mmprofile .pform>label:not(.pfield){align-self:center;font-size:var(--fs-base);
  color:var(--ink-2)}
.mmprofile .pfield{display:contents}
.mmprofile .pfield>span{align-self:center;font-size:var(--fs-base);color:var(--ink-2)}
.mmprofile .pfield>input,.mmprofile .pfield>.phtml{min-width:0;width:100%;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:var(--s-2) 10px;font:inherit;color:var(--ink)}
.mmprofile .phtml{min-height:96px;line-height:1.6;overflow:auto;white-space:pre-wrap}
.mmprofile .phtml:empty::before{content:"輸入 Email 簽名檔";color:var(--ph);
  pointer-events:none}
.mmprofile .phtml:focus{outline:none;border-color:var(--green);
  box-shadow:var(--focus-ring)}
.profile-signature{margin-top:.7em;padding-top:.7em;border-top:1px solid var(--line)}
@media(max-width:620px){
  .mmprofile .pform{grid-template-columns:1fr}
  .mmprofile .pform>.pname{grid-column:auto}
  .mmprofile .pfield{display:grid;gap:3px}
}

/* 模板預覽(唯讀檢視;要改請按「在編輯器中修改」,不在這裡編輯) */
.mmtplview .tv{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s-2) 14px;font-size:var(--fs-md);margin:10px 0 14px}
.mmtplview .tv>b{color:var(--ink-2);font-weight:500;white-space:nowrap}
.mmtplview .tv>span{min-width:0;overflow-wrap:anywhere}
.mmtplview .tv-html{border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;padding:var(--s-3) 14px;line-height:1.75;max-height:46vh;
  overflow:auto}
.mmtplview .tv-html img{max-width:100%;height:auto}
.mmtplview .tv-li{padding:1px 0}
.mmtplview .tv-li b{color:var(--ink-2);font-weight:500;margin-right:6px}
.mmtplview .tv-li code{font-family:var(--mono);font-size:var(--fs-base);
  color:var(--green)}
.mmtplview .tv-none{color:var(--ink-2);font-style:normal}
.mmtplview .tv-act{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--line);padding-top:var(--s-3)}

/* 模板面板(公文與 Email 共用) */
.tplpanel .tpl-row{margin-bottom:7px}
.tplpanel .tpl-sel{width:100%}
.tplpanel .tpl-btns{display:flex;gap:5px;flex-wrap:wrap}
.tplpanel .tpl-btns .btn{flex:1 1 auto;min-width:66px}
.tplpanel .tpl-new{width:100%}
.tplpanel .tpl-note{margin-top:var(--s-1)}

/* ═══════════════════════ §10 後台資料表與額度 ═══════════════════════ */

/* 後台資料表:兩個後台共用**一份**密度、框線與表頭樣式 */
.contb{border-collapse:collapse;width:100%;font-size:var(--fs-base)}
.contb th,.contb td{border-bottom:1px solid var(--line);padding:9px 10px;
  text-align:left;vertical-align:middle}
.contb th{background:var(--green-soft);color:var(--green);font-weight:600;
  font-size:var(--fs-sm);white-space:nowrap}
.contb tr.off td{background:var(--surface-2);color:var(--ink-2)}
.contb td.who b{display:block}
.contb td.who small{font-size:var(--fs-xs);color:var(--ink-2);font-family:var(--mono)}
.contb td.acts{white-space:nowrap;text-align:right}
.contb td.acts .btn{margin-left:5px}
.contb select{width:auto;min-width:112px;padding:var(--s-1) var(--s-2);
  font-size:var(--fs-base)}
.contb .self{font-size:var(--fs-xs);color:var(--green);font-weight:600}
/* 額度欄:點數一行、動作一行。列上只留「＋ 加值」這個主要操作,「設定總量」
   在列尾的「⋯」裡 —— 額度是點數不是比例,所以這裡刻意沒有進度條,也沒有
   低量警示色;只有剩 0 點才上 .qzero 紅字。 */
.contb td.q{white-space:nowrap}
.contb td.q .qacts{margin-top:5px;display:flex;gap:5px;justify-content:flex-end}
@media(max-width:820px){
  .contb{font-size:var(--fs-sm)}
  .contb th,.contb td{padding:7px 6px}
}

/* 用量彈窗(階段②)與寄出/產出頁的額度 badge */
.musage h3{font-size:var(--fs-md);color:var(--green);margin:var(--s-3) 0 6px}
.musage h3:first-child{margin-top:0}
.usagetb{border-collapse:collapse;width:100%;font-size:var(--fs-base)}
.usagetb th,.usagetb td{border-bottom:1px solid var(--line);padding:var(--s-2) 10px;
  text-align:left;vertical-align:middle;white-space:nowrap}
.usagetb th{background:var(--green-soft);color:var(--green);font-weight:600;
  font-size:var(--fs-sm)}
.usagetb td small{font-size:var(--fs-xs);color:var(--ink-2);font-family:var(--mono);
  margin-left:var(--s-1)}
/* 額度句是「剩 2 點(已用 3 / 共 5 點)」—— 中文句子不套等寬字族,
   只讓數字等寬(見 §4 .num 的說明)。 */
.quotainfo{font-variant-numeric:tabular-nums}

/* ═══════════════════════ §11 入口頁 ═══════════════════════
 * 入口頁的頁殼與兩個後台共用 .conpage(見 §5a),這裡只剩它自己的東西。 */
.step-no{display:inline-flex;width:21px;height:21px;border-radius:50%;
  background:var(--green);color:#fff;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-family:var(--mono);margin-right:7px;vertical-align:1px}
#modeBox .card{margin-top:18px}
.modegrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.mode{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px var(--s-5);text-decoration:none;color:inherit;display:block;
  transition:.18s;border-top:4px solid var(--line);box-shadow:var(--sh-1)}
.mode:hover{border-color:var(--green);border-top-color:var(--green);
  box-shadow:var(--sh-2);transform:translateY(-2px)}
.mode h3{font-family:var(--serif);font-size:var(--fs-xl);color:var(--green);
  margin:11px 0 7px}
.mode p{font-size:var(--fs-base);color:var(--ink-2);line-height:1.7}
.cols{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.colpill{font-size:var(--fs-xs);background:var(--green-soft);color:var(--green);
  border-radius:5px;padding:2px var(--s-2);font-family:var(--mono);
  max-width:100%;overflow-wrap:anywhere}
.colpill.mail{background:var(--mail-soft);color:var(--amber);font-weight:700}
@media(max-width:720px){.modegrid{grid-template-columns:1fr}}

/* ═══════════════════════ §12 Email 頁 ═══════════════════════ */

/* 版型 */
.tpl-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;
  align-items:start}
.tpl-grid>*{min-width:0}
.pv-grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;
  align-items:start}
.send-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;
  align-items:start}

/* 內文編輯器的工具列。**刻意不叫 .toolbar** —— 公文頁的 .toolbar 是頁面
   動作列,兩者是不同的元件,共用一個 class 名會在同一份 CSS 裡直接互撞。 */
.edtoolbar{display:flex;flex-wrap:wrap;gap:var(--s-1);border:1px solid var(--line);
  border-bottom:none;border-radius:var(--r-md) var(--r-md) 0 0;padding:7px;
  background:var(--surface-2)}
.edtoolbar button,.edtoolbar select,.edtoolbar .colorpick{
  border:1px solid transparent;background:none;border-radius:5px;
  padding:var(--s-1) var(--s-2);font-size:var(--fs-base);min-width:30px;height:30px;
  color:var(--ink)}
.edtoolbar button:hover{background:var(--green-soft);border-color:var(--green)}
.edtoolbar select{width:auto;padding:2px var(--s-1)}
.edtoolbar .sep{width:1px;background:var(--line);margin:2px var(--s-1)}
/* 圖示按鈕(對齊 / 清單 / 縮排 / 字色 / 螢光筆)。B・I・U・S 與兩個下拉維持
   文字,所以這裡只挑「裝了 svg 的那幾顆」:高度 30px、圓角與 hover 全部沿用
   上面那一份,只有左右內距收成 --s-1 —— 30px 的格子扣掉框線與 8px 內距只
   剩 12px,放不下 16px 的圖示。文字按鈕的寬度因此一格都沒動。 */
.edtoolbar button,.edtoolbar .colorpick{display:inline-flex;align-items:center;
  justify-content:center}
.edtoolbar button:has(svg),.edtoolbar .colorpick{padding:var(--s-1)}
/* pointer-events:none 讓 e.target 永遠是 button 本身:派發那一行
   (closest("button[data-cmd]"))因此一個字都不必改。 */
.edtoolbar svg{width:16px;height:16px;flex:0 0 auto;pointer-events:none}
/* 編號清單的 1/2/3:svg 的 <text> 不繼承頁面字族,要明寫(同 doc.html
   畫在 .sheet 上的 UI 元素那一條)。 */
.edtoolbar svg text{font-family:var(--sans)}
/* 字色 / 螢光筆:原生 <input type=color> 透明地鋪滿整格 —— 點擊直接打在它
   身上,開的仍是原本那個顏色選取器。色塊本身由 svg 的 .cbar 呈現。 */
.edtoolbar .colorpick{position:relative}
.edtoolbar .colorpick:hover{background:var(--green-soft);border-color:var(--green)}
.edtoolbar .colorpick input[type=color]{position:absolute;inset:0;width:100%;
  height:100%;min-width:0;padding:0;border:none;background:none;opacity:0;
  cursor:pointer}
/* 描邊只是為了讓極淡(預設的螢光黃)或極白的選色仍看得出是一條色帶 */
.edtoolbar .cbar{stroke:rgba(0,0,0,.25);stroke-width:.6}
.editor{border:1px solid var(--line);border-radius:0 0 var(--r-md) var(--r-md);
  background:#fff;min-height:340px;padding:var(--s-4) 18px;font-size:var(--fs-body);
  line-height:1.75;overflow-y:auto;overflow-wrap:anywhere}
.editor:focus{outline:none;border-color:var(--green);box-shadow:var(--focus-ring)}
.editor:empty::before{content:attr(data-ph);color:var(--ph)}

/* 寄送進度 */
.prog{height:10px;background:var(--green-soft);border-radius:5px;overflow:hidden;
  margin:var(--s-3) 0}
.prog i{display:block;height:100%;width:0;background:var(--green);transition:width .3s}
.slog{list-style:none;font-size:var(--fs-base);max-height:480px;overflow-y:auto}
.slog li{display:flex;gap:10px;align-items:center;padding:7px 10px;
  border-bottom:1px solid var(--line);cursor:pointer}
.slog li:hover{background:var(--green-tint)}
.slog .st{min-width:52px;text-align:center;padding:2px var(--s-1);flex:0 0 auto}
.slog .err{color:var(--red);font-size:var(--fs-sm)}
/* 寄件勾選:整列可點開寄出預覽,勾選框自己不觸發預覽 */
.picktools{gap:var(--s-2);margin-bottom:2px}
.picktools .selinfo{margin-left:auto}
.slog li .pick{flex:0 0 auto;width:16px;height:16px;accent-color:var(--green);
  cursor:pointer}
.slog li .pick:disabled{cursor:not-allowed;opacity:.45}
.slog li .who{flex:1;min-width:0}
/* 列上的收件地址:與逐封清單的 .rcpt .em 同一個角色(識別字用等寬),
   只是這裡是行內的。以前寫成 inline style,連字級都自帶一個 .76rem。 */
.slog .em{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-2)}
.slog li .pvhint{flex:0 0 auto;font-size:var(--fs-xs);color:var(--ink-2)}
.slog li:hover .pvhint{color:var(--green)}
.slog li.off .who{opacity:.5}
.slog .retry-unknown{flex:0 0 auto}

/* 寄出預覽彈窗的內容(殼與共用彈窗同一份,見 §7a) */
.modal-head .mp-acts{display:flex;gap:var(--s-2);align-items:center;flex:0 0 auto}
.mp-row{display:flex;gap:10px;font-size:var(--fs-md);padding:6px 0;
  border-bottom:1px dashed var(--line)}
.mp-row .k{flex:0 0 76px;color:var(--ink-2);font-size:var(--fs-sm);padding-top:2px}
.mp-row .v{flex:1;min-width:0;overflow-wrap:anywhere}
.mp-row .v.mono{font-family:var(--mono);font-size:var(--fs-base)}
.mp-bcc{padding:7px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-md)}
.mp-bcc summary{cursor:pointer;color:var(--ink-2);font-size:var(--fs-sm)}
.mp-bcc summary:hover{color:var(--green)}
.mp-bcc #mpBcc{margin:7px 0 3px;overflow-wrap:anywhere;font-size:var(--fs-base)}
.mp-att{list-style:none;font-size:var(--fs-base)}
.mp-att li{padding:1px 0}
.mp-body{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:14px var(--s-4);margin-top:var(--s-3);font-size:var(--fs-body);
  line-height:1.75;overflow-wrap:anywhere}
.mp-note{margin-top:var(--s-2)}

/* 重寄模式 / 還原批次的橫幅:三個步驟都看得到「這不是原本那份名單」。
   底與框線走 §3 的警示變體,這裡只留它自己的內部排版。 */
.retrybar{margin-bottom:var(--s-4);font-size:var(--fs-base)}
.retrybar .rb-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.retrybar .rb-row b{color:var(--amber)}
.retrybar .rb-note{margin-top:6px;color:var(--ink-2);font-size:var(--fs-sm)}
.retrybar .rb-bad{margin-top:6px;color:var(--red);font-size:var(--fs-base)}
.retrybar code{font-family:var(--mono);font-size:var(--fs-sm)}

/* 將被跳過清單:inline 修正地址 */
.skipbox{margin:var(--s-3) 0}
.skipbox h3{font-size:var(--fs-base);color:var(--amber);margin-bottom:var(--s-2)}
.skipbox ul{list-style:none}
.skipbox li{display:flex;gap:var(--s-2);align-items:center;margin-bottom:6px;
  font-size:var(--fs-base)}
.skipbox li .lbl{flex:0 0 auto;max-width:130px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.skipbox li input{flex:1;min-width:0;padding:5px var(--s-2)}
.skipbox li .why{flex:0 0 auto;font-size:var(--fs-sm);color:var(--amber)}
.skipbox li.fixed .why{color:var(--green)}
.skipbox li.fixed input{border-color:var(--green)}
/* 內容快照沒寫成功:那是錯誤級的,走紅色變體 */
.skipbox.snapbox{background:var(--red-soft);border-color:var(--red-line);
  color:var(--red)}
.snapbox h3{color:var(--red)}

/* 預覽頁附件資訊 */
.attinfo summary{cursor:pointer;font-size:var(--fs-base);color:var(--ink-2)}
.attinfo summary:hover{color:var(--green)}
.attach-names{list-style:none;font-size:var(--fs-base);margin:6px 0 0 14px}
.attach-names li{padding:2px 0;color:var(--ink-2)}

@media(max-width:1024px){
  /* 側欄改到編輯器上方並可收合,不擠壓編輯區(§2) */
  .tpl-grid{grid-template-columns:1fr}
  .tpl-grid .side-wrap{order:-1}
  .sidebox{position:static;max-height:none}
  .sidebox.folded{display:none}
  .sidetoggle{display:block}
  .pv-grid,.send-grid{grid-template-columns:1fr}
}

/* ═══════════════════════ §13 公文頁 ═══════════════════════
 * 「公文紙張與畫布」那一層(紙、熱區、畫布內編輯器與它的籤、層級徽章)
 * **刻意留在 doc.html**:它只有那一頁有,而且與 doc/layout.py、doc/render.py
 * 是同一件事的兩面,拆開兩個檔會走鐘。這裡放的是那一層以外的東西。 */
.ed-grid{display:grid;grid-template-columns:214px minmax(0,1fr) 300px;gap:15px;
  align-items:start}
.ed-grid>*{min-width:0}

/* 頁面動作列(第 3 步的工具列、第 4 步的檢視列):卡片式橫條 */
.toolbar,.pvbar{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;
  margin-bottom:var(--s-3);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:9px var(--s-3)}
.toolbar .docno{font-family:var(--mono);font-size:var(--fs-sm);color:var(--green);
  font-weight:700}
.pgno{font-size:var(--fs-xs);color:var(--ink-2);font-family:var(--mono)}
/* 兩種檢視的切換(分段控制項) */
.pvbar .seg{display:inline-flex;border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.pvbar .seg button{border:0;border-radius:0;font-size:var(--fs-base);
  padding:6px var(--s-3);background:none;color:var(--ink-2);cursor:pointer}
.pvbar .seg button.sel{background:var(--green);color:#fff}
.pvbar .seg button+button{border-left:1px solid var(--line)}
/* 編輯輔助色的圖例 */
.legend{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);
  color:var(--ink-2)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px}
.legend i.y{background:rgba(214,158,0,.16);
  box-shadow:inset 0 0 0 1.2px var(--amber-strong)}
.legend i.g{background:rgba(11,93,59,.07);box-shadow:inset 0 0 0 1.2px rgba(11,93,59,.5)}
.legend i.o{background:var(--amber-tint);box-shadow:inset 0 0 0 1.2px var(--amber-strong)}

/* 第 1 步:分組(一文多受文者) */
#rcptTable tr[data-i]{cursor:pointer;user-select:none}
#rcptTable tr.rsel td{background:var(--green-soft)}
#rcptTable tr.grp td{background:var(--green-tint)}
#rcptTable td.gcol,#rcptTable th.gcol{font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--ink-2);white-space:nowrap}
.gbadge{display:inline-block;font-size:var(--fs-xs);border-radius:var(--r-sm);
  padding:1px 6px;background:var(--green-soft);color:var(--green);margin-left:var(--s-1)}
.gbadge button{border:0;background:none;color:var(--red);cursor:pointer;
  font:inherit;padding:0 0 0 var(--s-1)}
#groupBar{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;
  margin-top:var(--s-2)}

/* 側欄:附件兩組與「套用到全部」勾選清單 */
.attgroup{margin-top:9px}
.attgroup h4{margin:0;font-size:var(--fs-base);display:flex;align-items:center;
  gap:6px}
.applyall{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-1) var(--s-2);
  margin-top:7px}
.applyall label{display:flex;align-items:center;gap:5px;font-size:var(--fs-base);
  cursor:pointer}
.applyall input{accent-color:var(--green)}
.applyall input[disabled]+span{color:var(--ink-2)}
#applyAllBtn{width:100%;margin-top:9px}
.personrow{display:flex;gap:7px;align-items:center}
.personrow input{flex:1;min-width:0}

/* 第 4 步側欄:郵寄標籤直編 */
.label-preview{border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-3);background:#fff;white-space:pre-wrap;line-height:1.6}
.label-preview[contenteditable=true]{min-height:116px;cursor:text;
  overflow-wrap:anywhere}
.label-preview[contenteditable=true]:focus{outline:none;border-color:var(--green);
  box-shadow:var(--focus-ring)}
/* 手動改過的格子:框線用與「僅此份」熱區同一個琥珀(--amber-strong),
   兩處講的是同一件事 —— 這一格被個別改過。 */
.label-preview.manual{border-color:var(--amber-strong);background:var(--chip-bg)}
.label-check{display:flex;gap:7px;align-items:flex-start;font-size:var(--fs-base);
  line-height:1.45;color:var(--ink)}
.label-check input{margin-top:3px;accent-color:var(--green)}

/* 警示 / 錯誤的常駐載體(可行動的訊息不能只活在 3 秒 toast 裡)。
   底與框線走 §3 那一組,這裡只調密度:它們是貼在欄位旁的小塊。 */
.warnnote,.errnote{padding:6px 9px;font-size:var(--fs-base);line-height:1.5;
  margin-top:6px}
.warnnote{color:var(--amber-ink);background:var(--amber-tint);
  border-color:var(--amber-line)}
.warnnote button{margin-left:6px}
.errnote{font-weight:600;white-space:pre-wrap}

@media(max-width:1180px){
  .ed-grid{grid-template-columns:1fr}
  .ed-grid .side-wrap{order:-1}
  .side{position:static;max-height:none}
  .side.folded{display:none}
  .sidetoggle{display:block}
  .rlist{max-height:280px}
}