/* 多畫面外殼的樣式。
   ⚠️ /app 的 CSP 是 style-src 'self' —— style= 屬性會被瀏覽器整個丟掉,
      而且不報錯。所有樣式必須在這裡或各 app 的 styles.css。 */

/* ⚠️ **外殼必須齊頂、佔滿視窗。** 先前使用者列(.ds-userbar)浮在外殼
   之上,把側欄推到 y=81;原型的側欄是 y=0、100vh。
   使用者列現在由 shell.js 搬進主區頂欄。 */
.sh {
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--surface-1);
}
body { margin: 0; }

/* ── 左側導覽 ───────────────────────────────────────── */
/* ⚠️ 側欄是一根**跟著頁面捲動的普通欄**,不釘住、不自己捲。
      先前是 sticky + 100vh + overflow-y:auto,因為底部釘著一條頁尾
      (畫面索引 / 登出)—— 頁尾拿掉之後那一套就沒有理由存在。
      深色底要鋪滿整欄高度:交給 grid 的 stretch,不是自己撐 100vh。 */
.sh-nav {
  background: var(--ink-900);
  color: #fff;
  display: flex;
  flex-direction: column;
}
.sh-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  flex: none;
}
.sh-brandtext { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sh-brandtext b { font: 700 14px/1.25 var(--font-app); }
.sh-brandtext span {
  font: 400 12px/1.3 var(--font-platform);
  color: rgba(255, 255, 255, .45);
}

/* 情境區塊 —— 「這個畫面現在代表誰」。 */
.sh-context {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  flex: none;
}
.sh-context[hidden] { display: none; }
.sh-context-k {
  font: 600 9.5px/1.4 var(--font-platform);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
.sh-context b { font: 600 13px/1.35 var(--font-app); }
.sh-context-s {
  font: 400 12px/1.3 var(--font-platform);
  color: rgba(255, 255, 255, .5);
  font-variant-numeric: tabular-nums;
}
.sh-surface {
  font: 800 15px/1 var(--font-app);
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--teal-500);
  color: var(--on-teal);
}
.sh-title { font: 700 13.5px/1.3 var(--font-app); }

.sh-groups { padding: 10px 8px 24px; display: flex; flex-direction: column; gap: 11px; }
/* ⚠️ 分組可摺疊。原型預設**收起**,十個分組一眼看得完;
   全部展開的話 42 個項目要捲三屏,而使用者其實只在一兩個分組裡工作。 */
.sh-group { display: flex; flex-direction: column; gap: 1px; }
.sh-group-head {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 10px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font: 500 13px/1.35 var(--font-platform);
  text-align: left; cursor: pointer;
}
.sh-group-head:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sh-group.open > .sh-group-head { color: #fff; font-weight: 600; }
.sh-group-head .sh-ico { flex: none; width: 17px; height: 17px; opacity: .85; }
.sh-group-head .sh-cnt { flex: 1; min-width: 0; }
.sh-group-head .sh-chev {
  flex: none; width: 13px; height: 13px; opacity: .55;
  transition: transform .14s ease;
}
@media (prefers-reduced-motion: reduce) { .sh-group-head .sh-chev { transition: none; } }
.sh-group.open > .sh-group-head .sh-chev { transform: rotate(90deg); }
.sh-group-items { display: none; flex-direction: column; gap: 1px; padding-bottom: 3px; }
.sh-group.open > .sh-group-items { display: flex; }
/* ⚠️ 一列 30px 上下,不是 44px。先前每列 44px,十一個分組要捲很久,
   而原型是一眼看得完的一份清單。 */
.sh-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px 7px 36px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font: 400 13px/1.35 var(--font-platform);
  text-align: left;
  cursor: pointer;
}
.sh-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sh-item.on { background: var(--teal-500); color: var(--on-teal); }
.sh-item-name { flex: 1; min-width: 0; }
.sh-nav-n { flex: none; min-width: 16px; height: 16px; margin-left: 6px; border-radius: 9px; background: var(--red-600); color: #fff; font: 600 10px/16px var(--font-platform); text-align: center; padding: 0 4px; }
.sh-group-head .sh-nav-n { margin-left: auto; margin-right: 6px; }
.sh-item-id {
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .4);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.sh-item.on .sh-item-id { color: rgba(255, 255, 255, .8); }
/* ⚠️ 留待後續的畫面要看得出來是**刻意**未建,不是壞掉。 */
.sh-item.held .sh-item-name { color: rgba(255, 255, 255, .45); }
.sh-index { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 10px; border-radius: 0; }

.sh-lang { display: flex; gap: 4px; }
.sh-langbtn {
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: rgba(255, 255, 255, .8);
  font: 400 12px/1.3 var(--font-platform);
  cursor: pointer;
}
.sh-langbtn.on { background: #fff; color: var(--ink-900); border-color: #fff; }

/* ── 主區 ───────────────────────────────────────────── */
/* ⚠️ min-width: 0 是必要的:grid 項目的預設 min-width 是 auto,
   一張寬表格會把整欄撐開,側欄被擠掉、頁面橫向捲動。 */
.sh-main { min-width: 0; display: flex; flex-direction: column; }

.sh-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 20px 0 24px;
  min-height: 52px;
  background: var(--surface-0);
  border-bottom: 1px solid var(--line-200);
  flex: none;
}
.sh-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
/* 畫面編號與條文只在除錯模式顯示(.sh.is-debug)—— 開發 / 示範用 */
.sh:not(.is-debug) .sh-idchip, .sh:not(.is-debug) .sh-clauseref, .sh:not(.is-debug) .sh-item-id { display: none; }
.sh-idchip {
  font: 600 12px/1.6 var(--font-mono);
  background: var(--surface-1);
  border: 1px solid var(--line-200);
  border-radius: 5px;
  padding: 1px 7px;
  color: var(--ink-700);
  white-space: nowrap;
}
.sh-crumb-up { color: var(--ink-500); }
.sh-crumb-link { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-decoration: underline dotted; }
.sh-crumb-link:hover { color: var(--teal-600); }
.sh-crumb-now { color: var(--ink-900); font-weight: 600; }
.sh-crumb-sep { color: var(--ink-400); }
.sh-actions { display: flex; align-items: center; gap: 12px; flex: none; }
/* ⚠️ 各 app 的 styles.css 有一條 `input, select, button { min-height: 36px }`(表單
   的觸控目標)—— 它也套到頂欄與側欄的按鈕上:語言鍵、鈴鐺撐成整條頂欄高,
   側欄項目的字被推到框的上緣。外殼的按鈕自己定高度。 */
.sh-topbar button, .sh-nav button { min-height: 0; }
.sh-actions .sh-lang, .sh-bell, .sh-user-btn { align-self: center; }
.sh-actions .sh-lang { height: 32px; box-sizing: border-box; }
/* 語言切換(原型):一個有外框的盒子,裡面每顆鍵四邊圓角,選中的白底浮起 */
.sh-actions .sh-lang { gap: 2px; background: var(--surface-1); border: 1px solid var(--line-200); border-radius: 6px; padding: 2px; }
.sh-langbtn2 {
  border: 0; background: transparent; border-radius: 4px;
  color: var(--ink-500);
  font: 500 12px/1.4 var(--font-platform);
  height: 26px; padding: 0 11px; cursor: pointer;
}
.sh-langbtn2.on { background: var(--surface-0); color: var(--ink-900); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .09); }
.sh-sep { width: 1px; height: 22px; background: var(--line-200); }
/* 使用者選單:頂欄右側「名字 ▾」,點開才有畫面索引與登出。 */
.sh-user { position: relative; flex: 0 1 auto; min-width: 0; }
.sh-user-btn {
  display: flex; align-items: center; gap: 9px; max-width: 100%;
  border: 1px solid transparent; border-radius: 7px; background: none;
  padding: 5px 8px; cursor: pointer; color: var(--ink-900);
  font: 600 13px/1.4 var(--font-platform);
}
.sh-user-btn:hover, .sh-user-btn[aria-expanded="true"] { background: var(--surface-1); border-color: var(--line-200); }
.sh-user-btn:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
/* ⚠️ 省略號設在文字那個 span 上,不設在 flex 容器上。 */
.sh-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px/1.2 var(--font-platform); }
.sh-user-two { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.sh-user-role { font: 400 12px/1.3 var(--font-platform); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--teal-100); color: var(--teal-700); display: grid; place-items: center; font: 700 12px/1 var(--font-platform); }
/* ▾ 用 CSS 畫,不用字元 —— 字型子集裡沒有它。 */
.sh-user-caret { flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink-500); }
.sh-usermenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 180px;
  background: var(--surface-0); border: 1px solid var(--line-200); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 6px; display: flex; flex-direction: column;
}
/* ⚠️ 自己的 display:flex 會蓋過 UA 的 [hidden]{display:none} —— 要明寫。 */
.sh-usermenu[hidden] { display: none; }
.sh-usermenu-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line-100); margin-bottom: 4px; }
.sh-usermenu-head > b { font: 600 13px/1.3 var(--font-platform); }
.sh-usermenu-head > span { font: 400 12px/1.3 var(--font-platform); color: var(--ink-500); word-break: break-all; }
.sh-usermenu-item {
  text-align: left; border: 0; background: none; border-radius: 6px; cursor: pointer;
  padding: 8px 10px; color: var(--ink-900); font: 500 13px/1.4 var(--font-platform);
}
.sh-usermenu-item:hover { background: var(--surface-1); }
.sh-usermenu-out { color: var(--red-600); border-top: 1px solid var(--line-100); border-radius: 0 0 6px 6px; margin-top: 4px; padding-top: 10px; }

/* 標題區不用白底 —— 白底會跟 topbar 連成一片,看起來像兩層工具列。 */
.sh-head {
  padding: 18px 24px 8px;
  background: transparent;
  border-bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex: none;
}
.sh-head h1 { font: 800 20px/1.25 var(--font-app); margin: 0; letter-spacing: -.01em; }
.sh-clause { margin: 3px 0 0; font-size: 12px; color: var(--ink-500); }
.sh-clause code { font-family: var(--font-mono); }

/* ⚠️ **內容限寬,但不是靠 `main { max-width }`。**
   原型在 1920 下把內容收在約 1180px —— 撐滿整個寬度會讓表格的
   一列橫跨 1600px,眼睛從訂單編號掃到狀態要跨過大半個螢幕。
   先前各 app 的 styles.css 用 `main { max-width: 68rem; margin: 0 auto }`
   達成同一件事,但那個元素選擇器連外殼的 <main> 一起命中,
   把整個主區(含頂欄)都置中了 —— 側欄與內容之間空出 287px。
   限寬要下在**內容容器**上,不是下在版面骨架上。 */
.sh-body {
  padding: 18px 24px 40px;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
.sh-body > * { max-width: 1180px; width: 100%; }
.sh-head > *, .sh-topbar { max-width: none; }
/* 兩欄版面 —— 原型的儀表板是「主內容 + 右側欄」。 */
.sh-split {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1180px) { .sh-split { grid-template-columns: minmax(0, 1fr); } }
/* 表單 + 右側摘要 —— 原型的下單頁:左邊填,右邊一張 330px 的摘要卡黏在
   視窗頂端跟著捲,送出鍵在卡裡、佔滿卡寬。窄於 1000px 時摘要落到表單
   下面(手機上沒有「右邊」可放)。 */
.sh-aside-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: start;
}
.sh-aside-main { display: flex; flex-direction: column; min-width: 0; }
.sh-aside { position: sticky; top: 14px; min-width: 0; }
/* ⚠️ 用 align-self:stretch 撐滿,不要 width:100% —— 送出盒有 padding,100% 再加 padding 會凸出卡外。 */
.sh-aside .sh-submit, .sh-aside .sh-submit-box, .sh-aside .sh-actbar { align-self: stretch; }
.sh-aside .sh-actbar { flex-direction: column; }
.sh-aside .sh-submit-box .sh-submit { align-self: stretch; }
.sh-aside .sh-submit { text-align: center; }
@media (max-width: 1000px) {
  .sh-aside-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* 表單最後一張卡是 :last-child、沒有下邊距 —— 摘要卡會貼上來,補在容器上 */
  .sh-aside-main { margin-bottom: 14px; }
  .sh-aside { position: static; }
}
/* 摘要列:左標籤右數字,總額放大 */
.sh-sum { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.sh-sum-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sh-sum-row > span { color: var(--ink-700); }
.sh-sum-row > b { font-variant-numeric: tabular-nums; }
.sh-sum-row.total { border-top: 1px solid var(--line-100); padding-top: 10px; }
.sh-sum-row.total > span { color: var(--ink-900); font-weight: 600; }
.sh-sum-row.total > b { font-size: 19px; }

.sh-card {
  background: var(--surface-0);
  border: 1px solid var(--line-200);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.sh-card > h2 { font: 700 14px/1.3 var(--font-app); margin: 0; }
/* ⚠️ 卡與卡之間一定要有距離。.sh-cols 沒有 gap,兩張卡上下貼著像同一張;
      這裡直接給卡下邊距,不管它被放進哪個容器,最後一張不留。 */
.sh-card { margin-bottom: 14px; }
.sh-card:last-child { margin-bottom: 0; }

/* ⚠️ 寬內容自己捲,頁面本體不得橫向捲動。 */
.sh-scroll { overflow-x: auto; min-width: 0; }

.sh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sh-table th {
  text-align: left;
  font: 600 12px/1.3 var(--font-platform);   /* 最少 12px */
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-700);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line-200);
  white-space: nowrap;
}
.sh-table td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line-100);
  vertical-align: middle;   /* 列裡有兩行(摘要 + 小字)時,其他欄上下置中 */
}
.sh-table td.num { font-variant-numeric: tabular-nums; text-align: right; padding-right: 18px; }
/* 數字欄的標題也靠右 —— 標題靠左、數字靠右,兩者對不上 */
.sh-table th.num { text-align: right; padding-right: 18px; }
.sh-table td.act { text-align: right; white-space: nowrap; }
/* 編號一律等寬字型 */
.sh-table td.mono, .sh-facts dd.mono, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sh-dotted { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sh-dotted > .sh-dot { width: 9px; height: 9px; }
.sh-table tbody tr:hover { background: var(--surface-1); }
.sh-table code { font-family: var(--font-mono); font-size: 12px; }

.sh-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font: 600 12px/1.5 var(--font-platform);
  white-space: nowrap;
}
/* ── 狀態顏色標準(全站一套)──
   ok   綠  —— 系統 / 承辦商在處理、或順利:製作中、付運中、已過帳、已接納
   warn 橙  —— 等**你**做事:待付款、待簽收、草稿、被查詢
   bad  紅  —— 拒絕、失敗、逾期、有差異
   ced  藍紫 —— 球在海關手上:待核實、已提交待審
   neu  灰  —— 已結束、不再相關:已確認收貨、已取代、已取消
   ⚠️ 先前 ok 用的是品牌青色,而使用者看「製作中」是深綠;青色留給可互動的
      東西(按鈕、連結、現在的分頁),狀態一律用這五個 token。藥丸、統計卡、
      橫幅、提示、進度條、等誰卡、時間軸都從這裡取色 —— 不要各自寫死。 */
