/* DeepForge 主控台樣式 · 由 scripts/build-ui-css.sh 產生,請勿直接編輯。
   來源:ui/static/ds/*.css;設計系統取自 Sentinel 產品入口網站(~/whale-site/web/whale)。 */

/* ======== tokens.css ======== */
/* DeepForge 主控台 · design tokens
   來源:Whale / Sentinel 產品入口網站的設計系統(~/whale-site/web/whale/tokens.css)。
   同一個色彩世界,但這裡是後台:字級更密、以表格與表單為主,所以字級與間距另立一套。
   規則:任何顏色都從這裡來,頁面裡不要再寫死色碼。 */
:root{
  color-scheme: dark;

  /* 地與面(中性、略偏冷) */
  --w-bg:        #0A0C0F;
  --w-bg-2:      #0E1114;
  --w-surface:   #13171C;
  --w-surface-2: #191E25;
  --w-surface-3: #20262E;   /* 主控台加的一階:表頭、hover 列 */
  --w-line:      rgba(255,255,255,.08);
  --w-line-2:    rgba(255,255,255,.14);

  /* 字色 */
  --w-text:   #ECEEF1;
  --w-text-2: #A6AEB9;
  --w-text-3: #6E7784;

  /* 唯一的強調色:操作訊號 */
  --w-signal:     #E08A3E;
  --w-signal-2:   #F0A45C;
  --w-signal-ink: #140B03;
  --w-signal-dim: rgba(224,138,62,.14);   /* 底色用 */
  --w-signal-line:rgba(224,138,62,.42);

  /* 鑑識冷色:在這套系統裡代表「事後 / 鑑識」,只給語意用,不要拿去當連結色 */
  --w-trace:   #8DB2D6;
  --w-trace-2: #B7D0E6;

  /* 語意色 */
  --w-ok:   #5FBF8F;
  --w-warn: #E5B23C;
  --w-bad:  #E0645A;
  --w-ok-dim:   rgba(95,191,143,.13);
  --w-warn-dim: rgba(229,178,60,.13);
  --w-bad-dim:  rgba(224,100,90,.13);
  --w-sos:     #B3261E;
  --w-sos-ink: #FFFFFF;

  /* 玻璃(節制使用:只有頂部導覽) */
  --w-glass:      rgba(255,255,255,.035);
  --w-glass-line: rgba(255,255,255,.09);
  --w-glass-blur: 14px;

  /* 形狀 */
  --w-radius-sm: 6px;
  --w-radius:    8px;
  --w-radius-lg: 12px;

  /* 字體:系統字堆疊,完全不連外(地端 / 離線客戶必要條件) */
  --w-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue",
            "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", Roboto, Arial, sans-serif;
  --w-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 字級:後台密度,不用官網那組 clamp 巨標 */
  /* 外部審查(2026-09-24):桌面字太小、層級弱。正文 14→15,標題拉開層級(h1 21→24、h2 17→19)。 */
  --w-fs-xs: 12px;
  --w-fs-sm: 13.5px;
  --w-fs-md: 15px;
  --w-fs-lg: 17px;
  --w-fs-h3: 16px;
  --w-fs-h2: 19px;
  --w-fs-h1: 24px;
  --w-fs-num: 26px;      /* 指標卡的數字 */

  /* 間距(4 的倍數) */
  --w-s1: 4px;  --w-s2: 8px;  --w-s3: 12px; --w-s4: 16px; --w-s5: 24px;
  --w-s6: 32px; --w-s7: 48px; --w-s8: 64px;

  /* 版面 */
  --w-container: 1280px;
  --w-gutter: clamp(16px, 3vw, 32px);
  --w-nav-h: 56px;

  /* 動態:快、輕、有目的 */
  --w-ease: cubic-bezier(.2, .7, .2, 1);
  --w-fast: 140ms;
  --w-base: 260ms;
  --w-lift: 1px;

  /* ── 舊變數對應 ──────────────────────────────────────────────
     全站 124 個樣板與各模組 base 的行內樣式都在用這八個名字。
     把它們接到新色票,舊標記不用改一行就換上新外觀。
     新寫的樣式請直接用上面的 --w-* 。 */
  --bg:    var(--w-bg);
  --panel: var(--w-surface);
  --line:  var(--w-line);
  --fg:    var(--w-text);
  --dim:   var(--w-text-2);
  --acc:   var(--w-signal);
  --ok:    var(--w-ok);
  --warn:  var(--w-bad);     /* 舊碼把 --warn 當危險色用(.err/.st.bad),所以對到 bad */
  --amber: var(--w-warn);    /* 舊碼寫死的 #ffb648 請改用這個 */
  --link:  var(--w-text);    /* 連結=本文色 + 細底線,hover 時底線換訊號色 */
}

