/* Bisancos 出勤系統 · 新版外觀（暖黑金）
 *
 * 設計依據（2026-08-26 Muss 拍板改版）：老闆 BingX 報告站的 DNA 逐值移植
 * （muss-agent/設計DNA_老闆站對標_20260826.md）——金三階 #d4af37/#f1dc97/#9a7d2e、
 * 暖灰面板 sf-1~3、暖灰文字三階。字體維持 Work Sans（診斷判定合格）。
 * 舊版（bisancos.com 品牌橘推導的 #D6B14D 金＋冷藍灰）已整組退場。
 *
 * 這份 CSS 除了新外殼，也**重新定義所有既有 class**
 * （.card / .btn / .stat / .tag / .flash / table / input …），
 * 所以 24 個頁面的內容一行都不用改就會換一套皮。
 */

/* ── 字體 ──────────────────────────────────────────────
 * 只載拉丁字（數字與英文），已切到只含介面實際用到的字元，兩個字重共 46 KB。
 * 中文一律用系統字：實測打卡頁只用 106 個漢字卻要下載 349 KB，
 * 而且姓名與請假事由是自由輸入，subset 永遠列不完。
 */
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/worksans-400.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/worksans-700.woff2') format('woff2')}

:root{
  /* 2026-08-26 Muss 拍板：整組換「暖灰家族」＋老闆站金三階（數值移植自
     muss-agent/設計DNA_老闆站對標_20260826.md，不是風格參考是逐值搬）。
     舊版冷藍灰（#141619/#1A1D21、文字 #A8B8CE）的「金配冷灰＝金屬感」
     理由已廢——實測整站讀起來是「老闆站的冷掉版」：暖度一致（背景、
     面板、文字灰跟金同色溫）才會「融」在一起。 */
  --gold:#d4af37; --gold-lt:#f1dc97; --gold-dk:#9a7d2e;
  --ground:#0b0a08; --panel:#16151b; --panel-2:#1b1a21; --hover:#211f28;
  --line:#2a2833; --line-soft:#1b1a21;
  --ink:#e8e4da;
  /* 文字三階＝老闆站 txt/soft/mut 原值；--num 取 txt 與 soft 的中點
     （老闆站數字直接用 txt，這裡保留原本「比內文亮、比標題暗」的層級）。
     對比：ink 12.8:1、dim 7.5:1、num 9.9:1（對 --panel），全過 AA。 */
  --dim:#b9b3a5; --faint:#8b8577; --num:#d1cbc0;
  --go:#3FB984; --go-bg:rgba(63,185,132,.14); --go-ink:#4FCB94;
  --stop:#E5645B; --stop-bg:rgba(229,100,91,.15); --stop-ink:#F0796F;
  /* 🔴 警告色刻意用橘不用琥珀。
     琥珀 #E0BC5E 與品牌金 #D6B14D 的**色相差 0°、ΔE 只有 5.1**——
     兩者實質上是同一個顏色，並排時人眼分不出來。
     而「遲到」正是警告語意，出勤系統天天要用。
     ⚠️ 判斷兩色能否分辨要看色相差與 ΔE，**不是 WCAG 對比度**——
        對比度只量亮度，兩個亮度相近的顏色比值一定接近 1:1，
        用它會得出「橘和金一樣」這種錯誤結論。
     #FF8A3D：色相差 20°、ΔE 37.2、對底 8.3:1。金色只做品牌與目前選中。 */
  --warn-bg:rgba(255,138,61,.15); --warn-ink:#FF8A3D;
  /* 數字用等寬（老闆站 --mono 原值移植，2026-08-27 套餐測試中·未拍板） */
  --mono:ui-monospace,'SF Mono','JetBrains Mono','Fira Code',Menlo,monospace;
  --r:12px; --r-sm:8px; --pad:24px; --gap:16px;
  --sbw:150px; --sbpad:14px;
  /* 手機底部列高度：用 Chrome 官方推薦的 safe-area 寫法，
     env() 一定要給 fallback——LIFF 在 Chromium <140 的 Android WebView
     會回報 0px，裸用會讓底部列被系統手勢列蓋住。 */
  --bar-h:56px; --safe-b:env(safe-area-inset-bottom, 16px);
  /* 相容舊樣板裡零星寫死的 var(--err) / var(--ok) / var(--warn) */
  --err:#E5645B; --ok:#3FB984; --warn:#FF8A3D;
  --muted:#b9b3a5; --text:#e8e4da; --navy:#16151b;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:dark}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Work Sans',system-ui,-apple-system,'Segoe UI',Roboto,
    'PingFang TC','Noto Sans TC','Noto Sans CJK TC','Source Han Sans TC',
    'Microsoft JhengHei UI','Microsoft JhengHei',sans-serif;
  /* 行高 1.7：漢字筆畫密、沒有 x-height 留白，拉丁字的 1.5 對中文太擠 */
  font-size:14px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
/* 中文字重只用 400/700。微軟正黑體只有 Light/Regular/Bold 三個實體字重，
   寫 500/600 會觸發瀏覽器合成假粗體，中文特別糊——而且只在 Mac 測發現不了。 */
b,strong,th{font-weight:700}
a{color:var(--gold)}
::selection{background:rgba(212,175,55,.28)}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px}

/* ── 外殼 ──────────────────────────────────────────── */
/* 100svh 不是 100vh：iOS Safari 與 LINE LIFF 的 WebView 裡，
   100vh 等同「工具列收起時」的高度，畫面會溢出被切掉。 */
.shell{display:grid; grid-template-columns:var(--sbw) 1fr; min-height:100svh}
.shell[data-sb="rail"]{--sbw:64px; --sbpad:0px}