:root {
  --tone-ok-bg: var(--green-100);   --tone-ok-fg: var(--green-700);   --tone-ok-accent: var(--green-500);
  --tone-warn-bg: var(--orange-100); --tone-warn-fg: #8a5a00;          --tone-warn-accent: var(--orange-500);
  --tone-bad-bg: var(--red-100);    --tone-bad-fg: var(--red-700);    --tone-bad-accent: var(--red-500);
  --tone-ced-bg: var(--indigo-100); --tone-ced-fg: var(--indigo-700); --tone-ced-accent: var(--indigo-500);
  --tone-neu-bg: var(--line-100);   --tone-neu-fg: var(--ink-700);    --tone-neu-accent: var(--ink-400);
}
.sh-pill.ok, .sh-pill.live { background: var(--tone-ok-bg); color: var(--tone-ok-fg); }
.sh-pill.warn { background: var(--tone-warn-bg); color: var(--tone-warn-fg); }
.sh-pill.bad { background: var(--tone-bad-bg); color: var(--tone-bad-fg); }
.sh-pill.ced { background: var(--tone-ced-bg); color: var(--tone-ced-fg); }
.sh-pill.neu, .sh-pill.ref { background: var(--tone-neu-bg); color: var(--tone-neu-fg); }
.sh-pill.held { background: var(--line-100); color: var(--ink-700); }

.sh-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 24px; }
.sh-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sh-fact dt {
  font: 600 12px/1.4 var(--font-platform);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-500);
}
.sh-fact dd { margin: 0; font-size: 13.5px; }

.sh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
/* ⚠️ 左側強調邊是語意的一部分,不是裝飾:原型用它把「你欠多少」、
   「將要到貨」、「你逾期了」三種性質分開,讓需要處理的那一張一眼認得出。 */
.sh-stat {
  background: var(--surface-0);
  border: 1px solid var(--line-200);
  border-left: 3px solid var(--line-300);
  border-radius: 10px;
  padding: 13px 15px;
  display: flex; flex-direction: column; gap: 3px;
}
.sh-stat.ok { border-left-color: var(--tone-ok-accent); }
.sh-stat.warn { border-left-color: var(--tone-warn-accent); }
.sh-stat.bad { border-left-color: var(--tone-bad-accent); }
.sh-stat.ced { border-left-color: var(--tone-ced-accent); }
.sh-stat-k {
  font: 600 12px/1.4 var(--font-platform);
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500);
}
.sh-stat-v { font: 800 24px/1.1 var(--font-app); font-variant-numeric: tabular-nums; }
.sh-stat-s { font-size: 12px; color: var(--ink-500); }
.sh-stat.ok .sh-stat-v { color: var(--tone-ok-fg); }
.sh-stat.warn .sh-stat-v { color: var(--tone-warn-fg); }
.sh-stat.bad .sh-stat-v { color: var(--tone-bad-fg); }
.sh-stat.ced .sh-stat-v { color: var(--tone-ced-fg); }

/* 分頁要長得像分頁:一排文字、底下一條線,選中的那個粗體 + 綠色底線。
   先前是一排藥丸形按鈕,看起來像篩選鍵或動作鍵,分不出「這是同一頁的幾個檢視」。 */
.sh-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 1px solid var(--line-200); margin-bottom: 14px; }
.sh-tab {
  padding: 8px 14px 9px;
  margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent;
  color: var(--ink-500);
  font: 500 13.5px/1.4 var(--font-platform);
  cursor: pointer;
  min-height: 36px;
}
.sh-tab:hover { color: var(--ink-900); }
.sh-tab.on { color: var(--teal-700); border-bottom-color: var(--teal-500); font-weight: 700; }

.sh-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.sh-tl {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 12px;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--line-200);
  font-size: 13px;
}
.sh-tl.ok { border-left-color: var(--tone-ok-accent); }
.sh-tl.warn { border-left-color: var(--tone-warn-accent); }
.sh-tl.bad { border-left-color: var(--tone-bad-accent); }
.sh-tl.ced { border-left-color: var(--tone-ced-accent); }
.sh-tl.done { border-left-color: var(--teal-300); color: var(--ink-500); }
.sh-tl.now { border-left-color: var(--teal-500); font-weight: 600; }
.sh-line-2 { grid-template-columns: 1fr 1fr auto; }
.sh-tl-when { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.sh-tl-who { color: var(--ink-500); font-size: 12px; }
/* 進度清單:同一個 timeline,但第一欄只是 ✓ / ● / ○ 一個字 —— 132px 的
   時間欄會在圖示與文字之間留一大片空白,手機上更把文字擠到右邊去。 */
.sh-steps .sh-tl { grid-template-columns: 18px 1fr auto; }
.sh-steps .sh-tl-when { text-align: center; }
@media (max-width: 600px) {
  /* 手機:時間、事件、誰 疊成三行;進度清單的「誰」縮到事件下面 */
  .sh-tl { grid-template-columns: 1fr; gap: 2px; }
  .sh-steps .sh-tl { grid-template-columns: 18px 1fr; column-gap: 12px; }
  .sh-steps .sh-tl-who { grid-column: 2; }
}

.sh-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 20px; align-items: start; }
.sh-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-field-k {
  font: 600 12px/1.4 var(--font-platform);
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500);
}
.sh-field input, .sh-field select {
  border: 1px solid var(--line-300);
  border-radius: 8px;
  /* ⚠️ 高度就是 36px,不靠 padding 撐:先前 padding 7px + min-height 36px,而
     Portal 的 input 是 content-box —— 36 + 14 + 2 = 52px 高,看起來「太高」。
     文字由瀏覽器在 36px 裡垂直置中,左右留 10px。 */
  box-sizing: border-box;
  height: 36px;
  padding: 0 10px;
  font: 400 13.5px/1.4 var(--font-platform);
  background: var(--surface-0);
  color: var(--ink-900);
}
.sh-field textarea { box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line-300); border-radius: 8px; font: 400 13.5px/1.4 var(--font-platform); background: var(--surface-0); color: var(--ink-900); }
.sh-field input:disabled, .sh-field select:disabled { background: var(--surface-1); color: var(--ink-700); }
.sh-field-h { font-size: 12px; color: var(--ink-500); }
.sh-submit {
  grid-column: 1 / -1;
  justify-self: start;
  border: 0; border-radius: 8px;
  background: var(--teal-500); color: var(--on-teal);
  padding: 0 18px;
  font: 600 13.5px/1.4 var(--font-platform);
  cursor: pointer;
  height: 36px; box-sizing: border-box;   /* 高度就是 36,不靠 padding 撐 */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.sh-submit:disabled { background: var(--line-300); color: var(--ink-500); cursor: not-allowed; }

/* 送出鍵與它的說明框在同一個盒子裡。
   ⚠️ 兩者只是前後相鄰時,在一長串欄位底下讀起來像兩件事 ——
      使用者看得到按鈕是灰的,也看得到一段字,但不會把兩者連起來。 */
.sh-submit-box {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 560px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-200);
  border-radius: 10px;
  background: var(--surface-1);
}
/* ⚠️ **column flex 的 align-items 預設是 stretch** —— 少了這一條,
   送出鍵會被拉成整個盒子寬。實測:P-ORD-01 的按鈕 560px、
   P-HLP-03 與 P-REG-02 的 298px,全部等於盒寬。
   而說明文字要維持滿寬,所以只對按鈕設 align-self,
   不對整個容器設 align-items。
   ⚠️ 先前這裡寫的是 grid-column / justify-self —— 那是 grid 的屬性,
      在 flex 容器裡完全沒有作用,所以「看起來有設」但什麼都沒發生。 */
.sh-submit-box .sh-submit { align-self: flex-start; }
/* 沒有說明時,盒子縮成剛好包住按鈕。 */
.sh-submit-box:has(.sh-blocked[style*="none"]) { border-color: transparent; background: none; padding: 0; }

/* 停用的送出按鈕 + 原因 + 「那我該做什麼」。
   ⚠️ 原因用警示色(--red-500)而不是灰:灰色的說明看起來像註腳,
      而這一句是使用者現在唯一需要讀的東西。 */
.sh-blocked {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: -2px;
}
.sh-blocked-why {
  font-size: 12.5px; line-height: 1.5;
  color: var(--red-600, var(--red-500));
}
.sh-blocked-act {
  font: 600 12.5px/1.4 var(--font-platform);
  /* ⚠️ 文字用 ink-900 而不是 teal-600 —— teal-600(#0E9E90)在淺底上
     只有 3.33:1,不合一般文字的 4.5:1。teal 留給框線(那是 UI 元件,
     門檻 3:1)。這顆是我自己上一輪加的,一併補上。 */
  color: var(--ink-900); background: none;
  border: 1px solid var(--teal-500); border-radius: 8px;
  padding: 6px 12px; cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
/* ⚠️ 「做得到、只是還沒做」與「做不到」用不同顏色。兩者都畫在
      按鈕下方,共用紅色的話,一句只是提醒的話會讀起來像出了事。 */
.sh-blocked-advisory .sh-blocked-why { color: var(--ink-700); }
.sh-blocked-act:hover { background: var(--teal-100); }
.sh-blocked-act:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }

.sh-note {
  font-size: 12.5px;
  color: var(--ink-700);
  background: var(--surface-1);
  border-left: 3px solid var(--line-300);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  max-width: 78ch;
  /* 提示框上下要有距離 —— 貼著表格或卡片像是同一塊 */
  margin: 8px 0;
}
.sh-note:first-child { margin-top: 0; }
.sh-note:last-child { margin-bottom: 0; }
/* ⚠️ 空的說明塊不要畫出來。liveForm 與 placeOrder 都先建一個空的
   .sh-note 當「送出結果」的位置,填內容之前它是空的 —— 而空的框
   仍然有背景與左邊條,在畫面上是一條灰色橫槓,看起來像有東西
   載不出來。實測(chromium 截圖 1600px)看到的。 */
.sh-note:empty { display: none; }

.sh-note.warn { border-left-color: var(--tone-warn-accent); background: var(--tone-warn-bg); color: #6b4600; }
.sh-note.bad { border-left-color: var(--tone-bad-accent); background: var(--tone-bad-bg); color: var(--tone-bad-fg); }
.sh-note.ced { border-left-color: var(--tone-ced-accent); background: var(--tone-ced-bg); color: var(--tone-ced-fg); }

.sh-empty { font-size: 13px; color: var(--ink-500); padding: 14px 0; }

.sh-held {
  background: var(--surface-0);
  border: 1px dashed var(--line-300);
  border-radius: 12px;
  padding: 22px 24px;
  max-width: 70ch;
}
.sh-held h2 { font: 700 15px/1.3 var(--font-app); margin: 0 0 8px; color: var(--ink-700); }
.sh-held p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-700); }
.sh-held-states code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--line-100); border-radius: 5px; padding: 1px 6px;
}

.sh-error {
  background: var(--red-100);
  color: var(--red-700);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
}

.sh-index-wrap { display: flex; flex-direction: column; gap: 14px; }
.sh-index-wrap .sh-table tbody tr { cursor: pointer; }

