:root{
  --bg:#F5F0E8;--card:#FFF;--border:#DDD5C4;--ink:#2C2318;--ink2:#7A6D5F;
  --wood:#C17F45;--wood2:#A8693A;--sage:#4E6E5A;--sage2:#3A5244;
  --red:#B5483D;--blue:#3D6491;--gold:#D4A843;--purple:#7A6FA6;
  --radius:14px;--shadow:0 2px 12px rgba(44,35,24,.07);
  --nav-h:56px;--bot-h:60px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:var(--bg)}
body{font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}

/* AUTH */
#authScreen{position:fixed;inset:0;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;gap:20px}
.aLogo{font-family:"Noto Serif TC",serif;font-size:34px;color:#F5F0E8;letter-spacing:.12em}
.aSub{font-size:12px;color:#9A8D7C;letter-spacing:.14em}
.gBtn{display:flex;align-items:center;gap:12px;background:#fff;color:#3A2E27;border:none;border-radius:10px;padding:14px 26px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.gBtn:active{background:#F0EBE2}
.aHint{font-size:11px;color:#5A4E40;text-align:center;max-width:260px;line-height:1.8}

/* APP */
#app{display:none;flex-direction:column;min-height:100vh;min-height:100dvh}
#app.show{display:flex}

/* TOP NAV */
.topNav{height:var(--nav-h);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px;position:sticky;top:0;z-index:100;flex-shrink:0}
.brand{font-family:"Noto Serif TC",serif;font-size:17px;font-weight:700;letter-spacing:.06em;flex:1}
.cloudDot{width:8px;height:8px;border-radius:50%;background:var(--border);flex-shrink:0;transition:background .3s}
.cloudDot.ok{background:#5aaa6a}.cloudDot.err{background:var(--red)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--wood);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;border:2px solid var(--border)}

/* CONTENT */
.content{flex:1;padding-bottom:calc(var(--bot-h)+16px)}
.page{display:none;padding:14px 14px 0}.page.active{display:block;flex:1 0 auto}
/* 2026-09-28：內容矮的頁面（例如報價系統的專案列表，只有幾列時）撐不滿畫面，
   #app 是 flex column、.page 沒有 flex-grow 時底部導覽只會貼在內容下面，
   跟畫面真正的底部之間留一大片空白——看起來像導覽不見了，其實它一直都在，只是位置不對。
   ⚠ 只加 flex（flex-item 的縮放屬性），不改 display——.page 自己仍是 display:block，
     裡面的卡片、按鈕排版不受影響；flex-grow 對「是不是 flex 容器的小孩」生效，
     跟這個小孩自己是 block 還是 flex 無關。只給 .active 那顆吃，隱藏的 .page 還是 display:none、不吃版面。 */

/* BOTTOM NAV */
.botNav{height:var(--bot-h);background:#fff;border-top:1px solid var(--border);display:flex;align-items:stretch;position:sticky;bottom:0;z-index:100;flex-shrink:0}
.nBtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;color:var(--ink2);font-size:9.5px;font-weight:700;cursor:pointer;letter-spacing:.03em;padding:0;border-top:2px solid transparent;transition:color .15s,border-color .15s}
.nBtn svg{width:21px;height:21px;opacity:.55;transition:opacity .15s}
.nBtn.active{color:var(--wood);border-top-color:var(--wood)}
.nBtn.active svg{opacity:1}

/* ═══ 五組導覽（SA 2026-09-09 裁決 ⑧）═══
   底部只放組，子項在抽屜裡。組鈕沿用 .nBtn 的尺寸與狀態樣式，
   不另定義一套——兩套會在字級與高度上慢慢漂開。 */
.gpBtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:none;background:transparent;color:var(--ink2);font-size:10px;font-weight:700;cursor:pointer;
  letter-spacing:.03em;padding:0;border-top:2px solid transparent;transition:color .15s,border-color .15s;position:relative}
.gpBtn svg{width:21px;height:21px;opacity:.55;transition:opacity .15s}
.gpBtn.active{color:var(--wood);border-top-color:var(--wood)}
.gpBtn.active svg{opacity:1}
/* 組上的紅點：子項有待辦／待簽／待開通時提示，不必展開就看得到。
   ⚠ 原本寫 `right:calc(50% - 18px)`——那個 18px 是固定值，六組並排時每顆鈕只有
     40 幾 px，點會被推到按鈕的最右緣，看起來像是貼在**隔壁那一組**上
     （SA 2026-09-20：「案場有紅點，點開四項卻都沒有」，其實是首頁的逾期待辦）。
     改成以按鈕中心為基準、往右偏一個圖示半徑，寬度再窄也咬在自己的圖示右上角。 */
.gpBtn .gpDot{position:absolute;top:6px;left:50%;margin-left:6px;width:7px;height:7px;border-radius:50%;
  background:var(--red);display:none}
.gpBtn.hasDot .gpDot{display:block}

.navDrawer{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:150;display:flex;
  align-items:flex-end;justify-content:center}
.navDrawer.hide{display:none}
.navDrawerBox{width:100%;max-width:720px;background:#fff;border-top-left-radius:16px;
  border-top-right-radius:16px;padding:14px 12px calc(var(--bot-h) + 14px);
  box-shadow:0 -8px 32px rgba(0,0,0,.18);max-height:70vh;overflow-y:auto}
.navDrawerBox .dTitle{font-size:12px;font-weight:800;color:var(--ink2);margin:0 4px 10px;
  letter-spacing:.06em}
.navDrawerGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.dItem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--border);background:#fff;border-radius:12px;padding:12px 6px;
  font-size:11.5px;font-weight:700;color:var(--ink);cursor:pointer;text-align:center;line-height:1.35}
.dItem svg{width:22px;height:22px;opacity:.6}
.dItem.on{border-color:var(--wood);color:var(--wood);background:#FBF8F3}
.dItem.on svg{opacity:1}
.dItem .dTag{font-size:9px;font-weight:400;color:var(--ink2)}

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:15px;margin-bottom:12px;box-shadow:var(--shadow)}
.card h2{font-family:"Noto Serif TC",serif;font-size:16px;margin:0 0 13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tag{font-size:10px;color:var(--wood2);border:1px solid var(--wood);border-radius:4px;padding:1px 5px;font-family:monospace}
.stageBox{border:1px solid var(--border);border-radius:9px;margin-bottom:7px;overflow:hidden}
.stageBox>summary{list-style:none;cursor:pointer}
.stageBox>summary::-webkit-details-marker{display:none}
.stageBox .chev{display:inline-block;transition:transform .15s;font-size:10px;color:var(--ink2)}
.stageBox[open] .chev{transform:rotate(90deg)}

/* STATS */
.statRow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.statRow.c3{grid-template-columns:repeat(3,1fr)}
.statRow.c4{grid-template-columns:repeat(4,1fr)}
.stat{background:#F9F5EE;border-radius:10px;padding:11px 12px}
.stat .k{font-size:10px;color:var(--ink2);letter-spacing:.05em}
.stat .v{font-family:monospace;font-size:19px;font-weight:800;margin-top:2px}
.stat .h{font-size:10px;color:var(--ink2);margin-top:2px}

/* PILLS */
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;white-space:nowrap}
.pill.ok{background:#E5EFE8;color:var(--sage2)}
.pill.wait{background:#FFF1D9;color:#9A5C20}
.pill.danger{background:#F7E2DF;color:var(--red)}
.pill.blue{background:#E2EAF5;color:var(--blue)}
.pill.purple{background:#EEE8F5;color:var(--purple)}
.pill.gray{background:#EEE;color:#666}

/* PERSON CARDS */
.pGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(min-width:600px){.pGrid{grid-template-columns:repeat(4,1fr)}}
.pCard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:13px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pCard:active{border-color:var(--wood);box-shadow:0 4px 16px rgba(193,127,69,.15)}
.pCard .pn{font-weight:800;font-size:14px;margin-bottom:6px}
.pCard .pa{font-size:10px;color:var(--ink2);margin-bottom:3px}
.prog{height:5px;border-radius:999px;background:#EAE0CC;overflow:hidden}
.prog span{display:block;height:100%;background:var(--sage);transition:width .4s}
.pCard .pm{font-family:monospace;font-size:17px;font-weight:800;color:var(--sage2);margin-top:9px}
.pCard .ps{font-size:10px;color:var(--ink2);margin-top:1px}

/* FORMS */
label{display:block;font-size:12px;color:var(--ink2);font-weight:700;margin:9px 0 3px;letter-spacing:.03em}
input,select,textarea{width:100%;padding:9px 10px;border:1.5px solid var(--border);border-radius:8px;background:#FCFAF6;color:var(--ink);font-size:14px;font-family:inherit}
input[type=number]{font-family:monospace}
textarea{min-height:68px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--wood);outline-offset:1px;border-color:transparent}
.c2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.c3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* BUTTONS
   ═══ 兩套名字、一套樣式（SA 2026-10-31「頁面使用與設計感覺不是同套系統」）═══
   ⛔ 查證出來的根本原因：ERP 與報價系統對**同一顆按鈕有兩組 class 名**，
     而且各自定義過一次 ⇒ 同一個意思在兩邊長得不一樣。
       次要 .out ／ .sec　　危險 .danger ／ .warn
       木色 .wood ／ .gold　小顆 .sm ／ .mini
   ⛔ 更糟的是**ERP 自己的版面就用了 29 個 `btn sec`、3 個 `btn gold`、1 個 `btn mini`**，
     而 ERP 這一份 css **從來沒有定義過它們**——它們一直是靠
     `quote/assets/style.css` 在撐。也就是 ERP 的按鈕由報價系統的樣式表決定長相，
     報價系統哪天不載入，那 33 顆會當場變成深色主要按鈕，而且沒有人會預料到。
   ⇒ 兩組名字在這裡**指向同一條規則**，外觀以 ERP 為準（它是主系統、頁數多得多）。
     ⛔ 不要再在 quote/assets/style.css 重新定義它們——那就是分岔的來源。 */
.btn{padding:10px 13px;border-radius:9px;border:none;background:var(--ink);color:#F5F0E8;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn.sm,.btn.mini{padding:6px 9px;font-size:12px}
.btn.sage{background:var(--sage)}
.btn.wood,.btn.gold{background:var(--wood)}
.btn.out,.btn.sec{background:transparent;color:var(--ink);border:1.5px solid var(--border)}
.btn.danger,.btn.warn{background:transparent;color:var(--red);border:1.5px solid var(--red)}
.btn.blue{background:var(--blue)}.btn.full{width:100%;justify-content:center}
.btnRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}

/* TABLE */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 6px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
th{font-size:11px;color:var(--ink2);font-weight:800;background:#FBF7F0}
td.r,th.r{text-align:right;font-family:monospace}
tr.tot td{border-top:2px solid var(--ink);font-weight:800;background:#FCFAF6}

/* CASE ITEMS */
.cItem{border:1px solid var(--border);border-radius:11px;padding:12px;margin-bottom:9px;background:#fff;transition:border-color .15s}
.cItem.clickable{cursor:pointer}.cItem.clickable:active{border-color:var(--wood)}
.cItem .ct{font-weight:800;font-size:14px}
.cItem .cm{font-size:11px;color:var(--ink2);margin-top:3px;line-height:1.6}
.cItem .cv{font-family:monospace;color:var(--sage2);font-weight:800;font-size:13px;margin-top:5px}

/* TODO */
.tdItem{display:flex;align-items:flex-start;gap:9px;padding:10px 0;border-bottom:1px solid var(--border)}
.tdItem:last-child{border-bottom:none}
.tdChk{width:20px;height:20px;border-radius:6px;border:2px solid var(--border);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-top:1px;transition:all .15s}
.tdChk.on{background:var(--sage);border-color:var(--sage)}
.tdChk.pending{background:var(--gold);border-color:var(--gold)}
.tdChk svg{display:none;width:11px;height:11px}.tdChk.on svg,.tdChk.pending svg{display:block}
.tdTxt{flex:1}.tdTxt .tt{font-size:13px;font-weight:700}.tdTxt .tm{font-size:11px;color:var(--ink2);margin-top:2px}
.tdTxt.done .tt{text-decoration:line-through;color:var(--ink2)}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(44,35,24,.5);z-index:200;display:flex;align-items:flex-end;justify-content:center}
.modal.hide{display:none}
.mBox{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;padding:20px 17px 40px}
.mBox h3{font-family:"Noto Serif TC",serif;font-size:17px;margin:0 0 15px;display:flex;justify-content:space-between;align-items:center}
.xBtn{background:none;border:none;font-size:24px;cursor:pointer;color:var(--ink2);padding:0;line-height:1}

/* SUB PAGE */
.sub{display:none;position:fixed;inset:0;background:var(--bg);z-index:150;overflow-y:auto}
.sub.open{display:block}
.subNav{height:var(--nav-h);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:10px;position:sticky;top:0;z-index:10}
.backBtn{background:none;border:none;cursor:pointer;padding:6px;margin-left:-6px;color:var(--ink);display:flex;align-items:center;flex-shrink:0}
.subTitle{font-family:"Noto Serif TC",serif;font-size:16px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subBody{padding:14px}

/* FILTER BAR */
.filterBar{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filterBar::-webkit-scrollbar{display:none}
.fBtn{padding:6px 13px;border-radius:999px;border:1.5px solid var(--border);background:#fff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;color:var(--ink2);flex-shrink:0}
.fBtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ANNOUNCE */
.annItem{border:1px solid var(--border);border-radius:11px;padding:13px;margin-bottom:9px;background:#fff}
.annItem .aHead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.annItem .aTitle{font-weight:800;font-size:14px}
.annItem .aBody{font-size:13px;color:var(--ink2);line-height:1.7}
.annItem .aMeta{font-size:11px;color:var(--ink2);margin-top:7px;display:flex;gap:10px;flex-wrap:wrap}
.annItem .aSig{margin-top:9px;padding-top:9px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.sigBadge{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink2)}
.sigBadge.signed{color:var(--sage2)}

/* SECTION TITLE */
.secTitle{font-family:"Noto Serif TC",serif;font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.06em;margin:16px 0 8px;display:flex;align-items:center;gap:6px}
.secTitle::before{content:"";display:block;width:3px;height:13px;background:var(--wood);border-radius:2px}

/* MISC */
.muted{font-size:12px;color:var(--ink2);line-height:1.7}
/* ⚠ `.warn` 在兩邊是**兩個意思**：ERP 這裡指「警告文字」，報價系統指「刪除按鈕」。
   ⛔ 不加 :not(.btn) 的話，報價系統的 24 顆 `btn warn` 會吃到這一行的 font-size:12px
     ——字比旁邊的按鈕小一號，看起來就是「兩套系統」的那種不一致。
     （色與底色不受影響，那兩個被 .btn.warn 這條更明確的規則蓋掉了。）
   ⚠ ERP 自己沒有任何 `class="btn warn"`，所以加這個排除不影響 ERP 任何一處。 */
.warn:not(.btn){font-size:12px;color:var(--red);line-height:1.7}
.calcNote{border-left:4px solid var(--sage);padding:8px 10px;background:#F6FAF7;border-radius:6px;margin-top:9px;font-size:12px;color:var(--ink2);line-height:1.7}
.empty{text-align:center;padding:36px 20px;color:var(--ink2);font-size:13px}
.empty .ei{font-size:34px;margin-bottom:8px}
code{font-family:monospace;background:#F0EBE2;border-radius:4px;padding:1px 5px;font-size:12px}
.divider{border:none;border-top:1px solid var(--border);margin:12px 0}
.badge{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;border-radius:999px;font-size:10px;font-weight:800;min-width:16px;height:16px;padding:0 4px}

@media(min-width:600px){
  .page{padding:18px}
  .content,.botNav{max-width:720px;margin-left:auto;margin-right:auto}
  .botNav{border-left:1px solid var(--border);border-right:1px solid var(--border)}
  .modal{align-items:center}
  .mBox{border-radius:20px;margin:20px;max-height:85vh}
}
/* 首頁的「公告｜待辦」兩欄（SA 2026-10-12）。
   ⚠ 預設就是單欄，**窄螢幕不做任何事**——兩欄硬排在 375px 下每欄只剩 170px，
     公告標題會斷成三行。600px 以上才並排。 */
.homeTwoCol{grid-template-columns:1fr!important}
@media(min-width:600px){ .homeTwoCol{grid-template-columns:1fr 1fr!important} }
/* 首頁「執行中」一案一行（SA 2026-10-27）：窄版把補充資訊藏掉，案名與金額優先。
   ⚠ 藏的是**案型**與**第 N/M 關**——色塊細線已經表達了走到哪，數字是桌機的補充。
   ⛔ 不藏狀態 pill、金額、收款、備料：那四個是這一列存在的理由。 */
.homeHideSm{display:none}
@media(min-width:480px){ .homeHideSm{display:inline} }

/* 電腦版：資料很多的頁面放寬內容區（SA 2026-10-13「電腦版內容放寬」，第一優先 5 頁）。
   ⚠ 只在視窗 ≥1000px 才生效；手機與一般視窗完全不變。哪些頁是「寬頁」見 js/ui.js 的 WIDE_PAGES。 */
@media(min-width:1000px){
  .content.wide{width:100%;max-width:1280px}
}
@media print{.topNav,.botNav,.btnRow,.noPrint{display:none!important}.page{display:block!important;padding:0}}
/* ── 列印版（v2.00）──────────────────────────────────────
   ⚠ 不直接印畫面。畫面是給人操作的（分頁鈕、下拉、展開鈕、勾選框），
     印在紙上全是雜訊；而且上面那條 .page{display:block!important}
     會把**每一個分頁**都印出來，會計拿到的會是五張表疊在一起。
   ⇒ 另組一份乾淨的列印版塞進 #printRoot，列印時只顯示它。 */
#printRoot{display:none}
@media print{
  body.printing>*{display:none!important}
  body.printing>#printRoot{display:block!important}
  @page{size:A4;margin:14mm}
  #printRoot{font:12px/1.6 "Noto Sans TC","Microsoft JhengHei",sans-serif;color:#000;background:#fff}
  #printRoot h1{font-size:17px;margin:0 0 2px;letter-spacing:1px}
  #printRoot h2{font-size:13px;margin:14px 0 5px;padding-bottom:3px;border-bottom:1px solid #000}
  #printRoot .pMeta{font-size:10px;color:#444;margin-bottom:10px}
  #printRoot .pMeta span{margin-right:14px;white-space:nowrap}
  #printRoot table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:4px}
  #printRoot th,#printRoot td{border:1px solid #999;padding:3px 5px;text-align:left}
  #printRoot th{background:#eee;font-weight:700}
  #printRoot td.r,#printRoot th.r{text-align:right;font-variant-numeric:tabular-nums}
  #printRoot tr.tot td{font-weight:800;background:#f2f2f2}
  #printRoot .pNote{font-size:9.5px;color:#444;line-height:1.7;margin:4px 0 0}
  /* 一列一案／一列一月不要被切到跨頁——會計對帳時最怕半列 */
  #printRoot tr,#printRoot .pBlock{page-break-inside:avoid}
  #printRoot .pSign{margin-top:22px;page-break-inside:avoid}
  #printRoot .pSign td{border:none;padding:0 12px 0 0;font-size:11px;vertical-align:bottom;height:46px}
  #printRoot .pSign .line{border-bottom:1px solid #000;display:block;min-width:150px;height:30px}
  #printRoot .pFoot{margin-top:14px;padding-top:5px;border-top:1px solid #ccc;font-size:9px;color:#666}
}
/* 發票必填欄位未填（SA 2026-10-02）：js/ui.js 成本明細發票日期用 */
[data-miss="1"]{border:1px solid var(--red)!important;border-radius:4px}

/* 案件編輯：儲存／刪除列貼在視窗底部，長頁面不用捲到最底才找得到（SA 2026-10-15） */
#subCaseEditBody .btnRow{position:sticky;bottom:0;z-index:5;background:var(--bg);padding:8px 0;margin-top:11px;border-top:1px solid var(--border)}