/* ======== base.css ======== */
/* DeepForge 主控台 · base */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--w-bg); color:var(--w-text);
  font-family:var(--w-font); font-size:var(--w-fs-md); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* 中文不要吃到負字距,行高也要比西文鬆一點,否則標題會擠在一起 */
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.35 }
h1{ font-size:var(--w-fs-h1); letter-spacing:.01em }
h2{ font-size:var(--w-fs-h2); color:var(--w-text); margin:var(--w-s6) 0 var(--w-s3) }
h3{ font-size:var(--w-fs-h3) }
h2:first-child{ margin-top:0 }
p{ margin:0 0 var(--w-s3) }
/* 連結:本文色 + 細底線,hover 時底線換訊號色。
   不用冷色,因為 --w-trace 在這套設計系統裡代表「事後 / 鑑識」,
   DeepSafe 的事故回應與遮罩已經在用,連結再吃冷色會撞掉語意(與 DeepSafe 一致)。 */
a{ color:var(--link); text-decoration:underline; text-decoration-color:var(--w-line-2);
   text-decoration-thickness:1px; text-underline-offset:3px;
   transition:text-decoration-color var(--w-fast) var(--w-ease) }
a:hover{ color:var(--w-text); text-decoration-color:var(--w-signal) }
img,svg{ display:block; max-width:100% }
hr{ border:0; border-top:1px solid var(--w-line); margin:var(--w-s5) 0 }
small{ font-size:var(--w-fs-xs) }
::selection{ background:var(--w-signal); color:var(--w-signal-ink) }

/* 鍵盤焦點一定要看得見:後台大量用 Tab 操作 */
:focus-visible{ outline:2px solid var(--w-signal); outline-offset:2px; border-radius:var(--w-radius-sm) }

/* 數字一律等寬,金額欄才不會跳動 */
.w-num,.num,td.num,.mono,code,kbd{ font-variant-numeric:tabular-nums }
code,kbd{ font-family:var(--w-mono); font-size:.92em; color:var(--w-signal-2);
  background:rgba(224,138,62,.08); border:1px solid rgba(224,138,62,.18);
  border-radius:var(--w-radius-sm); padding:.1em .38em }
a code{ color:inherit }
pre{ background:var(--w-bg-2); border:1px solid var(--w-line); border-radius:var(--w-radius);
  padding:var(--w-s4); overflow-x:auto; font-family:var(--w-mono); font-size:var(--w-fs-sm);
  line-height:1.55; color:var(--w-text-2) }
pre code{ background:none; border:0; padding:0; color:inherit }

.muted{ color:var(--w-text-2); font-size:var(--w-fs-sm) }
.dim{ color:var(--w-text-3) }
.err{ color:var(--w-bad) }
.w-eyebrow{ font-family:var(--w-mono); font-size:var(--w-fs-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--w-text-3) }
.w-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ======== layout.css ======== */
/* DeepForge 主控台 · 版型:頂部導覽、容器、模組子導覽、頁首 */

/* 頂部導覽:沿用官網的 sticky 玻璃列,高度壓到後台尺度 */
nav.w-nav{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--w-line);
  background:rgba(10,12,15,.78);
  -webkit-backdrop-filter:blur(var(--w-glass-blur)); backdrop-filter:blur(var(--w-glass-blur));
}
.w-nav__row{
  display:flex; align-items:center; gap:var(--w-s4); min-height:var(--w-nav-h);
  width:100%; max-width:var(--w-container); margin-inline:auto;
  padding:var(--w-s2) var(--w-gutter); flex-wrap:wrap; row-gap:var(--w-s2);
}
.w-nav__brand{
  text-decoration:none;
  display:flex; align-items:center; gap:var(--w-s2);
  font-weight:600; font-size:var(--w-fs-lg); color:var(--w-text);
  white-space:nowrap; letter-spacing:.01em;
}
.w-nav__brand:hover{ color:var(--w-text); text-decoration:none }
.w-nav__brand svg,.w-nav__brand img{ width:22px; height:22px; flex:none }
.w-nav__brand svg{ color:var(--w-signal) }
/* 公司 LOGO:導覽列最右端,跟選單同一列。
   高度不低於 34px:它是兩行字的組合標誌,再矮第二行 FORENSICS 會糊。
   flex:none 讓窄螢幕換行時它不會被壓縮,寧可自己換到下一行也不要變小。 */
