/* ════════════════════════════════════════════════════════════════
   RADISTAR — 共用版型（Design System）           建立 2026-08-14
   ════════════════════════════════════════════════════════════════

   🎯 為什麼有這支檔案
   Jony：「版型要比照 Rewatt、參考整合自己的需求，這樣才能不斷複製。」
   盤查後發現：**Rewatt 自己也沒有共用版型**——72 頁、297 個 class，
   跨頁共用的只有 4 個（.topbar/.main/.tbl/.card），每頁各寫各的。
   RADISTAR 也已經走上同一條路：20 頁裡 19 頁自己宣告一份設計變數、
   累計 1,375 行重複 CSS，而且**已經開始漂移**
   （`.empty` 有 13 種寫法、`.card` 6 種、`--green` 兩個值）。

   👉 所以結論是：**抄 Rewatt 的「長相」，不要抄它的「做法」。**
      長相集中在這一支，改一次全站生效；新頁面複製 `_template.html` 就有完整版型。

   📐 色票與尺寸的來源（都附 Rewatt 真實原始碼位置）
     · 暖中性色     Rewatt_Home.html:11  body{background:#f5f6f2;color:#1a1a18}
     · 邊框         Rewatt_Home.html:14  border-bottom:1px solid #e8e6df
     · 三層文字     #1a1a18 / #5f5e5a / #888780（Rewatt 全站出現 293/406/693 次）
     · 窄白條頁首   Rewatt_PMS.html      .topbar{background:#fff;height:52px;sticky}
                                          .pg-title{15px} .pg-sub{11px;#888780}
     · 弱化表頭     Rewatt_PMS.html      .tbl th{11px;font-weight:500;#888780;bg #fafaf8}
     · 寬鬆儲存格   Rewatt_PMS.html      .tbl td{padding:10px 14px}
     · 按鈕         Rewatt_PMS.html      .btn{padding:6px 14px;radius:8px;border:1px solid #d3d1c7}
     · 標籤         Rewatt_*.html        .tag{10px;padding:2px 7px;radius:4px}
   ⚠️ **品牌色不抄 Rewatt 的綠**，維持 RADISTAR 自己的 teal #0F6E56
      （兩案品牌素材不混用，同 AI 助理不沿用麻糬鴨吉祥物的原則）。

   🚫 刻意沒抄的
     · Rewatt 採購/營管那種 **220px 深色側邊選單**（Rewatt_PMS.html .sidebar{width:220px;bg:#1a1a18}）
       —— Jony 2026-08-02 已明確要求用**橫向分頁、不要摺疊式選單**，那是已定的決定。
     · Rewatt 每頁自帶 <style> 的做法（就是本檔要解決的問題本身）。

   🧩 怎麼用
     1. 頁面 <head> 在自己的 <style> **之前**加：<link rel="stylesheet" href="_ui.css">
        （順序很重要——放前面，頁面才能用自己的 <style> 覆蓋特例）
     2. class 名稱**刻意沿用各頁原本就在用的**（.top/.card/.tbl/.btn/.tag/.empty/.kpi…），
        所以加上這支檔案**不需要改任何 HTML**。
     3. 新頁面直接複製 `_template.html`。
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── 中性色（Rewatt 暖色系）── */
  --bg:        #f5f6f2;   /* 頁面底 */
  --surface:   #ffffff;   /* 卡片／列表底 */
  --surface-2: #fafaf8;   /* 表頭、次要填色 */
  --surface-3: #f1efe8;   /* hover、淡填色 */
  --line:      #e8e6df;   /* 主要邊框 */
  --line-2:    #f1efe8;   /* 表格內部分隔線（更淡） */
  --line-3:    #d3d1c7;   /* 按鈕邊框（較明顯） */

  /* ── 文字三階層（少了第三層，次要資訊會跟主要資訊糊在一起）── */
  --ink:   #1a1a18;
  --sec:   #5f5e5a;
  --muted: #888780;

  /* ── 品牌（RADISTAR 自己的 teal，不用 Rewatt 的綠）── */
  --teal:    #0F6E56;
  --tealdk:  #073829;
  --tealbg:  #E9F3EF;
  --tealln:  #bfe0d4;

  /* ── 語意色（採 Rewatt 那組偏低彩度的，不刺眼）── */
  --green:   #15803d;  --greenbg: #EAF3DE;
  --amber:   #854f0b;  --ambbg:   #FAEEDA;
  --info:    #185fa5;  --infobg:  #E0F2FE;
  --red:     #dc2626;  --redbg:   #fbece9;
  --purple:  #6b4ea8;  --purplebg:#f1edf9;

  /* ── 各頁原本自己宣告、拿掉頁內 :root 後仍要能用的別名 ──
     ⚠️ 這些是 2026-08-14 抽共用樣式時掃出來的：全站 24 個變數裡有 8 個
        只定義在個別頁面的 :root。不補進來，拿掉頁內 :root 會讓 12 個檔的顏色變黑。
     ⚠️ 值一律沿用各頁**原本就一致**的那個（已核對過，沒有分歧）。 */
  --blue:    #1F4E79;  --bluebg:  #EEF4FB;   /* 資訊藍：出勤/員工/報支/人資/工作台 */
  --amberbg: #fbf1de;                        /* 舊的琥珀底，與 --ambbg 併存不動它 */
  --gray:    #8a9096;                        /* 停用/次要 */
  /* forms.html 與 login.html 的分類色是**逐張卡片用 style 動態指定**的區域變數，
     不是全域色票——這裡給個保底值，避免沒帶到時整塊變透明。 */
  --cat-bg:   var(--surface-3); --cat-color:  var(--sec);
  --grp-bg:   var(--surface-3); --grp-color:  var(--sec);

  /* ── 尺寸 ── */
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --page: none;   /* 2026-10-04 Jony：「網站內頁寬度盡量放大 滿版」— 原本 1400px，寬螢幕兩側留一大片空白 */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ══════════════ 頁首 ══════════════
   ⚠️ 2026-08-14 改版：原本每頁頂部是一塊 teal 漸層大橫幅（h1 19px＋副標），
      每頁吃掉約 70px、而且看起來像網頁模板不像系統。
      改成 Rewatt 內頁那種 **52px 白底 sticky 窄條**（Rewatt_PMS.html .topbar）。
      彩色漸層只留在工作台的歡迎卡——重點才配重色。
   HTML 結構完全不用改，沿用既有的 .top / .top h1 / .top .sub / .top .back。 */
