/* 有為全屋定制 · 門店報價系統 V1 */
:root{
  --bg:#f4f6f8;
  --panel:#ffffff;
  --line:#e2e6ea;
  --line-2:#eef1f4;
  --text:#1d2733;
  --text-2:#5b6b7c;
  --text-3:#8b9aa8;
  --brand:#1f5f4d;
  --brand-2:#2c7f66;
  --brand-soft:#e8f3ef;
  --warn:#b7791f;
  --warn-soft:#fdf3e2;
  --danger:#c0392b;
  --danger-soft:#fdeceb;
  --ok:#1f7a4d;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,30,40,.06),0 4px 14px rgba(20,30,40,.05);
}
*{box-sizing:border-box}
/* ---------- 關掉瀏覽器「滑過頭就上一頁」的手勢 ----------
   症狀：在橫向可捲動的寬表格（報價明細、圖紙開單預覽、產品清單…）裡按住往左拖
   （多選、或只是想滑去看後面欄位），捲到容器邊界還繼續拖，瀏覽器就把剩下的手勢
   當成「上一頁／下一頁」吃掉 → 整頁後退（SPA 是 hash 路由，看起來就是跳回上一頁）。
   程式裡沒有任何 history.back()／popstate，這是瀏覽器行為，只能靠 CSS 關掉：
     - html/body 用 overscroll-behavior-x:none　→ 關掉根層的橫向 overscroll 導航
     - 捲動容器用 contain　　　　　　　　　　　→ 自己照樣能捲，捲到底不要把剩餘手勢往外丟給整頁
   只鎖 x 軸：向下拉重整、直向捲動都不受影響。 */
html,body{overscroll-behavior-x:none}
.tbw,.modal-mask,.modal-b,.pk-tree,.pk-pop,.lines,.chg-list,.pm-tree,.pm-main,.perm-wrap,.lb-b,.content{overscroll-behavior:contain}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.55;
}
.boot{padding:60px;text-align:center;color:var(--text-3)}
a{color:var(--brand-2);text-decoration:none}
button{font-family:inherit;font-size:13px}

/* ---------- layout ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:212px;flex:0 0 212px;background:#16281f;color:#cfe0d8;padding:14px 0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto;
}
.sidebar .brand{padding:6px 18px 14px;font-size:15px;font-weight:700;color:#fff;letter-spacing:.5px}
.sidebar .brand small{display:block;font-size:11px;color:#7fa595;font-weight:400;letter-spacing:0}
.nav-group{padding:10px 18px 4px;font-size:11px;color:#6f8c80;letter-spacing:1px}
.sidebar a.nav{
  display:block;padding:8px 18px;color:#cfe0d8;font-size:13.5px;border-left:3px solid transparent;cursor:pointer;
}
.sidebar a.nav:hover{background:#1d3529}
.sidebar a.nav.on{background:#1d3529;border-left-color:var(--brand-2);color:#fff;font-weight:600}
.sidebar .foot{margin-top:auto;padding:12px 18px;font-size:11px;color:#6f8c80;border-top:1px solid #24382e}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:54px;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 18px;position:sticky;top:0;z-index:30;
}
.topbar h1{font-size:16px;margin:0;font-weight:700}
.topbar .spacer{flex:1}
.topbar .who{font-size:12.5px;color:var(--text-2);text-align:right;line-height:1.3}
.topbar .who b{color:var(--text)}
.content{padding:18px;flex:1}
.page{max-width:1360px;margin:0 auto}
/* ★★ 大螢幕放寬（2026-10-10 客戶回報「全屏的頁面也太小了」）：
      原本不管螢幕多大都鎖在 1360px —— 1920 的螢幕上右邊整整空掉一塊，
      而排班表月曆（30 天）／報價明細／財務帳款這些**寬表格**只能擠在左邊，
      還得橫向捲動才看得完。
      管理系統是拿來看表格的，不是讀文章 —— 「一行字太長不好讀」那個顧慮在這裡不成立。
      ≥1500px 就吃滿可用寬度（留白交給 .content 的 padding）；
      2200px 以上再收一個上限，免得超寬螢幕上欄位被拉得太散。 */
@media(min-width:1500px){ .page{max-width:none} }
@media(min-width:2200px){ .page{max-width:2080px} }

/* ---------- generic ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card + .card{margin-top:14px}
/* 可收合的卡片：<details class="card acc"><summary class="card-h">…
   用途：次要、平常不需要一直看的清單（例如員工管理的「離職庫」）。
   預設收合，才不會把每天要看的在職名單往下擠。 */
details.acc>summary{list-style:none;cursor:pointer;user-select:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary.card-h{border-bottom:0;border-radius:var(--radius)}
details.acc[open]>summary.card-h{border-bottom:1px solid var(--line-2);border-radius:var(--radius) var(--radius) 0 0}
details.acc>summary::after{content:'▾';margin-left:8px;color:var(--text-3);font-size:12px}
details.acc[open]>summary::after{content:'▴'}
.card-h{padding:12px 16px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-h h2{font-size:14.5px;margin:0;font-weight:700}
.card-h .spacer{flex:1}
.card-b{padding:14px 16px}
.card-b.tight{padding:0}
.muted{color:var(--text-2)}
.tiny{font-size:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
label.chk{display:flex;gap:6px;align-items:center;font-size:13px;cursor:pointer}
@media(max-width:1000px){.g3,.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}.g2{grid-template-columns:1fr}}
@media(max-width:640px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}

.btn{
  border:1px solid var(--line);background:#fff;color:var(--text);padding:6px 12px;border-radius:7px;cursor:pointer;
  font-size:13px;transition:.12s;
}
.btn:hover{border-color:#c7cfd6;background:#fafbfc}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-2)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:#e9c9c5}
.btn.danger:hover{background:var(--danger-soft)}
.btn.warn{color:#8a5a12;border-color:#e6cf9e;background:#fdf6e6}
.btn.warn:hover{background:#faedd5;border-color:#dcc084}
.btn.sm{padding:3px 8px;font-size:12px;border-radius:6px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.tiny{padding:1px 6px;font-size:11.5px}

input,select,textarea{
  font-family:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--text);
  width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-soft);border-color:var(--brand-2)}
label.fld{display:block;margin-bottom:10px}
label.fld > span{display:block;font-size:12px;color:var(--text-2);margin-bottom:3px}
/* 唯讀的「自動產生」欄位（例如系統設定裡的「報價單用」那兩欄）：
   灰底 + 不可選取游標，一眼看出「這格不是給你打的」，避免使用者以為改了會生效。 */
input.ro,input.ro:focus{background:#f2f4f7;color:var(--text-2);border-color:var(--line-2);cursor:not-allowed;outline:none}
.req::after{content:"＊";color:var(--danger);font-size:11px;margin-left:2px}

table{width:100%;border-collapse:collapse}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
th{font-size:12px;color:var(--text-2);font-weight:600;background:#fafbfc;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:#fbfcfd}
.empty{padding:26px;text-align:center;color:var(--text-3);font-size:13px}

/* ---------- 寬度工具（全域：彈窗與一般表格也要用；.lines 內的維持原樣） ---------- */
.w40{width:40px}.w60{width:60px}.w70{width:70px}.w80{width:80px}
.w100{width:100px}.w120{width:120px}.w130{width:130px}.w140{width:140px}
.w150{width:150px}.w160{width:160px}.w180{width:180px}.w200{width:200px}
.w40,.w60,.w70,.w80,.w100,.w120,.w130,.w140,.w150,.w160,.w180,.w200{max-width:100%;min-width:0}
input.w40,input.w60,input.w70,input.w80,input.w100,input.w120,input.w130,input.w140,
input.w150,input.w160,input.w180,input.w200{padding:5px 6px;font-size:12.5px}
.row.wrap{flex-wrap:wrap}
.c-danger{color:var(--danger);font-weight:600}
.c-ok{color:var(--ok);font-weight:600}

/* ---------- 圖紙開單 ---------- */
.tbw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin-bottom:2px}
/* 圖紙開單預覽表：材料／產品欄的挑選器按鈕（原生 select 不能打字找，改用挑選器） */
.tbw .pk-wrap{display:flex}
.tbw .pk-wrap .pk-btn{max-width:190px;min-width:110px}
.tbw .pk-wrap .pk-btn .pk-tx{font-size:12px}
.hw-hint{display:block;margin-top:3px}
tr.off{opacity:.42}
tr.off input,tr.off select{background:#f4f6f8}
.dz.busy{border-color:var(--brand);background:var(--brand-soft);cursor:progress}
.dz.over{border-color:var(--brand);background:var(--brand-soft);border-style:solid}
.dz .tiny{margin-top:6px;line-height:1.6}
.dz b.c-danger{display:block;margin-bottom:2px}
/* 尺寸欄「下一個會被填入」的標記 */
input.pick{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft);background:#fbfffd}
input.autofill{background:#fffaf0;border-color:#e8cf9a}

.tag{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11.5px;background:#eef1f4;color:var(--text-2);border:1px solid var(--line)}
.tag.ok{background:#e7f4ec;color:var(--ok);border-color:#cfe8d8}
.tag.warn{background:var(--warn-soft);color:var(--warn);border-color:#f0dcb8}
.tag.danger{background:var(--danger-soft);color:var(--danger);border-color:#f3cfcb}
.tag.brand{background:var(--brand-soft);color:var(--brand);border-color:#cfe5dc}
.tag.grey{background:#f1f3f5;color:var(--text-3)}

#toast-root{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:8px}
#modal-root{position:relative;z-index:150}
.toast{background:#1d2733;color:#fff;padding:9px 14px;border-radius:8px;font-size:13px;box-shadow:var(--shadow);max-width:360px;white-space:normal;line-height:1.6;cursor:pointer}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--ok)}
.toast.warn{background:#8a5a00;color:#fff;white-space:normal;line-height:1.6}

.modal-mask{position:fixed;inset:0;background:rgba(18,26,34,.42);z-index:150;display:flex;align-items:flex-start;justify-content:center;padding:34px 14px;overflow:auto}
.modal{background:#fff;border-radius:12px;width:100%;max-width:640px;box-shadow:0 12px 40px rgba(15,25,35,.25)}
.modal.wide{max-width:960px}
.modal.narrow{max-width:440px}
.modal-h{padding:13px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center}
.modal-h h3{margin:0;font-size:15px}
.modal-h .x{margin-left:auto;cursor:pointer;color:var(--text-3);font-size:18px;line-height:1}
.modal-b{padding:16px 18px;max-height:64vh;overflow:auto}
.modal-f{padding:12px 18px;border-top:1px solid var(--line-2);display:flex;gap:8px;justify-content:flex-end}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{border:0;background:#fff;padding:5px 11px;cursor:pointer;color:var(--text-2);font-size:12.5px}
.seg button + button{border-left:1px solid var(--line)}
.seg button.on{background:var(--brand);color:#fff;font-weight:600}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#16281f,#24503f 60%,#2c7f66);padding:20px}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:14px;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.28)}
.login-card .logo{font-size:19px;font-weight:800;color:var(--brand);letter-spacing:1px}
.login-card .sub{font-size:12px;color:var(--text-2);margin:2px 0 20px}
.login-card h3{font-size:15px;margin:0 0 12px}
.hintbox{background:#f7f9fa;border:1px dashed var(--line);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--text-2);margin-top:14px}

/* ---------- quote editor ---------- */
.qbar{
  position:sticky;top:54px;z-index:20;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow);
}
.qbar .kv{font-size:12px;color:var(--text-2)}
.qbar .kv b{color:var(--text);font-size:13px}
/* 報價單客戶可以直接更換（開錯客戶時） */
.chg-list{margin-top:6px;border:1px solid var(--line-2);border-radius:8px;max-height:300px;overflow:auto}
.chg-item{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--line-2)}
.chg-item:last-child{border-bottom:0}
.chg-item:hover{background:var(--brand-soft)}
.chg-item.on{background:var(--brand-soft)}
.chg-item b{flex:none}
.chg-item .muted{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chg-item .brand{flex:none;color:var(--brand)}
.qbar .sep{width:1px;height:26px;background:var(--line)}
.space-block{margin-top:14px}
.space-h{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--brand-soft);border:1px solid #cfe5dc;border-radius:8px 8px 0 0;border-bottom:0}
.space-h .nm{font-weight:700;font-size:13.5px}
.lines{border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;overflow:auto}
.lines table{min-width:1110px}   /* 含最左邊的拖曳握把欄；少了這 30px 操作欄會被擠到換行 */
.lines td{padding:5px 6px}
.lines th{padding:6px}
.lines input,.lines select{padding:4px 6px;font-size:12.5px}
.lines .w40{width:40px}.lines .w60{width:60px}.lines .w70{width:70px}.lines .w80{width:80px}
.lines .w100{width:100px}.lines .w130{width:130px}.lines .w150{width:150px}.lines .w180{width:180px}
.lines td.amt{font-weight:700;font-variant-numeric:tabular-nums}
.lines .miss{color:var(--danger);font-weight:600}

/* ---------- 手動排序：拖曳握把＋上移／下移 ----------
   ★ 只有握把（.drag-h）可拖，不要讓整列 draggable：
     整列可拖的話，在品名輸入框裡按住選字會被瀏覽器判成「拖曳這一列」。 */
.lines .w30{width:30px}
.dh-cell{text-align:center;padding:2px 0!important}
.drag-h{cursor:grab;user-select:none;-webkit-user-select:none;display:inline-flex;align-items:center;
  justify-content:center;width:26px;height:26px;border-radius:6px;color:var(--text-3);
  font-size:15px;line-height:1;touch-action:none}
.drag-h:hover{background:var(--line-2);color:var(--text)}
.drag-h:active{cursor:grabbing}
.space-h .drag-h{width:22px;height:22px;font-size:14px}
/* 拖起來的那一列／那一塊：半透明，看得出「正在搬的是這個」 */
tr.dragging,.space-block.dragging{opacity:.4}
/* 落下位置的指示線（插在目標前面／後面） */
.lines tr.dgt>td{border-top:2px solid var(--brand)}
.lines tr.dgb>td{border-bottom:2px solid var(--brand)}
.space-block.dgt{border-top:2px solid var(--brand)}
.space-block.dgb{border-bottom:2px solid var(--brand)}
/* 移動後短暫高亮，不然重繪完會不知道剛剛動到哪一列 */
@keyframes justmoved{from{background:#fff6d6}to{background:transparent}}
.just-moved{animation:justmoved .9s ease-out}
.btn.tiny.mv{min-width:30px;padding:3px 6px;font-weight:700}
.sub-note{font-size:11.5px;color:var(--text-3);padding:6px 10px;border-top:1px dashed var(--line-2)}
.totals{display:flex;justify-content:flex-end;padding:14px}
.totals table{width:320px}
.totals td{padding:5px 8px}
.totals tr.grand td{font-size:17px;font-weight:800;border-top:2px solid var(--text);padding-top:9px}
.warnbar{background:var(--warn-soft);border:1px solid #f0dcb8;color:#8a5a12;padding:8px 12px;border-radius:8px;font-size:12.5px;margin-top:12px}
.errbar{background:var(--danger-soft);border:1px solid #f3cfcb;color:var(--danger);padding:8px 12px;border-radius:8px;font-size:12.5px;margin-top:12px}

/* ---------- 計量彙總（投影平方數／米數）----------
   面積與長度是兩種維度，視覺上也要分成兩列、各帶自己的單位，
   不給任何「加總成一個數字」的暗示。 */
.meas{width:320px;margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.meas-t{font-size:12.5px;font-weight:700;margin-bottom:6px}
.meas-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;font-size:13px}
.meas-row span{color:var(--text-3)}
.meas-row b{font-size:15px;font-variant-numeric:tabular-nums}
.meas-row+.meas-row{border-top:1px dashed var(--line-2)}
.meas-sp{font-size:11.5px;color:var(--text-3);border-top:1px dashed var(--line-2);margin-top:6px;padding-top:6px;line-height:1.7}
.meas-note{font-size:11px;color:var(--text-3);margin-top:5px}
.meas-empty{font-size:12px;color:var(--text-3);line-height:1.6}
.sp-meas{font-size:11.5px;color:var(--text-2);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 7px;margin-left:6px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- 自動轉匯（原幣 × 匯率 ＝ 訂單本幣）----------
   收款／退款／支出／發票四張表單共用同一塊 .fxblk；清單上的 .fxnote 是
   「這筆是怎麼換來的」的註記（一樣受金額遮罩管）。 */
.fxblk{border:1px dashed var(--line);border-radius:8px;padding:10px 12px;margin:10px 0;background:var(--bg)}
.fxblk .fld{margin-bottom:6px}
.fxblk #fxBtnWrap{display:flex;flex-direction:column;justify-content:flex-end}
/* ★ #fxBtnWrap 是 ID 選擇器，會蓋掉 [hidden] 的 display:none —— 一定要補這一條，
   否則「與訂單同幣別」時「抓今日匯率」按鈕不會藏起來。 */
.fxblk #fxBtnWrap[hidden]{display:none}
.fxblk #fxBtnWrap .btn{width:100%;min-height:34px}
.fxprev{margin-top:6px;font-size:12.5px}
.fxnote{font-size:11px;line-height:1.4;margin-top:1px}

/* ---------- 考勤打卡 ----------
   兩顆大按鈕是全頁的主角：手指頭要點得到（手機 ≥38px 是這套系統的底線，
   打卡鈕刻意做得更大），「已打卡」的狀態要一眼看出來，不用去讀文字。 */
.punch-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.punch-btn{flex:1 1 180px;min-width:160px;min-height:76px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);transition:.15s}
.punch-btn b{font-size:17px}
.punch-btn span{font-size:11.5px;color:var(--text-3)}
.punch-btn.in{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.punch-btn.out{border-color:#5b7fa6;color:#2f5d84;background:#eef4fa}
.punch-btn:hover{filter:brightness(.97)}
.punch-btn.done{background:#f4f6f8;color:var(--text-3);border-style:dashed;cursor:default}
.punch-btn.done b{color:var(--text-2)}
.punch-btn[disabled]{opacity:.7;cursor:progress}
@media(max-width:640px){.punch-row{flex-direction:column}.punch-btn{width:100%}}
tr.dim td{color:var(--text-3)}

/* ---------- 存檔失敗的常駐警告條（#write-bar）----------
   為什麼不是 toast：toast 3 秒就消失。存檔失敗＝資料隨時會不見，使用者必須一直看得到。
   掛在 #app 之外（body 第一個子元素）並用 sticky，換頁整批重繪也洗不掉。
   z-index 900：蓋過彈窗（.modal-mask 150），但刻意低於挑選浮層（.pk-pop 4000）與
   圖片燈箱（.lb-mask 4600）—— 那兩個是全螢幕遮罩，被蓋住會擋到操作。 */
.write-bar{display:none}
.write-bar.on{display:block;position:sticky;top:0;z-index:900;background:var(--danger-soft);
  border-bottom:2px solid var(--danger);padding:10px 14px;font-size:13px;color:#7d2019}
.write-bar .wbb{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.write-bar .wbt{line-height:1.6}
.write-bar .wba{display:flex;gap:8px;flex-wrap:wrap}
.write-bar .wbn{margin-top:6px;font-size:12px;color:#9a4038;line-height:1.6;text-align:center}

/* ---------- 連不上雲端時的常駐警告條（#sync-bar）----------
   為什麼要有：同步失敗原本只顯示在側欄底部那一行小字，員工錄了一整天的客戶與報價、
   以為已經存到雲端，其實整包都只在那台手機上 —— 老闆那台當然一筆都看不到，
   而且沒有任何一方知道出了什麼事（真實踩到：三位員工的資料一筆都沒上來）。
   規格與 #write-bar 一致：掛在 #app 之外、sticky、換頁洗不掉；但**兩者互斥**，
   因為「資料隨時會不見」比「還沒上傳」更急，兩條疊在一起會擠掉畫面。
   z-index 890（比 #write-bar 的 900 低，反正不會同時出現）。 */
.sync-bar{display:none}
.sync-bar.on{display:block;position:sticky;top:0;z-index:890;background:var(--warn-soft);
  border-bottom:2px solid #e0b070;padding:10px 14px;font-size:13px;color:#8a5a12}
.sync-bar .sbb{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.sync-bar .sbt{line-height:1.6}
.sync-bar .sba{display:flex;gap:8px;flex-wrap:wrap}
.sync-bar .sbn{margin-top:6px;font-size:12px;color:#96631a;line-height:1.6;text-align:center}
.sync-bar code{background:#fff;border:1px solid #e6d3ae;border-radius:4px;padding:1px 5px;
  font-size:11.5px;word-break:break-all}

/* ---------- 系統設定：本機儲存用量 ---------- */
.storbar{font-size:12.5px;color:var(--text-2);background:var(--line-2);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;line-height:1.7}
.storbar.bad{background:var(--danger-soft);border-color:#f3cfcb;color:#7d2019}

/* ---------- 已鎖定版本：說明為什麼點不動 ＋ 一鍵產生新版本 ---------- */
.lockbar{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:10px;
  background:#fff8e8;border:1px solid #f0dcb8;color:#8a5a12}
.lockbar .lb-ic{font-size:18px;line-height:1}
.lockbar .lb-tx b{display:block;font-size:13.5px;color:#7a4d0d;margin-bottom:2px}
.lockbar .lb-tx .tiny{color:#9a6a20;line-height:1.6;max-width:760px}
.lock-wrap{position:relative}
.lock-mask{position:absolute;inset:0;z-index:12;background:rgba(255,255,255,.6);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:not-allowed}
.lock-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:10px;padding:16px 20px;max-width:520px;text-align:center;cursor:default}
.lock-card .lk-t{font-weight:700;font-size:14px;margin-bottom:4px}
.lock-card .tiny{color:var(--text-2);line-height:1.6}
#spaces [disabled],#totalsZone [disabled],#qNote[disabled],#qDisc[disabled]{cursor:not-allowed;background:#f3f5f7}
input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;color:var(--text-2);background:#f3f5f7}
.okbar{background:#e7f4ec;border:1px solid #cfe8d8;color:var(--ok);padding:8px 12px;border-radius:8px;font-size:12.5px;margin-top:12px}
code.pwd{font-family:ui-monospace,Consolas,Menlo,monospace;background:var(--bg-soft);border:1px solid var(--line);padding:3px 8px;border-radius:6px;font-size:13.5px;letter-spacing:.6px;white-space:nowrap}

.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.filters input,.filters select{width:auto;min-width:120px}

.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:900px){.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi .box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.kpi .box .n{font-size:24px;font-weight:800;letter-spacing:-.5px}
.kpi .box .t{font-size:12px;color:var(--text-2)}

.logline{font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--line-2)}
.logline .t{color:var(--text-3);margin-right:8px;font-variant-numeric:tabular-nums}

/* ---------- 產品圖片 ---------- */
.thumb{width:40px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer;vertical-align:middle;background:#fff}
.thumb.lg{width:88px;height:88px}
.thumb-none{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border:1px dashed var(--line);border-radius:6px;color:var(--text-3);font-size:11px}
.thumb-none.lg{width:88px;height:88px}

/* ---------- 產品庫：三層目錄樹 ---------- */
.pm{display:flex;align-items:flex-start;gap:0}
.pm-tree{width:236px;flex:0 0 236px;border-right:1px solid var(--line);padding:10px 8px 14px;max-height:74vh;overflow:auto}
.ct-head{display:flex;align-items:center;gap:6px;padding:0 6px 8px;font-size:13px;border-bottom:1px dashed var(--line);margin-bottom:6px}
.ct-row{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text)}
.ct-row:hover{background:var(--line-2)}
.ct-row.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.ct-tw{width:13px;flex:0 0 13px;font-size:10px;color:var(--text-3);text-align:center}
.ct-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-n{font-size:11px;color:var(--text-3);font-weight:400}
.ct-hint{padding:0 6px 6px;line-height:1.5}
.ct-act{display:none;align-items:center;gap:1px}
.ct-row:hover .ct-act{display:flex}
.ct-row:hover .ct-n{display:none}
.ct-b{border:1px solid var(--line);background:#fff;color:var(--text-2);border-radius:5px;font-size:11px;line-height:1;padding:3px 5px;cursor:pointer}
.ct-b:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.ct-b.danger{color:var(--danger)}
.ct-b.danger:hover{background:var(--danger-soft);border-color:var(--danger)}
.cm-tb{width:100%}
.cm-tb td{border-bottom:1px solid var(--line-2);padding:5px 4px}
.ct-row.lv2{padding-left:24px}
.ct-row.lv3{padding-left:40px}
.pm-main{flex:1;min-width:0;padding:10px 14px 14px}
.pm-bar{display:flex;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px dashed var(--line)}
.pm-crumb{display:flex;align-items:baseline;gap:8px;min-width:0}
@media (max-width:960px){
  .pm{flex-direction:column}
  .pm-tree{width:auto;flex:none;border-right:0;border-bottom:1px solid var(--line);max-height:none}
}
/* 觸控裝置沒有 hover，目錄的編輯按鈕一律顯示，否則永遠點不到 */
@media (hover:none),(pointer:coarse){
  .ct-act{display:flex}
  .ct-n{display:none}
}

/* ---------- 櫃體×櫃門對應矩陣 ---------- */
table.mx{border-collapse:collapse}
table.mx th{background:#f6f8f7;border:1px solid var(--line);padding:6px 8px;font-size:12px;white-space:normal;min-width:88px}
table.mx th:first-child{text-align:left;position:sticky;left:0;background:#f6f8f7;z-index:2}
table.mx td.mx-cell{border:1px solid var(--line);padding:0;text-align:center;min-width:88px}
.mx-price,.mx-new{display:block;width:100%;border:0;background:transparent;padding:8px 4px;cursor:pointer;font-size:12.5px;font-variant-numeric:tabular-nums}
.mx-price{color:var(--brand);font-weight:700}
.mx-price:hover{background:var(--brand-soft)}
.mx-new:hover{background:#f4f6f8}
.mx-split{color:#9aa5ad;font-size:11.5px;font-weight:400}
.row-dup{background:#fdf6e5}

/* ---------- 檔案匯入（拖檔／選檔） ---------- */
.dz{border:2px dashed #c3ced6;border-radius:12px;padding:18px 14px;text-align:center;cursor:pointer;
  background:#f7faf9;transition:border-color .15s,background .15s}
.dz:hover,.dz.on{border-color:var(--brand);background:var(--brand-soft)}
.dz-ic{font-size:26px;line-height:1;color:var(--brand)}
.dz-t{font-size:13.5px;margin-top:6px}
.dz-s{font-size:11.5px;color:var(--text-3);margin-top:4px}
.f-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.f-row{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--line);
  border-radius:8px;background:#fbfcfd;font-size:12.5px}
.f-row.err{border-color:#f3cfcb;background:var(--danger-soft)}
.f-nm{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-mask{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:rgba(20,32,28,.42);pointer-events:none}
.dz-mask-in{background:#fff;border:2px dashed var(--brand);color:var(--brand);border-radius:14px;
  padding:22px 32px;font-size:15px;font-weight:700;box-shadow:var(--shadow)}

/* ---------- print / PDF（A4 最佳化） ---------- */
#print-area{display:none}
@media print{
  body{background:#fff}
  .shell,.topbar,.sidebar,.no-print,#toast-root{display:none !important}
  #print-area{display:block !important}
  #print-area *{visibility:visible}
  @page{size:A4;margin:16mm 14mm 18mm 14mm}
}
/* 報價單本體：螢幕預覽與列印共用；字級以 A4 閱讀為準（正文 ≈11.5pt、表格 ≈10.5pt） */
.pq{font-size:15px;color:#000;background:#fff;line-height:1.55;max-width:186mm}
.pq h1{font-size:25px;margin:0;letter-spacing:1px}
.pq .co{font-size:13.5px;color:#333;margin-top:5px}
.pq .doc-t{font-size:19px;font-weight:800;letter-spacing:6px;text-align:center;margin:10px 0 2px}
.pq .meta{text-align:right;font-size:13.5px;line-height:1.7}
.pq .hdr{display:flex;justify-content:space-between;gap:20px;border-bottom:2.5px solid #222;padding-bottom:10px;align-items:flex-end}
.pq table{width:100%;border-collapse:collapse;margin-top:12px}
.pq th,.pq td{border:1px solid #8a8a8a;padding:5px 7px;font-size:13.5px;vertical-align:middle}
.pq th{background:#efefef;font-size:13.5px}
.pq td.num{text-align:right;font-variant-numeric:tabular-nums}
.pq td.tiny,.pq .tiny{font-size:12px}
.pq .space-row{background:#f2f2f2;font-weight:700;font-size:14px}
.pq tfoot td{font-size:13.5px}
.pq tfoot tr:last-child td{font-size:16px}
.pq .foot{margin-top:14px;font-size:12.5px;color:#333}
.pq .sign{margin-top:30px;display:flex;gap:46px;font-size:13.5px}
.pq .pimg{width:16mm;height:16mm;object-fit:cover;border:1px solid #bbb;border-radius:2mm;vertical-align:middle}
/* 列印分頁控制：表頭每頁重複、行不腰斬、空間標題與下一行同頁 */
@media print{
  .pq thead{display:table-header-group}
  .pq tr{break-inside:avoid;page-break-inside:avoid}
  .pq .space-row{break-after:avoid;page-break-after:avoid}
  .pq .foot,.pq .sign{break-inside:avoid}
}
.pq .hdr{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #000;padding-bottom:8px}
.pq .meta{text-align:right;font-size:11.5px}

/* ===== 合約匯出：文件預覽與列印 ===== */
.ct-wrap{background:#fff;color:#111;font-size:14.5px;line-height:1.8;max-width:186mm;margin:0 auto;padding:4px 2px}
.ct-h1{font-size:22px;text-align:center;letter-spacing:3px;margin:16px 0 12px;font-weight:800}
.ct-h2{font-size:15.5px;margin:14px 0 6px;font-weight:800}
.ct-p{margin:3px 0;text-align:justify}
.ct-li{margin:2px 0 2px 22px;text-align:justify}
.ct-c{text-align:center;margin:4px 0}
.ct-small{font-size:11.5px;color:#666;margin-top:10px}
.ct-tb{width:100%;border-collapse:collapse;margin:8px 0;font-size:12.5px}
.ct-tb th,.ct-tb td{border:1px solid #9a9a9a;padding:4px 6px;vertical-align:top}
.ct-tb th{background:#eee}
.ct-tb td.num{text-align:right;font-variant-numeric:tabular-nums}
.ct-tb tr.sp td{background:#f5f5f5;font-weight:700}
.ct-tb tr.b td{font-weight:800}
.pb{height:0;break-after:page;page-break-after:always}
@media print{
  .ct-wrap{font-size:12pt;max-width:none}
  .ct-h1{font-size:18pt}
  .ct-h2{font-size:13pt}
  .ct-tb{font-size:10pt}
  .ct-tb thead{display:table-header-group}
  .ct-tb tr{break-inside:avoid;page-break-inside:avoid}
  .ct-h2{break-after:avoid;page-break-after:avoid}
}

/* 打包列印：合約本文 → 報價總表 → 圖紙，圖紙每頁都從新的一張紙開始 */
.pack-page{page-break-before:always;break-before:page}
.pack-t{font-size:12px;color:#5b6b7c;margin-bottom:6px}
.pack-page img{display:block;margin:0 auto;max-width:100%;height:auto}

/* ===== 線上簽署：客戶免登入簽署頁 ===== */
.sign-page{min-height:100vh;padding:26px 16px 70px;display:flex;justify-content:center}
.sign-box{width:100%;max-width:880px}
.sign-head{border-bottom:2px solid var(--brand);padding-bottom:12px;margin-bottom:16px}
.sign-brand{font-size:12px;letter-spacing:3px;color:var(--brand);font-weight:700}
.sign-head h1{margin:6px 0 10px;font-size:23px;line-height:1.3}
.sign-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px;color:var(--text-2)}
.sign-meta b{color:var(--text)}
.sign-doc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:14px;box-shadow:var(--shadow)}
.sign-hash{background:var(--brand-soft);border:1px solid #cfe4dd;border-radius:var(--radius);padding:10px 14px;font-size:12px;color:var(--text-2);margin-bottom:14px}
.sign-hash code{display:inline-block;margin-top:4px;font-size:12.5px;letter-spacing:.5px;color:var(--brand);word-break:break-all}
.sign-form,.sign-done{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.sign-done .ok{font-size:16px;font-weight:700;color:var(--ok)}
.sign-done .wait{font-size:16px;font-weight:700;color:var(--warn)}
.sign-preview{margin-top:10px;padding:8px;background:#fbfcfc;border:1px dashed var(--line);border-radius:8px}
.sign-preview img{max-width:260px;height:auto;display:block}
.sign-err{background:var(--danger-soft);border:1px solid #f3cfcb;color:var(--danger);padding:12px 14px;border-radius:var(--radius);font-size:13.5px}
.ct-sign{margin:6px 0 14px}
/* 一個段落裡可能同時有公司章與負責人章（左右並排），所以要 inline-block＋右邊距 */
.ct-sign img{max-width:100%;height:auto;display:inline-block;vertical-align:middle;margin-right:12px}

/* ===== 系統設定：電子印章 ===== */
.seal-head{font-size:13.5px;font-weight:700;margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--line)}
.seal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 8px}
.seal-card{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:#fbfcfc;min-width:0}
.seal-card h4{margin:0 0 8px;font-size:13px}
/* 印章是透明背景＋紅印，用白底才看得清楚（深色底會看不出來） */
.seal-shot{height:104px;display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px dashed var(--line);border-radius:8px;margin-bottom:8px;overflow:hidden}
.seal-shot img{max-height:92px;max-width:92%;object-fit:contain}
.seal-shot .none{font-size:12px;color:var(--text-2)}
.seal-meta{font-size:11.5px;color:var(--text-2);margin-top:6px}
.seal-card .row{gap:8px}
@media(max-width:640px){.seal-grid{grid-template-columns:1fr}}

/* ===== 合約附件（門市勾選區 + 客戶端預覽） ===== */
/* 門市：匯出合約彈窗裡的附件清單 */
.at-list{margin:2px 0 0}
.at-item{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;
  padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2,#fafbfc);margin-bottom:6px}
.at-item label.chk{flex:1 1 auto;min-width:160px;margin:0}
.at-item .btn.sm{padding:3px 9px;font-size:12px}
.c-danger{color:var(--danger)}

/* ===== 工程變更確認單：逐筆變更項目 =====
   說明要能吃掉剩下的寬度（項目名稱常常很長），金額與方向固定寬度，
   手機上整列才不會被擠成兩行又對不齊。 */
.chg-it{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;margin-bottom:6px}
.chg-it input[data-f="desc"]{flex:1 1 220px;min-width:0}
.chg-it select{flex:0 0 auto;width:88px}
.chg-it input[data-f="amount"]{flex:0 0 auto;width:120px;text-align:right}
.chg-it .btn.sm{padding:3px 9px;font-size:12px}
@media(max-width:640px){
  .chg-it input[data-f="desc"]{flex:1 1 100%}
  .chg-it select,.chg-it input[data-f="amount"]{flex:1 1 0;min-width:0}
}

/* ===== 工資核發：薪資項目一列一項（名稱＋比率／金額） =====
   跟變更項目同一個規矩：名稱吃掉剩下的寬度，金額固定寬度且靠右，
   手機上才不會被擠成兩行又對不齊。 */
.pr-it{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;margin-bottom:6px}
.pr-it .pr-t{flex:1 1 130px;min-width:0;font-size:13px}
.pr-it input[type="number"]{width:120px;flex:none;text-align:right}
.pr-it input[readonly]{background:var(--panel-2,#fafbfc);color:var(--muted,#6b7a74)}
.pr-it .btn.sm{padding:3px 9px;font-size:12px}
.pr-it>input:not([type="number"]){flex:1 1 140px;min-width:0}
@media(max-width:640px){
  .pr-it .pr-t,.pr-it>input:not([type="number"]){flex:1 1 100%}
  .pr-it input[type="number"]{flex:1 1 0;min-width:0}
}

/* ===== 匯入報價單：建檔前的對照列（標籤左／值右） =====
   刻意做成通用的一行一欄，彈窗與卡片都能用；
   標籤固定最小寬度，兩張對照表疊在一起時數字才會對齊。 */
.kv-row{display:flex;align-items:baseline;gap:10px;padding:4px 0;
  font-size:13px;border-bottom:1px dashed var(--line-2)}
.kv-row:last-child{border-bottom:0}
.kv-row>span{color:var(--text-2);min-width:96px}
.kv-row>b{margin-left:auto;text-align:right;color:var(--text)}
.kv-row>em{color:var(--danger);font-style:normal;margin-left:auto;font-weight:600}

/* 客戶端：附件區（點開才抓那一頁的圖） */
.sign-att{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.sign-att h3{margin:0 0 4px;font-size:15px}
.att-grp{margin-top:10px}
.att-title{font-size:12.5px;font-weight:700;color:var(--brand);margin-bottom:6px;word-break:break-all}
.att-grid{display:flex;flex-wrap:wrap;gap:8px}
.att-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:104px;height:74px;border:1px solid var(--line);border-radius:8px;background:#fbfcfc;
  cursor:pointer;color:var(--text-2);padding:0}
.att-card:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.att-pg{font-size:12.5px;font-weight:700}
.att-go{font-size:11px;color:var(--text-3)}
.att-card:hover .att-go{color:var(--brand)}
/* 附件燈箱 */
.att-lb{position:fixed;inset:0;z-index:120;background:rgba(12,18,24,.72);display:flex;align-items:center;justify-content:center;padding:14px}
.att-lb-in{background:var(--panel);border-radius:12px;max-width:min(1100px,96vw);width:100%;max-height:94dvh;display:flex;flex-direction:column;overflow:hidden}
.att-lb-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--text-2)}
.att-lb-bar .btn.sm{padding:4px 10px;font-size:12.5px}
.att-lb-img{overflow:auto;padding:12px;text-align:center;background:#f7f9fa}
.att-lb-img img{max-width:100%;height:auto;display:block;margin:0 auto;border:1px solid var(--line);border-radius:6px}

/* 狀態徽章 */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap}
.badge.waitA{background:var(--warn-soft);color:var(--warn);border:1px solid #f0dcb8}
.badge.waitB{background:#eef4fb;color:#2c5c96;border:1px solid #d3e0f0}
.badge.done{background:var(--brand-soft);color:var(--brand);border:1px solid #cfe4dd}
.badge.void{background:var(--line-2);color:var(--text-3);border:1px solid var(--line)}
td.ops{white-space:normal}
td.ops .btn{margin:0 4px 4px 0}

@media print{
  .sign-page{padding:0;min-height:0}
  .sign-form,.sign-hash,.sign-preview,.sign-att{display:none}
  .sign-doc{border:0;box-shadow:none;padding:0}
}

/* ===== 員工管理：逐人權限勾選 ===== */
.perm-wrap{margin-top:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2,#fafbfc);padding:10px 12px;max-height:340px;overflow:auto}
.perm-grp+.perm-grp{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.perm-t{font-size:12.5px;font-weight:700;color:var(--brand);letter-spacing:.5px;margin-bottom:6px}
.perm-box{gap:6px 12px}
.perm-box label.chk{align-items:flex-start;padding:3px 4px;border-radius:6px;line-height:1.35}
.perm-box label.chk:hover{background:var(--line-2)}
.perm-box label.chk input{margin-top:2px}
.perm-box label.chk.ov{background:var(--brand-soft);border:1px solid #cfe4dd}
.ov-tag{font-size:10.5px;font-weight:700;color:var(--brand);margin-left:4px;padding:0 4px;border-radius:8px;background:var(--panel)}

/* ---------- 智能匯入：兩地價格同時輸入 ---------- */
.ai-fx{margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:8px;background:var(--brand-soft);font-size:12.5px;line-height:1.6}
.ai-fx input,.ai-fx select{padding:3px 6px;font-size:12.5px}
table.ai-tb{width:100%;border-collapse:collapse}
table.ai-tb th,table.ai-tb td{padding:4px 5px;border-bottom:1px solid var(--line-2);text-align:left;white-space:nowrap}
table.ai-tb th{font-size:11.5px;color:var(--text-3);font-weight:600;background:#fafbfc}
table.ai-tb input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
table.ai-tb td.r,table.ai-tb th.r{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 系統設定：匯入資料庫（拖檔案） ---------- */
.drop-zone{margin-top:4px;padding:18px 14px;border:2px dashed var(--line);border-radius:10px;
  background:var(--panel-2,#fafbfc);text-align:center;line-height:2;transition:.15s}
.drop-zone:hover{border-color:var(--brand);background:var(--brand-soft)}
.drop-zone.over{border-color:var(--brand);background:var(--brand-soft);border-style:solid}
.drop-zone .btn{margin:0 0 0 8px}
.drop-zone .tiny{display:inline;margin:0 4px}
#impInfo:not(:empty){margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel-2,#fafbfc);line-height:1.7}
#impInfo table{margin-top:6px}

/* ---------- 合約範本：上傳自己的文本 ＋ 對照確認 ---------- */
/* 操作欄的按鈕不要被擠到換行（一列有 4 顆） */
.tpl-act{white-space:nowrap}
.tpl-act .btn{margin:0 4px 4px 0}
/* 套版後被填進去的欄位（{{員工姓名}}）—— 一眼看出「哪裡被系統動過」 */
.tpl-k{color:var(--brand);font-weight:700;background:var(--brand-soft);border-radius:3px;padding:0 2px}
/* 對照表：左邊原文灰、右邊結果深色，掃一眼就知道差在哪 */
table.tpl-map td{vertical-align:top}
.tpl-map .tpl-o{color:var(--text-3);font-size:12px;line-height:1.7;word-break:break-all}
.tpl-map .tpl-r{font-size:12.5px;line-height:1.7;word-break:break-all}
.tpl-map td .chk{margin-bottom:3px}

/* ---------- 產品挑選器：目錄可摺疊 + 關鍵字查找 ---------- */
.pk-wrap{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;max-width:100%}
.pk-btn{display:inline-flex;align-items:center;gap:6px;max-width:150px;padding:5px 8px;
  border:1px solid var(--line);background:#fff;color:var(--text);border-radius:7px;cursor:pointer;text-align:left}
.pk-btn:hover{border-color:var(--brand-2);background:var(--brand-soft)}
.pk-btn:disabled,.pk-btn.dis{background:#f7f9fa;color:var(--text-3);cursor:not-allowed;border-color:var(--line)}
.pk-btn .pk-tx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.pk-btn .pk-tx.ph{color:var(--text-3)}
.pk-btn .pk-ar{color:var(--text-3);font-size:10px;flex:none}
.pk-wrap.narrow .pk-btn{max-width:96px;padding:5px 6px}
.pk-wrap.narrow .pk-btn .pk-tx{font-size:12px}
/* 配置包編輯器：一行一項材料，按鈕要夠寬才看得清品名（原本是原生 <select>） */
.pk-wrap.wide{flex:1;min-width:240px}
.pk-wrap.wide .pk-btn{max-width:100%;width:100%;min-width:240px}
.pkg-item{align-items:center}
.pk-thumb img{width:34px;height:34px;object-fit:contain;border:1px solid var(--line-2);
  border-radius:5px;background:#fff;cursor:zoom-in}
.pk-pop{position:fixed;z-index:4000;width:360px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 10px 30px rgba(20,30,40,.18)}
.pk-top{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--line-2)}
.pk-top .pk-q{flex:1;padding:6px 8px;font-size:13px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--text)}
.pk-top .pk-foldall{padding:4px 8px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;color:var(--text-2)}
.pk-cnt{padding:4px 12px 2px;color:var(--text-3);font-size:11.5px}
.pk-tree{flex:1;overflow:auto;padding:2px 0 6px}
.pk-node{display:flex;align-items:center;gap:6px;padding:5px 10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text)}
.pk-node:hover{background:var(--brand-soft)}
.pk-node .pk-tw{width:12px;flex:none;color:var(--text-3);font-size:10px}
.pk-node .pk-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-node .pk-n{font-size:11px;color:var(--text-3);font-weight:400}
.pk-item{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 0;cursor:pointer;font-size:12.5px;line-height:1.35}
.pk-item:hover{background:var(--line-2)}
.pk-item.on{background:var(--brand-soft)}
.pk-item.cur{outline:2px solid var(--brand-2);outline-offset:-2px}
.pk-item .pk-th{width:28px;height:28px;flex:none;object-fit:contain;border:1px solid var(--line-2);border-radius:4px;background:#fff;cursor:zoom-in}
.pk-item .pk-th.none{visibility:hidden}
.pk-item .pk-inm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-item .pk-ip{display:block;font-style:normal;font-size:11px;color:var(--text-3);font-weight:400}
.pk-empty{padding:24px 14px;text-align:center;color:var(--text-3)}
.pk-ft{padding:6px 8px;border-top:1px solid var(--line-2)}
.pk-new{width:100%;text-align:left;padding:6px 8px;border:1px dashed var(--line);background:#fff;
  border-radius:7px;color:var(--brand);cursor:pointer;font-size:12.5px}
.pk-new:hover{border-color:var(--brand);background:var(--brand-soft)}
.pk-clr{padding:6px 12px;border-top:1px solid var(--line-2);font-size:12px;color:var(--danger);cursor:pointer}
.pk-clr:hover{background:var(--danger-soft)}

/* ---------- 報價明細：有圖產品直接帶出縮圖 ---------- */
.row-thumb{margin-top:4px}
.row-thumb img{width:52px;height:52px;object-fit:contain;border:1px solid var(--line-2);border-radius:5px;
  background:#fff;cursor:zoom-in}
.row-thumb img:hover{border-color:var(--brand)}

/* ---------- 圖片燈箱 ----------
   z-index 必須高於挑選器浮層（.pk-pop 4000），否則從清單點縮圖放大時圖會被清單蓋住。 */
.lb-mask{position:fixed;inset:0;z-index:4600;background:rgba(12,18,24,.72);
  display:flex;align-items:center;justify-content:center;padding:22px}
.lb-box{background:#fff;border-radius:12px;max-width:min(880px,96vw);max-height:94vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.lb-h{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line-2);font-size:14px}
.lb-h b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-h .lb-x{cursor:pointer;color:var(--text-3);font-size:16px;line-height:1;flex:none}
.lb-h .lb-x:hover{color:var(--text)}
.lb-b{padding:12px;background:#fbfcfc;overflow:auto;text-align:center}
.lb-b img{max-width:100%;max-height:62vh;border-radius:8px;display:block;margin:0 auto}
.lb-f{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:9px 15px;
  border-top:1px solid var(--line-2);color:var(--text-2)}
.lb-f .lb-tip{margin-left:auto;color:var(--text-3);flex:none}

/* ---------- 批量換材料：勾選空間 ---------- */
.bc-scope{margin-bottom:10px;padding:9px 11px;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:8px;background:var(--brand-soft)}
.bc-spaces{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.bc-sp{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;background:#fff;
  border:1px solid var(--line);border-radius:20px;cursor:pointer;font-size:12.5px}
.bc-sp.on{border-color:var(--brand);background:#fff;color:var(--text);font-weight:600}
.bc-sp:not(.on){color:var(--text-3)}
.bc-sp input{margin:0}
.bc-sp .tiny{color:var(--text-3);font-weight:400}

/* ============================================================
   手機版（≤900px）：側欄改抽屜、表格可橫捲、觸控目標放大
   ============================================================ */
/* 漢堡鈕只有手機看得到 */
.nav-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;flex:none;
  padding:0;font-size:17px;line-height:1;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--text)}
.nav-scrim{display:none}

@media (max-width:900px){
  .shell{display:block}
  /* 側欄 → 抽屜 */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:78vw;max-width:300px;height:100dvh;z-index:120;
    transform:translateX(-104%);transition:transform .22s ease;box-shadow:2px 0 20px rgba(10,20,16,.28);
    padding-top:env(safe-area-inset-top,0px);
  }
  body.nav-open .sidebar{transform:none}
  .nav-scrim{position:fixed;inset:0;z-index:110;background:rgba(12,20,16,.45)}
  body.nav-open .nav-scrim{display:block}
  .sidebar a.nav{padding:11px 18px;font-size:14.5px}
  .nav-btn{display:inline-flex}

  /* 頂列：手機只留標題、語系、登出 */
  .topbar{height:auto;min-height:52px;padding:0 10px;gap:8px;padding-top:env(safe-area-inset-top,0px)}
  .topbar h1{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .spacer{display:none}
  .topbar .who{display:none}
  .topbar .seg button{padding:6px 10px;font-size:13px}
  .content{padding:12px;overflow-x:auto}
  .card-b{padding:12px}
  .card-h{padding:10px 12px}
  .card-h h2{font-size:14px}

  /* 觸控目標放大；輸入字級 ≥16px 才不會被 iOS 自動放大畫面 */
  input,select,textarea{font-size:16px;padding:9px 10px}
  .lines input,.lines select,.ai-fx input,.ai-fx select,.pk-top .pk-q{font-size:16px;padding:6px 8px}
  .btn{padding:9px 14px;font-size:14px;min-height:38px}
  .btn.sm{padding:6px 10px;font-size:13px;min-height:32px}
  .btn.tiny{padding:3px 8px;font-size:12px;min-height:28px}
  .seg button{padding:6px 11px}
  .filters input,.filters select{width:100%;min-width:0}
  .filters{gap:6px}
  .filters .btn{width:100%}

  /* 表格：包一層可橫捲容器（u.wrapTables 自動加 .tbw） */
  .tbw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:2px;max-width:100%}
  .tbw table{min-width:max-content}
  th,td{padding:7px 8px}
  /* 關鍵：grid／flex 子項預設 min-width:auto，會被裡面的寬表格撐開，
     整個卡片跟著超過畫面寬度（實測 390 → 513），內容就被切掉。
     一律歸零，讓表格在自己那層橫捲，不外擴。 */
  .grid > *, .kpi > *, .row > *{min-width:0}
  .page, .content > *{min-width:0}
  /* 產品庫是 flex 版面（.pm 用 align-items:flex-start），直向排列時子項寬度會
     變成 max-content 而被寬表格撐到 3798px；改成 stretch 讓它跟容器同寬。 */
  .pm{align-items:stretch}
  .pm, .pm-main, .pm-tree, .pm-bar, .qbar, .space-h, .card-h{min-width:0}
  /* 表格可以橫捲時給右緣一點陰影，暗示「右邊還有」 */
  .tbw.more{box-shadow:inset -10px 0 10px -10px rgba(20,30,40,.28)}

  /* 彈窗 → 底部半版，拇指好按 */
  .modal-mask{padding:0;align-items:flex-end;justify-content:center}
  .modal{max-width:100%;border-radius:16px 16px 0 0;max-height:94dvh;
    animation:m-in .18s ease}
  .modal-b{padding:14px;max-height:calc(94dvh - 116px)}
  .modal-h{padding:12px 15px}
  .modal-f{padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .modal-f .btn{flex:1}
  @keyframes m-in{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}

  /* 挑選器浮層 → 底部全寬 */
  .pk-pop{
    position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
    width:100% !important;max-width:100% !important;max-height:76dvh !important;border-radius:14px 14px 0 0;
    box-shadow:0 -10px 30px rgba(20,30,40,.22);
  }
  .pk-tree{max-height:56dvh}
  .pk-item{padding:8px 12px 8px 0}
  .pk-node{padding:8px 12px}
  .pk-wrap.wide{min-width:0}
  .pk-wrap.wide .pk-btn{min-width:0}

  /* 產品庫：目錄樹不要吃掉整屏 */
  .pm-tree{max-height:38vh;padding:8px 6px 10px}
  .pm-main{padding:8px 10px 12px}
  .pm-bar{flex-wrap:wrap;gap:6px}

  /* 報價編輯 */
  .qbar{top:52px;padding:8px 10px;gap:8px}
  .qbar .sep{display:none}
  .space-h{padding:8px 10px;flex-wrap:wrap}
  .lines table{min-width:970px}
  /* 手指頭要點得到：上移／下移與拖曳握把手機一律放大到 38px 觸控底線 */
  .btn.tiny.mv{min-width:38px;min-height:38px;font-size:15px}
  .drag-h,.space-h .drag-h{width:38px;height:38px;font-size:17px}
  .dh-cell{width:44px}
  .totals{justify-content:stretch;padding:12px}
  .totals table{width:100%}
  .meas{width:100%;margin-top:12px}
  .lockbar{flex-wrap:wrap}

  /* 提示條與燈箱 */
  #toast-root{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .toast{max-width:none}
  .lb-mask{padding:10px}
  .lb-b img{max-height:56dvh}
  .lb-f{font-size:12.5px}

  .perm-wrap{max-height:none}
  .perm-box{grid-template-columns:1fr}
  .dz{padding:14px 10px}
  .login-card{padding:22px 18px}
  .kpi .box{padding:12px}
  .kpi .box .n{font-size:21px}
}

@media (max-width:420px){
  .topbar h1{font-size:14px}
  .content{padding:10px}
  .card-b{padding:10px}
  .kpi{gap:8px}
  .btn{padding:8px 12px;font-size:13.5px}
  .sidebar{width:86vw}
}

/* ---------- 雲端同步（core/cloudsync.js） ---------- */
#syncNow{display:inline-block}
#syncNow.sync-ok{color:#4f6b5e}
#syncNow.sync-warn{color:#b8860b;font-weight:600}
#syncNow.sync-bad{color:var(--danger,#c0392b);font-weight:600}
.syncbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.syncbox .st{font-size:13px}
.syncbox .st b{font-size:14px}
.syncbox .dot{width:8px;height:8px;border-radius:50%;background:#4f6b5e;flex:0 0 auto}
.syncbox .dot.warn{background:#b8860b}
.syncbox .dot.bad{background:var(--danger,#c0392b)}
.syncbox .meta{font-size:12px;color:var(--text-2,#6b7a72)}

/* ============================================================
   訂單管理與財務（v10 門店管理系統）
   ============================================================ */

/* 金額遮罩：沒有「看訂單金額」權限的人看到的是這個。
   刻意做成等寬的點點，讓一排數字對齊時看不出長度（長度也是資訊）。 */
.mmask{display:inline-block;letter-spacing:1px;color:var(--text-3);font-weight:600}
.mmask::after{content:'🔒';font-size:10px;margin-left:3px;opacity:.65}

/* 進度條：七個節點，走過的填色 */
.stgbar{height:6px;background:#e9edf1;border-radius:4px;overflow:hidden;margin:2px 0 7px}
.stgfill{height:100%;background:var(--brand);border-radius:4px;transition:width .25s}
.stgs{display:flex;flex-wrap:wrap;align-items:center;gap:3px;font-size:11.5px;color:var(--text-3)}
.stgs .stg{padding:1px 6px;border-radius:20px;background:#f1f3f5;border:1px solid transparent}
.stgs .stg.on{background:var(--brand-soft);color:var(--brand);border-color:#cfe5dc;font-weight:600}
.stgs .stgar{color:#c3ccd2}

/* 進度節點操作（一列按鈕，已完成的反白） */
.stgbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.stgbtns .btn{min-width:auto}
.stgbtns .btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* 摘要數字卡（合約／已收／未收／毛利） */
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.sum .box{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fbfcfc}
.sum .box .k{font-size:11.5px;color:var(--text-2)}
.sum .box .v{font-size:19px;font-weight:700;margin-top:2px;letter-spacing:-.2px}
.sum .box .v.ok{color:var(--ok)}
.sum .box .v.warn{color:var(--warn)}
.sum .box .v.danger{color:var(--danger)}
.sum .box .s{font-size:11.5px;color:var(--text-3);margin-top:1px}

/* 留言板 */
.note{border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:#fff;margin-bottom:8px}
.note .nh{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.note .nh b{color:var(--text);font-size:13px}
.note .nb{font-size:13.5px;line-height:1.7;white-space:pre-wrap;margin-top:4px;word-break:break-word}
.note .nb .at{color:var(--brand);font-weight:600}
.note .nf{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.note .nx{margin-left:auto;color:var(--text-3);font-size:12px;cursor:pointer}
.note .nx:hover{color:var(--danger)}

/* 檔案／照片區 */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.fcard{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;position:relative}
.fcard .fp{height:88px;background:#f6f8f9;display:flex;align-items:center;justify-content:center;
  cursor:zoom-in;overflow:hidden}
.fcard .fp img{width:100%;height:100%;object-fit:cover}
.fcard .fp .ext{font-size:22px;color:var(--text-3);font-weight:700}
.fcard .fn{font-size:11.5px;padding:5px 7px;line-height:1.35;word-break:break-all;color:var(--text-2)}
.fcard .fx{position:absolute;top:3px;right:3px;background:rgba(255,255,255,.9);border:1px solid var(--line-2);
  border-radius:50%;width:20px;height:20px;line-height:18px;text-align:center;cursor:pointer;font-size:12px;color:var(--text-3)}
.fcard .fx:hover{color:var(--danger);border-color:var(--danger)}
.fcard .loc{position:absolute;bottom:3px;left:3px;background:rgba(20,30,40,.66);color:#fff;
  border-radius:4px;font-size:10px;padding:1px 4px}

/* 付款截圖縮圖 */
.shots{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.shots img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line-2);border-radius:6px;cursor:zoom-in}
.shots img:hover{border-color:var(--brand)}

/* 上傳區（拖曳／點選） */
.upbox{border:1.5px dashed var(--line);border-radius:9px;padding:14px;text-align:center;
  color:var(--text-2);font-size:13px;background:#fbfcfc;cursor:pointer}
.upbox:hover{border-color:var(--brand);background:var(--brand-soft)}
.upbox.busy{opacity:.6;cursor:wait}

@media (max-width:900px){
  .sum{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:repeat(auto-fill,minmax(94px,1fr))}
}
@media (max-width:420px){
  .sum{grid-template-columns:1fr}
}

/* 產品庫分批顯示的「再載入」區塊 */
.pm-more{margin-top:10px;padding:10px 12px;border-top:1px dashed var(--line,#d8d8d8);text-align:center}

/* ===== 客戶快速錄入：一顆一顆點的選項（2026-10-09 新增） =====
   為什麼不用 <select>：接待是一邊問客戶一邊點，選項要「一眼看全部、一下就點到」，
   下拉還得多按一次、而且看不到其他選項。手機上圓鈕也比下拉好按。
   .opt 是 <button>，選中加 .on（跟 .seg button.on 同一個綠）。 */
.optblk{margin-bottom:10px}
.optblk > .olb{display:block;font-size:12.5px;color:var(--text-2);margin-bottom:5px}
.optblk > .olb .tiny{font-weight:400}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{border:1px solid var(--line);background:#fff;border-radius:15px;padding:5px 12px;
  font-size:12.5px;line-height:1.35;color:var(--text-2);cursor:pointer;font-family:inherit}
.opt:hover{border-color:var(--brand);color:var(--brand)}
.opt.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.opt:active{transform:translateY(1px)}
.opts .opt-add{border-style:dashed;color:var(--text-3)}
.opts .opt-add:hover{color:var(--brand)}
/* 案件概況：一組一組的標籤 */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 14px}
.pf-row{font-size:13px;line-height:1.6}
.pf-row .k{display:block;font-size:11.5px;color:var(--text-3);letter-spacing:.02em}
.pf-row .v{color:var(--text)}
.pf-row .v.muted{color:var(--text-3)}
/* 客戶資料選項維護：每一組一張小卡 */
.copt{border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:8px;background:#fff}
.copt .ch{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:6px}
.copt .ch .tiny{font-weight:400}
.copt .ci{display:flex;align-items:center;gap:6px;padding:3px 0;border-top:1px dashed var(--line-2)}
.copt .ci:first-of-type{border-top:0}
.copt .ci input[type=text]{flex:1;min-width:0;padding:3px 7px;font-size:12.5px;border:1px solid var(--line);border-radius:6px}
.copt .ci .tn{width:88px;padding:2px 4px;font-size:12px;border:1px solid var(--line);border-radius:6px;background:#fff}
.copt .ci .mv{display:inline-flex;gap:2px}
.copt .ci .mv button{border:1px solid var(--line);background:#fff;border-radius:5px;
  width:22px;height:22px;line-height:1;cursor:pointer;color:var(--text-2);font-size:11px;padding:0}
.copt .ci .mv button:hover{border-color:var(--brand);color:var(--brand)}
.copt .ci .rm{border:0;background:none;color:var(--text-3);cursor:pointer;font-size:13px;padding:0 3px}
.copt .ci .rm:hover{color:var(--danger)}
@media (max-width:640px){
  .opt{padding:7px 13px;font-size:13.5px}          /* 手機上要更好按 */
  .pf-grid{grid-template-columns:1fr}
}

/* ---------- 人事證件／自訂 Word（2026-10-09 新增） ----------
   「證件」視窗裡一項一列：左邊是名稱與狀態，右邊是動作。
   手機上（≤640px）改成上下排，不然四顆按鈕會擠成一團。 */
.cert-list{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.cert-row{display:flex;align-items:center;gap:10px;padding:8px 11px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.cert-row:first-child{border-top:0}
.cert-row .ch{display:flex;align-items:center;gap:7px;flex:1;min-width:180px;font-size:13.5px}
.cert-row .cb{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ce-sep{height:0;border-top:1px dashed var(--line);margin:12px 0}
/* 證件要求維護：每一項一列（比照客戶資料選項那張卡的 .copt .ci） */
.copt .ci .rq{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-2);white-space:nowrap}
@media (max-width:640px){
  .cert-row{align-items:flex-start;flex-direction:column;gap:6px}
  .cert-row .ch{min-width:0}
}

/* ---------- 員工簽署頁：上傳證件（2026-10-09 新增） ----------
   手機為主：一項一張卡、按鈕夠大好按（44px 上下），
   並沿用 .sign-att / .sign-doc 的紙張感，不要長得像另一個系統。 */
.sign-cert{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.sign-cert h3{margin:0 0 4px;font-size:15px}
.sign-card{border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;margin-top:9px;background:#fff}
.sign-card .sc-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13.5px}
.sign-card .sc-h b{font-weight:600}
.sc-req,.sc-opt,.sc-ok,.sc-no{font-size:11px;padding:1px 6px;border-radius:20px;line-height:1.6;flex:none}
.sc-req{background:#fdecec;color:#b5342f}
.sc-opt{background:#f2f4f5;color:var(--text-3)}
.sc-ok{background:#e8f5ee;color:#1d7a4d}
.sc-no{background:#fff4e5;color:#a3611a}
.sign-word .btn.sm{padding:7px 13px}
@media (max-width:640px){
  .sign-cert{border:0;box-shadow:none;padding:0;margin-bottom:12px}
  .sign-card .btn.sm{padding:9px 14px;font-size:13.5px}
}