.sb{
  background:#080706; border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; padding:18px 0 14px;
  /* 🔴 一定要能直向捲動。人資區有 10 個項目，筆電或縮放 125% 的螢幕
     裝不下整條側欄，overflow:hidden 會讓「建檔匯入」以下的入口
     直接消失而且捲不出來（2026-07-31 Muss 實測找不到）。 */
  min-width:0; overflow-y:auto; overflow-x:hidden;
  position:sticky; top:0; height:100svh;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
/* 品牌標記。橫式 Logo 已去背（亮度即透明度），直接疊在側欄底色上不會有黑框。 */
.sb .lg{padding:0 var(--sbpad) 18px; line-height:0}
.sb .lg img{display:block; width:auto; height:22px}
.sb .lg .mk{display:none}
.sb .grp{padding:14px var(--sbpad) 5px; font-size:9.5px; font-weight:700;
  letter-spacing:.16em; color:var(--faint); text-transform:uppercase; white-space:nowrap}
.sb hr{display:none}
.sb a{display:flex; align-items:center; gap:10px; padding:8px var(--sbpad);
  color:var(--dim); text-decoration:none; font-size:13px; white-space:nowrap}
.sb a:hover{color:var(--ink); background:var(--hover)}
.sb a svg{width:16px; height:16px; flex:none; opacity:.85}
.sb a.on{color:#1a1408; background:var(--gold); font-weight:700}
.sb a.on svg{opacity:1}
.sb .bdg{margin-left:auto; background:var(--gold); color:#1a1408; font-size:10.5px;
  font-weight:700; padding:1px 7px; border-radius:20px; font-variant-numeric:tabular-nums}
.sb a.on .bdg{background:#1a1408; color:var(--gold)}
.sb .foot{margin-top:auto}
.sb .col{display:flex; align-items:center; gap:9px; width:100%; background:none;
  border:0; border-top:1px solid var(--line-soft); padding:11px var(--sbpad);
  color:var(--faint); font:inherit; font-size:12px; cursor:pointer; white-space:nowrap}
.sb .col:hover{color:var(--ink)}
.sb .col svg{width:15px; height:15px; flex:none}
.sb .me{padding:12px var(--sbpad) 0; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:9px}
.sb .av{width:26px; height:26px; border-radius:50%; background:#211f28; color:var(--gold);
  display:grid; place-items:center; font-size:10.5px; font-weight:700; flex:none}
.sb .me b{display:block; font-size:12px; line-height:1.3; white-space:nowrap}
.sb .me span{display:block; font-size:10.5px; color:var(--faint); line-height:1.3; white-space:nowrap}

.shell[data-sb="rail"] .sb a{justify-content:center; padding:10px 0; position:relative}
.shell[data-sb="rail"] .sb a .t,
.shell[data-sb="rail"] .sb .col .t,
.shell[data-sb="rail"] .sb .me .who,
.shell[data-sb="rail"] .sb .grp{display:none}
.shell[data-sb="rail"] .sb .lg{padding-left:0; padding-right:0}
.shell[data-sb="rail"] .sb .lg .full{display:none}
.shell[data-sb="rail"] .sb .lg .mk{display:block; height:26px; margin:0 auto}
.shell[data-sb="rail"] .sb hr{display:block; border:0; border-top:1px solid var(--line-soft); margin:11px 14px}
.shell[data-sb="rail"] .sb .me,
.shell[data-sb="rail"] .sb .col{justify-content:center; padding-left:0; padding-right:0}
.shell[data-sb="rail"] .sb .col svg{transform:rotate(180deg)}
.shell[data-sb="rail"] .sb .bdg{margin:0; position:absolute; transform:translate(11px,-9px);
  padding:0; width:15px; height:15px; border-radius:50%; display:grid; place-items:center; font-size:9.5px}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:15px var(--pad); border-bottom:1px solid var(--line-soft); background:var(--ground);
  position:sticky; top:0; z-index:5}
.topbar h1{margin:0; font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.25}
.topbar .sub{margin:1px 0 0; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums}
.topbar .rt{display:flex; align-items:center; gap:14px; font-size:12.5px;
  color:var(--dim); font-variant-numeric:tabular-nums; flex:none}
.topbar .rt a{color:var(--dim); text-decoration:none}
.topbar .rt a:hover{color:var(--ink)}

.canvas{padding:var(--pad); display:flex; flex-direction:column; gap:var(--gap); flex:1}

/* ── 既有 class 重新定義（24 個頁面靠這段換皮）────────── */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; margin:0}
.card + .card{margin-top:0}
h1{font-size:19px; font-weight:700; letter-spacing:-.015em; margin:0 0 4px}
h2{font-size:14px; font-weight:700; letter-spacing:-.005em; color:var(--ink); margin:0 0 12px}
.muted{color:var(--dim); font-size:13px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--panel-2); border:1px solid var(--line); padding:1px 6px;
  border-radius:5px; word-break:break-all; color:var(--dim)}

/* 主鈕＝老闆站數值移植（設計DNA 第二節）：金漸層＋深字＋金暈。 */
.btn{display:block; width:100%; padding:15px; font-size:16px; font-weight:700;
  border:0; border-radius:var(--r-sm);
  background:linear-gradient(135deg,#d4af37,#f1dc97); color:#1a1408;
  box-shadow:0 6px 26px rgba(212,175,55,.38);
  position:relative; overflow:hidden;
  cursor:pointer; margin-bottom:10px; font-family:inherit; text-align:center;
  text-decoration:none; transition:transform .08s ease, filter .15s ease}
/* 技法庫 #13：玻璃光掃 shimmer（只動 transform，效能鐵律 1）。
   只給金色大鈕；in/out 是打卡語意色、ghost 是描邊鈕、sm 是密集工具鈕，
   光掃與金暈都不跟過去。 */
.btn::after{content:''; position:absolute; top:0; bottom:0; left:0; width:55%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-130%) skewX(-18deg);
  animation:btnshine 4.6s ease-in-out infinite}
@keyframes btnshine{
  0%{transform:translateX(-130%) skewX(-18deg)}
  46%,100%{transform:translateX(320%) skewX(-18deg)}}
.btn:active{transform:scale(.985)}
@media (hover:hover){ .btn:hover{filter:brightness(1.07)} }
.btn:disabled{opacity:.4; cursor:default}
.btn.in, .btn.out, .btn.ghost, .btn.ghost-danger{box-shadow:none}
.btn.in::after,.btn.out::after,.btn.ghost::after,.btn.ghost-danger::after,
.btn.sm::after{content:none}
/* ⚠️ in／out 是**打卡的語意**（綠＝上班、紅＝下班），只有 punch.html 該用。
   舊版 base.html 的 .btn.out 只是「藍色」，所以登入、註冊、送出申請…
   一堆主要按鈕都寫了 out——搬到新版之後全部變成紅色的「下班／危險」色。
   沒有修飾詞的 .btn 就是主要動作（金色），別再拿 in/out 當配色用。 */