/* ── 手機版面 ────────────────────────────────────────────
   ⚠️ **兩種版面都是交付的一部分**,不是「窄螢幕不要整個壞掉」而已。
      斷點 820px:以上是桌面版(側欄固定左側),以下是手機版
      (側欄收成側欄,由頂欄的按鈕拉出來)。

   ⚠️ 先前這裡只是把側欄塌成整寬的靜態區塊。導覽有二十幾個群組,
      於是手機上要先捲過**一整屏的側欄**才看得到內容,而下面還留著
      一大片空白 —— 看起來像版面壞了。是截圖看出來的,不是量出來的。

   ⚠️ 側欄關起來時要 visibility: hidden,不能只用 transform 移出畫面。
      只移出去的話它仍在 tab 順序裡:用鍵盤的人會先 tab 過二十幾個
      看不見的連結,而畫面上完全沒有反應。

   ⚠️ 半透明底層用 display 切換,**不要用 [hidden] 屬性**。`[hidden]` 只是
      使用者代理樣式,任何作者端的 display 宣告都壓得過它 ——
      屬性是 true 而東西還在畫面上,而且不報錯。 */
.sh-scrim { display: none; }
.sh-menu { display: none; }

@media (max-width: 820px) {
  .sh { grid-template-columns: minmax(0, 1fr); }

  /* 頂欄要黏住 —— 側欄的開關在上面,捲到一半時仍然要按得到。 */
  .sh-topbar {
    position: sticky; top: 0; z-index: 30;
    padding-left: 10px; padding-right: 12px; gap: 10px;
  }
  .sh-body, .sh-head { padding-left: 16px; padding-right: 16px; }

  .sh-menu {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 34px; height: 34px;
    border: 1px solid var(--line-200); border-radius: 7px;
    background: var(--surface-0); cursor: pointer; padding: 0;
  }
  /* ⚠️ 三條線用 CSS 畫,不用 ☰ 那個字元。打包的字型子集裡沒有它,
        而缺字不報錯 —— 按鈕上會是一個豆腐格。 */
  .sh-menu::before {
    content: ''; width: 16px; height: 2px; border-radius: 2px;
    background: var(--ink-900);
    box-shadow: 0 -5px 0 var(--ink-900), 0 5px 0 var(--ink-900);
  }
  .sh-menu:hover { background: var(--surface-1); }

  /* 手機版是抽屜:固定、蓋在內容上,所以只有這裡需要自己捲。 */
  .sh-nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(84vw, 300px); height: 100vh; overflow-y: auto;
    z-index: 40;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .18s ease, visibility 0s linear .18s;
  }
  .sh.is-navopen .sh-nav {
    transform: none; visibility: visible;
    transition: transform .18s ease, visibility 0s;
  }
  .sh.is-navopen .sh-scrim {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(0, 0, 0, .45);
  }

  /* ⚠️ 麵包屑在手機上只留**目前這一張**。上層那幾段擠不下,會把整條
        頂欄推成兩行,而換行之後那些分隔線會單獨掛在行尾 ——
        看起來像少了東西。層級資訊在側欄裡本來就看得到。 */
  .sh-crumb { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
  .sh-crumb-up, .sh-crumb-sep { display: none; }
  .sh-crumb-now { overflow: hidden; text-overflow: ellipsis; }

  /* ⚠️ 使用者列要留得住,但不可以把頂欄撐破。允許縮,並用省略號收尾 ——
        先前 flex: none 讓它一路頂出畫面右緣,名字被切掉一半。 */
  .sh-actions { flex: 0 1 auto; min-width: 0; gap: 8px; }
  .sh-user-btn { padding-left: 6px; padding-right: 6px; }
  /* 手機:只留頭像,名字與角色在下拉選單裡 —— 兩行字擠成「T… / P…」沒有意義 */
  .sh-user-two { display: none; }

  /* ⚠️ 表格**橫向捲動**,不要壓成窄欄。壓縮的話「SO-2027-00431」會被
        折成三行,一列變成三倍高,而使用者要在三行裡認一個編號。
        .sh-scroll 已經是 overflow-x: auto —— 只要不讓儲存格換行。 */
  .sh-table th, .sh-table td { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-nav { transition: none; }
}

/* ── 語言相關的字型堆疊 ──────────────────────────────────
   ⚠️ **繁體與簡體不能共用同一份字型。** 兩者有數百個字的字形不同
      (例如「骨」「直」「產」的筆順與部件),用簡體字型顯示繁體
      在香港的使用者眼中是明顯的錯字,而不是「風格差異」。
   ⚠️ 繁體用 HK 版而非 TC 版 —— 香港字形標準與台灣不同。
   ⚠️ shell.js 在切換語言時會把 <html lang> 設成 zh-Hant / zh-Hans,
      這裡就是靠那個屬性掛上對的字型。改動 setLang 時不要動那一行。 */
html[lang="zh-Hant"] body,
html[lang="zh-Hant"] .sh {
  --font-app: 'Nunito Sans', var(--font-cjk-tc);
  --font-platform: 'Inter', var(--font-cjk-tc);
}
html[lang="zh-Hans"] body,
html[lang="zh-Hans"] .sh {
  --font-app: 'Nunito Sans', var(--font-cjk-sc);
  --font-platform: 'Inter', var(--font-cjk-sc);
}

/* ── 頁面標題的主要動作 ─────────────────────────────────── */
.sh-action {
  border: 0; border-radius: 8px;
  background: var(--teal-500); color: var(--on-teal);
  padding: 0 18px;
  font: 600 13.5px/1.4 var(--font-platform);
  cursor: pointer; height: 36px; box-sizing: border-box; flex: none;
}
.sh-action:hover { background: var(--teal-600); }

/* ⚠️ 全站字級下限 12px(資料欄位的標籤、小字、表頭都算)—— 除錯用的畫面編號與徽章裡的數字例外。 */
/* ── 卡片標題列 ─────────────────────────────────────────── */
.sh-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sh-cardhead h2 { font: 700 14px/1.3 var(--font-app); margin: 0; }
.sh-cardlink {
  border: 0; background: transparent; cursor: pointer;
  color: var(--teal-600);
  font: 600 12.5px/1.4 var(--font-platform);
  padding: 0;
}
.sh-cardlink:hover { text-decoration: underline; }

/* ── 用量條 ─────────────────────────────────────────────── */
/* ⚠️ 各段用 flex-grow 表示比例,寬度由 shell.js 以 CSSOM 設定 ——
   CSP 擋的是 style **屬性**,不是 CSSOM(實測驗證過)。 */
.sh-prog-wrap { display: flex; flex-direction: column; gap: 8px; }
.sh-prog {
  display: flex; height: 8px; border-radius: 99px;
  background: var(--line-100); overflow: hidden;
}
.sh-prog-seg { display: block; height: 100%; min-width: 0; }
.sh-prog-seg.ok { background: var(--tone-ok-accent); }
.sh-prog-seg.warn { background: var(--tone-warn-accent); }
.sh-prog-seg.bad { background: var(--tone-bad-accent); }
.sh-prog-seg.ced { background: var(--tone-ced-accent); }
.sh-prog-seg.rest { background: transparent; }
.sh-prog-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12px; color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.sh-prog-key { display: inline-flex; align-items: center; gap: 6px; }
.sh-prog-note { color: var(--ink-500); }
.sh-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; display: inline-block; }
.sh-dot.ok { background: var(--tone-ok-accent); }
.sh-dot.warn { background: var(--tone-warn-accent); }
.sh-dot.bad { background: var(--tone-bad-accent); }
.sh-dot.ced { background: var(--tone-ced-accent); }
.sh-dot.neu { background: var(--ink-400); }

/* ── 近期活動 ───────────────────────────────────────────── */
.sh-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sh-activity li { display: flex; gap: 10px; align-items: flex-start; }
.sh-activity .sh-dot { margin-top: 6px; }
.sh-act-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sh-act-what { font-size: 13px; }
.sh-act-when { font-size: 12px; color: var(--ink-500); font-variant-numeric: tabular-nums; }

/* ── 統計卡的圖示與行動鈕 ───────────────────────────────── */
.sh-stat-top { display: flex; align-items: center; gap: 7px; }
.sh-stat-top .sh-ico { width: 15px; height: 15px; flex: none; }
.sh-stat.ok .sh-stat-top { color: var(--tone-ok-fg); }
.sh-stat.warn .sh-stat-top { color: var(--tone-warn-fg); }
.sh-stat.bad .sh-stat-top { color: var(--tone-bad-fg); }
.sh-stat.ced .sh-stat-top { color: var(--tone-ced-fg); }
.sh-stat-btn {
  align-self: flex-start; margin-top: 7px;
  border: 1px solid var(--line-300); border-radius: 7px;
  background: var(--surface-0); color: var(--ink-900);
  font: 600 12.5px/1.4 var(--font-platform);
  padding: 6px 12px; cursor: pointer; min-height: 32px;
}
.sh-stat.warn .sh-stat-btn { background: var(--orange-500); border-color: var(--orange-500); color: var(--on-orange); }
.sh-stat.bad .sh-stat-btn { background: var(--surface-0); border-color: var(--red-500); color: var(--red-600); }

/* ── 逐狀態橫幅 ─────────────────────────────────────────── */
/* ⚠️ 語調(ok / warn / bad)取自原型,不要自行判斷。
   例如「超額」是 warn 而不是 ok —— 多出來的容器要麼屬於別批、
   要麼根本不應存在,兩者都不是好消息。 */
.sh-ban { border-left: 3px solid var(--line-300); gap: 6px; }
.sh-ban h2 { font: 700 14.5px/1.35 var(--font-app); margin: 0; }
.sh-ban p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-700); max-width: 78ch; }
.sh-ban.ok { border-left-color: var(--tone-ok-accent); }
.sh-ban.ok h2 { color: var(--tone-ok-fg); }
.sh-ban.warn { border-left-color: var(--tone-warn-accent); }
.sh-ban.warn h2 { color: var(--tone-warn-fg); }
.sh-ban.bad { border-left-color: var(--tone-bad-accent); }
.sh-ban.bad h2 { color: var(--tone-bad-fg); }
.sh-ban.ced { border-left-color: var(--tone-ced-accent); }
.sh-ban.ced h2 { color: var(--tone-ced-fg); }