.top{
  position:sticky; top:0; z-index:40;
  background:var(--surface); border-bottom:1px solid var(--line); border-radius:0;
  padding:0 24px; min-height:52px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.top h1{ font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.top .sub{ font-size:11px; color:var(--muted); margin-top:1px; opacity:1; }
/* 返回鍵：從「白框半透明」改成一般次要按鈕（底色變白了，原本的白字會整個看不見）。
   ⚠️ HTML 那邊一律寫 href="index.html"（或該模組首頁），**不要用 history.back()「回上一頁」**——
      登入後是被導轉進來的，上一頁會是登入頁，一按就跳回登入畫面回不了工作台
      （Rewatt 2026-08-02 踩過這個坑才改掉）。 */
.top .back{
  background:var(--surface); border:1px solid var(--line-3); color:var(--sec);
  font-size:12.5px; font-weight:500; padding:5px 12px; border-radius:var(--r-sm);
  text-decoration:none; white-space:nowrap; transition:background .15s;
}
.top .back:hover{ background:var(--surface-3); color:var(--ink); }
@media(max-width:600px){ .top{ padding:8px 14px; } .top h1{ font-size:14px; } }

/* ══════════════ 版面 ══════════════ */
.wrap{ max-width:var(--page); margin:0 auto; padding:24px 32px; }
@media(max-width:600px){ .wrap{ padding:14px; } }

/* ══════════════ 卡片 ══════════════ */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px; margin-bottom:16px;
}
.card-title{
  font-size:13px; font-weight:700; color:var(--ink);
  margin-bottom:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
/* 區塊標題（卡片外的） */
.section-title{ font-size:14px; font-weight:700; color:var(--ink); }
.section-hdr{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; flex-wrap:wrap; }

/* ══════════════ 表格 ══════════════
   ⚠️ Rewatt 的表頭是**刻意弱化**的（11px／weight 500／淺灰／1px 細線），
      讓資料本身跳出來。我們原本是深灰粗體＋2px 粗線，表頭比資料還搶眼。
   ⚠️ 外框一律 overflow-x:auto，**不可用 overflow:hidden 做圓角**
      （orders.html 踩過：手機上表格比畫面寬時右邊欄位會永久切掉滑不到）。 */
.tw{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{
  padding:8px 14px; text-align:left;
  font-size:11px; font-weight:500; color:var(--muted);
  background:var(--surface-2); border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
.tbl td{ padding:10px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl tbody tr:hover td{ background:var(--surface-2); }
.tbl tr:last-child td{ border-bottom:0; }
.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--info); }

/* ══════════════ KPI 數字卡 ══════════════ */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; }
.kpi .l{ font-size:11px; color:var(--muted); font-weight:500; }
.kpi .v{ font-size:24px; font-weight:700; color:var(--ink); margin-top:4px; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi .n{ font-size:11px; color:var(--muted); margin-top:3px; }

/* ══════════════ 按鈕 ══════════════ */
.btn{
  padding:6px 14px; border:1px solid var(--line-3); background:var(--surface);
  border-radius:8px; cursor:pointer; font:inherit; font-size:13px; font-weight:500;
  color:var(--ink); white-space:nowrap; transition:background .15s,border-color .15s;
}
.btn:hover{ background:var(--surface-3); }
.btn.g{ background:var(--teal); color:#fff; border-color:var(--teal); font-weight:600; }
.btn.g:hover{ background:var(--tealdk); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
/* 表格內的小連結鈕 */
.lnk{
  background:none; border:1px solid var(--line); color:var(--sec);
  border-radius:var(--r-sm); padding:3px 10px; font:inherit; font-size:12px; cursor:pointer;
}
.lnk:hover{ border-color:var(--teal); color:var(--teal); }

/* ══════════════ 標籤／徽章 ══════════════ */
.tag,.pill{
  display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:4px;
  background:var(--surface-3); color:var(--sec); font-weight:600; white-space:nowrap;
}
.tag.p,.pill.p{ background:var(--ambbg);   color:var(--amber); }   /* 進行中／待處理 */
.tag.a,.pill.a{ background:var(--greenbg); color:var(--green); }   /* 完成／核准 */
.tag.r,.pill.r{ background:var(--redbg);   color:var(--red);   }   /* 退回／異常 */
.tag.i,.pill.i{ background:var(--infobg);  color:var(--info);  }   /* 資訊 */
.tag.x,.pill.x{ background:var(--surface-3); color:var(--muted); } /* 停用／作廢 */

/* ══════════════ 分頁 ══════════════
   ⚠️ 分頁列一定要能橫向滑，不然分頁一多就把整頁撐寬
      （purchase.html 踩過兩次：4 分頁變 8 分頁後手機整頁左右可拖）。 */
/* 🔴 2026-10-04 Jony：「各部門網站上方設計都統一參照 rewatt 設計」（附 Rewatt_GA.html 截圖）
   分頁列改成 Rewatt 的樣子：**白色圓角容器裡放一排無框按鈕，選中的是深綠實心**
   （Rewatt_GA.html:34-37 `.tabs/.tab-btn`）。全站 .tabs／.navbtns／.fintabs 三套寫法都套同一個外觀。 */
.tabs,.navbtns,.fintabs{ display:flex; gap:6px; margin-bottom:16px; overflow-x:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px; }
.tabs::-webkit-scrollbar,.navbtns::-webkit-scrollbar,.fintabs::-webkit-scrollbar{ display:none; }
.tab,.navbtn,.fintab{
  flex:0 0 auto; position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border:none; background:transparent; border-radius:8px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:500; color:var(--sec); white-space:nowrap;
  text-decoration:none; transition:.15s;
}
.tab:hover,.navbtn:hover,.fintab:hover{ background:var(--surface-3); color:var(--ink); }
.tab.on,.navbtn.on,.fintab.on{ background:#0a4535; color:#fff; font-weight:600; box-shadow:none; }
/* Rewatt 的「跳去另一頁」分頁（💵 零用金請購 →）用淺綠底區分 */
.tab.jump,.navbtn.jump{ background:var(--tealbg); color:var(--teal); font-weight:600; }

/* ══════════════ 表單 ══════════════ */
.fr{ margin-bottom:12px; }
.fl{ display:block; font-size:12px; color:var(--sec); margin-bottom:5px; font-weight:600; }
.fc{
  width:100%; height:36px; border:1px solid var(--line-3); border-radius:8px;
  padding:0 10px; font:inherit; font-size:13px; background:var(--surface); color:var(--ink);
}
.fc:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--tealbg); }
textarea.fc{ height:auto; padding:8px 10px; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ══════════════ 說明文字 ══════════════ */
.hint{ font-size:11px; color:var(--muted); margin-top:4px; line-height:1.6; }
.muted{ color:var(--muted); }
.note{ background:var(--tealbg); border:1px solid var(--tealln); border-radius:var(--r);
       padding:10px 13px; font-size:12px; color:var(--sec); line-height:1.7; margin-bottom:14px; }
.warnbox{ background:var(--ambbg); border:1px solid #eedcb6; border-radius:var(--r);
       padding:10px 13px; font-size:12.5px; color:var(--amber); margin-bottom:14px; line-height:1.7; }

/* ══════════════ 空狀態 ══════════════
   ⚠️ 全站有 13 種不同寫法（16 頁），這裡統一。 */
.empty{ text-align:center; padding:30px 20px; color:var(--muted); font-size:13px; }

/* ══════════════ 彈窗 ══════════════
   ⚠️ 兩套命名並存（.modal-bg/.modal-hdr/.modal-body/.modal-ftr 與 .mbg/.mhd/.mbd/.mft），
      兩套都定義，不強迫各頁改 HTML。
   ⚠️ **只讓內容區捲動**，標題與底部按鈕固定——整個 modal 一起捲的話，
      表單一長「送出」就會被捲出畫面，使用者會以為沒有送出鈕（2026-08-04 踩過）。 */
.modal-bg,.mbg{ position:fixed; inset:0; background:rgba(26,26,24,.42); z-index:800;
  display:none; align-items:center; justify-content:center; padding:16px; }
.modal-bg.show,.mbg.show{ display:flex; }
.modal{ background:var(--surface); border-radius:var(--r-lg); width:560px; max-width:96vw;
  max-height:90vh; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 18px 48px rgba(26,26,24,.22); }
.modal-hdr,.mhd{ padding:14px 20px; border-bottom:1px solid var(--line);
  font-size:14px; font-weight:700; color:var(--ink); flex-shrink:0; }
.modal-body,.mbd{ padding:20px; flex:1; overflow-y:auto; min-height:0; }
.modal-ftr,.mft{ padding:12px 20px; border-top:1px solid var(--line); display:flex; gap:8px;
  justify-content:flex-end; flex-shrink:0; background:var(--surface); }

/* ══════════════ Toast ══════════════ */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:var(--r);
  font-size:13px; z-index:900; opacity:0; transition:.3s; pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.2); }
.toast.show{ opacity:1; }

/* ══════════════ 鎖定／無權限 ══════════════
   ⚠️「沒權限」跟「系統壞掉」的訊息一定要分開（2026-08-06 財務頁踩過：
      401 顯示「載入失敗請稍後再試」，使用者只會一直重試）。 */
.lock{ text-align:center; padding:50px 20px; }
.lock .ic{ font-size:44px; }
.lock .t{ font-size:16px; font-weight:700; margin:10px 0 6px; }
.lock .m{ font-size:13px; color:var(--sec); line-height:1.8; }

/* ════════════════════════════════════════════════════════════════
   部門頁版型（2026-09-24 Jony：「整合的人資 比照 rewatt 版型製作」）
   來源＝Rewatt_HR.html 最新版（Rewatt-AI-2026-05-01-v45.3，8,348 行）：
     · .page-head 漸層 hero（Rewatt:484-495，紫；我們換 RADISTAR teal）
     · .hr-topnav 大按鈕分頁列＋紅點（Rewatt:508-516、38-42）
     · .ai-suggest 結論卡：左 4px 粗邊＋淺色漸層底（Rewatt:66）——**先講結論再給表格**
     · 6 欄圖示入口格，每格附資料來源小標籤（Rewatt:2810-2878）
   ⚠️ 2026-08-14 曾把「每頁 teal 漸層大橫幅」拿掉，理由是「看起來像網頁模板」。
      這次加回來**不是走回頭路**：Rewatt 是 `白底 sticky 窄條(topbar) ＋ 內容區漸層 hero(page-head)`
      **兩層都有**，我們當時只留了窄條。hero 只放在**部門首頁與其子頁**，一般表單頁不要放。
   ⚠️ 不抄 Rewatt 的紫色（品牌色鐵則）、不抄它 12 個 tab 的殘留 `.tabs`（它自己已 display:none）、
      不抄「沒做卻畫出來」的功能格（Jony 2026-09-24 指定只放真的有的）。 */

.hero{
  position:relative; overflow:hidden;
  /* 2026-10-04：漸層方向比照 Rewatt（左亮右深，Rewatt_GA.html:25 是 #0f766e→#134e4a），色相維持我方 teal */
  background:linear-gradient(135deg,var(--teal) 0%,#0a4535 100%); color:#fff;
  border-radius:16px; padding:22px 26px; margin-bottom:16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.hero::after{ content:''; position:absolute; top:-64px; right:-44px; width:220px; height:220px;
  border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
.hero h1{ font-size:21px; font-weight:800; letter-spacing:-.01em; }
.hero .sub{ font-size:12.5px; color:#d9ece5; margin-top:4px; line-height:1.6; }
.hero .grow{ flex:1 1 auto; }
/* 右上角狀態膠囊：Rewatt 放「🤖 AI 引擎運作中」呼吸燈；我們放**真的能查證的**資料時間 */
.hero-chip{ position:relative; z-index:1; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  border-radius:20px; padding:6px 13px; font-size:11.5px; font-weight:600; color:#fff;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.hero-chip .dot{ width:7px; height:7px; border-radius:50%; background:#7ee2b8; box-shadow:0 0 0 0 rgba(126,226,184,.7);
  animation:heroPulse 2.2s infinite; }
@keyframes heroPulse{ 70%{box-shadow:0 0 0 7px rgba(126,226,184,0)} 100%{box-shadow:0 0 0 0 rgba(126,226,184,0)} }
@media(max-width:600px){ .hero{ padding:15px 16px; } .hero h1{ font-size:18px; } }

/* ── 部門頁頂部（2026-10-04 統一比照 Rewatt_GA.html:346-372）──
   hero 左上的橘色作業區膠囊、右側的按鈕、hero 下方「📊 資料來源」條。 */
.hero > div{ position:relative; z-index:1; }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px; margin-bottom:8px;
  background:linear-gradient(135deg,#FED7AA,#FDBA74); color:#7C2D12; border:1.5px solid #EA580C;
  border-radius:20px; font-size:11px; font-weight:700; letter-spacing:1px; box-shadow:0 2px 8px rgba(234,88,12,.2); }
.hero-badge i{ display:inline-block; width:8px; height:8px; background:#EA580C; border-radius:50%; box-shadow:0 0 8px rgba(234,88,12,.6); }
.hero-acts{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hero-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:10px; text-decoration:none;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); transition:.15s; }
.hero-btn:hover{ background:rgba(255,255,255,.24); transform:translateY(-1px); }
.hero-acts select{ background:rgba(255,255,255,.95); border:none; border-radius:8px; padding:6px 9px; font:inherit; font-size:12.5px; }
.hero-acts label{ font-size:12px; color:#d9ece5; }
.src-bar{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 14px; margin-bottom:14px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--sec); }
.src-tag{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:var(--muted); padding:2px 8px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:5px; }
.src-tag code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--teal); font-weight:600; background:none; }
.src-bar .ok{ margin-left:auto; color:var(--green); font-size:11px; }

/* ── 分頁上的紅點數字（.navbtn 外觀已併到上面 .tabs 那段）── */
.navbtn .dot,.tab .dot{ background:var(--red); color:#fff; border-radius:20px; min-width:19px; height:19px; padding:0 5px;
  font-size:10.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.navbtn.on .dot,.tab.on .dot{ background:#fff; color:var(--teal); }

/* ── 結論卡：先講結論再給表格 ── */
.insight{ background:linear-gradient(135deg,var(--tealbg) 0%,var(--surface) 62%);
  border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:var(--r); padding:14px 17px; margin-bottom:12px; display:block;
  text-decoration:none; color:inherit; transition:.15s; }
a.insight:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); transform:translateY(-1px); }
.insight.red{ background:linear-gradient(135deg,var(--redbg) 0%,var(--surface) 62%); border-left-color:var(--red); }
.insight.amber{ background:linear-gradient(135deg,var(--ambbg) 0%,var(--surface) 62%); border-left-color:var(--amber); }
.insight-t{ font-size:13.5px; font-weight:800; margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.insight.red .insight-t{ color:var(--red); } .insight.amber .insight-t{ color:var(--amber); }
.insight-b{ font-size:12.5px; line-height:1.7; color:var(--ink); } .insight-b b{ font-size:16px; }
.insight-m{ font-size:11.5px; color:var(--muted); margin-top:6px; }

/* ── 功能入口格（每格附「資料從哪來」小標籤，同 Rewatt 露出後台資料表名）── */
.fngrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:10px; margin-bottom:16px; }
.fncell{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px; text-decoration:none; color:inherit; display:block; transition:.15s; }
.fncell:hover{ border-color:var(--teal); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.06); }
.fncell .ic{ font-size:24px; line-height:1; }
.fncell .n{ font-size:12.5px; font-weight:700; margin-top:7px; }
.fncell .d{ font-size:10.5px; color:var(--muted); line-height:1.55; margin-top:3px; }
.fncell .src{ display:inline-block; margin-top:7px; font-size:9.5px; color:var(--teal); background:var(--tealbg);
  border-radius:4px; padding:1px 6px; }
.fncell .cnt{ position:absolute; top:9px; right:9px; background:var(--red); color:#fff; border-radius:20px;
  min-width:19px; height:19px; padding:0 5px; font-size:10.5px; font-weight:800;
  display:none; align-items:center; justify-content:center; }

/* ── KPI class 別名：全站三套寫法並存（.l/.v/.n、.kpi-l/.kpi-v、.kpi-label/.kpi-val/.kpi-sub）──
   ⚠️ 不統一成一套是刻意的：改 HTML 的風險大於多幾行 CSS（2026-09-24 決定）。 */
.kpi-l,.kpi-label{ font-size:11px; color:var(--muted); font-weight:500; }
.kpi-v,.kpi-val{ font-size:24px; font-weight:700; color:var(--ink); margin-top:4px; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi-n,.kpi-sub{ font-size:11px; color:var(--muted); margin-top:3px; line-height:1.5; }
.kpi-v.warn,.kpi-val.warn{ color:var(--red); } .kpi-v.ok,.kpi-val.ok{ color:var(--green); }
a.kpi{ text-decoration:none; color:inherit; display:block; transition:.15s; }
a.kpi:hover{ border-color:var(--teal); transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.05); }

/* ── 工作台兩欄與「最近使用」（2026-09-29，比照 Rewatt 工作台 .two-col 1.6:1）── */
.two-col{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; }
@media(max-width:1100px){ .two-col{ grid-template-columns:1fr; } }
.recent-list{ background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.recent-item{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line-2);
  text-decoration:none; color:inherit; font-size:12.5px; }
.recent-item:last-child{ border-bottom:0; } .recent-item:hover{ background:var(--surface-2); }
.recent-ic{ width:26px; height:26px; border-radius:8px; background:var(--tealbg); color:var(--teal);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.recent-t{ flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-time{ font-size:10.5px; color:var(--muted); white-space:nowrap; }
/* KPI 卡格（工作台「我關心的數據」）：auto-fit，不是固定欄數（同 Rewatt） */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:22px; }

/* ── 💡 部門洞察（2026-10-04，Jony：「各部門都比照行政總務中心 各部門洞察」）────────
   版型照 `Rewatt_GA.html:663 renderInsight()`：狀態列 → KPI 卡格 → 需立即處理 → 可展開說明。
   渲染器是 `_insight.js`（6 個部門共用一份），**不要在個別頁面複製這些樣式**。
   ⚠️「需立即處理」刻意沿用上面的 `.insight` 結論卡，全站只有一種「先講結論」的長相。 */
.stbar{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:12px;
  border:1px solid var(--tealln); background:var(--tealbg); margin-bottom:16px; flex-wrap:wrap; }
.stbar.bad{ border-color:#f0d6d2; background:var(--redbg); }
.stbar .t{ font-size:13px; font-weight:800; color:var(--green); }
.stbar.bad .t{ color:var(--red); }
.stbar .m{ font-size:11px; color:var(--sec); margin-top:2px; }
.gcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-bottom:6px; }
.gc{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.gc.bad{ border-color:#f0d6d2; }
.gc-h{ display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.gc-h .ti{ font-size:13px; font-weight:700; }
.gc-v{ font-size:30px; font-weight:800; line-height:1; margin-bottom:8px; }
.gc-v small{ font-size:13px; font-weight:400; color:var(--muted); margin-left:5px; }
.gc.bad .gc-v{ color:var(--red); }
.gc-d{ font-size:11.5px; color:var(--sec); line-height:1.75; border-top:1px dashed var(--line); padding-top:8px; }
.gc-d b{ color:var(--ink); }
.gaps{ margin-top:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:0 16px; }
.gaps summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--sec); padding:13px 0; }
.gaps table{ width:100%; border-collapse:collapse; font-size:12px; margin-bottom:12px; }
.gaps td{ padding:8px 6px; border-top:1px solid var(--line); vertical-align:top; line-height:1.7; }
.gaps td:first-child{ white-space:nowrap; font-weight:700; }
.gaps td:nth-child(2){ color:var(--sec); }