.btn.in{background:var(--go); color:#04120C}
.btn.out{background:var(--stop); color:#180504}
.btn.sm{display:inline-block; width:auto; padding:8px 15px; font-size:13px; margin:0;
  box-shadow:0 3px 14px rgba(212,175,55,.22)}
/* 次要（描邊）按鈕。⚠️ 別再用行內 style="background:#fff" 做次要鈕——
   那在深色版是白底白字，2026-07-31 已經炸過兩輪。 */
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold-lt)}
.btn.ghost-danger{background:transparent; color:var(--stop-ink);
  border:1px solid rgba(229,100,91,.5)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.stat{text-align:center; padding:14px 10px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:var(--r-sm)}
.stat .lbl{font-size:10.5px; font-weight:700; letter-spacing:.13em;
  color:var(--faint); text-transform:uppercase}
.stat .val{font-size:26px; font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.3}
.stat .val.none{color:var(--faint); font-size:17px; letter-spacing:0}

/* border-collapse 用 separate 不用 collapse：
   collapse 會讓黏性表頭的邊框消失（瀏覽器實作問題，W3C issue 開了七年），
   所以分隔線改用 inset box-shadow 畫。 */
table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px}
th,td{padding:10px 16px; text-align:left;
  box-shadow:inset 0 -1px 0 var(--line-soft)}
tr:last-child td{box-shadow:none}
th{
  color:var(--dim); font-size:12.5px; font-weight:700; white-space:nowrap;
  /* 表頭大寫在 2026 已經出局：Carbon／Primer／shadcn／Ant 全部用句首大寫。
     靠字重與顏色區分，不靠 text-transform。 */
  position:sticky; top:0; z-index:1; background:var(--panel-2);
}
td.num,td .num{font-variant-numeric:lining-nums tabular-nums; color:var(--num)}
tbody tr:hover td{background:var(--hover)}

.tag{display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.02em}
.tag.ok{background:var(--go-bg); color:var(--go-ink)}
.tag.miss{background:var(--stop-bg); color:var(--stop-ink)}
.tag.grey{background:#211f28; color:var(--dim)}
.tag.warn{background:var(--warn-bg); color:var(--warn-ink)}

.flash{padding:13px 16px; border-radius:var(--r-sm); margin-bottom:var(--gap);
  font-weight:700; font-size:13.5px; border:1px solid}
.flash.ok{background:var(--go-bg); color:var(--go-ink); border-color:rgba(63,185,132,.3)}
.flash.warn{background:var(--warn-bg); color:var(--warn-ink); border-color:rgba(214,177,77,.32)}
.flash.err{background:var(--stop-bg); color:var(--stop-ink); border-color:rgba(229,100,91,.32)}
.flash a{color:inherit}

input,select,textarea{padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm);
  /* 16px 是硬性下限：低於此 iOS Safari 聚焦會自動放大整頁 */
  font-size:16px; font-family:inherit; background:var(--panel-2); color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--gold); outline:none}
input[type=date],input[type=time]{color-scheme:dark}
/* zh-TW 的 time 控件帶「上午/下午」前綴，寬度不足會把分鐘截掉——
   後台改卡欄「上午 09:」讀不到核心資訊（2026-08-26 R2 裁判抓到）。
   min-width 會蓋過各處行內 width，一次根治所有 time 輸入。 */
input[type=time]{min-width:9.5em}
/* 原生勾選框/單選鈕收編進金家族（預設藍是整頁唯一的冷色跳色，2026-08-26 裁判抓到） */
input[type=checkbox],input[type=radio]{accent-color:var(--gold)}
label{font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--faint);
  display:block; margin-bottom:4px; text-transform:uppercase}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.badge{display:inline-block; min-width:18px; padding:1px 6px; border-radius:20px;
  background:var(--gold); color:#1a1408; font-size:11px; font-weight:700;
  text-align:center; font-variant-numeric:tabular-nums}
.linkish{background:none; border:0; color:var(--dim); font:inherit; font-size:13px;
  cursor:pointer; padding:8px 6px; text-decoration:underline}
.linkish:hover{color:var(--ink)}

/* 舊版的頁內 tab 導覽在新版由側欄取代 */
nav.tabs{display:none}
header{display:none}

/* 處理結果／記錄輸出框（建檔匯入等） */
pre.log{background:var(--panel-2); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:14px; overflow-x:auto; font-size:12px;
  line-height:1.55; white-space:pre-wrap; word-break:break-all}

/* 全站 LINE 綁定橫幅：沒綁定的人每一頁最上面都看得到 6 碼。
   金色邊框＋大字——這是現在全公司最需要找到的一串數字。 */
.bindbar{background:var(--panel); border:1.5px solid var(--gold);
  border-radius:var(--r); padding:14px 18px; text-align:center}
.bindbar .t{font-size:13px; color:var(--dim); margin-bottom:4px}
.bindbar .c{font-size:34px; font-weight:700; letter-spacing:8px;
  color:var(--gold-lt); font-variant-numeric:tabular-nums; user-select:all}
.bindbar a{display:inline-block; margin-top:6px; font-size:13px}

/* 申請頁的四顆大按鈕與註冊頁的分頁鈕。
   ⚠️ 這兩組原本寫死在頁面的 <style> 裡（background:#fff），
   逃過換皮變成白底白字——樣式必須住在這裡才吃得到主題。 */
.bigbtn{display:block; padding:20px; text-align:center; font-size:16px;
  font-weight:700; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink)}
.bigbtn:hover{border-color:var(--gold); color:var(--gold-lt)}
.bigbtn:active{transform:scale(.985)}
.seg{display:flex; gap:0; margin-bottom:18px; border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden}
.seg-btn{flex:1; padding:11px; border:0; background:var(--panel-2); font:inherit;
  font-size:14.5px; cursor:pointer; color:var(--dim)}