/* 可點的列 —— 只有掛了 onRow 的才有,不可點的列不該假裝可點。 */
.sh-table tr.sh-row-open { cursor: pointer; }
.sh-table tr.sh-row-open:hover { background: var(--surface-2, #f4f5f7); }
.sh-table tr.sh-row-open:focus-visible {
  outline: 2px solid var(--teal-600, #0d6e63);
  outline-offset: -2px;
}
/* 最後一欄補一個指向記號,讓「這一列可以打開」在不 hover 時也看得出來。 */
.sh-table tr.sh-row-open > td:last-child { position: relative; padding-right: 22px; }
.sh-table tr.sh-row-open > td:last-child::after {
  content: '›';
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--ink-500, #8a8f98); font-size: 15px; line-height: 1;
}

/* ── §4 新畫面的動作列 ──────────────────────────────────
   ⚠️ 用 sh-actbar 而不是既有的 sh-actions —— 後者是頁首的
   語言切換與使用者列,已經帶了 flex:none。共用會讓動作按鈕
   在窄畫面上不換行,而它們可能有五顆。 */
.sh-actbar {
  display: flex; flex-wrap: wrap; gap: var(--space-8, 8px);
  margin-top: var(--space-8, 8px);
}
/* 清單頁**右上**的入口鍵(「訂購完稅標籤」「由 CSV 匯入」)。
   ⚠️ 窄畫面上不要右靠 —— 兩顆鍵擠在右上角很難按,寬度夠時才右靠。 */
.sh-actbar.sh-end { margin-top: 0; }
@media (min-width: 720px) { .sh-actbar.sh-end { justify-content: flex-end; } }
.sh-actbtn {
  font: inherit; font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-6, 6px);
  border: 1px solid var(--line-300); background: var(--surface-1);
  color: var(--ink-900); cursor: pointer;
}
.sh-actbtn:hover { border-color: var(--teal-500); color: var(--teal-600); }
.sh-actbtn.sh-rowbtn { padding: 4px 10px; font-size: 12px; min-height: 0; }   /* app 樣式給 button 44px 最小高,列內鍵不要 */
/* 按鈕圖示:文字前一個 14px 的線條圖 */
.sh-bico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; flex: none; }
.sh-submit .sh-bico, .sh-actbtn .sh-bico { display: inline-block; }
.sh-actbtn:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.sh-actbtn:disabled { color: var(--ink-700); border-color: var(--line-200); cursor: not-allowed; }

/* 情境台開著時,情境切換器要一眼看得出「這不是產品的分頁」。 */
.sh-tabs-scenario { outline: 2px dashed var(--orange-500); outline-offset: 3px; border-radius: 6px; }
.sh-tabs-scenario::before { content: 'scenario'; font: 600 10px/1 var(--font-mono); color: var(--orange-500);
  align-self: center; margin-right: 6px; letter-spacing: .06em; text-transform: uppercase; }
.sh-tabs-hidden { display: none; }
.sh-dock { margin-bottom: 4px; }

/* 次要動作鍵:與主要動作並排時要看得出哪一顆是主要的。 */
.sh-submit.sh-secondary { background: var(--surface-0); color: var(--ink-900); border: 1px solid var(--line-300); }
.sh-submit.sh-secondary:hover { background: var(--surface-1); }

/* ── 核對清單(P-DEL-02 / P-DEL-05)與類別選擇(P-DEL-04)─────────
   ⚠️ 勾選框在左、內容在右;區段那一項底下有輸入欄,所以外層是 div。 */
.sh-checklist { display: flex; flex-direction: column; gap: 10px; }
.sh-check { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-200); border-radius: 8px; background: var(--surface-0); }
.sh-check input[type=checkbox] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--teal-500); }
.sh-check:has(input:checked) { border-color: var(--teal-300); background: var(--teal-050, #f4fcfb); }
.sh-check-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; align-items: flex-start; }
.sh-check-body > .sh-form, .sh-check-body > .sh-form-inline { align-self: stretch; }
.sh-check-k { font: 600 13.5px/1.4 var(--font-app); color: var(--ink-900); cursor: pointer; }
.sh-form-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 6px; }
/* 還沒準備好(核對未全勾):看得出來,但不是 disabled —— disabled 由二次認證管。 */
.sh-submit.sh-submit-wait { opacity: .55; }
.sh-scanrow { display: flex; gap: 8px; align-items: stretch; }
.sh-scanrow input { flex: 1; min-width: 0; border: 1px solid var(--line-300); border-radius: 8px; padding: 9px 12px; font: 14px/1.4 var(--font-mono); }
.sh-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
/* 可多選:按下的卡 teal 邊 + 淡底(aria-pressed) */
.sh-choice-item[aria-pressed="true"] { border-color: var(--teal-500); background: var(--teal-050, #f4fcfb); }
.sh-choice-item { text-align: left; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line-200); background: var(--surface-0); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.sh-choice-item b { font: 600 13.5px/1.4 var(--font-app); color: var(--ink-900); }
.sh-choice-item span { font-size: 12px; color: var(--ink-500); }
.sh-choice-item.is-on { border: 2px solid var(--teal-500); background: var(--teal-050, #f4fcfb); padding: 11px 13px; }
.sh-note.ok { border-left-color: var(--tone-ok-accent); background: var(--tone-ok-bg); color: var(--tone-ok-fg); }

/* ── 用量申報的區段明細(P-USE-01)──────────────────────
   一行一段:起 / 迄 / 去向 / 理由 / 數量 / 移除。窄畫面改成兩欄。 */
.sh-lines { display: flex; flex-direction: column; gap: 8px; }
.sh-line { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 1fr auto; gap: 8px; align-items: center;
  padding: 8px; border: 1px solid var(--line-200); border-radius: 8px; background: var(--surface-0); }
.sh-line input, .sh-line select { border: 1px solid var(--line-300); border-radius: 6px; padding: 7px 9px; font: 13px/1.4 var(--font-platform); min-width: 0; }
.sh-line input.sh-mono { font-family: var(--font-mono); }
.sh-line-end { display: flex; align-items: center; gap: 10px; justify-self: end; }
.sh-line-count { font: 600 12.5px/1.4 var(--font-mono); color: var(--ink-700); min-width: 5ch; text-align: right; }
.sh-line-rm { border: 1px solid var(--line-300); background: var(--surface-0); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; color: var(--ink-700); font-size: 16px; }
.sh-line-rm:hover { color: var(--red-600); border-color: var(--red-400); }
.sh-line.is-bad { border-color: var(--red-400); background: var(--red-100); }
@media (max-width: 820px) {
  .sh-line { grid-template-columns: 1fr 1fr; }
}

/* 讀資料期間的佔位 —— 淡、不刺眼,但看得出畫面在動。 */
.sh-loading { font-size: 13px; color: var(--ink-500); padding: 14px 0; }

/* 「確認須知」一頁:每段一張卡,標題帶規格編號。 */
.sh-ack .sh-cardhead h2 { display: flex; align-items: center; gap: 8px; }
.sh-ack .sh-clause { font-size: 12px; color: var(--ink-500); }

/* 卡片裡單獨一顆動作鈕:內容寬,不要被 column flex 拉滿。 */
.sh-card > .sh-actbtn, .sh-card > .sh-submit { align-self: flex-start; }

/* 閘門頁(條款未接受):不給導覽。 */
.sh.is-gated .sh-menu, .sh.is-gated .sh-groups { display: none; }

/* 「另見」:以本畫面為上層的畫面的入口。 */
.sh-backbar { margin-top: 14px; }
.sh-backbar > .sh-submit { align-self: flex-start; }
/* 「另見」一列:白底一條,按鈕才不會跟頁面底色混在一起 */
.sh-seealso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 16px; background: var(--surface-0); border: 1px solid var(--line-200); border-radius: 8px; }
.sh-seealso-k { font: 600 12px/1.4 var(--font-platform); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); margin-right: 4px; }

/* 通知鈴:名字左邊,紅色數字是未讀數(原型)。 */
.sh-bell { position: relative; width: 32px; height: 32px; border: 1px solid var(--line-200); border-radius: 7px; background: var(--surface-0); display: grid; place-items: center; cursor: pointer; color: var(--ink-700); padding: 0; flex: none; }
.sh-bell:hover { background: var(--surface-1); }
.sh-bell .sh-ico { width: 16px; height: 16px; }
.sh-bell-n { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; border-radius: 9px; background: var(--red-600); color: #fff; font: 600 10px/16px var(--font-platform); text-align: center; padding: 0 4px; border: 2px solid var(--surface-0); box-sizing: content-box; }
.sh-bell-n[hidden] { display: none; }
/* 頂層項目(Dashboard):與群組標題同一個樣子,亮起來時是選中色。 */
.sh-group-head.sh-flat.on { background: var(--teal-500); color: var(--on-teal); }
/* 統計卡下方也要留距離。 */
.sh-stat { margin-bottom: 14px; }
.sh-stats { row-gap: 0; }

/* ── 步驟導覽(下單 / 訂單詳情)──────────────────────── */
/* 原型:白底卡片,四步平分寬度,步與步之間一條 1px 連接線;現在這一步實心 teal。
   窄螢幕連接線沒有位置,改成兩欄堆疊、線隱藏。 */
.sh-stepper { list-style: none; margin: 0 0 14px; padding: 12px 20px; display: flex; align-items: center; background: var(--surface-1, #fff); border: 1px solid var(--line-200); border-radius: 8px; }
.sh-step { display: flex; align-items: center; gap: 9px; flex: 1; justify-content: center; font: 500 13px/1.4 var(--font-platform); color: var(--ink-500); white-space: nowrap; }
.sh-step:first-child { justify-content: flex-start; }
.sh-step:last-child { justify-content: flex-end; }
.sh-step-line { height: 1px; background: var(--line-200); flex: 1; }
@media (max-width: 720px) {
  .sh-stepper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 12px 14px; }
  .sh-step, .sh-step:first-child, .sh-step:last-child { justify-content: flex-start; white-space: normal; }
  .sh-step-line { display: none; }
}
.sh-step-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px/1 var(--font-platform); background: var(--line-100); color: var(--ink-700); }
.sh-step.now { color: var(--ink-900); font-weight: 600; }
.sh-step.now .sh-step-n { background: var(--teal-500); color: var(--on-teal); }
.sh-step.done .sh-step-n { background: var(--teal-100); color: var(--teal-700); }
.sh-h3 { font: 600 13.5px/1.4 var(--font-app); margin: 0; }

/* ── 「等誰」卡(訂單詳情)─────────────────────────────── */
/* ── 訂單詳情(原型 (2)):表頭、五段狀態、「等誰」卡、進度列、活動列、右欄 ── */
.sh-ohead { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 2px; }
.sh-ohead-main { flex: 1; min-width: 0; }
.sh-ohead-k { font-size: 12px; color: var(--ink-500); }
.sh-ohead-no { font: 600 24px/1.2 var(--font-mono); letter-spacing: -.02em; color: var(--ink-900); }
.sh-ohead-meta { display: flex; gap: 20px; margin-top: 9px; font-size: 12.5px; color: var(--ink-700); flex-wrap: wrap; }
.sh-ohead-meta > span > span { color: var(--ink-500); }
.sh-ohead-meta b { font-weight: 500; font-variant-numeric: tabular-nums; }
.sh-ohead-meta b.mono { font-family: var(--font-mono); }
/* 五段狀態:現在的那段深色,走過的正常,還沒到的淡 —— 是狀態不是分頁,不能點 */
.sh-seg { display: flex; gap: 3px; background: var(--surface-0); border: 1px solid var(--line-200); border-radius: 7px; padding: 3px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; max-width: 600px; justify-content: flex-end; }
.sh-seg-i { height: 28px; padding: 0 12px; border-radius: 5px; font: 500 12px/28px var(--font-platform); color: var(--ink-400); white-space: nowrap; }
.sh-seg-i.done { color: var(--ink-700); }
.sh-seg-i.now { background: var(--ink-900); color: #fff; font-weight: 600; }
.sh-seg-i.now.bad { background: var(--red-500); }

/* 等誰卡照狀態顏色標準:ok 綠(我們在做)、warn 橙(等你)、bad 紅、ced 藍紫
   (在海關)、neu 灰(已結束)。都是白底 —— 原型用 surface-1 當底,在我們的
   頁面上那就是背景色,整張卡會貼著背景消失;顏色靠左邊粗線、圖示與字。 */
.sh-sla { border: 1px solid var(--line-200); border-left: 5px solid var(--sla); background: var(--surface-0); border-radius: 8px; padding: 18px 22px; margin-bottom: 20px; --sla: var(--tone-neu-accent); --sla-ink: var(--tone-neu-fg); --sla-on: #fff; }
.sh-sla.ok { --sla: var(--tone-ok-accent); --sla-ink: var(--tone-ok-fg); --sla-on: #fff; }
.sh-sla.warn { --sla: var(--tone-warn-accent); --sla-ink: var(--tone-warn-fg); --sla-on: var(--ink-900); background: var(--tone-warn-bg); border-color: var(--orange-400); }
.sh-sla.bad { --sla: var(--tone-bad-accent); --sla-ink: var(--tone-bad-fg); --sla-on: #fff; background: var(--tone-bad-bg); border-color: var(--red-400); }
.sh-sla.ced { --sla: var(--tone-ced-accent); --sla-ink: var(--tone-ced-fg); --sla-on: #fff; }
.sh-sla-grid { display: flex; gap: 26px; align-items: flex-start; }
.sh-sla-main { flex: 1; min-width: 0; }
.sh-sla-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.sh-sla-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sla); color: var(--sla-on); font-size: 13px; font-weight: 700; flex: none; }
.sh-sla-wo { font: 700 12px/1 var(--font-platform); text-transform: uppercase; letter-spacing: .1em; color: var(--sla-ink); }
.sh-sla-actor { font: 700 15px/1.3 var(--font-app); color: var(--ink-900); }
.sh-sla-h { font: 600 17px/1.4 var(--font-app); letter-spacing: -.01em; color: var(--ink-900); }
.sh-sla-sub { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-700); max-width: 70ch; }
/* 三根接力棒:一個連在一起的盒子,球在誰手上那格底色深、字深 */
.sh-batons { display: flex; margin-top: 16px; max-width: 520px; border: 1px solid var(--line-200); border-radius: 7px; overflow: hidden; background: var(--surface-0); }
.sh-baton { flex: 1; padding: 9px 12px; border-right: 1px solid var(--line-200); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-baton:last-child { border-right: 0; }
.sh-baton-k { font: 700 12px/1.4 var(--font-platform); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); }
.sh-baton-t { font-size: 12px; color: var(--ink-400); }
.sh-baton.on { background: var(--surface-1); }
.sh-baton.on .sh-baton-k { color: var(--ink-900); }
.sh-baton.on .sh-baton-t { color: var(--ink-700); }
/* 球在誰手上那格用誰的顏色:你 = 橙、海關 = 藍紫、本平台 = 綠 */
.sh-baton.on.you { background: var(--tone-warn-bg); } .sh-baton.on.you .sh-baton-k { color: var(--tone-warn-fg); }
.sh-baton.on.ced { background: var(--tone-ced-bg); } .sh-baton.on.ced .sh-baton-k { color: var(--tone-ced-fg); }
.sh-baton.on.us { background: var(--tone-ok-bg); } .sh-baton.on.us .sh-baton-k { color: var(--tone-ok-fg); }
/* 右邊:時鐘與動作,236px */
.sh-sla-side { flex: none; width: 236px; display: flex; flex-direction: column; gap: 10px; }
.sh-clock { background: var(--surface-0); border: 1px solid var(--line-200); border-radius: 7px; padding: 13px 15px; text-align: center; display: flex; flex-direction: column; }
.sh-clock-k { font: 600 12px/1.4 var(--font-platform); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-500); }
.sh-clock-v { font: 700 34px/1.1 var(--font-app); letter-spacing: -.03em; margin: 4px 0 1px; color: var(--sla-ink); font-variant-numeric: tabular-nums; }
.sh-clock-u { font-size: 12px; color: var(--ink-700); }
.sh-clock-n { font-size: 12px; color: var(--ink-500); margin-top: 5px; line-height: 1.4; }
/* 動作鍵跟卡同色;字色依底色深淺(橙、綠、青上用深字,紅、灰上用白字) */
.sh-sla-act { width: 100%; text-align: center; background: var(--sla); color: var(--sla-on); }
@media (max-width: 820px) {
  .sh-sla { padding: 14px 16px; }
  .sh-sla-grid { flex-direction: column; gap: 14px; }
  .sh-sla-side { width: auto; align-self: stretch; }
  .sh-batons { flex-direction: column; }
  .sh-baton { border-right: 0; border-bottom: 1px solid var(--line-200); }
  .sh-baton:last-child { border-bottom: 0; }
  .sh-seg { max-width: none; width: 100%; box-sizing: border-box; justify-content: flex-start; }
}
/* 兩欄:左邊進度 / 明細 / 活動,右邊 340px 黏著 */
.sh-osplit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.sh-omain, .sh-oside { min-width: 0; }
.sh-oside { position: sticky; top: 14px; }
@media (max-width: 1000px) {
  .sh-osplit { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sh-omain { margin-bottom: 14px; }
  .sh-oside { position: static; }
}
.sh-card-sub { font: 400 12px/1.4 var(--font-app); color: var(--ink-500); margin-left: 10px; }
/* 進度列:圓點、步驟、誰、何時 */
.sh-prows { display: flex; flex-direction: column; }
/* 誰的藥丸是固定寬的一欄、靠左 —— auto 欄會讓藥丸貼著時間欄,看起來像靠右 */
.sh-prow { display: grid; grid-template-columns: 20px minmax(0, 1fr) 128px 138px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-100); }
.sh-prow:last-child { border-bottom: 0; }
.sh-pdot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--surface-0); color: var(--ink-700); border: 2px solid var(--line-200); box-sizing: border-box; }
.sh-prow.done .sh-pdot { background: var(--tone-ok-accent); border-color: var(--tone-ok-accent); color: #fff; }
.sh-prow.now .sh-pdot { border-color: var(--tone-warn-accent); }
.sh-prow.now.ced .sh-pdot { border-color: var(--tone-ced-accent); }
.sh-prow.now.us .sh-pdot { border-color: var(--tone-ok-accent); }
.sh-ptitle { font-size: 13.5px; font-weight: 500; color: var(--ink-400); }
.sh-prow.done .sh-ptitle, .sh-prow.now .sh-ptitle { color: var(--ink-900); }
.sh-prow.now .sh-ptitle { font-weight: 700; }
.sh-apill { display: inline-block; padding: 2px 8px; border-radius: 20px; font: 600 12px/1.5 var(--font-app); background: var(--line-100); color: var(--ink-700); justify-self: start; }
.sh-prow.done .sh-apill.you, .sh-prow.now .sh-apill.you { background: var(--tone-warn-bg); color: var(--tone-warn-fg); }
.sh-prow.done .sh-apill.ced, .sh-prow.now .sh-apill.ced { background: var(--tone-ced-bg); color: var(--tone-ced-fg); }
.sh-prow.done .sh-apill.us, .sh-prow.now .sh-apill.us { background: var(--tone-ok-bg); color: var(--tone-ok-fg); }
.sh-pts { font: 400 12px/1.4 var(--font-mono); color: var(--ink-400); text-align: right; }
.sh-prow.done .sh-pts { color: var(--ink-500); }
/* 活動列:事件、誰、何時 */
.sh-arows { display: flex; flex-direction: column; }
.sh-arow { display: grid; grid-template-columns: minmax(0, 1fr) 130px 148px; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-100); font-size: 12.5px; align-items: baseline; }
.sh-arow:last-child { border-bottom: 0; }
.sh-awho { color: var(--ink-500); font-size: 12px; }
.sh-ats { font: 400 12px/1.4 var(--font-mono); color: var(--ink-500); text-align: right; }
@media (max-width: 600px) {
  .sh-prow { grid-template-columns: 20px minmax(0, 1fr); row-gap: 4px; }
  .sh-prow > .sh-apill, .sh-prow > .sh-pts { grid-column: 2; text-align: left; }
  .sh-arow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sh-ats { text-align: left; }
}
/* 右欄的小卡 */
.sh-uidbox { background: var(--surface-1); border: 1px solid var(--line-200); border-radius: 6px; padding: 11px 13px; font: 500 13px/1.6 var(--font-mono); letter-spacing: .01em; display: flex; flex-direction: column; word-break: break-all; }
/* ⚠️ 「→」只有 Inter(--font-platform)有;Nunito Sans 與等寬字型都沒有,會變豆腐 */
.sh-uid-arrow { color: var(--ink-500); font-family: var(--font-platform); font-weight: 400; }
.sh-btnrow { display: flex; gap: 8px; }
.sh-btnrow > .sh-actbtn { flex: 1; text-align: center; }
.sh-addr { font-size: 13px; line-height: 1.6; color: var(--ink-700); }
.sh-svc { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-700); }
.sh-addr-contact { font-size: 12.5px; color: var(--ink-700); }
.sh-addr-contact .mono { font-family: var(--font-mono); }
.sh-hr { height: 1px; background: var(--line-100); }
.sh-dim { color: var(--ink-400); }
/* 已提交(P-ORD-02):圖示 + 標題、四格、接下來三步、頁腳 */
.sh-confirm:not(button):not(a) { max-width: 820px; padding: 0; gap: 0; overflow: hidden; }   /* 確認對話框;按鈕(含 .sh-stat-btn)也用 .sh-confirm 當語調,不能吃到 padding:0 */
.sh-confirm-head { display: flex; gap: 18px; align-items: flex-start; padding: 30px 34px; border-bottom: 1px solid var(--line-100); }
.sh-confirm-ic { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 22px; font-weight: 700; background: var(--surface-1); color: var(--ink-700); }
.sh-confirm-ic.ced { background: var(--tone-ced-bg); color: var(--tone-ced-fg); }
.sh-confirm-ic.ok { background: var(--tone-ok-bg); color: var(--tone-ok-fg); }
.sh-confirm-ic.bad { background: var(--tone-bad-bg); color: var(--tone-bad-fg); }
.sh-confirm-t { flex: 1; min-width: 0; }
.sh-confirm-t > h2 { margin: 0; font: 600 21px/1.3 var(--font-app); letter-spacing: -.02em; }
.sh-confirm-t > p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-700); line-height: 1.6; max-width: 60ch; }
.sh-confirm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-100); }
.sh-confirm-cell { background: var(--surface-0); padding: 15px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-confirm-cell > b { font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sh-confirm-cell > b.mono { font-family: var(--font-mono); }
.sh-confirm-cell > b.good { color: var(--tone-ok-fg); font-weight: 700; }
.sh-confirm-cell > b.bad { color: var(--tone-bad-fg); font-weight: 700; }
.sh-confirm-cell > b.dim { color: var(--ink-400); }
.sh-next { padding: 22px 34px; border-top: 1px solid var(--line-100); }
.sh-next-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 13px; }
.sh-next-row .sh-step-n { flex: none; margin-top: 1px; }
.sh-next-row b { display: block; margin-bottom: 2px; }
.sh-next-row span:not(.sh-step-n) { color: var(--ink-700); line-height: 1.55; }
.sh-confirm-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 18px 34px; border-top: 1px solid var(--line-100); background: var(--surface-1); }
.sh-confirm-foot .sh-submit { align-self: auto; }
.sh-confirm-ts { margin-left: auto; font: 400 12px/1.4 var(--font-mono); color: var(--ink-500); }
@media (max-width: 820px) {
  .sh-confirm-head, .sh-next, .sh-confirm-foot { padding-left: 18px; padding-right: 18px; }
  .sh-confirm-head { padding-top: 20px; padding-bottom: 20px; }
  .sh-confirm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-confirm-ts { margin-left: 0; width: 100%; }
}