/* 固定在導覽列**第一行的右上角**,不參與換行。
   原本放在右側那群(使用者、登出)裡,選單一長就跟著被擠到第二行;手機上更會被推出畫面外看不到。
   改成相對導覽列定位,並在右側預留它的寬度,其他內容就不會蓋到它。
   34px 高 × 約 1.6 的長寬比 ≈ 55px 寬。 */
.w-nav__row{ position:relative; padding-right:calc(var(--w-gutter) + 55px + var(--w-s3)) }
.w-nav__logo{ position:absolute; top:calc((var(--w-nav-h) - 34px) / 2); right:var(--w-gutter);
  display:block; text-decoration:none; line-height:0 }
.w-nav__logo img{ height:34px; width:auto; display:block }
.w-nav__logo:hover{ opacity:.85 }
.w-nav__brand small{
  font-family:var(--w-mono); font-size:var(--w-fs-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--w-text-3); font-weight:400;
}
.w-nav__menu{ display:flex; align-items:center; gap:var(--w-s1); flex-wrap:wrap; row-gap:var(--w-s1) }
.w-nav__menu a:not(.btn){
  text-decoration:none;
  display:inline-flex; align-items:center; height:30px; padding:0 var(--w-s3);
  border-radius:var(--w-radius-sm); font-size:var(--w-fs-sm); color:var(--w-text-2);
  white-space:nowrap; transition:color var(--w-fast) var(--w-ease), background var(--w-fast) var(--w-ease);
}
.w-nav__menu a:not(.btn):hover{ color:var(--w-text); background:var(--w-glass); text-decoration:none }
/* 目前所在的模組:橘色底線,不是整塊反白 */
.w-nav__menu a:not(.btn)[aria-current="page"]{ color:var(--w-text); background:var(--w-signal-dim); box-shadow:inset 0 -2px 0 var(--w-signal) }
/* 導覽群組(下拉):summary 長得跟一般導覽連結一樣;目前所在的組標亮 */
.w-nav__group{ position:relative }
.w-nav__group > summary{ list-style:none; cursor:pointer; color:var(--w-text-2); font-size:var(--w-fs-sm);
  display:inline-flex; align-items:center; height:30px; padding:0 var(--w-s3);
  border-radius:var(--w-radius-sm); white-space:nowrap; user-select:none }
.w-nav__group > summary::-webkit-details-marker{ display:none }
.w-nav__group > summary::after{ content:"▾"; margin-left:.35em; font-size:.8em; opacity:.7 }
.w-nav__group > summary:hover{ color:var(--w-text); background:var(--w-glass) }
.w-nav__group[data-active] > summary{ color:var(--w-text); background:var(--w-signal-dim); box-shadow:inset 0 -2px 0 var(--w-signal) }
.w-nav__drop{ position:absolute; top:calc(100% + 4px); left:0; z-index:50; min-width:180px; display:flex; flex-direction:column;
  padding:var(--w-s2); background:var(--w-surface-2); border:1px solid var(--w-line-2); border-radius:var(--w-radius-lg);
  box-shadow:0 10px 30px rgba(0,0,0,.45) }
.w-nav__drop a:not(.btn){ padding:var(--w-s2) var(--w-s3) }
.w-nav__end{ margin-left:auto; display:flex; align-items:center; gap:var(--w-s3); flex-wrap:wrap }
/* 右側是次要入口,不要跟內文連結一樣是藍的 */
.w-nav__end a:not(.btn){ color:var(--w-text-2); font-size:var(--w-fs-sm); white-space:nowrap; text-decoration:none }
.w-nav__end a:not(.btn):hover{ color:var(--w-text) }
.w-nav__end a:not(.btn)[aria-current="page"]{ color:var(--w-signal-2) }
.w-nav__who{ font-size:var(--w-fs-xs); color:var(--w-text-3); white-space:nowrap }
.w-nav__who b{ color:var(--w-text-2); font-weight:500 }