.seg-btn.on{background:var(--gold); color:#1a1408; font-weight:700}

/* 登入頁的品牌標記。
   ⚠️ .canvas 是 column flex，圖片如果直接當 flex item 會被交叉軸 stretch
      撐滿整個寬度（replaced element 的 width:auto 在 flex 裡等於 stretch），
      所以要包一層 div，讓圖片回到普通 block 的等比縮放。 */
.brand-mark img{display:block; width:auto; height:30px}
.mark-sub{font-size:11px; font-weight:700; letter-spacing:.28em;
  color:var(--faint); margin-top:9px; text-transform:uppercase}

/* ── 員工守則（Markdown 渲染出來的內容）─────────────── */
.doc{font-size:14.5px; line-height:1.85}
.doc > *:first-child{margin-top:0}
/* ⚠️ md.py 刻意把 `#` 渲染成 <h2>（頁面本身已經有 <h1> 了），
   所以守則內文用 `##` 當章節時，實際跑出來的是 <h3>、`###` 是 <h4>。
   h2 與 h3 都要長得像「章節」，不能只顧 h2——否則章節標題會吃到
   次級標題的樣式，整份守則的層次會被壓平。 */
.doc h2,.doc h3{font-weight:700; letter-spacing:-.01em;
  padding-bottom:8px; border-bottom:1px solid var(--line)}
.doc h2{font-size:18px; margin:34px 0 12px}
.doc h3{font-size:16px; margin:30px 0 10px}
.doc h4{font-size:14.5px; font-weight:700; margin:22px 0 7px; color:var(--gold);
  border:0; padding:0}
.doc p{margin:0 0 12px}
.doc ul,.doc ol{margin:0 0 14px; padding-left:22px}
.doc li{margin-bottom:5px}
.doc hr{border:0; border-top:1px solid var(--line); margin:26px 0}
.doc blockquote{
  margin:14px 0; padding:12px 16px; border-left:3px solid var(--gold);
  background:var(--panel-2); border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--dim); font-size:13.5px;
}
.doc blockquote strong{color:var(--ink)}
.doc .scroll{margin:0 0 16px}
.doc table{font-size:13px}
.doc code{font-size:12.5px}
.doc strong{color:var(--ink)}

/* ── 打卡主視覺 ─────────────────────────────────────── */
.punchhero{display:flex; flex-direction:column; align-items:center; padding:22px 20px 0}
.phday{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--faint);
  display:flex; align-items:center; gap:9px; font-variant-numeric:tabular-nums}
.phclock{font-size:46px; font-weight:700; letter-spacing:-.035em; line-height:1.05;
  font-variant-numeric:tabular-nums; margin-top:4px}

/* ── E3 滑軌（2026-08-27 Muss 拍板①：打卡頁 E3 本體）──────
   「滑到底＝承諾」：一動作一條軌、放手未達閾值彈回。
   舊的 phring 進度環＋phbtn 變身鈕已退役（血淚 #15 的死路結構性消失：
   下班軌永遠存在、不依賴狀態機）。技法：#13 shimmer、#16 光暈脈動。 */
.prails{width:100%; max-width:300px; margin:20px 0 0;
  display:flex; flex-direction:column; gap:12px}
.prail{position:relative; height:54px; border-radius:30px;
  background:#100f13; border:1px solid var(--line);
  display:flex; align-items:center; overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none}
.prail .plab{width:100%; text-align:center; font-size:13.5px; font-weight:700;
  letter-spacing:.1em; z-index:1; pointer-events:none}
.prail .pchev{position:absolute; right:18px; font-size:14px; letter-spacing:3px;
  pointer-events:none; animation:pchv 1.8s linear infinite}
@keyframes pchv{0%{opacity:.15}50%{opacity:.85}100%{opacity:.15}}
.pknob{position:absolute; left:5px; top:4px; width:46px; height:46px;
  border-radius:50%; cursor:grab; z-index:2;
  background:conic-gradient(from 210deg,#d9d4c8,#8f8a7d 25%,#f5f1e6 50%,#7d7869 75%,#d9d4c8);
  box-shadow:0 3px 10px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.7)}
.pknob .pk{position:absolute; inset:6px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#211f28,#0b0a08);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--gold-lt); font-variant-numeric:tabular-nums}
.pknob:active{cursor:grabbing}
.prail.dragging .pknob{transition:none}
.prail:not(.dragging) .pknob{transition:transform .22s ease}
/* 待滑（armed）：語意色描邊＋滑塊光暈脈動（技法 #16） */
.prail.arm-in{border-color:rgba(63,185,132,.4)}
.prail.arm-in .plab{color:var(--go-ink)}
.prail.arm-in .pchev{color:var(--go)}
.prail.arm-out{border-color:rgba(229,100,91,.4)}
.prail.arm-out .plab{color:var(--stop-ink)}
.prail.arm-out .pchev{color:var(--stop)}
.prail.arm-in .pknob{--pulse:63,185,132; animation:phpulse 3.2s ease-in-out infinite}
.prail.arm-out .pknob{--pulse:229,100,91; animation:phpulse 3.2s ease-in-out infinite}
@keyframes phpulse{
  0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.55), 0 0 10px rgba(var(--pulse),.18)}
  50%{box-shadow:0 3px 10px rgba(0,0,0,.55), 0 0 26px rgba(var(--pulse),.5)}}
/* 完成（done）：填滿語意色淡底、滑塊停靠右端＝當天紀錄列 */
.prail.done{cursor:default}
.prail.done .pknob{left:auto; right:5px; cursor:default; animation:none}
.prail.done-in{background:linear-gradient(90deg,rgba(63,185,132,.16),rgba(63,185,132,.04));
  border-color:rgba(63,185,132,.35)}
.prail.done-in .plab{color:var(--go-ink)}
.prail.done-out{background:linear-gradient(90deg,rgba(229,100,91,.14),rgba(229,100,91,.04));
  border-color:rgba(229,100,91,.35)}
.prail.done-out .plab{color:var(--stop-ink)}
/* 滑動中軌道跟著填色（從左往右淹） */
.prail .pfill{position:absolute; left:0; top:0; bottom:0; width:0; z-index:0;
  background:linear-gradient(90deg,rgba(212,175,55,.06),rgba(212,175,55,.22))}
.prail.arm-in .pfill{background:linear-gradient(90deg,rgba(63,185,132,.08),rgba(63,185,132,.28))}
.prail.arm-out .pfill{background:linear-gradient(90deg,rgba(229,100,91,.08),rgba(229,100,91,.28))}
.prail.locked{opacity:.6; pointer-events:none}
/* 提示列（缺上班卡等）：非互動的說明軌 */
.prail.hint{border-style:dashed; height:44px}
.prail.hint .plab{color:var(--faint); font-weight:400; font-size:12px}
/* 簽核雙向軌：滑塊置中、左紅右綠 */
.prail.both .pknob{left:calc(50% - 23px)}
/* 標籤錨定兩端，中央讓位給滑塊（不然「｜」被 knob 蓋住） */
.prail.both .plab{display:flex; justify-content:space-between; padding:0 26px}
.prail.both .plab .rej{color:var(--stop-ink)}
.prail.both .plab .sep{display:none}
.prail.both .plab .app{color:var(--go-ink)}
.prail.both{border-color:var(--line)}
.prail.both .pknob{--pulse:212,175,55; animation:phpulse 3.4s ease-in-out infinite}
.phmeta{font-size:13px; color:var(--dim); margin:15px 0 0; text-align:center;
  font-variant-numeric:tabular-nums}