.sh-card > .sh-pill { align-self: flex-start; }
.sh-actbar { align-items: flex-start; }

/* ── 付款(原型 (2)):頁首、結果橫幅、單選卡、備註碼、鍵值列、三個數字 ── */
.sh-phead { display: flex; flex-direction: column; gap: 4px; }
.sh-phead-h { margin: 0; font: 600 23px/1.25 var(--font-app); letter-spacing: -.02em; color: var(--ink-900); }
.sh-phead-p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-700); max-width: 76ch; }
.sh-result { display: flex; gap: 16px; align-items: flex-start; background: var(--surface-0); border: 1px solid var(--line-200); border-left: 5px solid var(--tone-neu-accent); border-radius: 8px; padding: 18px 20px; margin-bottom: 14px; --res: var(--tone-neu-accent); --res-ink: var(--tone-neu-fg); }
.sh-result.ok { --res: var(--tone-ok-accent); --res-ink: var(--tone-ok-fg); border-left-color: var(--res); }
.sh-result.warn { --res: var(--tone-warn-accent); --res-ink: var(--tone-warn-fg); border-left-color: var(--res); background: var(--tone-warn-bg); }
.sh-result.bad { --res: var(--tone-bad-accent); --res-ink: var(--tone-bad-fg); border-left-color: var(--res); background: var(--tone-bad-bg); }
.sh-result-ic { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 19px; font-weight: 700; background: var(--res); color: #fff; }
.sh-result.warn .sh-result-ic { color: var(--ink-900); }
.sh-result-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-result-main > h2 { margin: 0; font: 600 18px/1.3 var(--font-app); color: var(--ink-900); }
.sh-result-main > p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-700); max-width: 64ch; }
.sh-result-main > .sh-btnrow { margin-top: 6px; flex-wrap: wrap; }
.sh-result-main > .sh-btnrow > .sh-submit { flex: none; }
.sh-result-side { flex: none; text-align: right; display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.sh-result-amt { font: 700 24px/1.2 var(--font-app); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.sh-result-ref { font: 400 12px/1.4 var(--font-mono); color: var(--ink-500); }
@media (max-width: 820px) {
  .sh-result { flex-wrap: wrap; padding: 14px 16px; }
  .sh-result-side { text-align: left; width: 100%; }
}
.sh-radios { display: flex; flex-direction: column; gap: 8px; }
.sh-radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-200); border-radius: 8px; background: var(--surface-0); cursor: pointer; }
.sh-radio.on { border-color: var(--teal-500); box-shadow: inset 0 0 0 1px var(--teal-500); }
.sh-radio input { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--teal-500); }
.sh-radio-body { flex: 1; min-width: 0; }
.sh-radio-t { font: 600 13.5px/1.4 var(--font-app); color: var(--ink-900); }
.sh-radio-sub { font-weight: 400; color: var(--ink-500); }
.sh-radio-h { font-size: 12px; color: var(--ink-700); margin-top: 2px; line-height: 1.5; }
.sh-radio > .sh-pill { flex: none; align-self: center; }
.sh-refrow { display: flex; flex-direction: column; gap: 6px; }
.sh-refcode { font: 600 18px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--ink-900); }
.sh-kvrows { display: flex; flex-direction: column; }
.sh-kvrow { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-100); font-size: 13px; }
.sh-kvrow:last-child { border-bottom: 0; }
.sh-kv-k { color: var(--ink-500); }
/* ⚠️ **限定在 .sh-kvrow 內。** 這個類別名與新的 kvList(.sh-kv / .sh-kv-row)
   撞名了:不限定的話,kvList 的每一個值都會變等寬字 —— 而等寬字體裡沒有
   「→」的字形,「8003900 → 8003999」在畫面上會變成中間一個空格。
   kvList 自己會判斷是不是編號,是才加 .mono。 */
.sh-kvrow .sh-kv-v { font-family: var(--font-mono); font-weight: 500; word-break: break-all; }
@media (max-width: 600px) { .sh-kvrow { grid-template-columns: minmax(0, 1fr) auto; } .sh-kv-k { grid-column: 1 / -1; padding-bottom: 0; } }
.sh-btnrow.sh-wrap { flex-wrap: wrap; align-items: center; }
.sh-btnrow.sh-wrap > .sh-submit { flex: none; }
.sh-push { margin-left: auto; }
.sh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sh-kpi { background: var(--surface-0); border: 1px solid var(--line-200); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-kpi-v { font: 700 24px/1.2 var(--font-app); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink-900); }
.sh-pay-layout { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1000px) { .sh-pay-layout { grid-template-columns: minmax(0, 1fr); } }

/* ── 送遞(原型 (2)):追蹤四步、提示列、格清單、右欄動作 ── */
.sh-track-no { font: 600 16px/1.3 var(--font-mono); color: var(--ink-900); }
.sh-track { display: flex; gap: 0; margin-top: 6px; }
/* 原型:每段頂上一條 4px 橫條 —— 走過的 teal、未到的灰;現在這一步的標題粗體。 */
.sh-track-step { flex: 1; min-width: 0; padding-right: 14px; }
.sh-track-bar { height: 4px; border-radius: 2px; background: var(--line-200); margin-bottom: 12px; }
.sh-track-step.done .sh-track-bar { background: var(--teal-500); }
.sh-track-t { font: 500 13px/1.4 var(--font-app); color: var(--ink-400); }
.sh-track-step.done .sh-track-t { color: var(--ink-900); }
.sh-track-step.now .sh-track-t { font-weight: 700; color: var(--ink-900); }
.sh-track-ts { font: 400 12px/1.4 var(--font-mono); color: var(--ink-500); margin-top: 3px; }
.sh-track-place { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
@media (max-width: 600px) {
  .sh-track { flex-wrap: wrap; gap: 14px 0; }
  .sh-track-step { flex: 0 0 50%; padding-right: 10px; box-sizing: border-box; }
}
/* 原型的狀態藥丸:圓點 + 文字,同色系 */
.sh-pill-dot { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; font-weight: 600; }
.sh-infobar-i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--teal-600); color: var(--teal-600); font: 700 12px/16px var(--font-platform); text-align: center; box-sizing: border-box; }
.sh-infobar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--surface-0); border: 1px solid var(--teal-300); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
.sh-infobar-t { flex: 1; min-width: 200px; font-size: 13px; color: var(--ink-700); line-height: 1.55; }
.sh-infobar > .sh-submit { flex: none; }
.sh-confirm-stats.sh-inset { border: 1px solid var(--line-100); border-radius: 8px; overflow: hidden; }
.sh-uidlist { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sh-uidline { font: 500 13px/1.5 var(--font-mono); background: var(--surface-1); border-radius: 6px; padding: 6px 10px; }
.sh-uid-meta { font-family: var(--font-app); color: var(--ink-500); font-weight: 400; }
.sh-minikv { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-700); }
.sh-minikv span { color: var(--ink-500); }
.sh-minikv b { font-weight: 500; } .sh-minikv b.mono { font-family: var(--font-mono); }
.sh-actbtn.sh-block { width: 100%; text-align: center; }
.sh-ackact > .sh-submit-box, .sh-ackact > .sh-submit { align-self: stretch; }
.sh-ackact .sh-submit-box .sh-submit, .sh-ackact > .sh-submit { align-self: stretch; text-align: center; }

