:root{
  --bg:#f3f6fb;--panel:#ffffff;--ink:#1a2230;--ink-2:#6b7686;--line:#cfd8e4;
  --graphite:#1a2230;--graphite-2:#2a3444;--ice:#1552f0;--ice-soft:#eef3fe;
  --ok:#0e8f52;--warn:#b06d00;--bad:#e5484d;--radius:5px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Noto Sans TC",-apple-system,"PingFang TC",Helvetica,Arial,sans-serif;
  --nav:230px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);font-size:14px;line-height:1.5;
  background:
    linear-gradient(0deg,rgba(21,82,240,.035) 1px,transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg,rgba(21,82,240,.035) 1px,transparent 1px) 0 0 / 32px 100%,
    var(--bg);}
a{color:var(--ice);text-decoration:none}a:hover{text-decoration:underline}
.mono,.num,.kpi .value,td.num,th.num,.ccard .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.lbl{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em}

/* ---------- 頂列（上方導覽模式） ---------- */
header{background:#f8fafd;color:var(--ink);padding:0 18px;display:flex;align-items:center;gap:14px;height:54px;border-bottom:1px solid var(--ink)}
header .brand{font-family:var(--mono);font-weight:700;letter-spacing:.12em;font-size:14px;text-transform:uppercase}
header .brand span{color:var(--ice)}
header nav{display:flex;align-items:stretch;height:100%;gap:1px}
header nav .ngdirect,header nav .ngtop{color:var(--ink-2);padding:0 11px;display:flex;align-items:center;height:100%;border-bottom:2px solid transparent;font-size:13.5px;white-space:nowrap;cursor:pointer;text-decoration:none}
header nav .ngtop i{font-style:normal;font-size:9px;margin-left:3px;opacity:.55}
header nav .ngdirect.active,header nav .ngdirect:hover,header nav .ng.active>.ngtop,header nav .ng:hover>.ngtop,header nav .ng:focus-within>.ngtop{color:var(--ice);border-bottom-color:var(--ice)}
header nav .ng{position:relative;display:flex;align-items:stretch}
header nav .ngmenu{display:none;position:absolute;top:100%;left:0;min-width:160px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 24px rgba(20,30,50,.15);padding:5px;z-index:20;flex-direction:column;gap:1px}
header nav .ng:hover>.ngmenu,header nav .ng:focus-within>.ngmenu{display:flex}
header nav .ngmenu a{color:var(--ink);padding:8px 12px;border-radius:5px;font-size:13.5px;white-space:nowrap;display:flex;align-items:center;gap:6px;text-decoration:none}
header nav .ngmenu a:hover{background:#eef3ff;color:var(--ice)}
header nav .ngmenu a.active{color:var(--ice);font-weight:600}
header .right{color:#8b95a5;font-size:12px;font-family:var(--mono)}
.hsearch input{font-family:var(--sans)}

/* ---------- 左側導覽模式 ---------- */
body[data-nav="left"]{display:flex;min-height:100vh}
.sidenav{width:var(--nav);flex:none;background:#0f1622;color:#aab4c2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidenav .brand{font-family:var(--mono);font-weight:700;letter-spacing:.12em;font-size:14px;color:#eef2f7;padding:22px 22px 18px;text-transform:uppercase;border-bottom:1px solid #1e2836}
.sidenav .brand span{color:#4d86ff}
.sidenav nav{display:flex;flex-direction:column;padding:12px 12px;gap:2px;overflow-y:auto}
.sidenav nav a{color:#93a0b0;padding:9px 12px;border-radius:6px;font-size:14px;display:flex;align-items:center;gap:8px}
.sidenav nav a:hover{background:#17202e;color:#e6ebf1;text-decoration:none}
.sidenav nav a.active{background:#17202e;color:#eef2f7;box-shadow:inset 3px 0 0 #4d86ff}
.sidenav .sidefoot{margin-top:auto;padding:16px 22px;border-top:1px solid #1e2836;font-size:12px;color:#5f6b7a;font-family:var(--mono)}
/* 左側直欄：分類群組展開成小標題＋縮排項目 */
.sidenav nav .ngdirect{color:#93a0b0;padding:9px 12px;border-radius:6px;font-size:14px;display:flex;align-items:center;gap:8px;text-decoration:none}
.sidenav nav .ng{flex-direction:column;align-items:stretch}
.sidenav nav .ngtop{color:#5f6b7a;font-size:11.5px;letter-spacing:.06em;padding:10px 12px 3px;cursor:default}
.sidenav nav .ngtop i{display:none}
.sidenav nav .ngmenu{display:flex;flex-direction:column;gap:2px}
.sidenav nav .ngmenu a{color:#93a0b0;padding:8px 12px 8px 22px;border-radius:6px;font-size:14px;display:flex;align-items:center;gap:6px;text-decoration:none}
.sidenav nav .ngdirect:hover,.sidenav nav .ngmenu a:hover{background:#17202e;color:#e6ebf1}
.sidenav nav .ngdirect.active,.sidenav nav .ngmenu a.active{background:#17202e;color:#eef2f7;box-shadow:inset 3px 0 0 #4d86ff}
.sidenav nav .ng.active>.ngtop{color:#aab4c2}
.appmain{flex:1;min-width:0;display:flex;flex-direction:column}
body[data-nav="left"] header{background:#f8fafd;gap:16px}
body[data-nav="left"] main{width:100%}

/* 頁面寬度（設定頁可切換）：
   標準＝1280，適合筆電；寬＝1750，寬螢幕案件格子剛好一排五張；
   全寬＝吃滿視窗，超寬螢幕（3440 之類）用。每一段都用 min(..., vw) 收邊，
   視窗變小時自動跟著縮，不會出現橫向捲軸。 */
main{max-width:min(1280px, 100%);margin:0 auto;padding:22px 26px 60px;width:100%}
body[data-width="wide"] main{max-width:min(1750px, 96vw)}
body[data-width="full"] main{max-width:min(2600px, 97vw)}
body[data-nav="left"] main{max-width:min(1240px, 100%)}
body[data-nav="left"][data-width="wide"] main{max-width:min(1700px, 94vw)}
body[data-nav="left"][data-width="full"] main{max-width:min(2560px, 96vw)}
h1{font-size:20px;margin:0 0 14px;letter-spacing:-.01em}
h2{font-size:15px;margin:0 0 10px;color:var(--ink)}
.muted{color:var(--ink-2)}.small{font-size:12px}
.grid{display:grid;gap:12px}
.kpis{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.kpi .label{color:var(--ink-2);font-size:12px}
.kpi .value{font-size:25px;font-weight:700;margin-top:5px}
.kpi.accent{border:1.5px solid var(--ice);background:var(--ice-soft)}
.kpi.accent .label{color:var(--ice)}.kpi.accent .value{color:var(--ice)}
.kpi .value.neg{color:var(--bad)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-top:14px}
.panel.warn{border-color:#f0d9a8;background:#fffaf0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse}
th,td{padding:9px 10px;border-bottom:1px solid #edf1f6;text-align:left;vertical-align:top}
th{font-size:11px;color:var(--ink-2);font-weight:600;background:transparent;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:hover td{background:#f7f9fc}
table.compact th,table.compact td{padding:7px 8px}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;background:#eef1f5;color:var(--ink-2);white-space:nowrap}
.badge.ok{background:#e2f4ea;color:var(--ok)}.badge.warn{background:#fbeecd;color:var(--warn)}
.badge.bad{background:#fbe2e3;color:var(--bad)}.badge.ice{background:var(--ice-soft);color:var(--ice)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
input,select,textarea{font:inherit;padding:7px 9px;border:1px solid #c3cdda;border-radius:5px;background:#fff;color:var(--ink);min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ice-soft);border-color:var(--ice)}
button,.btn{font:inherit;padding:7px 14px;border-radius:5px;border:1px solid var(--graphite);background:var(--graphite);color:#fff;cursor:pointer}
button:hover,.btn:hover{background:var(--graphite-2);text-decoration:none}
.btn.light,button.light{background:#fff;color:var(--ink);border-color:#c3cdda}
.btn.ice,button.ice{background:var(--ice);border-color:var(--ice)}
button.danger{background:#fff;color:var(--bad);border-color:#f0c4c4;padding:3px 8px;font-size:12px}
.flash{padding:10px 14px;border-radius:5px;margin-bottom:14px;background:#e2f4ea;color:#155d34;border:1px solid #bfe7cf}
.flash.err{background:#fbe2e3;color:#8a2020;border-color:#f3bcbc}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.form-grid label{display:flex;flex-direction:column;font-size:12px;color:var(--ink-2);gap:4px}
.form-grid label.wide{grid-column:1/-1}
.chips a{display:inline-block;padding:4px 10px;border-radius:4px;background:#fff;border:1px solid var(--line);color:var(--ink-2);margin:0 6px 6px 0;font-size:12px}
.chips a.on{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;font-size:13px}
.kv dt{color:var(--ink-2)}.kv dd{margin:0}
.trend{display:flex;gap:14px;align-items:flex-end;height:150px;padding:10px 0 0}
.trend .m{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.trend .bars{display:flex;gap:3px;align-items:flex-end;flex:1;width:100%;justify-content:center}
.trend .bar{width:14px;border-radius:2px 2px 0 0;min-height:2px}
.trend .b-deal{background:#aeb8c6}.trend .b-rec{background:var(--ice)}.trend .b-exp{background:var(--bad)}.trend .b-pro{background:var(--ok)}
.legend span{display:inline-block;margin-right:14px;font-size:12px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
details summary{cursor:pointer;font-weight:600;padding:6px 0}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:12px}
.tabs a{padding:8px 12px;color:var(--ink-2);border-bottom:2px solid transparent}
.tabs a.on{color:var(--ice);border-bottom-color:var(--ice)}
footer{color:#9aa3ae;font-size:12px;text-align:center;margin-top:40px;font-family:var(--mono)}

/* 案件格子檢視 */
/* 案件格子：欄數自己長——視窗多寬就排幾欄，卡片最窄 300px。
   1750 寬（預設「寬」）＝一排五張；1400＝四張；1100＝三張；800＝兩張；手機一張。 */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;margin-top:10px}
/* 「標準」寬度的卡片窄一點，1280 的畫面才排得下四張（跟改版前一樣） */
body[data-width="normal"] .cardgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.ccard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:6px;position:relative;border-left:3px solid #c3cdda}
.ccard.won{border-left-color:var(--ice)}.ccard.done{border-left-color:var(--ok)}.ccard.lost{opacity:.55}.ccard.overdue{border-left-color:var(--bad)}
.ccard .no{font-weight:700;font-size:15px;font-family:var(--mono)}.ccard .no a{color:var(--ink)}
.ccard .cust{font-size:13px}.ccard .proj{color:var(--ink-2);font-size:12px;min-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccard .amt{font-size:18px;font-weight:700}
.ccard .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ccard .sub{font-size:12px;color:var(--ink-2)}
.monthhead{display:flex;align-items:baseline;gap:12px;margin:22px 0 4px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.monthhead h2{margin:0;font-size:17px}
.viewtoggle a{padding:5px 10px;border:1px solid #c3cdda;border-radius:5px;color:var(--ink-2);background:#fff}
.viewtoggle a.on{background:var(--graphite);color:#fff;border-color:var(--graphite)}

/* 手機版 */
.menubtn{display:none;background:transparent;border:1px solid #c3cdda;color:var(--ink);padding:4px 10px;font-size:18px;line-height:1;border-radius:5px}
@media(max-width:820px){
  header{padding:0 14px;gap:12px;height:50px;flex-wrap:wrap}
  header .right{display:none}
  .menubtn{display:inline-block;margin-left:auto}
  header nav{display:none;position:absolute;top:50px;left:0;right:0;background:#f8fafd;padding:6px 14px 10px;flex-direction:column;box-shadow:0 8px 20px rgba(20,30,50,.14);border-bottom:1px solid var(--line);height:auto}
  body.navopen header nav{display:flex}
  header nav a{padding:11px 4px;margin:0;border-bottom:1px solid #e6ebf1;height:auto}
  /* 左側導覽在手機收成頂欄 */
  body[data-nav="left"]{display:block}
  .sidenav{width:auto;height:auto;position:static;flex-direction:row;overflow-x:auto;align-items:center;gap:4px;padding:0}
  .sidenav .brand{border:0;padding:12px 14px;font-size:13px}
  .sidenav nav{flex-direction:row;padding:0 8px;gap:2px}
  .sidenav nav a{white-space:nowrap;padding:12px 8px}
  .sidenav nav a.active{box-shadow:inset 0 -2px 0 #4d86ff}
  .sidenav .sidefoot{display:none}
  main{padding:14px 12px 60px}
  h1{font-size:18px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi .value{font-size:21px}
  .panel{padding:12px}
  .cardgrid{grid-template-columns:1fr 1fr}
  .tablewrap,.panel:has(>table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:560px}
  table.compact{min-width:0}
  input,select,textarea{font-size:16px}
  button,.btn{padding:9px 14px}
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid label.wide{grid-column:1/-1}
}
@media(max-width:480px){
  .cardgrid{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}
  /* 兩欄表單在 390px 寬只剩 155px 一欄，下拉選單的字會被切掉——「訂金50% / 尾款5」
     看不出是 50% 還是 30%，而那是會寫進客戶合約的數字。
     只讓含下拉選單的欄位獨佔整列，短的文字欄位仍然兩兩並排。 */
  .form-grid label:has(select){grid-column:1/-1}
}

/* 速記（手機優先） */
.quick{max-width:520px;margin:0 auto}
.quick .form-grid{grid-template-columns:1fr 1fr}
.quick .amount{font-size:28px;font-weight:700;text-align:right;padding:10px 12px;width:100%;font-family:var(--mono)}
.quick .catbtns{display:flex;flex-wrap:wrap;gap:6px}
.quick .catbtns label{border:1px solid #c3cdda;border-radius:4px;padding:6px 12px;background:#fff;cursor:pointer;font-size:13px;flex-direction:row}
.quick .catbtns input{display:none}
.quick .catbtns input:checked+span{font-weight:700;color:#fff}
.quick .catbtns label:has(input:checked){background:var(--graphite);border-color:var(--graphite);color:#fff}
.quick .camera{display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed #c3cdda;border-radius:var(--radius);padding:18px;background:#fff;cursor:pointer;font-size:15px}
.quick .camera input{display:none}
.quick .bigbtn{width:100%;padding:14px;font-size:17px;margin-top:8px}
.quick .preview{max-width:100%;max-height:200px;border-radius:8px;display:none;margin-top:8px}

/* 摘要 */
.brief{white-space:pre-wrap;font-family:var(--mono);font-size:13px;line-height:1.7;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.brief.ai{background:#f7faff;border-color:#bfd4f7;font-family:var(--sans);font-size:15px}

/* 客戶入口 */
.portal{max-width:860px;margin:0 auto}
.portal .sheet{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px}
.portal .signed{background:#e2f4ea;color:#155d34;border:1px solid #bfe7cf;border-radius:5px;padding:12px 14px;font-weight:600}

/* 登入 */
.login{max-width:360px;margin:60px auto;text-align:center}
.login input{font-size:24px;text-align:center;letter-spacing:6px;width:100%;font-family:var(--mono)}

/* 手機版：分組選單在 ☰ 面板中展開（小標題＋縮排項目） */
@media(max-width:820px){
  header nav .ng{flex-direction:column;align-items:stretch}
  header nav .ngdirect{padding:11px 4px;border-bottom:1px solid #e6ebf1;height:auto}
  header nav .ngtop{padding:12px 4px 4px;height:auto;border-bottom:0;color:#8b95a5;font-size:12px;cursor:default}
  header nav .ngtop i{display:none}
  header nav .ngmenu{display:flex!important;position:static;box-shadow:none;border:0;padding:0;background:transparent;min-width:0}
  header nav .ngmenu a{padding:11px 4px 11px 18px;border-bottom:1px solid #e6ebf1;border-radius:0}
}

/* 案件頁：內帳／外帳（發票狀態）每月小計 */
.invsplit{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px;align-items:center}
.invsplit span{padding:3px 10px;border-radius:4px;border:1px solid var(--line);background:#fff;font-size:12px}
.invsplit .ext{border-color:#bcd0f7;background:var(--ice-soft);color:var(--ice)}
.invsplit .noinv{color:var(--ink-2)}
.invsplit .pend{border-color:#f0d9a8;background:#fffaf0;color:var(--warn)}
.invsplit .tot{border-color:var(--ink);font-weight:600}
.invsplit b{font-family:var(--mono);letter-spacing:-.01em}

/* ---------- 拖曳上傳區（估價單參考資料） ---------- */
.dropzone{border:2px dashed var(--line);border-radius:8px;background:#fbfcfe;padding:18px 16px;text-align:center;
  cursor:pointer;transition:border-color .12s,background .12s;user-select:none}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--ice);background:var(--ice-soft);outline:none}
.dropzone.over{border-color:var(--ice);background:var(--ice-soft);border-style:solid}
.dropzone.busy{cursor:progress;border-style:solid;border-color:var(--ice)}
.dropzone .dz-main{font-weight:600;font-size:15px}
.dropzone .dz-sub{font-size:12px;color:var(--ink-2);margin-top:5px;line-height:1.6}
.dropzone .dz-sub u{text-decoration-color:var(--ice)}
.dropzone .dz-bar{display:none;height:5px;border-radius:3px;background:#dfe6f3;margin-top:12px;overflow:hidden}
.dropzone .dz-bar i{display:block;height:100%;width:0;background:var(--ice);transition:width .15s}

/* 首頁三大格：一眼看「賺多少／收到多少／還沒收多少」 */
.kpis-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.kpis-3{grid-template-columns:1fr}}
.kpi.big{padding:20px 22px}
.kpi.big .value{font-size:38px;margin-top:6px;line-height:1.1}
.kpi .label.sub{margin-top:9px;font-size:11.5px;line-height:1.5}
.kpi.accent .label.sub{color:var(--ice);opacity:.85}
.kpi .label.sub .neg{color:var(--bad)}
.kpimore{margin-top:12px}
.kpimore>summary{cursor:pointer;color:var(--ink-2);font-size:13px;padding:6px 2px;user-select:none}
.kpimore>summary:hover{color:var(--ink)}
.kpimore[open]>summary{margin-bottom:8px}
@media(max-width:480px){.kpi.big .value{font-size:30px}}

/* ---------- 手機版修正（2026-09-20）：消除橫向溢出 ---------- */
/* grid 子項預設 min-width:auto，長選項的 select／長網址會把整個版面撐寬 */
.form-grid>*{min-width:0}
.form-grid input,.form-grid select,.form-grid textarea{max-width:100%}
.kv{min-width:0}
.kv dt,.kv dd{min-width:0;overflow-wrap:anywhere}
.panel,.quick,main form{min-width:0}

@media(max-width:820px){
  /* 頂列改為可長高；搜尋框與選單都收進 ☰ 裡，不再擠爆 50px 的列 */
  header{height:auto;min-height:50px;align-items:center;row-gap:0}
  .hsearch{display:none;flex:1 1 100%;order:5;margin:0 0 10px 0!important}
  body.navopen .hsearch{display:block}
  .hsearch input{width:100%;min-width:0!important;padding:9px 10px!important;font-size:16px}
  header nav{position:static;flex:1 1 100%;order:6;padding:4px 0 8px;box-shadow:none;
    border-top:1px solid var(--line);border-bottom:0;background:transparent}

  /* 表格一律可橫向捲動，不把頁面撐寬 */
  .tablewrap,.panel:has(table),form:has(>table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 捲動容器裡的表格給最小寬度，欄位才不會被擠成直書 */
  .tablewrap>table{min-width:480px}
  .runcard .tablewrap>table{min-width:520px}

  /* 長字串（Email、路徑、hash）換行而不是撐開 */
  .panel,.kv dd,.small,.muted{overflow-wrap:anywhere}

  /* 摺疊區（<details>）裡的表格也要能橫向捲動。
     少了這一條，案件頁的「修改歷史／匯入紀錄」一展開，整個頁面就開始左右晃——
     那是全站唯一一處表格不在 .panel 底下，所以前面那幾條規則都蓋不到。 */
  details:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  details:has(table)>table{min-width:480px}

  /* 觸控目標。手機上按鈕原本只有 21～28px 高，手指按不準——而按錯的那幾顆
     剛好是「作廢」「刪除」「已收款」這類按下去會改資料的。
     表格裡的放寬到 32px，再高列高會整個爆開，反而更難看清楚在按哪一列。 */
  button,.btn,input[type=submit],input[type=button]{min-height:38px}
  .btn{display:inline-flex;align-items:center;justify-content:center}
  table button,table .btn{min-height:32px}
  .menubtn{min-height:44px;min-width:44px}
  /* 夾在說明文字中間的小按鈕，窄螢幕自成一行。按鈕變高之後，塞在句子裡會把
     那一段字撐得東一塊西一塊（開估價單那句「也可按〔帶入欄位〕」就是）。 */
  .small>button,.muted>button{display:block;margin-top:6px}
}