.phmeta b{color:var(--ink)}
.phalt{margin:5px 0 0; font-size:12.5px}
.phalt a{color:var(--faint); text-decoration:underline; text-underline-offset:3px}
.phalt a:hover{color:var(--ink)}
/* 「忘了打上班卡？直接打下班卡」——外觀是連結，實際是 submit（2026-08-13） */
.linkbtn{background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--faint); text-decoration:underline; text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}

.phstrip{display:grid; grid-template-columns:repeat(3,1fr); width:calc(100% + 40px);
  margin:20px -20px 0; border-top:1px solid var(--line)}
.phstrip > div{padding:13px 4px; text-align:center; border-right:1px solid var(--line)}
.phstrip > div:last-child{border-right:0}
.phstrip .k{font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--faint);
  text-transform:uppercase}
.phstrip .v{font-size:21px; font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:-.025em; line-height:1.35}
.phstrip .v em{font-style:normal; font-size:11.5px; font-weight:400; color:var(--faint); letter-spacing:0}
.phstrip .v.gold{color:var(--gold)}
.phstrip .v.bad{color:var(--stop-ink)}
/* T-71：特休／補休兩格可點進假期餘額（四格版） */
.phstrip.c4{grid-template-columns:repeat(4,1fr)}
.phstrip a.cell{display:block; color:inherit; text-decoration:none; border-radius:8px}
.phstrip a.cell:hover .k,.phstrip a.cell:focus-visible .k{color:var(--gold)}
.phexp{margin:12px 0 0; font-size:12.5px; text-align:center}
.phexp.warn{color:var(--warn-ink)}
.phexp.red{color:var(--stop-ink)}
.phexp a{color:inherit; text-decoration:underline; text-underline-offset:3px}

/* ── 按鍵式打卡＋簽核（2026-08-31 Muss 拍板：滑軌退役，動作回歸按鈕；
   危險動作（刪卡/解鎖）維持滑軌不變）─────────────────── */
.pbtns{width:100%; max-width:300px; margin:20px 0 0;
  display:flex; flex-direction:column; gap:12px}
.pbtns .btn{margin-bottom:0}
/* 已打卡的完結條：跟按鈕同尺寸的靜態列，鉻點＝已停靠 */
.pdone{height:54px; border-radius:30px; border:1px solid;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:13.5px; font-weight:700; letter-spacing:.1em;
  font-variant-numeric:tabular-nums}
.pdone .pk2{display:inline-flex; width:26px; height:26px; border-radius:50%;
  align-items:center; justify-content:center; font-size:12px; color:#1a1408;
  background:conic-gradient(from 210deg,#d9d4c8,#8f8a7d 25%,#f5f1e6 50%,#7d7869 75%,#d9d4c8);
  box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.7)}
.pdone.in{background:linear-gradient(90deg,rgba(63,185,132,.16),rgba(63,185,132,.04));
  border-color:rgba(63,185,132,.35); color:var(--go-ink)}
.pdone.out{background:linear-gradient(90deg,rgba(229,100,91,.14),rgba(229,100,91,.04));
  border-color:rgba(229,100,91,.35); color:var(--stop-ink)}