/* ── 下單頁的許可證量表(原型):灰底、細長用量條、四個小數字 ── */
.sh-meter { background: var(--surface-1); border-radius: 7px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sh-meter-h { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.sh-meter-h > b { font: 600 12.5px/1.4 var(--font-app); color: var(--ink-900); }
.sh-meter-h > span { font-size: 12px; color: var(--ink-500); }
.sh-meter-bar { height: 12px; border-radius: 6px; background: var(--surface-0); display: flex; overflow: hidden; border: 1px solid var(--line-100); }
.sh-meter-bar > i { display: block; height: 100%; }
.sh-meter-used { background: var(--ink-400); }
/* 整條依用到幾成變色;本單那段淡一點 */
.sh-meter-bar.green > i { background: var(--green-500); } .sh-meter-bar.yellow > i { background: var(--amber-500); }
.sh-meter-bar.orange > i { background: var(--orange-500); } .sh-meter-bar.red > i { background: var(--red-500); }
.sh-meter-bar > .sh-meter-new { opacity: .55; }
.sh-meter-row { display: flex; gap: 20px; flex-wrap: wrap; }
.sh-meter-cell { display: flex; flex-direction: column; gap: 1px; }
.sh-meter-cell > span { font: 600 12px/1.4 var(--font-platform); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.sh-meter-cell > b { font: 700 14px/1.3 var(--font-app); font-variant-numeric: tabular-nums; color: var(--ink-900); }
.sh-meter-cell.bad > b { color: var(--tone-warn-fg); }

/* ── 匯入(原型):拖放區、欄位說明;預測表 ── */
.sh-drop { border: 1.5px dashed var(--line-300); border-radius: 8px; background: var(--surface-1); padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--ink-700); }
.sh-drop.on { border-color: var(--teal-500); background: var(--teal-050, #f4fcfb); }
.sh-drop > b { font: 600 14px/1.4 var(--font-app); color: var(--ink-900); }
.sh-drop > span { font-size: 12px; color: var(--ink-500); }
.sh-drop > .sh-submit { margin-top: 8px; }
.sh-imp-info { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-top: 4px; }
.sh-imp-info > div { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; }
.sh-code { font: 400 12px/1.6 var(--font-mono); background: var(--surface-1); border-radius: 6px; padding: 8px 10px; word-break: break-all; }
/* 多行的程式碼(API 文件的例子)。⚠️ 自己捲,不要讓頁面橫向捲 —— 長的
   curl 指令在窄畫面上會把整頁撐寬。 */
.sh-code-block {
  font: 400 12px/1.7 var(--font-mono); margin: 0;
  background: var(--surface-2, #f3f5f7); color: var(--ink-900);
  border: 1px solid var(--line-200); border-radius: 6px;
  padding: 12px 14px; overflow-x: auto; white-space: pre;
}
.sh-ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-700); line-height: 1.7; }
.sh-imp-counts { flex-direction: row; gap: 26px; text-align: left; }
.sh-imp-counts > div { display: flex; flex-direction: column; }
.sh-imp-counts b { font: 700 20px/1.2 var(--font-app); }
.sh-imp-counts b.ok { color: var(--tone-ok-fg); } .sh-imp-counts b.bad { color: var(--tone-bad-fg); } .sh-imp-counts b.dim { color: var(--ink-400); }
.sh-fc-in { width: 120px; height: 32px; border: 1px solid var(--line-200); border-radius: 5px; padding: 0 9px; font: 600 13px/1 var(--font-app); font-variant-numeric: tabular-nums; text-align: right; box-sizing: border-box; background: var(--surface-0); color: var(--ink-900); }
.sh-fc-total td { background: var(--surface-1); font-weight: 700; }
.sh-fc-up { color: var(--tone-ok-fg); } .sh-fc-down { color: var(--tone-warn-fg); }

/* ── 列印用的「紙」:畫面上是一層覆蓋,列印時只印它 ── */
.sh-sheet { position: fixed; inset: 0; z-index: 200; background: rgba(20, 24, 28, .55); overflow: auto; padding: 24px 16px; }
.sh-sheet-bar { max-width: 800px; margin: 0 auto 12px; display: flex; gap: 8px; justify-content: flex-end; }
.sh-paper { max-width: 800px; margin: 0 auto; background: #fff; color: var(--ink-900); border-radius: 8px; padding: 32px 36px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); font-size: 13px; }
.sh-paper h1 { margin: 0 0 4px; font: 700 20px/1.3 var(--font-app); }
.sh-paper .sh-paper-sub { color: var(--ink-500); font-size: 12px; margin-bottom: 18px; }
.sh-paper table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.sh-paper th, .sh-paper td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line-100); font-size: 12.5px; }
.sh-paper th { font: 600 12px/1.4 var(--font-platform); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.sh-paper th.num, .sh-paper td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sh-paper tr.total td { font-weight: 700; border-top: 2px solid var(--line-200); }
.sh-paper .sh-paper-kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 12px; margin: 8px 0 12px; }
.sh-paper .sh-paper-kv span { color: var(--ink-500); }
.sh-paper .sh-paper-foot { margin-top: 22px; font-size: 12px; color: var(--ink-500); border-top: 1px solid var(--line-100); padding-top: 10px; }
@media print {
  body > *:not(.sh-sheet) { display: none !important; }
  .sh-sheet { position: static; background: none; padding: 0; overflow: visible; }
  .sh-sheet-bar { display: none; }
  .sh-paper { box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
}

/* ── 欄位驗證:不合規則的欄位變紅,底下一句為什麼 ── */
.sh-field input.is-invalid, .sh-field select.is-invalid, .sh-line input.is-invalid { border-color: var(--red-500); box-shadow: 0 0 0 2px var(--red-100); }
.sh-field-err { font-size: 12px; color: var(--red-700); }
.sh-field-err[hidden] { display: none; }

/* ── 清單頂上的篩選列 ── */
.sh-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 4px; }
.sh-filter { display: flex; flex-direction: column; gap: 3px; }
.sh-filter > span { font: 600 12px/1.4 var(--font-platform); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.sh-filter > select, .sh-filter > input { height: 34px; border: 1px solid var(--line-200); border-radius: 6px; padding: 0 9px; font: 400 13px/1.4 var(--font-app); background: var(--surface-0); color: var(--ink-900); min-width: 140px; }
/* 下單頁的數量欄不必整欄寬 */
.sh-qty-short input { max-width: 220px; }
.sh-paper-block { padding: 14px 0; border-bottom: 1px solid var(--line-100); }
.sh-paper-block:last-child { border-bottom: 0; }
.sh-paper-block h2 { margin: 0 0 6px; font: 700 15px/1.3 var(--font-mono); }
.sh-paper-label { margin-top: 22px; border: 2px dashed var(--ink-400); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.sh-paper-label > b { font-size: 15px; }

/* 「返回清單」永遠最左;刪除類按鈕紅色;二次認證的入口橙色 */
.sh-actbar > [data-ico="back"], .sh-btnrow > [data-ico="back"] { order: -1; }
/* 確認類:橙。主要鍵實心,次要 / 列內鍵框線。 */
/* ⚠️ 不用 orange-500 做底:白字在上面只有 2.3:1。用深一級的橙(4.7:1)。 */
.sh-submit.sh-confirm { background: #B45309; color: #fff; }
.sh-submit.sh-confirm:hover { filter: brightness(.95); }
.sh-submit.sh-secondary.sh-confirm, .sh-actbtn.sh-confirm { background: var(--surface-0); color: var(--tone-warn-fg); border: 1px solid var(--orange-500); }
.sh-submit.sh-secondary.sh-confirm:hover, .sh-actbtn.sh-confirm:hover { background: var(--orange-100); color: var(--tone-warn-fg); }
.sh-submit.sh-confirm.sh-submit-wait, .sh-submit.sh-confirm:disabled { background: var(--line-300); color: var(--ink-500); }
/* 刪除類:紅框線。 */
.sh-submit.sh-danger, .sh-actbtn.sh-danger { background: var(--surface-0); color: var(--red-700); border: 1px solid var(--red-400); }
.sh-submit.sh-danger:hover, .sh-actbtn.sh-danger:hover { background: var(--red-100); }
.sh-blocked-act { border-color: var(--orange-500); color: #8a5a00; }
.sh-blocked-act:hover { background: var(--orange-100); }
.sh-blocked-act:focus-visible { outline-color: var(--orange-500); }
.sh-blocked-act .sh-bico { display: inline-block; }
/* 表單裡獨自一行的欄位 */
.sh-form > .sh-span, .sh-form > .sh-field.sh-span { grid-column: 1 / -1; }
/* 卡片標題右邊的小標籤(「可選」)—— 跟標題同一行 */
.sh-card > h2 > .sh-h2-pill { margin-left: 8px; vertical-align: middle; font-weight: 500; }
/* 「其他填法」:每個入口是一顆帶說明的卡 */
.sh-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sh-way { text-align: left; border: 1px solid var(--line-200); border-radius: 8px; background: var(--surface-0); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; color: var(--ink-900); }
.sh-way:hover { border-color: var(--teal-500); }
.sh-way > b { font: 600 13.5px/1.4 var(--font-app); }
.sh-way > span { font-size: 12px; color: var(--ink-500); line-height: 1.5; }

/* ── 右側抽屜(助理)與頂欄的對話鍵 ── */
/* 助理入口:teal 淡底 + 文字,topbar 上唯一有色的鍵(層級:助理 > 鈴鐺 > 語言 / 使用者)。 */
.sh-chat { height: 32px; min-height: 0; box-sizing: border-box; border: 1px solid var(--teal-300); border-radius: 7px; background: var(--teal-100); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--teal-700); padding: 0 12px 0 10px; flex: none; align-self: center; font: 600 12.5px/1 var(--font-platform); }
.sh-chat:hover { background: var(--teal-500); border-color: var(--teal-500); color: var(--on-teal); }
.sh-chat .sh-ico { width: 16px; height: 16px; }
/* 手機版用短字(Chat / 問我們),不是只剩圖示 */
.sh-chat-s { display: none; }
@media (max-width: 720px) { .sh-chat { padding: 0 10px 0 9px; } .sh-chat-t { display: none; } .sh-chat-s { display: inline; } }
.sh-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 120; background: var(--surface-0); border-left: 1px solid var(--line-200); box-shadow: -12px 0 32px rgba(0, 0, 0, .12); display: flex; flex-direction: column; }
.sh-drawer[hidden] { display: none; }
.sh-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line-100); }
.sh-drawer-t { font: 700 14px/1.3 var(--font-app); }
.sh-drawer-x { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; cursor: pointer; position: relative; min-height: 0; }
.sh-drawer-x::before, .sh-drawer-x::after { content: ''; position: absolute; left: 7px; top: 13px; width: 14px; height: 2px; background: var(--ink-700); transform: rotate(45deg); }
.sh-drawer-x::after { transform: rotate(-45deg); }
.sh-drawer-x:hover { background: var(--surface-1); }
.sh-drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; }
.sh-asst { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.sh-asst-thread { flex: 1; min-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.sh-asst-msg { max-width: 92%; border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.55; }
.sh-asst-msg.bot { background: var(--surface-1); align-self: flex-start; }
.sh-asst-msg.me { background: var(--teal-100); color: var(--teal-700); align-self: flex-end; }
.sh-asst-msg p { margin: 0 0 6px; } .sh-asst-msg p:last-child { margin-bottom: 0; }
.sh-asst-kb { border: 1px solid var(--line-200); border-radius: 7px; padding: 6px 10px; margin: 6px 0; background: var(--surface-0); }
.sh-asst-kb > summary { cursor: pointer; font-weight: 600; }
.sh-asst-kb > p { margin: 6px 0 0; color: var(--ink-700); }
.sh-asst-ask { display: flex; gap: 8px; }
.sh-asst-ask > input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--line-200); border-radius: 8px; padding: 0 10px; font: 400 13.5px/1.4 var(--font-app); }
.sh-asst-ask > .sh-submit { flex: none; }
/* 工單的往來 */
.sh-conv { display: flex; flex-direction: column; gap: 10px; }
.sh-msg { border-radius: 10px; padding: 10px 12px; background: var(--surface-1); max-width: 80ch; }
.sh-msg.me { background: var(--teal-100); align-self: flex-end; }
.sh-msg-who { display: block; font: 600 12px/1.4 var(--font-platform); color: var(--ink-500); margin-bottom: 3px; }
.sh-msg p { margin: 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
/* 儀表板最上方的警示:一則一條,海關指示藍紫 / 逾期紅 */
.sh-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.sh-alert { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line-200); border-left: 5px solid var(--tone-ced-accent); border-radius: 8px; background: var(--surface-0); padding: 12px 16px; }
.sh-alert.warn { border-left-color: var(--tone-ced-accent); background: var(--tone-ced-bg); }
.sh-alert.bad { border-left-color: var(--tone-bad-accent); background: var(--tone-bad-bg); }
.sh-alert-t { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; font-size: 14px;   /* 置頂警示的內文最少 14px */ }
.sh-alert-t > b { font: 700 12px/1.4 var(--font-platform); letter-spacing: .08em; text-transform: uppercase; color: var(--tone-ced-fg); }
.sh-alert.bad .sh-alert-t > b { color: var(--tone-bad-fg); }
.sh-alert > .sh-submit { flex: none; }

/* ── 差異相片(P-DEL-04)──────────────────────────────── */
.sh-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sh-photo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-200); }
.sh-photo figcaption { font-size: 12px; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-disc-range { grid-template-columns: 1fr 1fr 120px; }
@media (max-width: 600px) { .sh-disc-range { grid-template-columns: 1fr; } }

/* ── 掃描確認收貨(P-DEL-05)──────────────────────────── */
.sh-scan-top { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.sh-scan-kv { display: flex; flex-direction: column; gap: 3px; }
.sh-scan-kv > b { font: 600 15px/1.3 var(--font-app); }
.sh-scan-kv > b.mono { font-family: var(--font-mono); }
.sh-scan-top > .sh-actbtn { margin-left: auto; }
.sh-cam { background: #1c1f22; border-radius: 10px; padding: 18px; color: #d5d8dc; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.sh-cam-view { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 3; background: #2a2e33; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.sh-cam-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.sh-cam.is-live .sh-cam-view video { display: block; }
.sh-cam-frame { position: relative; width: 60%; aspect-ratio: 2 / 1; border: 2px solid var(--teal-400, #3fd1c0); border-radius: 6px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }
.sh-cam-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 12.5px; color: #e7e9ec; padding: 0 12px; }
.sh-cam.is-live .sh-cam-btn { display: none; }
.sh-cam-foot { font-size: 12px; color: #9aa0a6; text-align: center; }
.sh-scan-status { display: flex; gap: 12px; align-items: flex-start; background: #2a2e33; border: 1px solid #3a3f45; border-radius: 8px; padding: 12px 16px; max-width: 460px; width: 100%; box-sizing: border-box; }
.sh-scan-status > .sh-dot { margin-top: 5px; width: 12px; height: 12px; }
.sh-scan-status > div { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.5; }
.sh-scan-status b { color: #fff; }
.sh-notyet { padding: 10px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-500); }
.sh-notyet > b { color: var(--ink-900); font-size: 13px; }
.sh-notyet-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; }
.sh-notyet-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.sh-tally { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.sh-tally-big { font: 700 34px/1.1 var(--font-app); color: var(--teal-600); text-align: center; letter-spacing: -.02em; }
.sh-center { text-align: center; font-size: 12.5px; color: var(--ink-700); }
.sh-tally-bar { height: 8px; border-radius: 4px; background: var(--line-200); overflow: hidden; margin: 6px 0; }
.sh-tally-bar > i { display: block; height: 100%; background: var(--teal-500); }

/* ── 用量申報(P-USE-01,原型)──────────────────────── */
.sh-period { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sh-period-sel { min-width: 220px; }
.sh-period-covers { font-size: 13px; color: var(--ink-700); flex: 1; min-width: 200px; padding-top: 18px; }
.sh-line-head { padding: 0 10px; border: 0; background: none; }
.sh-line-head .sh-line-end { justify-self: end; }
.sh-balance { text-align: center; padding: 6px 0 10px; }
.sh-balance > b { display: block; font: 700 42px/1.1 var(--font-app); letter-spacing: -.03em; color: var(--ink-900); }
.sh-balance > b.bad { color: var(--tone-bad-fg); }
.sh-balance > p { margin: 8px auto 0; font-size: 12.5px; color: var(--ink-700); line-height: 1.5; max-width: 30ch; }
.sh-balance-kv { border-top: 1px solid var(--line-100); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.sh-balance-kv > div { display: flex; justify-content: space-between; gap: 12px; }
.sh-balance-kv b { font-variant-numeric: tabular-nums; }
.sh-outstanding { display: flex; flex-direction: column; gap: 6px; }
.sh-outstanding-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--surface-1); border-radius: 6px; padding: 10px 12px; font-size: 13px; }
.sh-outstanding-row .dim { color: var(--ink-500); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-outstanding-row .num { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .sh-outstanding-row { grid-template-columns: 1fr auto; } .sh-outstanding-row .dim { grid-column: 1 / -1; white-space: normal; } .sh-line-head { display: none; } .sh-period-covers { padding-top: 0; } }

/* 清單:粗體欄、藥丸底下的小字、整列上色 */
.sh-table td.strong { font-weight: 600; color: var(--ink-900); }
.sh-cell-sub { font-size: 12px; color: var(--ink-500); margin-top: 3px; }
.sh-table tr.sh-row-bad > td { background: var(--tone-bad-bg); }
.sh-table tr.sh-row-bad > td:first-child { box-shadow: inset 4px 0 0 var(--tone-bad-accent); padding-left: 16px; }
.sh-table tr.sh-row-warn > td:first-child { box-shadow: inset 4px 0 0 var(--tone-warn-accent); padding-left: 16px; }
.sh-alert-i { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tone-bad-accent); color: #fff; font: 700 14px/28px var(--font-platform); text-align: center; display: grid; place-items: center; }
.sh-alert-i svg { width: 16px; height: 16px; }
.sh-alert-i.ced, .sh-alert-i.warn { background: var(--tone-ced-accent); }   /* .sh-alert.warn 的橫幅本身就是海關的靛色 */
.sh-alert-i.ok { background: var(--tone-ok-accent); }
.sh-alert-i.neu { background: var(--ink-400); }
.sh-submit.sh-danger-fill { background: var(--red-600, #c62828); color: #fff; border: 0; }

/* ── 申報付運(P-SHP-01)──────────────────────────────── */
.sh-shipctrs { display: flex; flex-direction: column; }
.sh-shipctr { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line-100); }
.sh-shipctr:last-child { border-bottom: 0; }
.sh-shipctr input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--teal-500); }
.sh-shipctr.is-off { background: var(--surface-1); color: var(--ink-700); }
.sh-shipctr.is-off .sh-shipctr-k b { color: var(--ink-700); }
.sh-shipctr-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-shipctr-k { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; cursor: pointer; }
.sh-shipctr-k b { color: var(--ink-900); }
.sh-shipctr-k .mono { font-family: var(--font-mono); }
.sh-field-h.ok { color: var(--tone-ok-fg); }
.sh-shipsum { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.sh-shipsum > div { display: flex; justify-content: space-between; gap: 12px; }
.sh-shipranges { background: var(--surface-1); border-radius: 6px; padding: 8px 10px; font: 12.5px/1.6 var(--font-mono); word-break: break-all; }
@media (max-width: 600px) { .sh-shipctr { grid-template-columns: auto 1fr; } .sh-shipctr > .sh-actbtn { grid-column: 2; justify-self: start; } }
.sh-listfoot { align-items: center; }
.sh-listfoot > .sh-field-h { flex: 1; min-width: 160px; }

/* ── 退回(P-RET-01 / P-RET-03)──────────────────────── */
.sh-count { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sh-count-n { font: 700 20px/1.1 var(--font-app); color: var(--ink-900); }
.sh-p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-700); }
.sh-stagecell { display: flex; flex-direction: column; gap: 5px; min-width: 260px; }
.sh-stagebar { display: flex; gap: 4px; }
.sh-stagebar > i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-200); }
.sh-stagebar > i.on { background: var(--ink-400); }
.sh-stagebar > i.on.warn { background: var(--tone-warn-accent); }
.sh-stagebar > i.on.ok { background: var(--tone-ok-accent); }
.sh-stagebar > i.on.ced { background: var(--tone-ced-accent); }
.sh-stagebar > i.on.bad { background: var(--tone-bad-accent); }
.sh-stageline { font-size: 12px; color: var(--ink-500); }
.sh-stageline > b { color: var(--ink-900); }
.sh-stageline > b.warn { color: var(--tone-warn-fg); }
.sh-stageline > b.ok { color: var(--tone-ok-fg); }
.sh-stageline > b.ced { color: var(--tone-ced-fg); }
.sh-stageline > b.bad { color: var(--tone-bad-fg); }

/* ── 預約附貼(P-AFF-01):時段卡 ─────────────────────── */
.sh-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 8px; }
.sh-slot { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line-200); border-radius: 8px; background: var(--surface-0); font: inherit; cursor: pointer; min-height: 0; }
.sh-slot > b { font-size: 13px; color: var(--ink-900); }
.sh-slot > span { font-size: 12px; color: var(--ink-700); }
.sh-slot > i { font-style: normal; font-size: 12px; }
.sh-slot > i.ok { color: var(--tone-ok-fg); }
.sh-slot > i.neu { color: var(--ink-500); }
.sh-slot.is-on { border-color: var(--teal-500); background: var(--teal-050, #f4fcfb); box-shadow: 0 0 0 1px var(--teal-500); }
.sh-slot.is-off { background: var(--surface-1); cursor: default; }
.sh-slot.is-off > b { color: var(--ink-700); }

/* ── 分頁列(全站清單統一)──────────────────────────── */
.sh-tablewrap { display: flex; flex-direction: column; gap: 10px; }
.sh-pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-700); }
.sh-pager-info { flex: 1; min-width: 120px; font-variant-numeric: tabular-nums; }
.sh-pager-size { border: 1px solid var(--line-300); border-radius: 6px; padding: 4px 8px; font: 12.5px/1.4 var(--font-platform); background: var(--surface-0); min-height: 0; }
.sh-pager-btn.is-dim { opacity: .45; cursor: default; }
.sh-pager-nav { display: inline-flex; gap: 6px; flex: none; }

/* ── Admin 訂單審核(佇列 + 詳情,原型 A-ORD-01 / 02 / 03)────────── */
.sh-rqhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.sh-rqhead-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 240px; }
.sh-cutoff { display: flex; flex-direction: column; gap: 2px; background: var(--teal-100); border: 1px solid var(--teal-300); border-radius: 8px; padding: 8px 16px; min-width: 200px; }
.sh-cutoff-k { font: 700 12px/1.4 var(--font-platform); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); }
.sh-cutoff-v { font: 700 26px/1.1 var(--font-app); color: var(--teal-700); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sh-cutoff-n { font-size: 12px; color: var(--ink-700); }
.sh-rv-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sh-rv-side { width: 260px; }
.sh-rv-side .sh-field { margin: 0; }
.sh-rv-side .sh-submit, .sh-rv-side .sh-submit-box { align-self: stretch; text-align: center; }
.sh-rv-side .sh-submit-box .sh-submit { align-self: stretch; }
.sh-rv-side .sh-clock .sh-tally-bar { margin: 8px 0 4px; }
.sh-rv-reject { display: flex; flex-direction: column; gap: 8px; }
.sh-clock-n.bad { color: var(--tone-bad-fg); font-weight: 600; }
.sh-stages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-top: 6px; }
.sh-stage { padding: 12px 12px 12px 0; border-right: 1px solid var(--line-100); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-stage:last-child { border-right: 0; }
.sh-stage-bar { display: block; height: 4px; border-radius: 2px; background: var(--line-200); margin-bottom: 6px; }
.sh-stage.done .sh-stage-bar { background: var(--tone-ok-accent); }
.sh-stage.now .sh-stage-bar { background: var(--tone-ced-accent); }
.sh-stage.now { background: var(--tone-ced-bg); padding-left: 10px; border-radius: 6px; }
.sh-stage-t { display: flex; align-items: center; gap: 7px; font: 600 12.5px/1.3 var(--font-app); color: var(--ink-400); }
.sh-stage.done .sh-stage-t, .sh-stage.now .sh-stage-t { color: var(--ink-900); }
.sh-stage-who, .sh-stage-n { font-size: 12px; color: var(--ink-500); }
.sh-stage-v { font: 500 12.5px/1.3 var(--font-mono); color: var(--ink-700); }
.sh-stage.now .sh-stage-v { color: var(--tone-ced-fg); font-weight: 600; }
@media (max-width: 900px) { .sh-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sh-stage { border-right: 0; border-bottom: 1px solid var(--line-100); } }
.sh-evs { display: flex; flex-direction: column; }
.sh-ev { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-100); }
.sh-ev:last-child { border-bottom: 0; }
.sh-ev > .sh-dot { margin-top: 5px; }
.sh-ev-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.sh-ev-h > .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }
.sh-ev-t { font-size: 12.5px; color: var(--ink-700); margin-top: 3px; line-height: 1.5; }
.sh-checks { display: flex; flex-direction: column; }
.sh-checkrow { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line-100); font-size: 13px; }
.sh-checkrow:last-child { border-bottom: 0; }
.sh-checkrow.is-bad { background: var(--tone-warn-bg); border-radius: 6px; }
.sh-checkrow-d { font: 500 12px/1.3 var(--font-mono); color: var(--ink-500); white-space: nowrap; }
.sh-escs { display: flex; flex-direction: column; }
.sh-escrow { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line-100); font-size: 12.5px; }
.sh-escrow:last-child { border-bottom: 0; }
.sh-escrow > div { display: flex; flex-direction: column; gap: 2px; }
.sh-escrow > div > span { font-size: 12px; color: var(--ink-500); }
.sh-escrow > .mono { font-family: var(--font-mono); color: var(--ink-500); white-space: nowrap; }
.sh-escrow.is-on b { color: var(--tone-warn-fg); }
.sh-escrow.is-on > .mono { color: var(--tone-warn-fg); font-weight: 600; }
.sh-clock-v-sm { font-size: 24px; }
.sh-rv-decide-b { display: flex; flex-direction: column; gap: 10px; }
.sh-rv-decide-b .sh-field { margin: 0; }
.sh-rv-decide-b .sh-submit, .sh-rv-decide-b .sh-submit-box { align-self: stretch; text-align: center; }
.sh-rv-decide-b .sh-submit-box .sh-submit { align-self: stretch; }
.sh-oside-end { position: static; align-self: end; }

/* ── 對帳(Admin A-REC-*)──────────────────────────────── */
.sh-runbar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: var(--surface-0); border: 1px solid var(--line-200); border-left: 4px solid var(--teal-500); border-radius: 8px; padding: 12px 18px; margin-bottom: 12px; }
.sh-runbar-kv { display: flex; flex-direction: column; gap: 2px; }
.sh-runbar-kv > b { font: 600 15px/1.3 var(--font-app); font-variant-numeric: tabular-nums; }
.sh-runbar-pills { display: flex; gap: 6px; padding-left: 12px; border-left: 1px solid var(--line-200); }
.sh-runbar-t { margin: 0; flex: 1; min-width: 220px; font-size: 12.5px; color: var(--ink-700); line-height: 1.5; text-align: right; }
.sh-seg-left { justify-content: flex-start; max-width: none; }
.sh-seg-i { cursor: pointer; border: 0; background: transparent; }
.sh-seg-i.now { background: var(--ink-900); color: #fff; }
.sh-stages-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sh-stage.bad .sh-stage-bar { background: var(--tone-bad-accent); }
.sh-osplit-wide { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 1000px) { .sh-osplit, .sh-osplit-wide { grid-template-columns: minmax(0, 1fr); } .sh-oside { position: static; } }
.sh-uidsearch { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.sh-uidsearch .sh-field { margin: 0; }
.sh-uidsearch input.mono { font-family: var(--font-mono); letter-spacing: .04em; }
@media (max-width: 720px) { .sh-uidsearch { grid-template-columns: 1fr; } }
.sh-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.sh-chip { border: 1px solid var(--line-200); background: var(--surface-1); border-radius: 20px; padding: 5px 12px; font: 500 12px/1.3 var(--font-mono); cursor: pointer; min-height: 0; }
.sh-chip:hover { border-color: var(--teal-400); }
.sh-uidhead { display: flex; flex-direction: row; align-items: center; gap: 28px; flex-wrap: wrap; }   /* .sh-card 是 column flex,這裡要橫排 */
.sh-uidhead-kv { display: flex; flex-direction: column; gap: 4px; }
.sh-uidhead-no { font: 700 26px/1.1 var(--font-mono); letter-spacing: -.01em; }
.sh-uidhead > .sh-actbar { margin-left: auto; }
.sh-tablefoot { display: flex; align-items: center; gap: 14px; padding: 12px 4px 4px; border-top: 1px solid var(--line-100); font-size: 13.5px; }
.sh-tablefoot > .num { font-variant-numeric: tabular-nums; }
.sh-cover { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sh-cover > b { font: 700 34px/1 var(--font-app); letter-spacing: -.02em; color: var(--tone-ok-fg); }
.sh-cover > b.warn { color: var(--tone-warn-fg); } .sh-cover > b.bad { color: var(--tone-bad-fg); }
.sh-cover > span { font-size: 13px; color: var(--ink-700); }
.sh-cover-marks { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-500); }
.sh-tally-bar > i.warn { background: var(--tone-warn-accent); } .sh-tally-bar > i.bad { background: var(--tone-bad-accent); }
.sh-table tr.sh-row-cur > td { background: var(--surface-2, #f4f5f7); font-weight: 600; }
.sh-signed { font-variant-numeric: tabular-nums; } .sh-signed.pos { color: var(--tone-ok-fg); } .sh-signed.neg { color: var(--tone-warn-fg); } .sh-signed.nil { color: var(--ink-500); font-weight: 400; }
.sh-note.bad > b { display: block; margin-bottom: 4px; } .sh-note.bad > p { margin: 0; }
.sh-steps2 { list-style: none; margin: 0 0 12px; padding: 0; }
.sh-steps2 > li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line-100); counter-increment: st; }
.sh-steps2 > li:last-child { border-bottom: 0; }
.sh-steps2 > li::before { content: counter(st); grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 50%; background: var(--line-200); color: var(--ink-700); font: 700 12px/26px var(--font-app); text-align: center; }
.sh-steps2 > li.done::before { background: var(--ink-900); color: #fff; }
.sh-steps2 > li > b { font-size: 13.5px; } .sh-steps2 > li > span { font-size: 12.5px; color: var(--ink-500); }
.sh-matters { list-style: none; margin: 0; padding: 0; }
.sh-matters > li { display: grid; grid-template-columns: 10px 1fr auto; gap: 4px 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-100); }
.sh-matters > li:last-child { border-bottom: 0; }
.sh-matters > li > .sh-dot { margin-top: 6px; }
.sh-matters b { display: block; font-size: 13.5px; } .sh-matters span { font-size: 12.5px; color: var(--ink-500); }
.sh-submit.sh-mini { padding: 4px 10px; font-size: 12px; min-height: 0; }
.sh-rowhead { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .sh-rowhead > h2 { margin: 0; font-size: 17px; }
.sh-pm-h { font-size: 14px; margin: 14px 0 6px; display: flex; align-items: baseline; gap: 6px; } .sh-pm-h:first-child { margin-top: 0; }
.sh-pm-n { font: 600 12px var(--font-platform); color: var(--ink-500); }
.sh-pm-body { margin: 0 0 6px; padding: 10px 12px; background: var(--surface-2, #f4f5f7); border-radius: 8px; font-size: 13.5px; line-height: 1.55; }
.sh-strong { font-weight: 600; }
.sh-tick { color: var(--tone-ok-fg); font-weight: 700; } .sh-notick { color: var(--ink-300, #c7cbd1); }
.sh-submit.sh-secondary:disabled { background: var(--surface-1); color: var(--ink-400, #9aa0a6); border-color: var(--line-200); cursor: not-allowed; }
.sh-h2 { font-size: 16px; margin: 18px 0 6px; }
.sh-signed.bad { color: var(--tone-bad-fg); }
/* 標題左邊的「返回」小鍵(原型詳情頁左上角的 [‹ Incidents]) */
.sh-head { align-items: center; }
.sh-head > div { flex: 1; min-width: 0; }   /* 標題那一塊撐開,返回小鍵與動作鍵各靠一邊 */
.sh-backchip { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 34px; min-height: 0; padding: 0 12px 0 8px; margin-right: 14px; border: 1px solid var(--line-300); border-radius: 8px; background: var(--surface-0); color: var(--ink-900); font: 600 13px/1 var(--font-platform); cursor: pointer; }
.sh-backchip:hover { background: var(--surface-1); }
.sh-backchip-i { font-size: 16px; line-height: 1; color: var(--ink-500); }
@media (max-width: 720px) { .sh-backchip { margin-right: 10px; padding: 0 10px 0 6px; } }
.sh-matters > li > b.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* kvList:標籤左、值右(原型詳情頁的清單樣式) */
.sh-kv { display: flex; flex-direction: column; }
.sh-kv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-100); font-size: 13.5px; }
.sh-kv-row:last-child { border-bottom: 0; }
.sh-kv-k { color: var(--ink-500); flex: none; }
.sh-kv-v { text-align: right; font-weight: 600; color: var(--ink-900); min-width: 0; overflow-wrap: break-word; }
.sh-kv-v.ok { color: var(--tone-ok-fg); } .sh-kv-v.warn { color: var(--tone-warn-fg); } .sh-kv-v.bad { color: var(--tone-bad-fg); } .sh-kv-v.ced { color: var(--tone-ced-fg); }
/* 寬螢幕上不要把標籤與值拉到整頁兩端。狀態變更詳情用這個。 */
.sh-kv-cap { max-width: 40rem; }
.sh-kv-cap .sh-kv-row { justify-content: flex-start; gap: 24px; }
.sh-kv-cap .sh-kv-k { width: 8.5rem; }
.sh-kv-cap .sh-kv-v { text-align: left; flex: 1; }
/* timeline:日期 | 圓點 | 標題 + 小字 */
.sh-hist { list-style: none; margin: 0; padding: 0; }
.sh-hist > li { display: grid; grid-template-columns: 84px 10px 1fr; gap: 4px 12px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line-100); }
.sh-hist > li:last-child { border-bottom: 0; }
.sh-hist-at { color: var(--ink-500); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.sh-hist > li > .sh-dot { margin-top: 6px; }
.sh-hist b { display: block; font-size: 13.5px; } .sh-hist-sub { display: block; font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.sh-hist-empty { color: var(--ink-500); font-size: 13px; padding: 8px 0; }
@media (max-width: 600px) { .sh-hist > li { grid-template-columns: 10px 1fr; } .sh-hist-at { grid-column: 2; order: 3; } }
/* 選取用的列(點了再按底下的按鈕):沒有「›」,選中整列反白 */
.sh-table tr.sh-row-pick { cursor: pointer; }
.sh-table tr.sh-row-pick:hover > td { background: var(--surface-1); }
.sh-table tr.sh-row-pick.is-selected > td { background: var(--teal-100); }
.sh-table tr.sh-row-pick.is-selected > td:first-child { box-shadow: inset 4px 0 0 var(--teal-500); padding-left: 16px; }
/* 會換頁的按鈕一律藍色(規定:換頁的按鈕不能是白的) */
/* 藍要跟海關的紫(--tone-ced)拉開:用偏青的藍。#1d80d8 本身白字對比只有 4.1,
   填色用深一級的 #1a74c4(4.9),hover 與淺底上的字用 #1565ab。 */
:root { --nav-600: #1a74c4; --nav-700: #1565ab; --nav-50: #e8f3fc; --nav-100: #d3e8f9; }
.sh-submit.sh-go, .sh-submit.sh-secondary.sh-go, .sh-stat-btn.sh-go { background: var(--nav-600); color: #fff; border-color: var(--nav-600); }
.sh-submit.sh-go:hover, .sh-stat-btn.sh-go:hover { background: var(--nav-700); }
.sh-actbtn.sh-go, a.sh-actbtn.sh-go, .sh-blocked-act.sh-go { background: var(--nav-50); color: var(--nav-700); border-color: var(--nav-600); }
.sh-backchip { border-color: var(--nav-600); color: var(--nav-700); background: var(--nav-50); }
.sh-backchip:hover { background: var(--nav-100); }
.sh-backchip-i { color: var(--nav-700); }
.sh-submit.sh-go:disabled { background: var(--line-300); color: var(--ink-500); border-color: transparent; }
.sh-item.sh-item-child { font-size: 12.5px; opacity: .85; }
.sh-item.sh-item-child .sh-item-name::before { content: '›'; margin-right: 6px; color: var(--ink-500); }
.sh-ban { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
.sh-ban > h2, .sh-ban > p { flex: 1 1 100%; }
.sh-ban > .sh-submit { flex: none; margin-top: 4px; }
.sh-uidhead > .sh-actbar { margin-left: auto; }
/* 查核地圖:用 box-shadow 當淺色邊。小地圖可點開放大。 */
.sh-snapmap { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 0 0 1px rgba(160, 182, 192, .55), 0 0 6px rgba(186, 206, 214, .9); }
.sh-snapmap-hit { position: relative; cursor: pointer; border-radius: 8px; }
.sh-snapmap-zoom { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, .9); color: var(--ink-700, #3d4654); box-shadow: 0 0 0 1px rgba(160, 182, 192, .45); pointer-events: none; }
.sh-snapmap-zoom svg { width: 15px; height: 15px; display: block; }
.sh-snapmap-hit:focus-visible { outline: 2px solid var(--teal-600, #0f6e6e); outline-offset: 3px; }
.sh-mapzoom { position: fixed; inset: 0; z-index: 200; background: rgba(20, 24, 28, .45); display: flex; align-items: center; justify-content: center; padding: 28px 20px; }
.sh-mapzoom-panel { width: min(1100px, 100%); max-height: calc(100vh - 56px); overflow: auto; background: var(--surface-0, #fff); border-radius: 12px; padding: 14px 16px 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); }
.sh-mapzoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font: 700 15px/1.3 var(--font-app); color: var(--ink-900); }