main{
  width:100%; max-width:var(--w-container); margin-inline:auto;
  padding:var(--w-s6) var(--w-gutter) var(--w-s8);
}
.w-narrow{ max-width:860px; margin-inline:auto }

/* 模組子導覽(crm / hrm / finance / fulfillment 共用) */
.sub{
  display:flex; gap:var(--w-s1); flex-wrap:wrap; align-items:center;
  margin:0 0 var(--w-s5); padding-bottom:var(--w-s2);
  border-bottom:1px solid var(--w-line); font-size:var(--w-fs-sm);
}
.sub a:not(.btn){
  text-decoration:none; display:inline-flex; align-items:center; height:28px; padding:0 var(--w-s3);
  border-radius:var(--w-radius-sm); color:var(--w-text-2); white-space:nowrap;
  transition:color var(--w-fast) var(--w-ease), background var(--w-fast) var(--w-ease);
}
.sub a:not(.btn):hover{ color:var(--w-text); background:var(--w-glass); text-decoration:none }
.sub a:not(.btn).on{ color:var(--w-signal-2); background:var(--w-signal-dim); font-weight:600 }
.sub .r{ margin-left:auto }

/* 頁首:麵包屑 + 標題 + 右側動作 */
.w-head{ display:flex; align-items:flex-start; gap:var(--w-s4); flex-wrap:wrap; margin-bottom:var(--w-s5) }
.w-head h1{ display:flex; align-items:center; gap:var(--w-s3); flex-wrap:wrap }
.w-head h1 .muted{ font-weight:400 }
.w-head__end{ margin-left:auto; display:flex; gap:var(--w-s2); flex-wrap:wrap }
.w-crumb{ font-size:var(--w-fs-sm); color:var(--w-text-3); margin-bottom:var(--w-s2) }

/* 兩欄 / 自動欄 */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--w-s5) }
.grid--tight{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--w-s4) }

@media (max-width:640px){
  .w-nav__row{ gap:var(--w-s2) }
  .w-nav__brand small{ display:none }
  main{ padding-top:var(--w-s5) }
}

/* ======== components.css ======== */
/* DeepForge 主控台 · 元件
   類別名沿用現有 124 個樣板已經在用的名字(card / num / lbl / st / badge /
   notice / box / f / tab / seg / bar / step),所以樣板不用改就換上新外觀。 */

/* ── 指標卡 ─────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--w-s3); margin:0 0 var(--w-s5) }
.card{
  background:var(--w-surface); border:1px solid var(--w-line);
  border-radius:var(--w-radius-lg); padding:var(--w-s4) var(--w-s5);
  display:grid; gap:var(--w-s1); align-content:start;
  transition:border-color var(--w-base) var(--w-ease), background var(--w-base) var(--w-ease);
}
.card:hover{ border-color:var(--w-line-2) }
.card .num{
  font-family:var(--w-mono); font-size:var(--w-fs-num); font-weight:600;
  letter-spacing:-.02em; line-height:1.1; color:var(--w-text); font-variant-numeric:tabular-nums;
}
.card .num.muted,.card .num.dim{ font-size:var(--w-fs-lg); color:var(--w-text-3) }
.card .num small{ font-size:.5em; color:var(--w-text-3); font-weight:400; margin-left:var(--w-s1) }
.card .lbl{ font-size:var(--w-fs-xs); color:var(--w-text-2); line-height:1.45 }
.card.ok .num{ color:var(--w-ok) }
.card.warn .num{ color:var(--w-warn) }
.card.bad .num{ color:var(--w-bad) }
/* 主要指標:橘色,一頁最多一張 */
.card.lead{ border-color:var(--w-signal-line); background:linear-gradient(180deg,var(--w-signal-dim),transparent 60%),var(--w-surface) }
.card.lead .num{ color:var(--w-signal-2) }

/* ── 面板 ───────────────────────────────────────── */
.box{
  background:var(--w-surface); border:1px solid var(--w-line);
  border-radius:var(--w-radius-lg); padding:var(--w-s4) var(--w-s5); margin:0 0 var(--w-s4);
}
.box > :last-child{ margin-bottom:0 }
.box h2,.box h3{ margin-top:0 }
.box.ai{ border-left:3px solid var(--w-signal) }
.box.ai.low{ border-left-color:var(--w-warn) }

/* ── 表格 ───────────────────────────────────────── */
table{ width:100%; border-collapse:collapse; font-size:var(--w-fs-sm) }
thead th{
  position:sticky; top:var(--w-nav-h); z-index:1;
  background:var(--w-bg-2); color:var(--w-text-3);
  font-family:var(--w-mono); font-size:var(--w-fs-xs); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
}
th,td{ text-align:left; padding:var(--w-s3) var(--w-s3); border-bottom:1px solid var(--w-line); vertical-align:top }
th:first-child,td:first-child{ padding-left:0 }
th:last-child,td:last-child{ padding-right:0 }
tbody tr{ transition:background var(--w-fast) var(--w-ease) }
tbody tr:hover td{ background:var(--w-glass) }
td div.muted,td p.muted{ margin-top:2px }
td .muted{ font-size:var(--w-fs-xs) }
td form{ display:inline }
/* 金額欄 */
td.num,th.num,.kpi td,.kpi th{ text-align:right; font-variant-numeric:tabular-nums }
.kpi td:first-child,.kpi th:first-child{ text-align:left }
/* 窄螢幕:表格自己捲,不要把整頁撐破 */
.w-scroll{ overflow-x:auto; margin-inline:calc(var(--w-gutter) * -1); padding-inline:var(--w-gutter) }

/* ── 表單 ───────────────────────────────────────── */
input,textarea,select{
  background:var(--w-bg-2); color:var(--w-text);
  border:1px solid var(--w-line-2); border-radius:var(--w-radius);
  padding:0 var(--w-s3); min-height:34px; font:inherit; font-size:var(--w-fs-sm);
  transition:border-color var(--w-fast) var(--w-ease), background var(--w-fast) var(--w-ease);
  max-width:100%;
}
input:hover,textarea:hover,select:hover{ border-color:rgba(255,255,255,.22) }
input:focus,textarea:focus,select:focus{ border-color:var(--w-signal); outline:none; background:var(--w-bg) }
input::placeholder,textarea::placeholder{ color:var(--w-text-3) }
input[type=checkbox],input[type=radio]{ min-height:0; accent-color:var(--w-signal); width:15px; height:15px; vertical-align:-2px }
textarea{ width:100%; min-height:7rem; padding:var(--w-s2) var(--w-s3); line-height:1.6; font-family:var(--w-mono); font-size:var(--w-fs-sm) }
select{ padding-right:var(--w-s5) }
label.f{ display:block; margin:0 0 var(--w-s3); font-size:var(--w-fs-xs); color:var(--w-text-2) }
label.f input,label.f select,label.f textarea{ width:100%; margin-top:var(--w-s1) }
form.inline{ display:flex; gap:var(--w-s2); align-items:center; flex-wrap:wrap }
form.inline input,form.inline select{ max-width:16rem }
fieldset{ border:1px solid var(--w-line); border-radius:var(--w-radius-lg); padding:var(--w-s4) var(--w-s5); margin:0 0 var(--w-s4) }
legend{ padding:0 var(--w-s2); font-size:var(--w-fs-xs); color:var(--w-text-3);
  font-family:var(--w-mono); letter-spacing:.1em; text-transform:uppercase }

/* ── 按鈕 ───────────────────────────────────────── */
button,.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--w-s2);
  min-height:34px; padding:0 var(--w-s4);
  border-radius:var(--w-radius); border:1px solid transparent;
  background:var(--w-signal); color:var(--w-signal-ink);
  font:inherit; font-size:var(--w-fs-sm); font-weight:600; letter-spacing:.01em;
  white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:background var(--w-fast) var(--w-ease), transform var(--w-fast) var(--w-ease),
             border-color var(--w-fast) var(--w-ease), color var(--w-fast) var(--w-ease);
}
button:hover,.btn:hover{ background:var(--w-signal-2); transform:translateY(calc(var(--w-lift) * -1)); text-decoration:none }
button:active,.btn:active{ transform:translateY(0) }
button:disabled,.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none }
/* 次要動作:表格裡大量出現,不能每顆都是橘的 */
button.ghost,.btn.ghost{ background:transparent; border-color:var(--w-line-2); color:var(--w-text-2); font-weight:500 }
button.ghost:hover,.btn.ghost:hover{ background:var(--w-glass); border-color:rgba(255,255,255,.22); color:var(--w-text) }
/* 破壞性動作:紅的,而且比強調色更暗,不會被誤點成主要動作 */
button.danger,.btn.danger{ background:var(--w-sos); color:var(--w-sos-ink) }
button.danger:hover,.btn.danger:hover{ background:#C7382F }
button.sm,.btn.sm{ min-height:26px; padding:0 var(--w-s3); font-size:var(--w-fs-xs) }

/* ── 狀態籌碼:.st 以狀態字當類別,.badge 為通用標籤 ── */
.st,.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px var(--w-s2); border-radius:999px;
  font-size:var(--w-fs-xs); line-height:1.5; white-space:nowrap;
  color:var(--w-text-2); border:1px solid var(--w-line-2); background:rgba(255,255,255,.02);
}
.st::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none }
.st.quiet::before{ display:none }
/* 完成 / 通過 */
.st.ok,.st.qualified,.st.signed,.st.paid,.st.approved,.st.issued,.st.active,.st.done,
.st.disbursed,.st.settled,.st.reviewed,.st.locked,.badge.ok{
  color:var(--w-ok); border-color:rgba(95,191,143,.4); background:var(--w-ok-dim) }
/* 進行中 / 待處理 */
.st.warn,.st.pending_approval,.st.requested,.st.current,.st.poc,.st.quote,.st.expired,
.st.submitted,.st.returned,.st.booked,.st.planning,.badge.warn{
  color:var(--w-warn); border-color:rgba(229,178,60,.4); background:var(--w-warn-dim) }
/* 失敗 / 風險 */
.st.bad,.st.lost,.st.disqualified,.st.rejected,.st.disabled,.st.overdue,.st.corrected,
.badge.fail,.badge.blocked,.badge.quarantined,.badge.bad{
  color:var(--w-bad); border-color:rgba(224,100,90,.4); background:var(--w-bad-dim) }
/* 草稿 / 未開始 */
.st.draft,.st.closed{ color:var(--w-text-3) }
/* 財務旗標 */
.flag{ display:inline-flex; align-items:center; padding:1px var(--w-s2); border-radius:var(--w-radius-sm);
  background:var(--w-warn-dim); color:var(--w-warn); border:1px solid rgba(229,178,60,.3);
  font-size:var(--w-fs-xs); margin-right:var(--w-s1) }
.flag.hi{ background:var(--w-bad-dim); color:var(--w-bad); border-color:rgba(224,100,90,.35) }

/* ── 通知條 ─────────────────────────────────────── */
.notice{
  display:block; background:var(--w-surface); border:1px solid var(--w-line);
  border-left:3px solid var(--w-signal); border-radius:var(--w-radius);
  padding:var(--w-s3) var(--w-s4); margin:0 0 var(--w-s4); font-size:var(--w-fs-sm);
}
.notice > :last-child{ margin-bottom:0 }
.notice.ok{ border-left-color:var(--w-ok) }
.notice.warn{ border-left-color:var(--w-warn) }
.notice.error{ border-left-color:var(--w-bad); color:var(--w-text) }
.notice.error b{ color:var(--w-bad) }

/* ── 分頁籤 / 區段 ──────────────────────────────── */
.tab{ text-decoration:none; display:inline-flex; align-items:center; height:30px; padding:0 var(--w-s3);
  border-radius:var(--w-radius-sm); color:var(--w-text-2); font-size:var(--w-fs-sm) }
.tab.on{ color:var(--w-signal-2); background:var(--w-signal-dim); font-weight:600 }
.tl{ display:flex; gap:var(--w-s2); flex-wrap:wrap }
.tl .seg{
  flex:1 1 150px; min-width:150px; background:var(--w-surface);
  border:1px solid var(--w-line); border-radius:var(--w-radius); padding:var(--w-s3) var(--w-s4);
  font-size:var(--w-fs-sm);
}
.tl .seg.done{ border-color:rgba(95,191,143,.4); background:linear-gradient(180deg,var(--w-ok-dim),transparent 70%),var(--w-surface) }
.tl .seg.current{ border-color:var(--w-signal-line); background:linear-gradient(180deg,var(--w-signal-dim),transparent 70%),var(--w-surface) }
.tl .seg.overdue{ border-color:rgba(224,100,90,.45); background:linear-gradient(180deg,var(--w-bad-dim),transparent 70%),var(--w-surface) }