.phhint{height:44px; margin:0; border:1px dashed var(--line); border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:12px}
/* 簽核按鈕列：兩顆並排、拇指尺寸；駁回武裝態亮實紅 */
.actbtns{display:flex; gap:10px}
.actbtns .btn{flex:1; margin-bottom:0; padding:13px; font-size:15px}
.actbtns .actno.armed{background:var(--stop); color:#fff; border-color:var(--stop)}
.actmsg{margin:10px 0 0; font-size:13px; color:var(--stop-ink)}
/* 簽完原地變結果條：卡片降透明度、留在原位不動版面 */
.card.acted{opacity:.6}
.actdone{margin:0; padding:13px; border-radius:var(--r-sm); text-align:center;
  font-weight:700; font-size:14.5px}
.actdone.go{background:var(--go-bg); color:var(--go-ink)}
.actdone.no{background:var(--stop-bg); color:var(--stop-ink)}

/* ── E3 ③ 我的出勤：歷史＝停靠的軌（2026-08-31 Muss 拍板施工）────
   設計稿 docs/design/e3-system-language.html「我的出勤」框：
   每天一列軌——填充量＝計入÷8H、停靠鉻塊＝這天已完結、
   帶綠漸層＝含假別時數、今天那列還在流動（shimmer）不停靠。
   點列展開當天打卡明細：用 <details>，零 JS、鍵盤可及。 */
.rrows{display:flex; flex-direction:column; gap:7px}
.rrow summary, .rrow .rsum{display:flex; align-items:center; gap:9px;
  cursor:pointer; list-style:none; padding:1px 2px; border-radius:8px}
.rrow .rsum{cursor:default}   /* 未來的日子：純顯示、不可展開 */
.rrow summary::-webkit-details-marker{display:none}
@media (hover:hover){ .rrow summary:hover{background:var(--hover)} }
.rrow .rd{width:46px; flex:none; text-align:right; font-family:var(--mono);
  font-size:11px; color:var(--faint)}
.rrow[open] .rd{color:var(--ink)}
.rbar{flex:1; position:relative; height:26px; border-radius:14px;
  background:#100f13; border:1px solid #26242c; overflow:hidden}
.rfill{position:absolute; top:3px; bottom:3px; left:3px; border-radius:10px;
  background:linear-gradient(90deg,rgba(212,175,55,.14),rgba(212,175,55,.4))}
/* 含假別時數＝綠→金漸層（設計稿 08-25 列） */
.rfill.mix{background:linear-gradient(90deg,rgba(63,185,132,.3),rgba(212,175,55,.35))}
/* 停靠鉻塊＝這天已完結——跟打卡滑塊同一塊鉻（.pknob 縮小版） */
.rdock{position:absolute; right:2px; top:2px; width:20px; height:20px;
  border-radius:50%;
  background:conic-gradient(from 210deg,#d9d4c8,#8f8a7d 25%,#f5f1e6 50%,#7d7869 75%,#d9d4c8);
  box-shadow:0 2px 6px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.7)}
/* 今天還在流動：玻璃光掃（#13 同族，只動 transform——效能鐵律 1） */
.rrow.today .rfill::after{content:''; position:absolute; top:0; bottom:0;
  left:0; width:45%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(241,220,151,.25),transparent);
  transform:translateX(-120%) skewX(-18deg);
  animation:railshine 3.2s ease-in-out infinite}
@keyframes railshine{
  0%{transform:translateX(-120%) skewX(-18deg)}
  60%,100%{transform:translateX(340%) skewX(-18deg)}}
.rrow.off .rbar{opacity:.4}
/* 未來的日子：只淡化軌道，文字保留 --faint（整列 opacity .3 會把日期壓到對比 ~1.6:1，
   axe color-contrast serious；--faint 在卡片底 ≈4.7:1 過 AA，V-3 2026-10-27） */
.rrow.future .rbar{opacity:.3}
.rrow.lack .rbar{border-color:rgba(229,100,91,.35)}
.rv{width:46px; flex:none; font-family:var(--mono); font-size:11.5px;
  color:var(--num); font-variant-numeric:tabular-nums}
.rv.gold{color:var(--gold-lt)}
.rv.miss{color:var(--stop-ink)}
.rv.dim{color:var(--faint); font-family:inherit; font-size:10.5px}
.rdetail{margin:6px 0 4px 55px; padding:9px 12px; font-size:12.5px;
  background:var(--panel-2); border:1px solid var(--line-soft);
  border-radius:10px; color:var(--dim)}
.rdetail b{color:var(--ink); font-weight:400; font-family:var(--mono)}
.rdetail .tag{margin-left:4px}

/* ── E3/E5 ④ 假期餘額：額度＝油量軌（2026-08-31 Muss 拍板施工）──
   設計稿 docs/design/e5-system-language.html「假期餘額」框：
   軌道全長＝總取得、填充＝剩餘（油量語意）；特休綠、補休金；
   補休的 FIFO 批次一節一節排在軌上（最早到期在最左），
   30 天內到期的節轉紅、右緣立紅閘門——不用讀字就有壓力感。 */
.gtop{display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; font-size:12.5px; color:var(--dim); margin:10px 0 6px}
.gtop:first-child{margin-top:0}
.gtop b{color:var(--gold-lt); font-family:var(--mono); font-size:16px;
  font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.gtop b em{font-style:normal; font-size:10.5px; font-weight:400;
  color:var(--faint)}
.gexp{font-size:10.5px; color:var(--stop-ink); margin-left:6px}
.gnext{font-size:10.5px; color:var(--faint); margin-left:6px}
.grail{position:relative; height:26px; border-radius:14px;
  background:#100f13; border:1px solid #26242c; overflow:hidden}
.gseg{position:absolute; top:3px; bottom:3px; border-radius:8px;
  background:linear-gradient(90deg,rgba(212,175,55,.14),rgba(212,175,55,.4))}
.gseg.green{background:linear-gradient(90deg,rgba(63,185,132,.18),rgba(63,185,132,.5))}
/* 即將到期的批次：被推向紅閘門（紅→金） */
.gseg.red{background:linear-gradient(90deg,rgba(229,100,91,.35),rgba(212,175,55,.35))}
.gseg.warn{background:linear-gradient(90deg,rgba(255,138,61,.2),rgba(255,138,61,.45))}
/* T-71 補休到期分級：14 天內黃、7 天內紅（字色對 #16151b 面板皆 ≥4.5:1） */
.gexp.warn{color:var(--warn-ink)}
.gsum{margin:14px 0 0; font-size:12.5px; color:var(--dim); line-height:1.7}
.gsum b{color:var(--gold-lt); font-family:var(--mono)}
tr.gone{opacity:.45}
tr.exp-red td{background:var(--stop-bg)}
tr.exp-warn td{background:var(--warn-bg)}
td.num .tag{white-space:nowrap}
.oleave{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.oleave div{padding:10px 8px; border:1px solid var(--line); border-radius:10px; text-align:center}
.oleave .k{display:block; font-size:11px; color:var(--faint)}
.oleave b{font-family:var(--mono); font-size:16px; color:var(--ink)}
@media (max-width:480px){ .oleave{grid-template-columns:repeat(2,1fr)} }
.ggate{position:absolute; top:0; bottom:0; width:2px; background:var(--stop)}

/* ── E3 ⑤ 後台調車場（2026-08-31 Muss 拍板施工）──────────
   設計稿 e5-system-language.html「後台・出勤總覽」框：全員一屏，
   每人一條軌、時段畫在真實位置（軸 07:00–23:00）；亮著的鉻塊＝
   人在線上（顯示已過時數）、紅閘門＝應到時間（只在遲到時現形）、
   空軌＝未進站。點列展開當日詳情與補卡/改卡。 */
.yrow summary, .yrow .ysum{display:flex; align-items:center; gap:9px;
  cursor:pointer; list-style:none; padding:1px 2px; border-radius:8px}
.yrow summary::-webkit-details-marker{display:none}
@media (hover:hover){ .yrow summary:hover{background:var(--hover)} }
.ynm{width:64px; flex:none; text-align:right; font-size:12px;
  color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.yrow[open] .ynm{color:var(--ink)}
.yrow .rbar{height:22px; border-radius:12px}
.yst{width:48px; flex:none; font-size:11px}
.yst.go{color:var(--go-ink)}
.yst.warn{color:var(--warn-ink)}
.yst.bad{color:var(--stop-ink)}
.yst.dim{color:var(--faint)}
/* 在線上的鉻塊：迷你版 .pknob，帶金色光暈脈動（技法 #16） */
.yknob{position:absolute; top:1px; width:20px; height:20px; margin-left:-10px;
  border-radius:50%; z-index:2;
  background:conic-gradient(from 210deg,#d9d4c8,#8f8a7d 25%,#f5f1e6 50%,#7d7869 75%,#d9d4c8);
  box-shadow:0 2px 6px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.7);
  --pulse:212,175,55; animation:phpulse 3.2s ease-in-out infinite}
.yknob i{position:absolute; inset:2.5px; border-radius:50%; font-style:normal;
  background:radial-gradient(circle at 35% 30%,#211f28,#0b0a08);
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:var(--gold-lt); font-family:var(--mono)}
.ydetail{margin:6px 0 4px 73px; padding:9px 12px; font-size:12.5px;
  background:var(--panel-2); border:1px solid var(--line-soft);
  border-radius:10px; color:var(--dim)}
.ydetail b{color:var(--ink); font-weight:400; font-family:var(--mono)}

/* ── E3 ⑥ 危險動作滑軌（2026-08-31 Muss 拍板施工）─────────
   設計稿 e3-system-language.html「後台・危險動作」框：
   刪卡＝滑到底、解除關帳＝長按 1 秒＋滑到底（data-hold）。
   confirm() 彈窗退役——彈窗會被慣性點掉、滑軌不會。 */
.prail.mini{height:30px; border-radius:16px; flex:none}
.prail.mini .pknob{width:24px; height:24px; top:2px; left:3px;
  animation:none}                     /* 一頁上百列，脈動全開＝效能災難 */
.prail.mini .pknob .pk{inset:4px; font-size:10px}
.prail.mini .plab{font-size:10.5px; letter-spacing:.06em}
.prail.mini .pchev{right:10px; font-size:11px; letter-spacing:2px}
/* 長按閘：按滿一秒（.held）才亮紅、才滑得動 */
.prail.hold .plab{color:var(--dim); font-weight:400}
.prail.hold.held{border-color:rgba(229,100,91,.5)}
.prail.hold.held .plab{color:var(--stop-ink)}
.prail.hold.held .pchev{color:var(--stop)}
.prail.hold.held .pknob{--pulse:229,100,91;
  animation:phpulse 1.6s ease-in-out infinite}
.prail.hold.held .pfill{background:linear-gradient(90deg,rgba(229,100,91,.08),rgba(229,100,91,.28))}

/* ── 動態層（2026-08-26 punch 套餐，技法庫 #5／#36）──────
   動態預算＝一底（螢火蟲）＋一互動（按鈕光掃/脈動）＋一重點（流光邊框），
   遵守技法庫第十節：背景讓位內容、慢速、只掛重點卡。 */

/* #5 漸層邊框流光：老闆站登入卡同款三層技法（設計DNA 第二節數值：
   120deg, gold2 → gold 30% → blue 50% → gold 70% → gold2）＋三層帶色陰影。
   只掛登入卡與打卡主卡。@property 讓角度可動畫；不支援的瀏覽器
   看到的是靜態漸層描邊（優雅降級）。 */
@property --ga{syntax:'<angle>'; inherits:false; initial-value:120deg}
.glowcard{position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,.7),
    0 0 70px rgba(212,175,55,.18),
    0 0 60px rgba(138,180,248,.08)}
.glowcard::before{content:''; position:absolute; inset:-1px; border-radius:var(--r);
  padding:1.2px; pointer-events:none;
  background:linear-gradient(var(--ga),#f1dc97,#d4af37 30%,#8ab4f8 50%,#d4af37 70%,#f1dc97);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:gaflow 9s linear infinite}
@keyframes gaflow{to{--ga:480deg}}

/* #36 螢火蟲背景（fx.js 畫）。負 z-index＝墊在所有內容之後、
   body 背景色之上；不吃任何點擊。 */
#fireflies{position:fixed; inset:0; z-index:-1; pointer-events:none}

/* ── 套餐測試（2026-08-27，未拍板部署）────────────────
   1) 數字等寬：時鐘/KPI/表格數字换 --mono，中文單位字退回內文字體
   3) 卡片進場 reveal（技法 #69）：backwards 讓 delay 期間維持初始態；
      只動 transform/opacity（效能鐵律 1），列印關閉 */
.phclock,.phstrip .v,.stat .val,td.num,td .num,.bindbar .c{font-family:var(--mono)}
.phstrip .v em{font-family:'Work Sans',system-ui,'PingFang TC','Noto Sans TC',
  'Microsoft JhengHei UI',sans-serif}
@keyframes cardin{from{opacity:0;transform:translateY(8px)}}
.canvas>.card{animation:cardin .38s ease backwards}
.canvas>.card:nth-child(2){animation-delay:.06s}
.canvas>.card:nth-child(3){animation-delay:.12s}
.canvas>.card:nth-child(4){animation-delay:.18s}
.canvas>.card:nth-child(n+5){animation-delay:.24s}

/* ── 出勤日報（2026-09-29 Muss 拍板：試算表日報的網站原生版）──────
   分類配色對齊試算表圖例（正常/外出/請假/補休/加班/曠職/假日），
   轉成暖黑金版：低飽和底色＋同色相亮字，密而不亂（DNA 品味檔第 5 條）。
   姓名欄與表頭 sticky——30 天橫捲時永遠知道在看誰、哪一天。 */
.drnote{margin:-4px 0 12px; font-size:12.5px}
.drlegend{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; font-size:11.5px}
.drlegend span{padding:3px 10px; border-radius:6px}
.drcal{width:max-content; border-collapse:separate; border-spacing:2px; font-size:11px}
.drcal th,.drcal td{padding:5px 7px; min-width:78px; max-width:120px;
  text-align:center; vertical-align:middle; white-space:pre-line;
  line-height:1.4; border-radius:6px; border:0;
  font-variant-numeric:tabular-nums}
.drcal th{position:sticky; top:0; z-index:1; background:var(--panel-2);
  color:var(--dim); font-size:11px; letter-spacing:0; text-transform:none}
.drcal th.wk{color:var(--faint)}
.drcal .nm{position:sticky; left:0; z-index:2; min-width:88px;
  text-align:right; font-weight:700; color:var(--ink); background:var(--panel)}
.drcal th.nm{z-index:3; background:var(--panel-2)}
.c-normal{background:#1b1a21; color:var(--ink)}
.c-outdoor{background:rgba(63,185,132,.15); color:#7fdcae}
.c-leave{background:rgba(212,175,55,.16); color:var(--gold-lt)}
.c-comp{background:rgba(127,220,174,.09); color:#a8d9c0}
.c-ot{background:rgba(138,180,248,.14); color:#a9c6f7}
.c-absent{background:var(--stop-bg); color:var(--stop-ink); font-weight:700}
.c-holiday,.c-special,.c-wkend{background:#121116; color:var(--faint)}
.c-live{background:rgba(212,175,55,.07); color:var(--dim);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.22)}
.drcal th.tdy{color:var(--gold-lt)}
.drcal td.tdy{box-shadow:inset 0 0 0 1px rgba(212,175,55,.3)}
/* 點格改卡（2026-09-29）：格子是按鈕——游標、hover 金框、鍵盤焦點都要有 */
.drcal td.pick{cursor:pointer; transition:box-shadow .12s, filter .12s}
.drcal td.pick:hover,.drcal td.pick:focus-visible{outline:0; filter:brightness(1.18);
  box-shadow:inset 0 0 0 1.5px var(--gold)}
.drhint{margin:10px 0 0}
.drlock{margin:12px 0 0}
.drfoot{margin:10px 0 0}
.drdlg{width:min(420px, calc(100vw - 32px)); padding:20px; border-radius:var(--r);
  border:1px solid rgba(212,175,55,.28); background:var(--panel); color:var(--ink)}
.drdlg::backdrop{background:rgba(8,7,10,.66); backdrop-filter:blur(3px)}
.drhead{display:flex; align-items:center; justify-content:space-between; gap:12px}
.drhead h2{margin:0; font-size:16px}
.drnow{margin:12px 0 14px; padding:10px 12px; border-radius:8px; font-size:13px;
  text-align:center; white-space:pre-line; line-height:1.5;
  font-variant-numeric:tabular-nums}
.drdlg .flash{margin:0 0 10px; padding:9px 12px; font-size:12.5px}
.drset{display:grid; grid-template-columns:64px 1fr auto; align-items:center;
  gap:10px; margin:0 0 10px}
.drset label{margin:0}
.drset input[type=time]{width:100%}
.drset .btn{min-width:72px}
.drsub{margin:14px 0 8px; font-size:12.5px}
.drlinks{display:flex; flex-wrap:wrap; gap:8px}
/* ── 一次送多天（2026-10-02）：申請表單的多列日期＋簽核頁整批核准 ───── */
.bhint{font-size:12px; margin-left:8px; font-weight:400}
.brows{display:flex; flex-direction:column; gap:8px; margin:6px 0 10px}
.brow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:8px 44px 8px 10px;
  position:relative; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2)}
.brow input[type=date]{flex:1 1 140px; min-width:130px; margin:0}
.brow .bto{display:inline-flex; align-items:center; gap:6px; flex:1 1 150px; color:var(--dim)}
.brow .bto input{flex:1; min-width:120px; margin:0}
.btimes{display:inline-flex; align-items:center; gap:6px; color:var(--dim)}
.brow .btimes{flex:1 1 180px}
.btimes input[type=time]{width:auto; flex:1; min-width:88px; margin:0}
.brow .bto[hidden],.btimes[hidden],.t-times[hidden],.bquick[hidden],.batchbar[hidden]{display:none}
.bdel{position:absolute; right:8px; top:8px; width:34px; height:34px; border:1px solid var(--line); border-radius:8px;
  background:transparent; color:var(--dim); font:inherit; cursor:pointer}
.bdel:hover{color:var(--stop-ink); border-color:var(--stop)}
.bact{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px}
.bact .btn{margin-bottom:0}
.bquick{margin:8px 0 12px; padding:12px 14px; border:1px dashed rgba(212,175,55,.35);
  border-radius:var(--r-sm); background:rgba(212,175,55,.05)}
.bquick .row{align-items:flex-end; margin-bottom:0}
.bquick .btn{margin-bottom:0}
.batchbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0 0;
  padding:10px 12px; border-radius:var(--r-sm); background:var(--go-bg); color:var(--go-ink);
  font-size:13px}
.batchbar .btn{margin:0 0 0 auto; background:var(--go); color:#06170f; border-color:var(--go)}
.batchbar .actmsg{flex-basis:100%; margin:0}

/* 出勤兩視角切換（今日即時｜月日曆） */
.viewseg{display:flex; width:fit-content; max-width:100%; align-self:flex-start;
  margin:0 0 var(--gap); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden}
.viewseg a{padding:9px 18px; font-size:13.5px; color:var(--dim);
  text-decoration:none; background:var(--panel-2)}
.viewseg a+a{border-left:1px solid var(--line)}
.viewseg a:hover{color:var(--gold-lt)}
.viewseg a.on{background:var(--gold); color:#1a1408; font-weight:700}
.drtot{font-size:12.5px}
.drtot th,.drtot td{padding:8px 10px; white-space:nowrap}
.drtot td.tot{color:var(--gold-lt); font-weight:700}
.drtot td.short{color:var(--stop-ink)}

/* ── 手機 ──────────────────────────────────────────── */
.mobar{display:none}
@media (max-width:860px){
  :root{--pad:14px; --gap:12px}
  .shell{grid-template-columns:1fr}
  .sb{display:none}
  .topbar{padding:13px var(--pad)}
  .topbar h1{font-size:17px}
  .canvas{padding:var(--pad) var(--pad) calc(var(--bar-h) + var(--safe-b) + 12px)}
  .mobar{
    /* 格數依身分 5–7 格（T-71：假期人人有、簽核給可簽核者、LINE 只給還沒綁的），永遠一列平分 */
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    position:fixed; left:0; right:0; bottom:0; z-index:10;
    background:#080706; border-top:1px solid var(--line);
    padding-bottom:var(--safe-b);
  }
  .mobar a{display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:9px 2px 8px; color:var(--faint); text-decoration:none;
    font-size:10.5px; font-weight:700; position:relative}
  .mobar a svg{width:19px; height:19px}
  .mobar a.on{color:var(--gold)}
  .mobar .bdg{position:absolute; top:5px; left:50%; margin-left:4px;
    min-width:15px; height:15px; padding:0 4px; border-radius:20px;
    background:var(--stop); color:#fff; font-size:9.5px; display:grid;
    place-items:center; line-height:1}
  .grid2{gap:10px}
  table{font-size:12.5px}
  th,td{padding:9px 7px}
}

/* ── 列印：出勤紀錄是法定文件，不能印成一張黑紙 ────────── */
@media print{
  body{background:#fff; color:#000; font-size:11pt}
  .sb,.mobar,.topbar .rt,.btn,.linkish,.flash,#fireflies{display:none !important}
  .canvas>.card{animation:none}
  .shell{display:block}
  .canvas{padding:0; gap:10px}
  .card{border:1px solid #999; background:#fff; color:#000; break-inside:avoid}
  .muted,.stat .lbl,label,th{color:#333}
  td.num,td .num,.stat .val{color:#000}
  table,th,td{border-color:#999}
  .tag{border:1px solid #999; color:#000; background:#fff}
  a{color:#000; text-decoration:none}
}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }