/* ══════════════════════════════════════════════════════════
   2026-11-11　新樣式「便當盒」（erp_288）
   ══════════════════════════════════════════════════════════
   特助看過示範樣張後裁示：「這版設計很好看，可以全站都改版了。」
   樣張在設計畫布「昌岳 ERP 介面樣張」（第二版：CIS 紅黑為主）。

   長相：灰白底、白色大圓角卡片（沒有外框）、膠囊形按鈕與標籤、
        大數字配小說明、黑色側欄、品牌紅的主要按鈕與選取狀態。

   ★★ 做法：**這一份只蓋外觀，不動任何版面結構與模組程式。**
     styles.css 前面那兩千多行照舊；這裡放在最後面，把圓角、外框、
     間距、按鈕形狀換掉。要退回舊樣式，index.html 拿掉這一支的 <link> 即可。

   ★ 顏色的規矩（樣張上那張便條）：
     品牌紅（實心）＝主要按鈕、選取中、進度
     企業黑　　　　＝側欄、重點卡片、圖表
     湖水綠／黃／亮紅＝正常／警告／緊急（狀態色沿用 11/04 定案，不改）
     異常一定同時有「淡紅底＋文字」，不只靠顏色。

   ★ 列印不受影響：最下面 @media print 把外框與直角還回去。
   ══════════════════════════════════════════════════════════ */

:root{
  --radius:14px;          /* 原本 4px。小元件（欄位、小卡）用這個 */
  --radius-card:20px;     /* 卡片 */
  --ctl-h:38px;           /* 原本 34px。好按一點 */
  --ctl-h-sm:32px;
  --topbar-h:60px;
  --sidebar-bg:#141414;   /* 企業黑（原本 #1A1A1A） */
  --fill:#F0F0F0;         /* 次要按鈕、標籤的底 */
  --fill-2:#F7F7F7;       /* 卡片裡的小格 */
  --shadow-card:0 1px 2px rgba(20,20,20,.04);
}
html[data-theme="dark"]{
  --fill:#2A2A2C; --fill-2:#202022; --shadow-card:none;
}

/* ── 側欄 ───────────────────────────────────────────── */
.sidebar .brand{padding:18px 18px 14px}
.nav-group-head{border-top:0;padding:11px 16px;border-radius:12px;margin:0 8px;width:calc(100% - 16px)}
.nav-item{margin:1px 8px;width:calc(100% - 16px);border-radius:10px;padding:8px 12px 8px 37px}
.nav-item .badge{border-radius:999px}
.sidebar-foot{border-top-color:rgba(255,255,255,.08)}

/* ── 頁首列：跟頁面底色融在一起，標題放大、前面一條品牌紅 ── */
.topbar{background:var(--bg);border-bottom:0;padding:0 24px}
.topbar .page-title{
  font-size:22px;font-weight:900;line-height:1.2;
  border-left:6px solid var(--red);padding-left:12px;
}
.content{padding:8px 24px 32px}
.bell{border-radius:50%;width:40px;height:40px;display:grid;place-items:center;background:var(--surface);padding:0}
.bell:hover{background:var(--surface)}
.theme-btn{border-radius:50%}

/* ── 卡片：沒有外框的白色大圓角 ── */
.card{border:0;border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:clip}
.card-head{padding:16px 20px 12px;border-bottom:0}
.card-head h2{font-size:15px}
.card-body{padding:4px 20px 20px}
.card-head + .card-body.flush, .card-body.flush{padding:0}
.card > .card-body:first-child{padding-top:20px}
.card > .card-body.flush:first-child{padding-top:0}

/* ── 統計方塊：大數字、小說明 ── */
.stat{border:0;border-radius:var(--radius-card);padding:18px 20px;box-shadow:var(--shadow-card)}
.stat .k{font-size:13px;margin-bottom:6px}
.stat .v{font-size:34px;font-weight:900;letter-spacing:var(--ls-num);font-variant-numeric:tabular-nums}
.stat .s{font-size:12px;margin-top:6px}