/* ── 流程步驟 ───────────────────────────────────── */
.step{
  background:var(--w-surface); border:1px solid var(--w-line); border-left:3px solid var(--w-text-3);
  border-radius:var(--w-radius); padding:var(--w-s4) var(--w-s5); margin:0 0 var(--w-s3);
}
.step.done{ border-left-color:var(--w-ok) }
.step.next{ border-left-color:var(--w-signal) }
.step h3{ margin:0; display:flex; gap:var(--w-s3); align-items:baseline }
.step h3 .prog{ margin-left:auto; font-size:var(--w-fs-xs); color:var(--w-text-3); font-weight:400 }

/* ── 進度條 ─────────────────────────────────────── */
.bar{ height:6px; background:var(--w-bg-2); border-radius:999px; overflow:hidden; border:1px solid var(--w-line) }
.bar i{ display:block; height:100%; background:var(--w-signal); border-radius:inherit;
  transition:width var(--w-base) var(--w-ease) }
.bar.ok i{ background:var(--w-ok) }
.bar.bad i{ background:var(--w-bad) }

/* ── 空狀態 ─────────────────────────────────────── */
.w-empty{ padding:var(--w-s7) var(--w-s5); text-align:center; color:var(--w-text-3);
  border:1px dashed var(--w-line-2); border-radius:var(--w-radius-lg); font-size:var(--w-fs-sm) }

/* ── 登入 ───────────────────────────────────────── */
/* 版面對齊 DeepSafe 的登入卡:置中、380px、標題置中、欄位上方常駐標籤(外部審查 2026-09-24) */
.login-box{
  /* 登入框是 <main>:layout.css 對 main 設了全寬與內距,這裡要全部蓋掉(手機上曾被撐出畫面右邊) */
  width:auto; max-width:380px; margin:10vh auto; padding:var(--w-s6);
  background:var(--w-surface-2); border:1px solid var(--w-line-2); border-radius:var(--w-radius-lg);
}
.login-logo{ display:block; height:52px; width:auto; margin:0 auto var(--w-s5) }
.login-box h1{ text-align:center; margin-bottom:var(--w-s1) }
.login-sub{ text-align:center; color:var(--w-text-2); font-size:var(--w-fs-sm); margin-bottom:var(--w-s5) }
.login-box label{ display:block; font-size:var(--w-fs-sm); color:var(--w-text-2); margin:0 0 var(--w-s1) }
.login-box input{ width:100%; margin:0 0 var(--w-s4) }
.login-box button{ width:100%; margin-top:var(--w-s2) }
.login-help{ margin-top:var(--w-s5); font-size:var(--w-fs-sm); color:var(--w-text-2); line-height:1.6 }
@media (max-width:440px){ .login-box{ margin:var(--w-s5) var(--w-s4); padding:var(--w-s5); max-width:none } }

/* ── 窄螢幕:寬表格自己橫向捲 ────────────────────
   全站表格沒有外層包裝,所以直接讓 table 在窄視窗變成可捲區塊。
   斷點取 900 而不是 720:CRM 訂單那種十一欄的表在 820px 還沒溢出,
   但欄名會被擠成三四行、列高衝到 100px 以上,不如直接給橫向捲軸。 */
@media (max-width:900px){
  table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
  thead th{ position:static }
  th,td{ white-space:nowrap }
  th:first-child,td:first-child{ padding-left:0 }
}
@media (max-width:720px){
  .cards{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
  .card .num{ font-size:var(--w-fs-h1) }
}

/* 首頁「應用模組」卡裡的清單:緊湊排列(原本用 br 分隔,在 .card 的行高下間距過大) */
.mod-list{ display:flex; flex-direction:column; gap:var(--w-s1) }
.mod-list a, .mod-list span{ font-size:var(--w-fs-md); line-height:1.5 }

/* ======== print.css ======== */
/* DeepForge 主控台 · 列印(報表、傳票、人事文件、出貨單會被印出來或轉 PDF)
   介面深色、輸出淺色。做法是**把 :root 的代幣整組翻成淺色**,不是逐個元素寫白底:
   - 元件 CSS 一律寫 var(--w-surface) 之類的代幣,所以翻代幣就全部跟著翻,
     新模組加的元件不用回頭補 @media print,也不必跟全域樣式打 !important 特異性戰。
   - 特別重要的是 SVG:fill 與 stroke 是前景,列印一定會畫出來(背景色預設會被丟掉),
     `.ins svg text{fill:var(--w-text)}` 在深色代幣下是接近白的字,印在白紙上等於隱形。
     翻代幣之後它自動變成深色字。
   淺色值取自官網交接文件 ~/whale-site/docs/design-system-handoff.md。
   強調色與語意色兩邊完全不動,橘色印在白紙上沒問題。 */
@media print{
  :root{
    color-scheme: light;
    --w-bg:        #FAFAFB;
    --w-bg-2:      #F4F5F7;
    --w-surface:   #FFFFFF;
    --w-surface-2: #F4F5F7;
    --w-surface-3: #ECEEF1;
    --w-text:      #14171B;
    --w-text-2:    #565E6B;
    /* 官網那組淺色值是給螢幕用的。紙上要更重:
       #8A929D 在白底只有 3.2:1(低於 4.5:1),細線 10% 黑印出來幾乎看不到。 */
    --w-text-3:    #6B7280;   /* 白底 4.8:1 */
    --w-line:      rgba(0,0,0,.18);
    --w-line-2:    rgba(0,0,0,.30);
    /* 語意色是照深色底調的,印在白紙上當文字對比不足:
       ok 2.3:1 / warn 1.9:1 / bad 3.1:1。同色相加深到 5:1 以上。 */
    --w-ok:   #1E7A50;
    --w-warn: #8A6200;
    --w-bad:  #B23A30;
    --w-glass:      transparent;
    --w-glass-line: rgba(0,0,0,.10);
    --link:        var(--w-text);
  }
  /* 導覽與編輯用的東西不印。客戶拿到的是文件,不是操作畫面:
     空白的輸入框、下拉選單、日期選擇器印出來只是一堆沒有意義的方框,
     而且會把真正的內容擠到後面幾頁去。資料都在表格與面板裡,不在表單裡。 */
  nav.w-nav,.sub,.w-nav__end,.ful .tabs,button,.btn,
  form,details,input,select,textarea,label.f,.noprint{ display:none !important }
  /* 整個區塊只有表單的,連標題一起收掉,不然紙上會留一排沒有內容的小標。
     後面接表格或面板的標題會留著(例如「報價」後面是報價表)。
     :has() 不支援的瀏覽器只是退回顯示標題,不會壞。 */
  h2:has(+ form),h3:has(+ form),h2:has(+ details),h3:has(+ details){ display:none }
  /* 兩欄版面在紙上改成單欄,由上往下讀;表格也才拿得到整頁寬度不會被切掉 */
  .grid,.grid--tight{ display:block }
  .grid > * + *{ margin-top:var(--w-s5) }
  body{ background:#fff; font-size:10.5pt }
  main{ max-width:none; padding:0 }
  a{ color:var(--w-text); text-decoration-color:var(--w-line-2) }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8.5pt; color:var(--w-text-3) }
  /* 深色底才需要的效果,白紙上要拿掉 */
  .card,.box,.notice,.step,.tl .seg,.ful .msg,.ins .chart,fieldset,pre,.login-box{
    box-shadow:none; background-image:none; break-inside:avoid }
  code,kbd{ color:var(--w-text); background:transparent; border-color:var(--w-line-2) }
  thead th{ position:static }
  tbody tr:hover td{ background:none }
  table,.w-scroll{ overflow:visible; display:table }
  th,td{ white-space:normal }
  tr,.cards > *{ break-inside:avoid }
  /* .grid > * 不加 break-inside:avoid:那些區塊可能比一頁還高,
     avoid 會把整塊推到下一頁,前面留一整片空白 */
  /* 狀態籌碼在白紙上靠邊框與文字辨識,底色印不印都讀得到 */
  .st,.badge,.flag{ border-color:var(--w-line-2) }
  /* 指標卡的大數字在螢幕上會是橘色(--w-signal-2),印在白紙只有 2:1。
     長條圖與邊框可以留著橘色,那是色塊不是文字,不受文字對比規範。 */
  .card .num,.card.lead .num,.card.ok .num,.card.warn .num,.card.bad .num{ color:var(--w-text) }
}