/* ── 表格：表頭變淡，列與列之間用細線，滑過去整列變色 ── */
table.tbl th{background:transparent;border-bottom:1px solid var(--rule);padding:10px 14px;color:var(--gray)}
table.tbl td{padding:12px 14px;border-bottom:1px solid var(--rule)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl th:first-child, table.tbl td:first-child{padding-left:20px}
table.tbl th:last-child, table.tbl td:last-child{padding-right:20px}
table.tbl tbody tr:hover{background:var(--fill-2)}

/* ── 欄位 ── */
.input,.select,.textarea{border-radius:12px;border-color:var(--rule);padding:0 12px;background:var(--surface)}
.textarea{padding:10px 12px}
.input:focus,.select:focus,.textarea:focus{outline:3px solid color-mix(in srgb,var(--red) 22%,transparent);outline-offset:0;border-color:var(--red)}
.input.readonly,.select.readonly,.textarea.readonly,
.input:disabled,.select:disabled{background:var(--fill-2)}
.field label{font-size:12.5px;margin-bottom:6px}

/* ── 按鈕：膠囊形。主要＝品牌紅；一般＝淺灰底，沒有外框 ── */
.btn{border-radius:999px;border-color:transparent;background:var(--fill);padding:0 18px;font-weight:500}
.btn:hover{background:var(--rule)}
.btn-primary{background:var(--red);border-color:var(--red);font-weight:700}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-sm{padding:0 14px}
.btn-ghost{background:none}
.btn-ghost:hover{background:var(--fill)}
.btn-danger{background:var(--alert-bg);color:var(--alert);border-color:transparent}
.btn-danger:hover{background:var(--alert-bg);filter:brightness(.97)}
.btn-blocked{border-radius:999px}
.btn-google{border:1px solid var(--rule-2);background:var(--surface)}

/* ── 標籤：膠囊 ── */
.tag{border-radius:999px;padding:4px 10px;background:var(--fill);font-weight:500}

/* ── 訊息條：圓角，不要左邊那條粗線 ── */
.msg{border-radius:var(--radius);border-left:0 !important}
.toast{border-radius:999px;padding-left:18px;padding-right:18px}

/* ── 抽屜、對話框、登入卡 ── */
.drawer{border-radius:var(--radius-card) 0 0 var(--radius-card)}
.drawer-head{border-bottom:0;padding:18px 22px 10px}
.drawer-body{padding:10px 22px 22px}
.drawer-foot{border-top:0;padding:12px 22px 20px}
.login-card{border-radius:24px;border:0;box-shadow:0 10px 40px rgba(20,20,20,.08);overflow:hidden}

/* ── 篩選列 ── */
.filter-bar{border-radius:var(--radius)}

/* ── 空白與讀取 ── */
.empty,.loading{border-radius:var(--radius)}

/* ── 手機 ── */
@media (max-width:760px){
  .topbar{padding:0 14px}
  .topbar .page-title{font-size:19px;border-left-width:5px;padding-left:10px}
  .content{padding:6px 12px 28px}
  .card-head{padding:14px 16px 10px}
  .card-body{padding:4px 16px 16px}
  .stat .v{font-size:30px}
  table.tbl th:first-child, table.tbl td:first-child{padding-left:16px}
  table.tbl th:last-child, table.tbl td:last-child{padding-right:16px}
  .drawer{border-radius:var(--radius-card) var(--radius-card) 0 0}
}

/* ── 列印：白紙黑字、細框直角，跟改版前一樣 ── */
@media print{
  :root{--radius:4px;--radius-card:4px}
  .card,.stat{border:1px solid #C4C4C4;box-shadow:none}
  .card-head{border-bottom:1px solid #C4C4C4}
  table.tbl th{background:#F2F2F2;border-bottom:1px solid #C4C4C4}
  .btn,.tag,.input,.select,.textarea{border-radius:3px}
  .topbar .page-title{border-left:0;padding-left:0}
}

/* ── 側欄標誌：黑底上用 CIS 的反白版（白 C＋紅 y），不再墊白色方塊 ──
   ★ 標誌規範見 templates/brand/README.md：深色背景一律用反白版。 */
.sidebar .brand img{content:url(logo-reverse.png);width:42px;height:42px;padding:0;background:none;border-radius:0}
html[data-theme="dark"] .sidebar .brand img{background:none;padding:0;border-radius:0}

/* ── 抽屜底下的按鈕列往左讓一點：右下角浮著小岳的按鈕，原本會蓋到「儲存」 ── */
.drawer-foot{padding-right:88px}
@media (max-width:760px){ .drawer-foot{padding-right:22px;padding-bottom:84px} }

/* ══ 動態（erp_289）═════════════════════════════════════
   ★ 換頁後那一秒多，卡片一張接一張浮上來（html.fx-nav 由 fx.js 加上、時間到拿掉）。
     平常的重畫（篩選、搜尋、存檔後更新）不會跑，畫面才不會一直閃。
   ★ 作業系統設了「減少動態效果」的人，全部不跑。 */
@keyframes fx-rise{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes fx-pop{0%{opacity:0;transform:translateY(12px) scale(.94)}70%{transform:translateY(-2px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-title{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes drawer-in{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion: no-preference){
  html.fx-nav .content .stat,
  html.fx-nav .content .card,
  html.fx-nav .content .msg{animation:fx-rise .42s cubic-bezier(.2,.8,.2,1) both}
  html.fx-nav .content .stat:nth-child(2){animation-delay:.05s}
  html.fx-nav .content .stat:nth-child(3){animation-delay:.1s}
  html.fx-nav .content .stat:nth-child(4){animation-delay:.15s}
  html.fx-nav .content .stat:nth-child(5){animation-delay:.2s}
  html.fx-nav .content .stat:nth-child(n+6){animation-delay:.25s}
  html.fx-nav .content .card{animation-delay:.12s}
  html.fx-nav .content .card ~ .card{animation-delay:.2s}
  html.fx-nav .content .card ~ .card ~ .card{animation-delay:.28s}
  html.fx-nav .topbar .page-title{animation:fx-title .3s ease-out both}

  /* 按下去縮一點、放開彈回來 */
  .btn,.nav-item,.bell,.tag{transition:transform .12s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease}
  .btn:active:not(:disabled),.bell:active{transform:scale(.95)}
  .nav-item:active{transform:scale(.98)}
  .btn-primary:hover:not(:disabled){box-shadow:0 4px 14px color-mix(in srgb,var(--red) 30%,transparent)}

  /* 卡片可以點的那種，滑過去浮起來一點 */
  .stat{transition:transform .18s ease, box-shadow .18s ease}
  .stat:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,20,20,.07)}

  /* 抽屜滑進來、背景淡入；提示條彈出來 */
  .drawer{animation:drawer-in .28s cubic-bezier(.2,.8,.2,1)}
  .drawer-backdrop{animation:fx-fade .2s ease-out}
  .toast{animation:fx-pop .32s cubic-bezier(.2,.8,.2,1) both}

  /* 欄位聚焦的光暈慢慢亮起來 */
  .input,.select,.textarea{transition:border-color .15s ease, outline-color .15s ease, box-shadow .15s ease}
}
@media (max-width:760px){
  @keyframes drawer-in{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}

/* ══════════════════════════════════════════════════════════
   erp_290　便當盒版面（2026-11-11）
   ══════════════════════════════════════════════════════════
   特助看過 erp_288 後：「異動不大的感覺」→ 選了四樣全部做、全部頁面一次做：
     一、黑色重點卡片＋進度圈　二、清單改成一列一張卡
     三、手機底部浮動選單　　　四、首頁照樣張重排
   一～三是「零件」層級的改動，所以全站一起變；四是首頁自己的版面。
   ══════════════════════════════════════════════════════════ */

/* ── 一、每一頁的第一張統計卡＝黑色重點卡 ──
   ★ 已經被標成異常（淡紅底）或隱藏（數字是 0）的不搶。 */
.stats:not(.ph) > .stat:first-child:not(.m-zero),
.stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero){
  background:#141414 !important;color:#fff;
}
.stats:not(.ph) > .stat:first-child:not(.m-zero) .k, .stats:not(.ph) > .stat:first-child:not(.m-zero) .s,
.stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .k, .stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .s{color:#BDBDBD !important}
.stats:not(.ph) > .stat:first-child:not(.m-zero) .v:not(.alert):not(.warn),
.stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .v:not(.alert):not(.warn){color:#fff !important}
.stats:not(.ph) > .stat:first-child:not(.m-zero) .v.alert,
.stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .v.alert{color:#FF4B48 !important}
.stats:not(.ph) > .stat:first-child:not(.m-zero) .v.warn,
.stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .v.warn{color:#F7C04A !important}
.stats:not(.ph) > .stat:first-child:not(.m-zero) .s-ico,
.stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .s-ico{background:rgba(255,255,255,.14) !important;color:#fff !important}
/* 前面有進度圈卡的那一排，進度圈已經是黑色重點卡，後面的照常白色 */
.stats.has-ring > .stat{background:var(--surface) !important;color:var(--ink)}
.stats.has-ring > .stat .k, .stats.has-ring > .stat .s{color:var(--gray) !important}
.stats.has-ring > .stat .v:not(.alert):not(.warn){color:var(--ink) !important}
.stats.has-ring > .stat .s-ico{background:var(--alert-bg) !important;color:var(--red) !important}

/* ── 進度圈 ── */
.b-card{background:var(--surface);border-radius:var(--radius-card);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:var(--shadow-card);text-align:left;font:inherit;color:inherit;border:0}
.b-dark{background:#141414;color:#fff}
.b-ring{align-items:center;justify-content:center;gap:8px;text-align:center}
.b-ring.in-stats{flex:0 1 200px;padding:16px 20px}
.ring-track{stroke:#333}
.ring-bar{stroke:#FF4B48}
.ring-txt{fill:#fff;font-size:22px;font-weight:700;font-family:inherit}
.b-ring-l{font-size:13px;color:#D0D0D0}
.b-ring-s{font-size:12px;color:#A8A8A8}
@keyframes ring-in{from{stroke-dashoffset:var(--ring-c)}}
@media (prefers-reduced-motion: no-preference){ .ring-bar{animation:ring-in 1s cubic-bezier(.2,.8,.2,1) both} }

/* ── 四、首頁便當盒 ── */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.bento > .b-c12{grid-column:span 12}.bento > .b-c8{grid-column:span 8}.bento > .b-c5{grid-column:span 5}
.bento > .b-c4, .bento > .b-ring{grid-column:span 4}.bento > .b-c3{grid-column:span 3}
.b-h{display:flex;align-items:center;gap:10px}
.b-h b{font-size:15px}
.b-k{font-size:13px;color:var(--gray)}
.b-greet{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap;padding:24px}
.b-av{width:64px;height:64px;border-radius:50%;overflow:hidden;flex:none;background:var(--fill);display:grid;place-items:center;font-size:24px;font-weight:700}
.b-av img{width:100%;height:100%;object-fit:cover}
.b-greet-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:200px}
.b-greet h1{margin:0;font-size:28px;font-weight:900;line-height:1.25}
.b-pills{display:flex;gap:8px;flex-wrap:wrap}
.b-pills .tag{font-size:13px;padding:8px 14px}
.b-li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--fill-2);border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.b-li:hover{background:var(--fill)}
.b-li.bad{background:var(--alert-bg)}
.b-li-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.b-li-t b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-li-t span{font-size:12.5px;color:var(--gray)}
.b-li.bad .b-li-t span{color:var(--alert)}
.b-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.b-go{font-size:13px;font-weight:700;color:var(--alert);flex:none}
.b-ok{font-size:20px;color:var(--gray);flex:none;line-height:1}
.b-empty{padding:14px;border-radius:14px;background:var(--fill-2);color:var(--gray);font-size:13px}
.b-more{font-size:12.5px;color:var(--gray)}
.b-stack{display:flex;flex-direction:column;gap:var(--gap)}
.b-num{flex:1;justify-content:center;gap:6px;cursor:pointer}
.b-num:hover{box-shadow:0 6px 18px rgba(20,20,20,.07)}
.b-v{display:flex;align-items:baseline;gap:6px}
.b-v b{font-size:40px;font-weight:900;line-height:1;letter-spacing:var(--ls-num);font-variant-numeric:tabular-nums}
.b-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.b-act{height:60px;border-radius:16px;border:0;background:var(--fill);color:var(--ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.b-act:hover{background:var(--rule)}
.b-act.pri{background:var(--red);color:#fff}
.b-act.pri:hover{background:var(--red-dark)}
@media (max-width:1100px){
  .bento > .b-c8, .bento > .b-c5, .bento > .b-c12{grid-column:span 12}
  .bento > .b-c4, .bento > .b-ring, .bento > .b-c3{grid-column:span 6}
}
@media (max-width:760px){
  .bento > *{grid-column:span 12 !important}
  .bento > .b-ring{grid-column:span 12 !important}
  .b-stack{flex-direction:row}
  .b-greet{padding:18px}.b-greet h1{font-size:23px}.b-av{width:48px;height:48px;font-size:19px}
  .b-v b{font-size:32px}
  .b-acts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 二、清單：一列一張卡（桌機。手機原本就是一筆一張卡，不動）──
   ★ 用表格本身的間距做出「一列一張」，欄位對齊完全保留。 */
@media (min-width:821px){
  .card table.tbl{border-collapse:separate;border-spacing:0 6px;padding:0 12px 8px}
  .card table.tbl th{border-bottom:0;padding-top:4px;padding-bottom:2px}
  .card table.tbl td{background:var(--fill-2);border-bottom:0;transition:background-color .15s ease,color .15s ease}
  .card table.tbl td:first-child{border-radius:14px 0 0 14px;padding-left:16px}
  .card table.tbl td:last-child{border-radius:0 14px 14px 0;padding-right:16px}
  .card table.tbl td:only-child{border-radius:14px}
  .card table.tbl th:first-child{padding-left:16px}
  .card table.tbl tbody tr:hover{background:transparent}
  .card table.tbl tbody tr:hover td{background:var(--fill)}
  /* 可以點進去的那種：滑過去整列變黑（樣張「選到的那一列」）*/
  html:not(.in-touch) .card table.tbl tbody tr.clickable:hover td{background:#141414;color:#fff}
  html:not(.in-touch) .card table.tbl tbody tr.clickable:hover td *{color:inherit !important}
  html:not(.in-touch) .card table.tbl tbody tr.clickable:hover td .tag{background:rgba(255,255,255,.16) !important}
  .card table.tbl tr.row-alert td{background:var(--alert-bg)}
  .card table.tbl tr.row-warn td{background:var(--warn-bg)}
}

/* ── 三、手機底部浮動選單 ── */
.mnav{display:none}
@media (max-width:820px){
  .mnav{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:2px;
    position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:42;
    height:64px;padding:0 6px;border-radius:999px;background:#141414;
    box-shadow:0 10px 28px rgba(0,0,0,.28);
  }
  .mnav button{
    height:50px;border:0;border-radius:999px;background:transparent;color:#D0D0D0;
    font:inherit;font-size:13px;font-weight:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;
  }
  .mnav button svg{width:20px;height:20px}
  .mnav button.on{background:var(--red);color:#fff;font-weight:700}
  body.has-mnav .content{padding-bottom:104px}
  /* 浮動的東西往上讓：小岳、主要按鈕、提示條 */
  body.has-mnav .wsd-btn{bottom:calc(88px + env(safe-area-inset-bottom));right:14px}
  body.has-mnav .wsd-panel{bottom:calc(150px + env(safe-area-inset-bottom))}
  html body.has-mnav .btn.m-fab{bottom:calc(88px + env(safe-area-inset-bottom));right:78px}
  body.has-mnav .toast-wrap{bottom:calc(88px + env(safe-area-inset-bottom))}
  /* 開著側欄、抽屜、篩選面板、小岳時不顯示，免得疊在一起 */
  body.nav-open .mnav, body.m-sheet-open .mnav, body.wsd-open .mnav, body:has(.drawer-backdrop) .mnav{display:none}
}
@media print{ .mnav{display:none !important} }

/* ══════════════════════════════════════════════════════════
   erp_291～292　逐頁重排：每一頁的重點區（2026-11-11）
   ══════════════════════════════════════════════════════════
   erp_291 特助：「請逐頁重排」。哪一格當重點、進度圈算什麼，在 modules/layout.js 的 PAGES 表。
   erp_292 特助給三支參考影片：「取這三支可以應用在我們ERP的優點直接改全站」。取了五樣：
     一、顏色收斂：一頁只有一張黑卡；紅色只用在進度圈、要處理的圓點、本週那一根長條。
         （erp_291 的淡紅底、淡黃底整格拿掉，改成「圓形圖示＋數字」的白色小卡）
     二、每頁一張趨勢長條圖（有日期資料的頁面），長條從下面長出來
     三、換頁時整頁由模糊淡入
     四、深色模式：重點卡改成品牌紅漸層（第二支影片的樣子）
     五、圓形圖示配數字（第一支影片頁首那一排） */
html body .stats.ph{
  display:grid;grid-template-columns:300px repeat(auto-fit,minmax(190px,1fr));
  gap:12px;align-items:stretch;margin:0 0 20px;
}
/* 一般格子：白色小卡，左邊圓形圖示、右邊數字與名稱 */
html body .stats.ph > .stat{
  max-width:none;min-width:0;grid-column:auto;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:0;align-items:center;align-content:center;
  background:var(--surface) !important;color:var(--ink) !important;
  border-radius:22px !important;padding:12px 16px 12px 12px !important;min-height:68px;
}
html body .stats.ph > .stat:not(.ph-hero){max-width:360px}
html body .stats.ph > .stat.m-zero, html body .stats.ph > .stat.ph-in{display:none}
html body .stats.ph > .stat > *{grid-column:2}
html body .stats.ph > .stat .s-ico{
  grid-column:1;grid-row:1 / span 3;order:0;margin:0;width:44px;height:44px;border-radius:50%;
  background:var(--fill) !important;color:var(--ink) !important;
}
html body .stats.ph > .stat .v{order:1;font-size:24px;line-height:1.15;font-weight:900;letter-spacing:var(--ls-num);font-variant-numeric:tabular-nums;color:var(--ink) !important;overflow-wrap:anywhere}
html body .stats.ph > .stat.ph-long .v{font-size:20px}
html body .stats.ph > .stat.ph-xlong .v{font-size:16px}
html body .stats.ph > .stat .k{order:2;font-size:12.5px;margin:0;color:var(--gray) !important;opacity:1}
html body .stats.ph > .stat .s{order:3;display:block;font-size:11.5px;margin:0;color:var(--gray) !important;opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 要處理：圓點變實心紅、數字變紅。提醒：圓點變黑。整格不再填色 */
html body .stats.ph > .stat.ph-bad .s-ico{background:var(--red) !important;color:#fff !important}
html body .stats.ph > .stat.ph-bad .v{color:var(--alert) !important}
html body .stats.ph > .stat.ph-warn .s-ico{background:#141414 !important;color:#fff !important}
/* 黑色重點卡（一頁只有這一張黑的）*/
html body .stats.ph > .stat.ph-hero{
  grid-column:1;grid-row:1;background:#141414 !important;color:#fff !important;
  column-gap:18px;row-gap:2px;border-radius:24px !important;padding:22px !important;min-height:140px;max-width:none;
}
html body .stats.ph > .stat.ph-hero .k{color:#BDBDBD !important;font-size:14px;order:0}
html body .stats.ph > .stat.ph-hero .v{color:#fff !important;font-size:44px;line-height:1.05;order:1}
html body .stats.ph > .stat.ph-hero.ph-long .v{font-size:32px}
html body .stats.ph > .stat.ph-hero.ph-xlong .v{font-size:24px}
html body .stats.ph > .stat.ph-hero .v.alert{color:#FF4B48 !important}
html body .stats.ph > .stat.ph-hero .s{color:#A8A8A8 !important;order:2;white-space:normal}
html body .stats.ph > .stat.ph-hero .ph-sub{grid-column:1 / -1;white-space:nowrap;order:3;margin-top:12px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(255,75,72,.22);border-radius:999px;padding:4px 10px;justify-self:start}
html body .stats.ph > .stat.ph-hero .s-ico{grid-row:1 / span 3;width:56px;height:56px;background:rgba(255,255,255,.12) !important;color:#fff !important}
html body .stats.ph > .stat.ph-hero .s-ico svg{width:26px;height:26px}
html body .stats.ph > .stat.ph-hero .ph-ring{grid-column:1;grid-row:1 / span 3;display:flex;flex-direction:column;align-items:center;gap:6px}
html body .stats.ph > .stat.ph-hero .ph-ring ~ .s-ico{display:none}
.ph-ring-c{font-size:12px;color:#D0D0D0;white-space:nowrap}

/* 趨勢長條圖：重點卡右邊、小卡下面 */
html body .stats.ph > .ph-trend{
  grid-column:2 / -1;order:9;min-width:0;background:var(--surface);border-radius:24px;padding:16px 20px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.ph-trend-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ph-trend-h b{font-size:15px}
.ph-trend-t{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ph-trend-n{font-size:12px;color:var(--gray);margin-left:auto}
.ph-bars{display:flex;align-items:stretch;gap:8px;height:132px}
.ph-bar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.ph-bar-v{font-size:11.5px;line-height:14px;height:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ph-bar-b{flex:1;width:100%;max-width:34px;display:flex;align-items:flex-end;background:var(--fill-2);border-radius:10px;overflow:hidden}
.ph-bar-b i{display:block;width:100%;background:#141414;border-radius:10px;transform-origin:bottom}
.ph-bar.now .ph-bar-b i{background:var(--red)}
.ph-bar.now .ph-bar-v{color:var(--alert);font-weight:700}
.ph-bar-l{font-size:11px;line-height:14px;height:14px;color:var(--gray);white-space:nowrap}
.ph-bar:hover .ph-bar-b{background:var(--fill)}
@keyframes ph-grow{from{transform:scaleY(0)}}
@keyframes ph-page{from{opacity:0;filter:blur(8px)}}
@media (prefers-reduced-motion: no-preference){
  .ph-bar-b i{animation:ph-grow .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 35ms)}
  /* 換頁：整頁由模糊淡入（只在換頁那一下，fx.js 會加 fx-nav）*/
  html.fx-nav #content{animation:ph-page .34s ease-out both}
}

/* 深色模式：重點卡用品牌紅漸層，長條用淺灰 */
html[data-theme="dark"] body .stats.ph > .stat.ph-hero{background:linear-gradient(140deg,#E5372B 0%,#A8100E 100%) !important}
html[data-theme="dark"] body .stats.ph > .stat.ph-hero .k, html[data-theme="dark"] body .stats.ph > .stat.ph-hero .s{color:rgba(255,255,255,.82) !important}
html[data-theme="dark"] body .stats.ph > .stat.ph-hero .v.alert{color:#fff !important}
html[data-theme="dark"] body .stats.ph > .stat.ph-hero .ph-sub{background:rgba(0,0,0,.28)}
html[data-theme="dark"] .ph-hero .ring-track{stroke:rgba(255,255,255,.28)}
html[data-theme="dark"] .ph-hero .ring-bar{stroke:#fff}
html[data-theme="dark"] .ph-ring-c{color:rgba(255,255,255,.85)}
html[data-theme="dark"] body .stats.ph > .stat.ph-warn .s-ico{background:#F5F5F7 !important;color:#141414 !important}
html[data-theme="dark"] .ph-bar-b i{background:#8E8E93}
html[data-theme="dark"] .ph-bar.now .ph-bar-b i{background:var(--red)}
html[data-theme="dark"] body .card.ph-act{background:linear-gradient(140deg,#2C2C2E,#1C1C1E) !important}

@media (max-width:820px){
  html body .stats.ph{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px}
  html body .stats.ph > .stat{padding:10px 12px 10px 10px !important;border-radius:18px !important;min-height:60px;column-gap:10px}
  html body .stats.ph > .stat:not(.ph-hero){max-width:none}
  html body .stats.ph > .stat .s-ico{width:38px;height:38px}
  html body .stats.ph > .stat .v{font-size:20px}
  html body .stats.ph > .stat .s{display:none}
  html body .stats.ph > .stat.ph-hero{grid-column:1 / -1;min-height:0;padding:18px !important;border-radius:22px !important}
  html body .stats.ph > .stat.ph-hero .v{font-size:36px}
  html body .stats.ph > .stat.ph-hero .s{display:block}
  html body .stats.ph > .stat.m-wide{grid-column:auto}
  html body .stats.ph > .stat.ph-wide{grid-column:1 / -1}
  html body .stats.ph.m-one{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .stats.ph > .ph-trend{grid-column:1 / -1;padding:14px 14px 12px;border-radius:22px}
  .ph-bars{gap:4px;height:110px}
  .ph-trend-n{margin-left:0;width:100%}
  .ph-bar-v{font-size:10.5px}
}

/* 只有一顆主要按鈕的卡（我要報修、登記外出、我要請購…）→ 黑色行動卡 */
html body .card.ph-act{background:#141414 !important;color:#fff;border-radius:var(--radius-card)}
html body .card.ph-act > .card-body{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:22px}
html body .card.ph-act > .card-body > *:not(.btn):not(button){flex:1 1 260px;color:#D0D0D0 !important;font-size:14px;margin:0 !important}
html body .card.ph-act .btn-primary{min-height:56px !important;padding:0 28px;font-size:16px !important;border-radius:999px;flex:none}
@media (max-width:820px){
  html body .card.ph-act .btn-primary{width:100%}
}
@media print{
  html body .stats.ph > .stat.ph-hero, html body .card.ph-act{background:#fff !important;color:#000 !important}
  html body .stats.ph > .stat.ph-hero .v, html body .stats.ph > .stat.ph-hero .k{color:#000 !important}
  html body .stats.ph > .ph-trend{display:none}
}

/* ══ erp_293　硬體照片（公司車、量具、治具、其他設備；機台原本就有）══ */
.ph-thumb{display:inline-block;flex:none;border-radius:12px;overflow:hidden;background:var(--fill);vertical-align:middle;position:relative}
.ph-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph-thumb.nil::after{content:"";position:absolute;inset:30%;border-radius:4px;border:2px solid var(--rule-2);opacity:.7}
.ph-cell{display:flex;align-items:center;gap:12px;min-width:0}
.ph-cell > div{min-width:0}
.ph-photo{
  width:100%;max-width:340px;aspect-ratio:16 / 10;border:2px dashed var(--rule-2);border-radius:18px;background:var(--fill-2) center/cover no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--gray);font:inherit;padding:0;
}
.ph-photo:hover{border-color:var(--red);color:var(--red)}
.ph-photo-plus{font-size:34px;line-height:1;font-weight:300}
.ph-photo-cap{font-size:13px}
.ph-photo.has{border-style:solid;border-color:transparent;justify-content:flex-end;align-items:flex-end}
.ph-photo.has .ph-photo-plus{display:none}
.ph-photo.has .ph-photo-cap{background:rgba(20,20,20,.72);color:#fff;border-radius:999px;padding:5px 12px;margin:10px}
/* 公司車卡片 */
.car-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px;padding:12px}
.car-card{margin:0 !important;cursor:pointer;overflow:hidden;display:flex;flex-direction:column}
.car-pic{height:160px;background:var(--fill-2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.car-pic img{width:100%;height:100%;object-fit:cover}
.car-pic .car-nil{font-size:13px;color:var(--gray)}
.car-pic .car-plate{position:absolute;top:10px;left:10px;background:#141414;color:#fff;padding:4px 12px;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:0}
.car-add{
  min-height:260px;border:2px dashed var(--rule-2);border-radius:var(--radius-card);background:transparent;cursor:pointer;font:inherit;color:var(--gray);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.car-add:hover{border-color:var(--red);color:var(--red)}
.car-add b{font-size:44px;line-height:1;font-weight:300}
/* 訂餐：餐點的內容物說明 */
.menu-desc{width:100%;margin-top:6px}
.menu-chip-d{display:block;font-size:11.5px;color:var(--gray);max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ══════════════════════════════════════════════════════════
   erp_294　標題只有一套規矩（2026-11-11）
   ══════════════════════════════════════════════════════════
   特助截圖（品質總覽）：「很多頁面的標題都像這樣 字體大小、粗細 排列都亂七八糟的」。
   那張圖上同時有三個標題：頁首列「品質 / 品質總覽」(22px 特粗＋紅條)、頁面「品質總覽」(28px 粗)、
   「量具校驗逾期數」(24px)。原因：erp_288 把頁首列那一行放大加紅條，跟頁面自己的標題撞在一起；
   各處標題又是不同時期各寫各的大小。

   現在全站只有四級，往下一級就小一號：
     路徑　　頁首列那一行「品質 / 品質總覽」　13px 一般　灰色　（只是告訴你在哪，不是標題）
     頁標題　每頁只有一個　　　　　　　　　　26px 特粗　前面一條品牌紅
     卡片標題　　　　　　　　　　　　　　　　16px 粗
     小節標題（明細、表單裡的分段）　　　　　14px 粗　深灰
   點進總覽的某一項（例如量具校驗逾期數）時，那一項就是頁標題，上面一行小字是「‹ 回品質總覽」，
   原本的「品質總覽」大標不再重複出現。 */
/* 路徑 */
html body .topbar .page-title{font-size:13px;font-weight:400;line-height:1.4;color:var(--gray);border-left:0;padding-left:0;animation:none}
html body .topbar .page-title .pt-grp{color:var(--gray);font-weight:400}
/* 頁標題 */
html body .pg-head{display:flex;align-items:center;gap:10px;margin:4px 0 18px;min-height:34px}
html body .pg-head h1,
html body .dv-title h2,
html body .mg-bar h2{
  font-size:26px;font-weight:900;line-height:1.25;letter-spacing:0;color:var(--ink);margin:0;
  border-left:6px solid var(--red);padding-left:12px;
}
html body .pg-head .pg-sub{font-size:13px;color:var(--gray);margin:0}
html body .mg-bar{height:auto;min-height:34px}
/* 點進某一項：那一項才是頁標題，不重複原本的大標 */
html body .content:has(.dv-title h2) > .pg-head{display:none}
/* 首頁：問候那一行就是頁標題，不再另外放一個「我的首頁」 */
html body .content:has(> .bento) > .pg-head{display:none}
html body .dv-head{margin:4px 0 18px;align-items:flex-end}
html body .dv-title{gap:4px}
html body .dv-back{font-size:13px;font-weight:400;color:var(--gray);padding:0 0 0 18px;line-height:1.4}
html body .b-greet h1{font-size:26px;font-weight:900;line-height:1.25}
/* 卡片標題 */
html body .card-head h2,
html body .dv-ch h3,
html body .pt-sh h3,
html body .b-h b,
html body .ph-trend-h b{font-size:16px;font-weight:700;line-height:1.35;letter-spacing:0;color:var(--ink)}
html body .card-head .hint{font-size:13px;font-weight:400;color:var(--gray)}
/* 抽屜（明細、表單）標題＝卡片再大一號；裡面的分段＝小節標題 */
html body .drawer-head h2{font-size:20px;font-weight:900;line-height:1.3}
html body .drawer h3, html body .form-grid h3, html body .card-body > h3{font-size:14px;font-weight:700;line-height:1.4;color:var(--ink-2);letter-spacing:0}
@media (max-width:820px){
  html body .pg-head{margin:4px 0 12px}
  html body .pg-head h1, html body .dv-title h2, html body .mg-bar h2{font-size:22px;border-left-width:5px;padding-left:10px}
  html body .b-greet h1{font-size:22px}
  html body .drawer-head h2{font-size:18px}
}
@media print{
  html body .pg-head h1, html body .dv-title h2{border-left:0;padding-left:0}
}

/* ══════════════════════════════════════════════════════════
   erp_295　標題齊頭（2026-11-11）
   ══════════════════════════════════════════════════════════
   特助看過 erp_294：「標題還是都沒齊頭」。量出來的左邊位置（電腦版）：
     路徑的字 240、頁標題的字 258（被紅條推進去）、卡片標題的字 260 或 300（有圖示的被推進去）、
     提示框的字 256、總覽的期間切換鈕跟在標題後面（標題多長它就在哪）。五種位置。
   現在只有兩條線：
     外線＝卡片的左邊。路徑、頁標題、返回、分頁鈕、期間切換、統計格、卡片外框，全部貼這一條。
     內線＝卡片裡面的字。卡片標題、提示框、表格第一欄，全部貼這一條（外線往內 20）。
   做法：
     · 頁標題的紅條移到字的左邊「外面」（留白那一段），字本身回到外線。
     · 卡片標題前面的小圖示改放到標題「後面」——有沒有圖示，標題的字都在同一條線上。
     · 總覽的期間切換鈕換到標題下一行，貼外線；不再跟著標題長短跑。 */
html body .pg-head h1,
html body .dv-title h2,
html body .mg-bar h2{border-left:0;padding-left:0;position:relative}
html body .pg-head h1::before,
html body .dv-title h2::before,
html body .mg-bar h2::before{
  content:"";position:absolute;left:-16px;top:.14em;bottom:.14em;width:6px;border-radius:3px;background:var(--red);
}
html body .pg-head{gap:8px}
html body .pg-head .m-i{margin-left:0}
html body .dv-back{padding-left:0}
html body .dv-head{align-items:center;row-gap:12px}
html body .dv-title{flex:1 1 100%}
html body .dv-seg{margin-left:0}
html body .mg-bar{padding-left:0}
/* 卡片標題：字貼內線，圖示排在字後面 */
html body .card-head{padding-left:20px}
html body .card-head > h2{order:-3;margin-left:0}
html body .card-head > .h-ico{order:-2;margin:0 0 0 2px;width:26px;height:26px;border-radius:8px}
html body .card-head > .hint{order:-1}
html body .dv-card > .dv-ch{padding-left:0}
/* 提示框的字也貼內線 */
html body .content > .msg, html body .content > * > .msg, html body .content > .note{padding-left:20px}
@media (max-width:820px){
  html body .pg-head h1::before, html body .dv-title h2::before, html body .mg-bar h2::before{left:-9px;width:4px}
  html body .card-head{padding-left:16px}
  html body .content > .msg, html body .content > * > .msg, html body .content > .note{padding-left:16px}
}
@media print{
  html body .pg-head h1::before, html body .dv-title h2::before, html body .mg-bar h2::before{display:none}
}

/* ══════════════════════════════════════════════════════════
   erp_296　紅條收斂、防呆視窗、依裝置分開的互動（2026-11-11）
   ══════════════════════════════════════════════════════════
   特助（手機截圖）：「這樣感覺那條標題紅色線條很突出 還有需要製作防呆的彈跳視窗
   然後電腦用滑鼠 手機用手指 互動有差異 在不同版面的介面互動設計也要有所差異」。 */

/* ── 一、頁標題的紅條 ──
   手機：拿掉。手機沒有左邊留白，紅條只能凸到「‹ 返回」那一行的外面，變成整頁最搶眼的東西。
   電腦：留著但收細、收短（6 → 4，只有字的六成高）。它的工作只是「這是頁標題」，不是裝飾。 */
html body .pg-head h1::before,
html body .dv-title h2::before,
html body .mg-bar h2::before{left:-14px;width:4px;top:.24em;bottom:.24em;border-radius:2px}
@media (max-width:820px){
  html body .pg-head h1::before, html body .dv-title h2::before, html body .mg-bar h2::before{display:none}
}

/* ── 二、確認框（防呆彈跳視窗）── */
.cf-backdrop{z-index:1200}
.cf-box{border-radius:22px !important;overflow:hidden;animation:cf-in .2s cubic-bezier(.2,.8,.2,1)}
.cf-box .card-head{padding:22px 24px 6px !important;border:0}
.cf-box .card-head h2{font-size:19px !important;font-weight:900 !important}
.cf-box .card-body{padding:6px 24px 8px !important}
.cf-box .card-body > div:first-child{font-size:15px !important;line-height:1.7 !important;color:var(--ink-2)}
.cf-box .drawer-foot{padding:14px 24px 22px !important;border:0;gap:10px}
.cf-box .drawer-foot .btn{min-height:44px;padding:0 20px;font-weight:700}
.cf-box .btn-danger{background:var(--red) !important;color:#fff !important;border-color:var(--red) !important}
.cf-box .btn:focus-visible{outline:3px solid rgba(20,20,20,.35);outline-offset:2px}
@keyframes cf-in{from{opacity:0;transform:scale(.96)}}
.kbd-hint{display:none;font-size:12px;color:var(--gray);margin-right:auto;white-space:nowrap}

/* ── 三、滑鼠模式（電腦）── */
html.in-mouse .drawer-foot .kbd-hint{display:inline}
/* ── 四、手指模式 ──
   · 沒有「滑過去」的效果：手指點完，那個效果會黏在上面不走
   · 能按的東西至少 44 高（大拇指的寬度）
   · 按下去馬上有回饋（變暗一點）
   · 確認框從下面滑上來、按鈕直排整排寬，主要的那一顆在最下面（拇指最好按）
   · 輸入框的字至少 16px：小於 16 手機會自動把畫面放大 */
html.in-touch .card table.tbl tbody tr:hover td{background:var(--fill-2)}
html.in-touch .card table.tbl tbody tr.clickable:active td{background:var(--fill)}
html.in-touch .btn{min-height:44px}
html.in-touch .btn.btn-sm{min-height:40px;padding-left:14px;padding-right:14px}
html.in-touch .btn:active, html.in-touch .b-act:active, html.in-touch .b-li:active, html.in-touch .stat:active{filter:brightness(.93)}
html.in-touch .input, html.in-touch .select, html.in-touch .textarea{font-size:16px;min-height:44px}
html.in-touch .ph-bar:hover .ph-bar-b{background:var(--fill-2)}
html.in-touch .cf-backdrop{align-items:flex-end !important}
html.in-touch .cf-box{width:100% !important;max-width:560px;border-radius:24px 24px 0 0 !important;animation:cf-up .26s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom)}
html.in-touch .cf-box .drawer-foot{flex-direction:column-reverse;padding-right:24px !important}
html.in-touch .cf-box .drawer-foot .btn{width:100%;min-height:52px;font-size:16px}
@keyframes cf-up{from{transform:translateY(100%)}}
/* 手機的表單：標題上面一條「可以往下拉」的把手；下面的按鈕兩顆平分整排 */
@media (max-width:820px){
  html.in-touch .drawer-head{position:relative;padding-top:22px}
  html.in-touch .drawer-head::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--rule-2)}
  html.in-touch .drawer-foot > .btn{flex:1 1 0;min-height:50px;font-size:16px}
}
@media (prefers-reduced-motion: reduce){ .cf-box{animation:none !important} }

/* ══ erp_297　小岳對話框（手機）（2026-11-12）══
   特助（手機截圖）：「點小岳的時候 不要自動跳出鍵盤…還有不要遮到上方的訊息 然後小岳對話框被切到了要改」。
   · 被切到：以前高度用「整個螢幕 − 140」、又被底部選單往上推 150，頂端凸出畫面 10px。
     現在手機上對話框就是上下各留 8 的一整張，位置由 wanshida.js 跟著看得到的畫面算（鍵盤出來會自己變矮）。
   · 對話框開著時右下角那顆小岳按鈕先收起來（對話框右上角有 ✕），不然會疊在對話框上。 */
@media (max-width:820px){
  html body .wsd-panel{left:8px;right:8px;width:auto;top:8px;bottom:8px;height:auto;max-height:none;border-radius:22px}
  html body.wsd-open .wsd-btn{display:none}
  html body .wsd-head{padding:14px 14px 12px}
  html body .wsd-foot{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  html body .wsd-in{font-size:16px}
}

/* ══ erp_298（2026-11-12）══
   一、特助（手機首頁截圖）：「這邊黑一大塊 好奇怪」。
       首頁的進度圈卡在手機上是整排寬、圈又放中間，變成一塊 320 高的黑色。
       手機改成橫的一條：圈縮小放左邊，字放右邊，高度大約剩三分之一。請假頁那張同樣處理。
   二、小岳對話框：標題列多一顆「清除」；✕ 靠最右邊。 */
@media (max-width:820px){
  html body .bento > .b-ring, html body .stats > .b-ring{
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;justify-items:start;
    text-align:left;padding:14px 18px;border-radius:22px;
  }
  html body .b-ring > .ringsvg{grid-row:1 / span 2;width:76px;height:76px}
  html body .b-ring > .b-ring-l{font-size:15px;color:#fff;font-weight:700;align-self:end}
  html body .b-ring > .b-ring-s{font-size:13px;color:#BDBDBD;align-self:start}
  html body .b-ring > .b-ring-l:last-child{grid-row:1 / span 2;align-self:center}
}
.wsd-head .spacer{flex:1}
/* erp_299：標題列一律一行、不換行（erp_298 多塞一顆「清除」把字擠成兩行，已拿掉）*/
html body .wsd-head{flex-wrap:nowrap;gap:10px}
html body .wsd-head > *{flex:none;white-space:nowrap}
html body .wsd-head > strong{font-size:17px;font-weight:900}
html body .wsd-head > .wsd-sub{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
html body .wsd-head > .spacer{flex:1 1 0;min-width:0}
html body .wsd-head > .btn{min-width:40px}

/* ══════════════════════════════════════════════════════════
   erp_300（2026-11-12）特助手機截圖：
   「讚與倒讚的圖示很醜 改成單色icon 還有它單獨存在沒人看得懂這是拿來幹嘛的
     上方的導覽列顯示不好看 然後訊息頁面標題不見了」
   ══════════════════════════════════════════════════════════ */
/* 一、小岳的回饋：一句問句＋兩顆單色線條圖示的按鈕 */
.wsd-rate{flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--rule)}
/* erp_301（特助：「有幫助 沒幫助要並排」）：問句自己一行，兩顆按鈕在下一行並排、一樣寬 */
.wsd-rate-q{font-size:13px;color:var(--ink-2);flex:0 0 100%}
.wsd-rate > .wsd-vote{flex:1 1 0;justify-content:center;min-width:0;white-space:nowrap}
.wsd-vote{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;border-radius:999px;background:var(--fill);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.wsd-vote:hover{background:var(--rule)}
.wsd-vote svg{flex:none}

/* 二、手機上方導覽列：只留 選單／訊息／待辦；音效、深色、登出搬進側邊選單最下面（mnav.js）*/
.nav-tools{display:none}
@media (max-width:820px){
  html body .topbar{height:52px;flex-basis:52px;padding:0 8px 0 4px;gap:6px}
  html body .topbar #btnSound, html body .topbar #btnTheme, html body .topbar #btnLogout{display:none !important}
  html body .topbar .bell{width:40px;height:40px;background:transparent;box-shadow:none}
  html body .topbar .bell .bell-icon{width:22px;height:22px}
  html body .topbar .hamburger{width:44px;height:44px;font-size:20px}
  html body .topbar .m-env{font-size:10.5px;padding:2px 7px;border-radius:999px}
  .nav-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08)}
  .nav-tools button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;border:0;border-radius:14px;background:rgba(255,255,255,.07);color:#E0E0E0;font:inherit;font-size:12px;cursor:pointer}
  .nav-tools button:active{background:rgba(255,255,255,.16)}
  .nav-tools svg{width:20px;height:20px}
}

/* 三、訊息頁的標題：手機上被「同名標題不重複顯示」的規則誤藏了（這一頁沒有另外的頁標題，它就是頁標題）*/
html body .mx-lhead h2, html body .mx-lhead h2.m-dup{
  display:block !important;font-size:26px;font-weight:900;line-height:1.25;letter-spacing:0;color:var(--ink);margin:0 auto 0 0;
}
@media (max-width:820px){ html body .mx-lhead h2, html body .mx-lhead h2.m-dup{font-size:22px} }
html body .mx-dock .mx-lhead h2{font-size:18px}

/* ══════════════════════════════════════════════════════════
   erp_303～304　字距全站一致（2026-11-12）
   ══════════════════════════════════════════════════════════
   特助（登入頁密碼說明截圖）：「我真的很討厭看到字間距不一致的畫面 整站同樣毛病都要改正」。
   erp_303 先用一條「全部強制歸零」蓋過去；特助問「這是業界正常做法嗎」——不是，太粗。
   erp_304 改成正規做法（特助：「都照你的建議做」）：
     · 字距只有三種，寫成變數，全站只准用這三種：
         （不寫）　　　　中文內文、標籤、按鈕——用字型本身的字距
         --ls-num　−0.02em　很大的數字（統計數字、金額）略收緊
         --ls-caps　+0.06em　全大寫的英文小標略放寬
     · 原本散在各檔的 19 種字距已在源頭逐一改掉（styles.css、各模組），不再靠強制覆蓋。
     · 螢幕介面的說明文字不用兩端對齊（行短、中英數混排時瀏覽器會拉得不平均）。
     · 列印的單據與合約是印刷品，照印刷慣例：內文兩端對齊、標題字距照 CIS 定案，不受這裡影響。 */
:root{--ls-num:-.02em;--ls-caps:.06em}
@media screen{
  html body :is(.note, .msg, .help, .hint, p, li, td, th, label, .card-body, .drawer-body, .wsd-msg, .cf-box){
    text-align-last:auto;text-justify:auto;word-spacing:0;
  }
  html body :is(.note, .msg, .help, .hint, .field .help.just, .card-body p){text-align:left}
}

/* ══ erp_305　側邊選單最下面的「我」（2026-11-12）══
   特助：「設定下面多一個帶有個人頭像的選單 登出按鈕放這邊」。 */
.sidebar-foot.has-um{padding:8px 10px 10px;border-top:1px solid rgba(255,255,255,.08);position:relative}
.um-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:14px;background:transparent;color:#F2F2F2;font:inherit;text-align:left;cursor:pointer}
.um-row:hover, .um-row[aria-expanded="true"]{background:rgba(255,255,255,.08)}
.um-av{width:36px;height:36px;border-radius:50%;flex:none;overflow:hidden;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:15px;font-weight:700;color:#fff}
.um-av img{width:100%;height:100%;object-fit:cover;display:block}
.um-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.um-t b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-t span{font-size:12px;color:#A8A8A8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-chev{flex:none;color:#A8A8A8;font-size:14px;transition:transform .15s ease}
.um-row[aria-expanded="true"] .um-chev{transform:rotate(180deg)}
.um-pop{margin:0 0 6px;padding:6px;border-radius:16px;background:#262626;display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.um-item{height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:#EDEDED;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.um-item:hover{background:rgba(255,255,255,.1)}
.um-item.um-out{color:#FF6B68;border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 10px 10px;margin-top:4px}
/* 登出搬到這裡了，右上角那顆收起來；手機原本放在選單底部的三顆也由這裡取代 */
body.has-um .topbar #btnLogout{display:none !important}
body.has-um .nav-tools{display:none !important}
body.has-um .topbar .who{display:none}
html.in-touch .um-item{height:46px;font-size:15px}
@media print{ .um-row, .um-pop{display:none !important} }

/* ══ erp_306　個人助理首頁（.pa）＋選單搜尋與常用（.nf）══════════════ */
.pa{display:flex;flex-direction:column;gap:var(--gap);max-width:980px}
.pa-greet{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:4px 2px}
.pa-greet-t{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pa-greet h1{margin:0;font-size:26px;font-weight:900;line-height:1.25}
.pa-card{gap:8px}
.pa-card .b-h{margin-bottom:4px}
.pa-card .b-h b{font-size:16px;font-weight:700}
.pa-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--fill-2);border:0;font:inherit;color:inherit;text-align:left;width:100%;min-height:52px}
button.pa-row{cursor:pointer}
button.pa-row:hover{background:var(--fill)}
.pa-row.bad{background:var(--alert-bg)}
.pa-row.bad .pa-t span{color:var(--alert)}
.pa-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pa-t b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-t span{font-size:12.5px;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-ck{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--gray);background:var(--surface);cursor:pointer;padding:0;position:relative;transition:background-color .15s ease,border-color .15s ease}
.pa-ck:hover{border-color:var(--ok)}
.pa-ck::before{content:"";position:absolute;inset:-10px}   /* 手指好按：實際可按範圍比圓圈大 */
.pa-row.done .pa-ck{background:var(--ok);border-color:var(--ok)}
.pa-row.done .pa-ck::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.pa-row.done .pa-t b{text-decoration:line-through;color:var(--gray)}
.pa-row.done .pa-go{display:none}
.pa-go,.pa-undo{flex:none;border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--red);cursor:pointer;padding:8px 6px;border-radius:8px}
.pa-go:hover,.pa-undo:hover{background:var(--fill)}
.pa-time{flex:none;min-width:74px;font-size:13px;font-weight:700;color:var(--gray);font-variant-numeric:tabular-nums}
.pa-row.ev .pa-time{color:var(--ink)}
.pa-sub{font-size:13px;font-weight:700;color:var(--gray);margin:10px 2px 2px}
.pa-duty{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;border:1px solid var(--rule)}
.pa-duty + .pa-duty{margin-top:4px}
.pa-duty-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pa-duty-h b{font-size:15px}
.pa-duty-h > span:not(.tag){font-size:13px;color:var(--gray)}
.pa-note{padding:12px 14px;border-radius:12px;background:var(--fill-2)}
.pa-note span{font-size:12.5px;font-weight:700;color:var(--gray)}
.pa-note p{margin:4px 0 0;white-space:pre-wrap;line-height:1.6}
.pa-note.none p{color:var(--gray)}
.pa-away{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:14px 20px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card)}
.pa-away b{font-size:14px;flex:none}
.pa-away span{color:var(--gray);font-size:14px}
@media (max-width:720px){
  .pa-greet h1{font-size:22px}
  .pa-time{min-width:58px}
  .pa .b-acts{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.nf{padding:0 10px 8px;display:flex;flex-direction:column;gap:6px}
.nf-in{position:relative}
.nf-in input{width:100%;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:14px;padding:0 58px 0 12px;outline:none;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.nf-in input::placeholder{color:#8E8E8E}
.nf-in input:focus{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12)}
.nf-in input::-webkit-search-cancel-button{display:none}
.nf-k{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:inherit;font-size:10.5px;color:#9A9A9A;border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:1px 6px;pointer-events:none}
html.in-touch .nf-k{display:none}
.nf-res{display:none;flex-direction:column;gap:2px}
.nf.on .nf-res{display:flex}
.nf.on .nf-favs{display:none}
.nf.on ~ #nav{display:none}
.nf-hit,.nf-fav{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:var(--sidebar-ink);font:inherit;font-size:var(--fs-sm);text-align:left;padding:8px 10px;border-radius:10px;cursor:pointer}
.nf-hit:hover,.nf-hit.sel,.nf-fav:hover{background:var(--sidebar-hover);color:#fff}
.nf-fav.cur{color:#fff;font-weight:700}
.nf-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nf-g{flex:none;font-size:11.5px;color:#8E8E8E}
.nf-none,.nf-tip{font-size:12.5px;color:#8E8E8E;padding:6px 10px;line-height:1.5}
.nf-h{font-size:11.5px;font-weight:700;color:#8E8E8E;padding:6px 10px 2px}
.nf-favs{padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.nf-pin{flex:none;font-size:14px;line-height:1;color:#8E8E8E;padding:4px;border-radius:6px;opacity:0;cursor:pointer}
.nf-pin.on{opacity:1;color:#F2C14E}
.nf-fav:hover .nf-pin,.nav-item:hover .nf-pin,html.in-touch .nf-fav .nf-pin{opacity:1}
.nf-pin:hover{background:rgba(255,255,255,.14);color:#fff}
.nav-item .ni-name{flex:1;min-width:0}
.nav-item .nf-pin{margin:-4px -4px -4px 2px}
html.in-touch .nav-item .nf-pin:not(.on){display:none}   /* 手機選單不放一整排空星，到「最近開過」那裡釘 */

/* ══ erp_307　全站配色：只用「灰」與「紅」的深淺 ═══════════════════════
   2026-11-12 特助看樣張（mock/home-v2.html）：
   「灰跟紅色可以有很多色階跟不同透明度，他們是有很多辦法不搶戲的」→「完美，整站的配色統一改成這樣」。

   規則（之後新增畫面請照這四條）：
   一、只有兩個顏色：灰（由字色 --ink 調透明度，六階 --g1～--g6）、紅（品牌紅調透明度，五階 --r1～--r5）。
       不再使用第三種顏色——原本的湖水綠（正常）、黃／橘（警告）都改成灰與淡紅。
   二、面積越大顏色越淡。整張卡、整列只能用 g1～g2 或 r1～r2；橫槓、長條用 g4～g5 或 r4；
       深色（g6、r5、純字色）只給文字與很小的圖示。
   三、紅色只代表「要注意」（逾期、落後、未達標、危險動作）。「目前這一期」「選到的」用深一階的灰，不用紅。
   四、不用純黑大色塊。例外是導覽外框（左側選單、手機底部導覽列）與主要按鈕的品牌紅——
       那是框架與「唯一要按的那一顆」，不是內容。

   ★ 這一段放在檔案最後、專門覆蓋前面的顏色；版面、字級都沒動。要退回＝整段刪掉。 */
html:root, html[data-theme="dark"]{
  --g1:color-mix(in srgb, var(--ink) 4%, transparent);
  --g2:color-mix(in srgb, var(--ink) 8%, transparent);
  --g3:color-mix(in srgb, var(--ink) 14%, transparent);
  --g4:color-mix(in srgb, var(--ink) 34%, transparent);
  --g5:color-mix(in srgb, var(--ink) 58%, transparent);
  --g6:color-mix(in srgb, var(--ink) 78%, transparent);
  --r1:color-mix(in srgb, var(--red) 6%, transparent);
  --r2:color-mix(in srgb, var(--red) 13%, transparent);
  --r3:color-mix(in srgb, var(--red) 30%, transparent);
  --r4:color-mix(in srgb, var(--red) 62%, transparent);
  --r5:color-mix(in srgb, var(--red) 88%, var(--ink));
  /* 狀態色：正常＝灰、警告＝很淡的紅、緊急＝淡紅底深紅字。
     底色混的是卡片色（不是透明），疊在任何東西上都不會透出後面的內容。 */
  --ok:color-mix(in srgb, var(--ink) 78%, var(--surface));
  --ok-dot:color-mix(in srgb, var(--ink) 45%, var(--surface));
  --ok-bg:color-mix(in srgb, var(--ink) 7%, var(--surface));
  --warn:color-mix(in srgb, var(--red) 55%, var(--ink));
  --warn-dot:color-mix(in srgb, var(--red) 38%, var(--surface));
  --warn-bg:color-mix(in srgb, var(--red) 6%, var(--surface));
  --alert:var(--r5);
  --alert-dot:color-mix(in srgb, var(--red) 70%, var(--surface));
  --alert-bg:color-mix(in srgb, var(--red) 11%, var(--surface));
  --info-bg:color-mix(in srgb, var(--ink) 4%, var(--surface));
}
/* 圖表（charts.js 讀 --ch-*）：主數列由飽和紅改成淡紅、長條由純黑改成中灰。標題與數值的字色不動 */
html:root{
  --ch-red:#E06B69; --ch-redL:#F4CFCE; --ch-ink:#7C7C80; --ch-pie1:#D9605E; --ch-pieo:#A9A9AD;
}
html[data-theme="dark"]{
  --ch-red:#C24A47; --ch-redL:#5E2A29; --ch-ink:#9A9A9E; --ch-pie1:#C24A47; --ch-pieo:#5A5A5C;
}

/* ── 每頁最上面的重點卡：純黑（深色模式是紅漸層）→ 淡灰底、深色字。靠「大」當重點，不靠「黑」 ── */
html body .stats.ph > .stat.ph-hero,
html[data-theme="dark"] body .stats.ph > .stat.ph-hero,
html body .stats:not(.ph) > .stat:first-child:not(.m-zero),
html body .stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero),
html body .b-dark,
html body .card.ph-act,
html[data-theme="dark"] body .card.ph-act{
  background:color-mix(in srgb, var(--ink) 7%, var(--surface)) !important;color:var(--ink) !important;
}
html body .stats.ph > .stat.ph-hero .k, html body .stats.ph > .stat.ph-hero .s,
html[data-theme="dark"] body .stats.ph > .stat.ph-hero .k, html[data-theme="dark"] body .stats.ph > .stat.ph-hero .s,
html body .stats:not(.ph) > .stat:first-child:not(.m-zero) .k, html body .stats:not(.ph) > .stat:first-child:not(.m-zero) .s,
html body .stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .k, html body .stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .s,
html body .ph-ring-c, html[data-theme="dark"] body .ph-ring-c,
html body .b-ring > .b-ring-s{color:var(--gray) !important}
html body .stats.ph > .stat.ph-hero .v,
html body .stats:not(.ph) > .stat:first-child:not(.m-zero) .v:not(.alert):not(.warn),
html body .stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .v:not(.alert):not(.warn),
html body .b-ring > .b-ring-l, html body .b-dark b{color:var(--ink) !important}
html body .stats.ph > .stat.ph-hero .v.alert,
html[data-theme="dark"] body .stats.ph > .stat.ph-hero .v.alert,
html body .stats:not(.ph) > .stat:first-child:not(.m-zero) .v.alert,
html body .stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .v.alert{color:var(--r5) !important}
html body .stats:not(.ph) > .stat:first-child:not(.m-zero) .v.warn,
html body .stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .v.warn{color:var(--warn) !important}
html body .stats.ph > .stat.ph-hero .ph-sub,
html[data-theme="dark"] body .stats.ph > .stat.ph-hero .ph-sub{background:var(--r2);color:var(--r5)}
html body .stats.ph > .stat.ph-hero .s-ico,
html body .stats:not(.ph) > .stat:first-child:not(.m-zero) .s-ico,
html body .stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero) .s-ico{background:var(--g2) !important;color:var(--g6) !important}
/* 進度圈：軌道淡灰、進度中灰（原本是黑底上的亮紅） */
html body .ring-track, html[data-theme="dark"] body .ph-hero .ring-track{stroke:var(--g3)}
html body .ring-bar, html[data-theme="dark"] body .ph-hero .ring-bar{stroke:var(--g5)}
html body .stats.ph > .stat.ph-bad .ring-bar, html body .ph-bad .ring-bar{stroke:var(--r4)}
html body .ring-txt{fill:var(--ink) !important}
/* 小統計卡的圓形圖示：要處理＝淡紅底深紅字（原本實心紅）；提醒＝灰底（原本實心黑） */
html body .stats.ph > .stat.ph-bad .s-ico{background:var(--r2) !important;color:var(--r5) !important}
html body .stats.ph > .stat.ph-warn .s-ico,
html[data-theme="dark"] body .stats.ph > .stat.ph-warn .s-ico{background:var(--g3) !important;color:var(--ink) !important}
html body .stats.has-ring > .stat .s-ico{background:var(--g2) !important;color:var(--g6) !important}
/* 行動卡裡的說明文字 */
html body .card.ph-act > .card-body > *:not(.btn):not(button){color:var(--ink-2) !important}
/* 趨勢長條：純黑→中灰；「目前這一期」由紅改成深灰（紅只留給要注意的事） */
html body .ph-bar-b{background:var(--g1)}
html body .ph-bar-b i, html[data-theme="dark"] body .ph-bar-b i{background:var(--g4)}
html body .ph-bar.now .ph-bar-b i, html[data-theme="dark"] body .ph-bar.now .ph-bar-b i{background:var(--g6)}
html body .ph-bar.now .ph-bar-v{color:var(--ink)}
/* 表格：滑過可點的那一列由整列變黑改成淡灰 */
@media (min-width:821px){
  html:not(.in-touch) body .card table.tbl tbody tr.clickable:hover td{background:color-mix(in srgb, var(--ink) 7%, var(--surface));color:var(--ink)}
  html:not(.in-touch) body .card table.tbl tbody tr.clickable:hover td .tag{background:var(--g2) !important}
}
/* 訊息框左邊那條粗線放淡 */
html body .msg-ok{border-left-color:var(--g4)}
html body .msg-warn{border-left-color:var(--r3)}
/* 完成的提示（原本湖水綠底）→ 深灰底白字 */
html body .toast.ok{background:color-mix(in srgb, var(--ink) 82%, var(--surface));color:var(--surface)}
/* 標題左邊的紅色小直條放淡 */
html body .b-dot{background:var(--r4)}
/* 首頁勾選圈 */
html body .pa-ck{border-color:var(--g4)}
html body .pa-row.done .pa-ck{background:var(--g5);border-color:transparent}
html body .pa-row.bad .pa-ck{border-color:var(--r3)}
html body .pa-go, html body .pa-undo{color:var(--r5)}
html body .pa-duty{border-color:var(--g2)}
html body .pg-head h1::before, html body .dv-title h2::before, html body .mg-bar h2::before{background:var(--r4)}

/* ══ erp_308　主頁「個人／部門」與目標達成率（.hv-*）═══════════════════
   樣張：mock/home-v2.html（特助 11/12 確認排法與配色）。顏色全部取自 erp_307 的灰階與紅階。 */
.hv{max-width:980px}
.hv-top{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--gap)}
.hv-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hv-row h1{margin:0;font-size:26px;font-weight:900;line-height:1.25;flex:1;min-width:0}
.hv-row .b-pills{margin-left:auto}
.hv-when{font-size:13px;color:var(--gray)}
.hv-sg{display:inline-flex;background:var(--g2);border-radius:12px;padding:3px;gap:2px;flex:none}
.hv-sg button{border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--ink-2);padding:0 18px;border-radius:9px;cursor:pointer;min-height:38px}
.hv-sg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hv-sg.big button{font-size:15px;padding:0 26px;min-height:42px}
.hv-col{display:flex;flex-direction:column;gap:var(--gap)}
.hv-card{gap:10px}
.hv-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.hv-h b{font-size:16px;font-weight:700}
.hv-h small{font-size:12.5px;color:var(--gray)}
.hv-sel{margin-left:auto;width:auto;min-width:120px}
.hv-hint{font-size:12.5px;color:var(--gray);line-height:1.6}
.hv-goal{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--g2)}
.hv-h + .hv-goal{border-top:0;padding-top:2px}
.hv-goal-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hv-goal-h b{font-size:14.5px;font-weight:700}
.hv-goal-h > span:not(.hv-st){font-size:13px;color:var(--gray)}
.hv-goal-h em{margin-left:auto;font-style:normal;font-weight:700;font-size:20px;color:var(--g6);font-variant-numeric:tabular-nums}
.hv-bar{height:8px;border-radius:999px;background:var(--g2);overflow:hidden;min-width:0}
.hv-bar u{display:block;height:100%;border-radius:999px;background:var(--g5)}
.hv-bar.lo{background:var(--r1)}
.hv-bar.lo u{background:var(--r4)}
.hv-st{font-size:12.5px;font-weight:500;padding:2px 8px;border-radius:999px;white-space:nowrap}
.hv-st.ok{background:var(--g2);color:var(--g6)}
.hv-st.lo{background:var(--r2);color:var(--r5)}
.hv-st.mid{background:var(--g1);color:var(--g5)}
.hv-yr{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:150px;padding-top:8px}
.hv-yr > div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:11.5px;color:var(--gray)}
.hv-yr u{display:block;width:100%;max-width:34px;border-radius:6px 6px 2px 2px;background:var(--g4)}
.hv-yr u.cur{background:var(--g5)}
.hv-yr u.lo{background:var(--r4)}
.hv-yr u.na{background:var(--g2)}
.hv-yr b{font-size:11px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;min-height:14px}
.hv-wk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.hv-wk > div{background:var(--g1);border-radius:14px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:110px;min-width:0}
.hv-wk > div.now{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--g4)}
.hv-wk b{font-size:13px}
.hv-wk span:not(.hv-st){font-size:12.5px;color:var(--ink-2);line-height:1.5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-wk span.none{color:var(--gray)}
.hv-ps{border-top:1px solid var(--g2);padding:14px 0;display:flex;flex-direction:column;gap:8px}
.hv-h + .hv-ps{border-top:0;padding-top:4px}
.hv-ps-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hv-av{width:36px;height:36px;border-radius:50%;background:var(--g2);color:var(--g6);display:grid;place-items:center;font-weight:700;flex:none}
.hv-ps-n{display:flex;flex-direction:column;flex:1;min-width:140px}
.hv-ps-n b{font-size:15px}
.hv-ps-n small{font-size:12.5px;color:var(--gray)}
.hv-ps-h em{font-style:normal;font-weight:700;font-size:20px;color:var(--g6);font-variant-numeric:tabular-nums;min-width:56px;text-align:right}
.hv-it{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 52px;gap:10px;align-items:center;font-size:13.5px;border:0;background:none;font-family:inherit;color:inherit;text-align:left;padding:2px 0;width:100%}
.hv-it.ed{cursor:pointer;border-radius:8px;padding:6px 8px;margin:0 -8px;width:calc(100% + 16px)}
.hv-it.ed:hover{background:var(--g1)}
.hv-it > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-it small{color:var(--gray)}
.hv-it em{font-style:normal;font-weight:500;color:var(--g6);text-align:right;font-variant-numeric:tabular-nums}
.hv-dp{display:grid;grid-template-columns:170px 1fr 56px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--g2)}
.hv-h + .hv-dp{border-top:0}
.hv-dp b{font-size:14px}
.hv-dp small{display:block;font-size:12px;color:var(--gray);font-weight:500}
.hv-dp em{font-style:normal;font-weight:700;color:var(--g6);text-align:right;font-variant-numeric:tabular-nums}
.hv-dp.me{background:var(--g1);border-radius:12px;padding:10px 12px;margin:0 -12px;border-top:0}
@media (max-width:820px){
  .hv-row h1{font-size:22px;flex-basis:100%}
  .hv-sg.big{display:flex;width:100%}
  .hv-sg.big button{flex:1}
  .hv-wk{grid-template-columns:1fr}
  .hv-wk > div{min-height:0}
  .hv-dp{grid-template-columns:112px 1fr 48px}
  .hv-it{grid-template-columns:1fr 70px 46px}
  .hv-row .b-pills{margin-left:0}
}

/* ══ erp_309　導覽外框也照 erp_307 的規則（2026-11-12 特助：「請你以專業視覺形象設計師幫我決定」）══
   決定與理由：
   一、左側選單由深黑改成跟卡片同色（亮色模式＝白，深色模式＝深灰）。
       理由：規則二「面積越大顏色越淡」。選單是畫面上最大的一塊固定色塊，內容都放淡了它還是黑的，
       視線會一直被拉到左邊；而且黑底上的紅色「目前頁面」是全畫面對比最強的東西，比任何待處理事項都搶眼。
   二、「目前在哪一頁」用淡灰底＋粗體字，不用實心紅。理由：規則三，紅色只留給要注意的事（未讀、逾期的圓點）。
   三、手機底部導覽列同理：黑色膠囊→卡片色＋陰影；目前頁籤用淡灰底。
   四、主要按鈕（儲存、送出）維持品牌紅實心——一個畫面只有一顆、面積小，它應該是最清楚的東西，
       也是品牌紅在介面上唯一的大聲出場。首頁快速動作那一排沒有「唯一的主要動作」，所以「請假」不再特別標紅。
   五、列印的對外文件（報價單、合約等）不套用這套：紙上的淡色與透明度印出來會糊、傳真影印會消失，
       那是另一套 CIS 規範。
   要退回＝整段刪掉。 */
html:root, html[data-theme="dark"]{
  --sidebar-bg:var(--surface);
  --sidebar-ink:var(--ink-2);
  --sidebar-hover:var(--g2);
}
html body .sidebar{border-right:1px solid var(--g2)}
html body .sidebar .brand .bt{color:var(--ink)}
html body .sidebar .brand .bs{color:var(--gray)}
html:not([data-theme="dark"]) body .sidebar .brand img{content:url(logo.png)}
html body .nav-group-head{color:var(--ink-2);border-top-color:transparent}
html body .nav-group-head:hover{color:var(--ink);background:var(--g1)}
html body .nav-group-head.open{color:var(--ink);font-weight:700}
html body .nav-item:hover{background:var(--g2);color:var(--ink)}
html body .nav-item[aria-current="page"]{background:var(--g2);color:var(--ink);font-weight:700}
html body .nav-item .badge.dot{background:var(--g4);color:var(--surface)}
html body .nav-item .badge.dot.alert{background:var(--red);color:#fff}
html body .nav-item[aria-current="page"] .badge{background:var(--g4)}
html body .nav-item[aria-current="page"] .badge.dot.alert{background:var(--red)}
html body .sidebar-foot, html body .sidebar-foot.has-um{border-top-color:var(--g2);color:var(--gray)}
html body #nav:hover, html body .sidebar:hover{scrollbar-color:var(--g3) transparent}
html body #nav:hover::-webkit-scrollbar-thumb, html body .sidebar:hover::-webkit-scrollbar-thumb{background:var(--g3)}
html body #nav::-webkit-scrollbar-thumb:hover, html body .sidebar::-webkit-scrollbar-thumb:hover{background:var(--g4)}
/* 個人選單 */
html body .um-row{color:var(--ink)}
html body .um-row:hover, html body .um-row[aria-expanded="true"]{background:var(--g2)}
html body .um-av{background:var(--g2);color:var(--g6)}
html body .um-t span, html body .um-chev{color:var(--gray)}
html body .um-pop{background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.14), inset 0 0 0 1px var(--g2)}
html body .um-item{color:var(--ink)}
html body .um-item:hover{background:var(--g2)}
html body .um-item.um-out{color:var(--r5);border-top-color:var(--g2)}
html body .nav-tools{border-top-color:var(--g2)}
html body .nav-tools button{background:var(--g1);color:var(--ink-2)}
html body .nav-tools button:active{background:var(--g3)}
/* 選單搜尋與常用 */
html body .nf-in input{border-color:var(--g3);background:var(--g1);color:var(--ink)}
html body .nf-in input::placeholder{color:var(--gray)}
html body .nf-in input:focus{border-color:var(--g4);background:var(--surface)}
html body .nf-k{color:var(--gray);border-color:var(--g3)}
html body .nf-hit, html body .nf-fav{color:var(--ink-2)}
html body .nf-hit:hover, html body .nf-hit.sel, html body .nf-fav:hover{background:var(--g2);color:var(--ink)}
html body .nf-fav.cur{color:var(--ink)}
html body .nf-g, html body .nf-none, html body .nf-tip, html body .nf-h{color:var(--gray)}
html body .nf-favs{border-bottom-color:var(--g2)}
html body .nf-pin{color:var(--g4)}
html body .nf-pin.on{color:var(--g6)}
html body .nf-pin:hover{background:var(--g3);color:var(--ink)}
/* 手機底部導覽列 */
@media (max-width:820px){
  html body .mnav{background:var(--surface);box-shadow:0 6px 24px rgba(0,0,0,.16), inset 0 0 0 1px var(--g2)}
  html body .mnav button{color:var(--ink-2)}
  html body .mnav button.on{background:var(--g2);color:var(--ink);font-weight:700}
}
/* 首頁快速動作：不再有一顆特別紅的 */
html body .b-act.pri{background:var(--fill);color:var(--ink)}
html body .b-act.pri:hover{background:var(--rule)}

/* ══ erp_310　主頁用滿寬度（特助截圖：右邊空一大塊）══
   原因：erp_306/308 把主頁限寬 980px，寬螢幕右邊就空著。改成不限寬；寬螢幕「日」排兩欄。 */
html body .pa, html body .hv{max-width:none}
.pa-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);align-items:start}
.pa-col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
@media (min-width:1180px){
  .pa-cols{grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr)}
  .pa-col + .pa-col .b-acts{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ══ erp_311　重點卡不再用淡灰底（特助截圖：「特休已休的卡片顏色快跟背景融合了」）══
   原因：erp_307 把黑色重點卡改成「字色 7% 的淡灰」，但頁面背景本身就是很淺的灰，兩個幾乎同色。
   改法：重點卡跟其他卡一樣用卡片色（白），外加一圈細灰框標示「這張是主角」；重點仍靠字大與進度圈。
   行動卡（我要報修等）同理。 */
html body .stats.ph > .stat.ph-hero,
html[data-theme="dark"] body .stats.ph > .stat.ph-hero,
html body .stats:not(.ph) > .stat:first-child:not(.m-zero),
html body .stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero),
html body .b-dark,
html body .card.ph-act,
html[data-theme="dark"] body .card.ph-act{
  background:var(--surface) !important;
  box-shadow:inset 0 0 0 1.5px var(--g4), var(--shadow-card, 0 1px 2px rgba(0,0,0,.05)) !important;
}

/* ══ erp_312　特助手機截圖的五件事 ══════════════════════════════════
   一、通知列文字過密 → 每筆加大間距、標題最多兩行、拿掉重複的「待處理」標籤。
   二、卡片上的框框與圖示多餘 → 重點卡的細灰框拿掉（erp_311 加的）；統計卡與卡片標題旁的小圖示全站拿掉。
   三、手機上卡片文字貼邊、錯位 → 進度圈卡在手機佔整排；統計卡內距加大。
   四、標題與紅色按鈕之間空一大塊 → 按鈕搬到標題那一排右邊（modules/mobile.js headActs）。
   五、首頁同時有「我的首頁」標題與問候語 → 首頁不顯示頁面標題。 */
.bl-row{display:flex;width:100%;gap:12px;align-items:center;padding:14px 18px;border:0;border-bottom:1px solid var(--g2);background:none;cursor:pointer;font:inherit;color:inherit;text-align:left}
.bl-row:last-child{border-bottom:0}
.bl-row:hover{background:var(--g1)}
.bl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.bl-t b{font-size:15px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.bl-t span{font-size:12.5px;color:var(--gray);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-late{flex:none;font-size:12.5px;font-weight:500;color:var(--r5);background:var(--r2);border-radius:999px;padding:3px 10px;white-space:nowrap}

/* 二、框與圖示 */
html body .stats.ph > .stat.ph-hero,
html[data-theme="dark"] body .stats.ph > .stat.ph-hero,
html body .stats:not(.ph) > .stat:first-child:not(.m-zero),
html body .stats:not(.ph) > .stat.m-zero:first-child + .stat:not(.m-zero),
html body .b-dark,
html body .card.ph-act,
html[data-theme="dark"] body .card.ph-act{box-shadow:var(--shadow-card, 0 1px 2px rgba(0,0,0,.05)) !important}
html body .stats .s-ico, html body .h-ico{display:none !important}
html body .stats.ph > .stat:not(:has(.ph-ring)){grid-template-columns:minmax(0,1fr) !important}
html body .stats.ph > .stat:not(:has(.ph-ring)) > *{grid-column:1 !important}
html body .stats.ph > .stat:not(.ph-hero){padding:16px 18px !important}

/* 四、標題列右邊的按鈕 */
html body .pg-head{flex-wrap:wrap}
html body .pg-head > .pg-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
html body .my-head:not(:has(.btn-row)){display:none}

/* 五、首頁不重複標題 */
html body .content:has(> .hv-top) > .pg-head, html body .content:has(> .pa) > .pg-head{display:none}

@media (max-width:820px){
  /* 三、手機：進度圈卡佔整排，字才不會被擠到貼邊 */
  html body .stats > .b-ring, html body .bento > .b-ring{flex:1 1 100% !important;max-width:none !important;grid-column:1 / -1 !important;padding:18px 20px !important}
  html body .stats.ph > .stat:not(.ph-hero){padding:14px 16px !important}
  html body .stats:not(.ph) > .stat{padding:16px 18px}
  .bl-row{padding:16px 18px}
  .bl-t b{font-size:16px}
  .bl-t span{font-size:13px}
}

/* ══ erp_313　手機底部導覽列拿掉；選單不再列「最近開過」══
   手機選單裡每一頁右邊顯示淡淡的 ☆，點了就釘到最上面的「常用」（原本手機只能從「最近開過」釘）。 */
html body .mnav{display:none !important}
html.in-touch body .nav-item .nf-pin:not(.on){display:inline-block;opacity:1;color:var(--g3);padding:8px}

/* ══ erp_314　底色三階分開（特助：「很多頁面按鈕或卡片顏色跟背景融合了」）══
   根本原因：頁面背景 #F2F2F7、按鈕與標籤的底 --fill #F0F0F0、小格的底 --fill-2 #F7F7F7、
   --surface-2 #F2F2F4 四個顏色幾乎一樣。這些灰放在白色卡片裡看得出來，
   但只要直接放在頁面背景上（標題列的按鈕、頁面上的標籤、篩選鈕…）就消失了。
   改法：不逐頁補，直接把這幾階拉開——任何一階放在「白卡片」或「頁面背景」上都分得出來。
     頁面背景 #F5F5F7　＜　小格 #ECECF0　＜　按鈕／標籤 #E6E6EB　＜　滑過 #D9D9DF
   深色模式的小格（#202022）跟卡片（#1C1C1E）也太近，一併拉開。
   畫面巡檢（modules/ui-check.js）加了「融入背景」檢查，之後每次巡檢都會自動抓這種問題。 */
@media screen{
  html:root:not([data-theme="dark"]){
    --bg:#F5F5F7; --head-bg:#F5F5F7;
    --fill-2:#ECECF0; --surface-2:#ECECF0;
    --fill:#E6E6EB;
    --ok-bg:#E6E6EB; --info-bg:#ECECF0;
    --warn-bg:color-mix(in srgb, var(--red) 9%, var(--surface));
    --alert-bg:color-mix(in srgb, var(--red) 14%, var(--surface));
  }
  html[data-theme="dark"]{ --fill-2:#27272A; --ok-bg:#2E2E31; --info-bg:#27272A; }
  html body .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):hover{background:#D9D9DF}
  html[data-theme="dark"] body .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):hover{background:#3A3A3C}
  /* 重點卡、進度圈卡：白卡放在頁面背景上，補一點陰影讓邊界清楚 */
  html:root:not([data-theme="dark"]){ --shadow-card:0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.03); }
}

/* ══ erp_315　逐頁檢查抓到的「融入背景」（2026-11-12，110 頁、電腦寬＋手機寬自動掃過）══
   掃描結果只有四種情況，每一種都出現在很多頁：
   一、表格列裡的狀態標籤（63 頁次）：標籤的灰跟那一列的灰幾乎一樣。
   二、白卡片上的輸入框與下拉選單（33 頁次）：白底放在白卡片上，沒有框，看不出哪裡可以填。
   三、表格列裡的小按鈕（8 頁次）：同一。
   四、表格列裡「還沒有照片」的佔位格。
   改法：有底色的列裡面的標籤、小按鈕、佔位格一律改成卡片色（白）；輸入框與下拉選單加一圈細框。 */
@media screen{
  html body table.tbl td .tag,
  html body table.tbl td .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost),
  html body table.tbl td .ph-thumb,
  html body .pa-row .tag, html body .b-li .tag, html body .hv-wk .tag,
  html body .m-card .tag, html body .m-row .tag{background:var(--surface)}
  html body table.tbl td .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--g4)}
  html body .input, html body .select, html body .textarea{box-shadow:inset 0 0 0 1px var(--rule-2)}
  html body .input:focus, html body .select:focus, html body .textarea:focus{box-shadow:inset 0 0 0 1.5px var(--g5)}
  html body .nf-in input{box-shadow:none}
}

/* ══ erp_316　部門總覽：標題下的空白、圖表配色 ══
   一、「全部指標 ›」搬到標題列（modules/mobile.js headActs）後，標題區不再留空行。
   二、部門總覽有自己一套顏色（--v-*：湖水綠＝達標、黃＝接近、橘紅＝未達、藍色系列），
       erp_307 的全站配色沒有涵蓋到。照同一條規則改：達標＝中灰、接近＝淡紅、未達＝紅；數列用三階灰。 */
html body .dv-head{row-gap:0;margin-top:0}
html body .dv-head > .dv-sp{display:none}
@media screen{
  html:root:not([data-theme="dark"]){
    --v-red:#D9605E; --v-track:#E6E6EB; --v-hover:#ECECF0; --v-zebra:#F5F5F7;
    --v-ok:#7C7C80; --v-near:#EDA6A5; --v-bad:#D9605E;
    --v-okbg:#E6E6EB; --v-okt:#3C3C40; --v-nearbg:#FBEDED; --v-neart:#9C2B29; --v-badbg:#F8DADA; --v-badt:#B81F1D;
    --v-s1:#5C5C61; --v-s2:#8E8E93; --v-s3:#BDBDC2;
  }
  html[data-theme="dark"]{
    --v-red:#C24A47;
    --v-ok:#9A9A9E; --v-near:#8A3A38; --v-bad:#C24A47;
    --v-okbg:#2E2E31; --v-okt:#D0D0D4; --v-nearbg:#2A1B1B; --v-neart:#E08A88; --v-badbg:#3A1A19; --v-badt:#FF8A78;
    --v-s1:#D0D0D4; --v-s2:#9A9A9E; --v-s3:#636366;
  }
}

/* ══ erp_317　部門總覽的子頁標題（特助截圖：「標題字體大小粗細位置都很怪」）══
   一、erp_316 為了消掉總覽頁的空行，把標題區的行距歸零，結果子頁的標題直接貼在期間切換鈕上。
       → 有返回連結的標題（＝子頁）下面留 14px。
   二、標題原本寫「業務總覽　全部指標」，上面的返回連結又寫一次「‹ 業務總覽」。→ 標題只寫「全部指標」（dashboard.js）。
   三、返回連結與標題的距離、字級，對齊其他頁的「路徑小字＋頁面標題」。 */
html body .dv-head > .dv-title:has(.dv-back){margin-bottom:14px;gap:6px;flex-direction:column;align-items:flex-start}
html body .dv-title .dv-back{font-size:13px;color:var(--gray);padding:4px 0;min-height:0;line-height:1.4;background:none;border:0}
html body .dv-title .dv-back:hover{color:var(--ink)}
html body .dv-head > .dv-link{margin-left:auto}

/* ══ erp_318　逾期不染紅、完成整列反灰（全站同一標準）══
   2026-11-13 特助：「代辦事項不用顯示這麼可怕的紅色吧，讓人看得不想面對；已完成勾選以後整個牌子都要反灰。」
   標準：清單裡的列一律同一個底色；逾期只用一顆小標籤（淡紅底深紅字）表示，不染整列、不整行紅字。
         完成的列整塊變淡。 */
html body .pa-row.bad, html body .b-li.bad, html body .ck.late{background:var(--fill-2)}
html body .pa-row.bad .pa-t span, html body .b-li.bad .b-li-t span{color:var(--gray)}
html body .pa-row.bad .pa-ck{border-color:var(--g4)}
html body .pa-row.done{background:var(--g1)}
html body .pa-row.done .pa-t b, html body .pa-row.done .pa-t span{color:var(--g4)}
html body .pa-row.done .pa-ck{background:var(--g3);border-color:transparent}
html body .pa-row.done .pa-undo{color:var(--ink-2)}
html body .pa-row.done .hv-st{display:none}
html body .b-dot{background:var(--g4)}