/* 陳式設計 內帳系統
   色票與字體沿用品牌形象手冊，明暗兩套 */

:root, :root[data-theme="light"]{
  --rice:#EFE3C4; --rice-lt:#F5EDD8; --kraft:#E3D3AC; --kraft-line:#D8C49A;
  --indigo:#2C4A6B; --seal:#B8402C; --gold:#A87F2E;
  --ink:#3A3226; --ink-soft:#5C523F; --grey:#7C7060;
  --card:#F7F0DD; --edge:#3A3226;
  --shadow:0 2px 0 rgba(58,50,38,.12);
  --sel:#EADBB4; --onSeal:#F7F0DD; --onInd:#F7F0DD;
  /* 導覽與頁尾一律深底，不能綁 --ink，那個變數在深色模式會翻成米色 */
  --bar:#3A3226; --onBar:#F5EDD8;
}
:root[data-theme="dark"]{
  --rice:#211C13; --rice-lt:#2A2417; --kraft:#3A3220; --kraft-line:#4A4230;
  --indigo:#8AA6C8; --seal:#E27A5F; --gold:#CFA648;
  --ink:#EFE3C4; --ink-soft:#CDBF9E; --grey:#9C9078;
  --card:#2A2417; --edge:#5A503A;
  --shadow:0 2px 0 rgba(0,0,0,.3);
  --sel:#3A3220; --onSeal:#211C13; --onInd:#211C13;
  --bar:#100D08; --onBar:#EFE3C4;
}
:root{
  --serif:"Noto Serif TC","Source Han Serif TC","Songti TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Heiti TC",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--rice);color:var(--ink);font-family:var(--serif);
  line-height:1.8;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease}
.sans{font-family:var(--sans)}
.hidden{display:none !important}

/* ── 米袋彩帶 ── */
.band{height:12px;background:repeating-linear-gradient(90deg,
  var(--seal) 0 44px, var(--rice) 44px 55px, var(--indigo) 55px 99px, var(--rice) 99px 110px);
  background-size:110px 100%;animation:slide 9s linear infinite}
.band.thin{height:8px;animation-direction:reverse}
@keyframes slide{to{background-position:110px 0}}

/* ── 導覽 ── */
.nav{display:flex;align-items:center;gap:4px;padding:0 20px;background:var(--bar);
  overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:40}
.nav::-webkit-scrollbar{display:none}
.nav .brand{font-family:var(--sans);font-weight:900;font-size:12px;letter-spacing:.24em;
  color:var(--gold);padding:11px 18px 11px 0;white-space:nowrap}
.nav button{background:none;border:0;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.12em;color:var(--onBar);opacity:.6;padding:11px 13px;cursor:pointer;
  white-space:nowrap;border-bottom:3px solid transparent}
.nav button:hover{opacity:.9}
.nav button.on{opacity:1;border-bottom-color:var(--seal)}
.nav .sp{flex:1}

/*
 * 分區標籤。
 *
 * 選單裡同時有「這個系統自己的頁面」和「別的網站」，
 * 沒有分界的話兩者長得一模一樣，點下去才發現整頁換掉了。
 * 標籤本身不可點，只是把後面那幾顆歸成一區。
 */
.nav .grp{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.24em;
  color:var(--onBar);opacity:.34;padding:11px 9px 11px 15px;white-space:nowrap;
  align-self:stretch;display:flex;align-items:center;
  border-left:1px solid color-mix(in srgb, var(--onBar) 22%, transparent)}
.nav .grp:empty{padding-right:0}

/* 外部連結。長得像選單但會開新分頁，所以帶一個箭頭把差別講出來 */
.nav a.ext{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.12em;
  color:var(--onBar);opacity:.6;padding:11px 13px;white-space:nowrap;text-decoration:none;
  border-bottom:3px solid transparent;display:flex;align-items:center;gap:5px}
.nav a.ext:hover{opacity:.95;border-bottom-color:var(--gold)}
.nav a.ext i{font-style:normal;font-size:10px;opacity:.7}

.wrap{max-width:1300px;margin:0 auto;padding:22px 20px 80px}

/* ── 標題 ── */
.eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:.36em;color:var(--indigo);
  border:1.5px solid var(--indigo);display:inline-block;padding:3px 11px}
h1{font-size:clamp(21px,3.4vw,29px);font-weight:900;letter-spacing:.14em;margin:12px 0 2px}
.en{font-family:var(--sans);font-size:10.5px;letter-spacing:.38em;color:var(--seal);margin:0 0 18px}
h3.sub{font-size:14.5px;font-weight:900;letter-spacing:.14em;margin:26px 0 11px;padding-bottom:7px;
  border-bottom:2px solid var(--edge);display:flex;align-items:center;gap:10px}
h3.sub::before{content:"";width:9px;height:9px;background:var(--seal);flex:none;transform:rotate(45deg)}
h3.sub .r{margin-left:auto;font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--grey);font-weight:400}

.card{background:var(--card);border:2px solid var(--edge);box-shadow:var(--shadow)}
.pad{padding:18px 20px}

/* 頁面標題列：標題在左，動作按鈕在右 */
.pagehead{display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px}
.pagehead .grow{flex:1;min-width:0}

/* ── 月結條 ── */
.monthbar{display:flex;border:2px solid var(--edge);background:var(--card);
  box-shadow:var(--shadow);margin-bottom:20px;flex-wrap:wrap}
/* 一定要用直接子代。寫成後代選擇器的話裡面的 .l 標籤也會長出右邊框 */
.monthbar > div{flex:1;min-width:136px;padding:9px 16px;border-right:2px solid var(--edge)}
.monthbar > div:last-child{border-right:0}
.monthbar .l{font-family:var(--sans);font-size:10px;letter-spacing:.18em;color:var(--grey)}
.monthbar .v{font-size:22px;font-weight:900;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;line-height:1.35}
.monthbar .v.seal{color:var(--seal)} .monthbar .v.ind{color:var(--indigo)}

/* ── 雙欄 ── */
/*
 * 1fr 的最小寬度預設是「內容寬度」，欄位裡的表格一寬就會把整個 grid
 * 撐得比容器還寬，右邊就凸出去、跟上方的月份列對不齊。
 * minmax(0, 1fr) 才是「可以縮到 0」的那個 1fr。
 */
.split{display:grid;grid-template-columns:430px minmax(0, 1fr);gap:16px;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}}

/*
 * 工作台的三欄：看板、案子清單、案子詳情。
 * 跟上方的月份列共用同一個容器與間距，左右邊界才對得齊。
 */
.split3{display:grid;grid-template-columns:280px 380px minmax(0, 1fr);gap:16px;align-items:start}
@media(max-width:1280px){.split3{grid-template-columns:250px 340px minmax(0, 1fr)}}
@media(max-width:1080px){.split3{grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr)}
  .split3 .bcol{grid-column:1 / -1;max-height:260px}}
@media(max-width:760px){.split3{grid-template-columns:1fr}}

/* 看板欄。跟清單同一套外框，視覺上是並列的三塊而不是外掛 */
.bcol{min-width:0;border:2px solid var(--edge);background:var(--card);box-shadow:var(--shadow);
  max-height:calc(100vh - 178px);min-height:min(620px, calc(100vh - 178px));overflow-y:auto}
.bhead{display:flex;align-items:center;gap:8px;padding:6px 11px;background:var(--rice-lt);
  border-bottom:2px solid var(--edge);position:sticky;top:0;z-index:2}
.bhead select{width:auto;padding:3px 6px;font-size:12.5px;font-weight:700;
  background:transparent;border:1.5px solid transparent}
.bhead select:hover{border-color:var(--kraft-line)}
.bcard{display:flex;align-items:center;gap:6px;border-bottom:1px dashed var(--kraft-line);
  padding:8px 11px;transition:background .14s}
.bcard .grow{cursor:pointer;min-width:0}
/* 卡片上的動作。平常淡淡的，滑過去才明顯，不要跟內容搶注意力 */
.bacts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;width:46px;
  opacity:.28;transition:opacity .14s;flex:none}
.bcard:hover .bacts{opacity:1}
.bacts button{background:transparent;border:1px solid var(--kraft-line);color:var(--grey);
  font-size:10px;line-height:1;padding:2px 5px;cursor:pointer}
.bacts button:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.bacts button:disabled{opacity:.3;cursor:default}
.bacts .bok:hover{border-color:var(--indigo);color:var(--indigo)}
.bacts .bno:hover{border-color:var(--seal);color:var(--seal)}
.bcard:hover{background:var(--sel)}
.bcard:last-child{border-bottom:0}
.bcard.urgent{border-left:3px solid var(--seal)}

.list{min-width:0;border:2px solid var(--edge);background:var(--card);box-shadow:var(--shadow);
  max-height:calc(100vh - 178px);min-height:min(620px, calc(100vh - 178px));overflow-y:auto}
@media(max-width:1000px){.list{max-height:none}}
.tabs{display:flex;gap:0;border-bottom:2px solid var(--edge);background:var(--rice-lt);flex-wrap:wrap;
  position:sticky;top:0;z-index:4}
.tabs button{flex:1;min-width:66px;background:none;border:0;border-right:1px solid var(--kraft-line);
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--grey);
  padding:6px 4px;cursor:pointer}
.tabs button:last-child{border-right:0}
.tabs button.on{background:var(--indigo);color:var(--onInd)}
.searchbar{padding:6px 12px;border-bottom:2px solid var(--edge);background:var(--rice-lt);
  position:sticky;top:var(--tabsH,33px);z-index:3}
.searchbar input{width:100%;background:var(--rice);border:1.5px solid var(--edge);color:var(--ink);
  padding:6px 10px;font-family:var(--sans);font-size:12.5px}
.searchbar input::placeholder{color:var(--grey)}

.lgroup{display:flex;align-items:baseline;gap:10px;padding:4px 13px;background:var(--kraft);
  border-top:2px solid var(--edge);border-bottom:2px solid var(--edge);
  position:sticky;top:calc(var(--tabsH,33px) + var(--searchH,45px));z-index:2}
.lgroup .m{font-size:13.5px;font-weight:900;letter-spacing:.12em}
.lgroup .c{font-family:var(--sans);font-size:10px;letter-spacing:.12em;color:var(--grey)}
.lgroup .r{margin-left:auto;font-size:12px;font-weight:900;color:var(--indigo);font-variant-numeric:tabular-nums}

.li{padding:6px 13px;line-height:1.4;border-bottom:1px dashed var(--kraft-line);cursor:pointer;
  transition:background .16s ease,transform .16s ease}
.li:hover{background:var(--rice-lt);transform:translateX(2px)}
.li.on{background:var(--sel);box-shadow:inset 5px 0 0 var(--seal),inset 0 0 0 2px var(--edge);transform:none}
.li.on .code{color:var(--seal)}
.li:last-child{border-bottom:0}

/* ── 右欄 ── */
.pane{border:2px solid var(--edge);background:var(--card);box-shadow:var(--shadow);
  padding:20px 22px;min-width:0}
.pane.swap{animation:fadein .26s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.phead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding-bottom:13px;border-bottom:2px solid var(--edge)}
.pname{font-size:22px;font-weight:900;letter-spacing:.09em;line-height:1.45}
.chip-t{font-family:var(--sans);font-size:10.5px;letter-spacing:.09em;border:1.5px solid var(--edge);
  padding:3px 9px;background:var(--rice-lt);color:var(--ink-soft);white-space:nowrap}

/* ── 共用元素 ── */
.code{font-family:var(--sans);font-weight:700;color:var(--gold);letter-spacing:.05em;
  font-variant-numeric:tabular-nums;cursor:pointer;transition:color .16s}
.code:hover{color:var(--seal)}
.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.dim{color:var(--ink-soft)} .grey{color:var(--grey)}
.seal-c{color:var(--seal)} .ind{color:var(--indigo)} .gold-c{color:var(--gold)}
.s10{font-size:10px} .s11{font-size:11px} .s12{font-size:12px} .s13{font-size:13px}
.b7{font-weight:700} .b9{font-weight:900}
.row{display:flex;align-items:center;gap:11px}
.grow{flex:1;min-width:0}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{text-align:center;color:var(--grey);padding:34px 12px;font-size:13.5px}

.stage{display:flex;gap:5px;flex:none}
.st.wide{padding:0 9px;width:auto}
.st{width:31px;height:26px;border:1.5px solid var(--edge);background:transparent;color:var(--grey);
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.05em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .16s,color .16s,border-color .16s}
.st:hover{border-color:var(--ink);color:var(--ink)}
.st.on{background:var(--indigo);border-color:var(--indigo);color:var(--onInd)}
.st.late{border-color:var(--seal);color:var(--seal)}
.st.na{opacity:.28;cursor:default}
/* 收了一部分：金色半填，跟「全收」的靛藍一眼分得開 */
.st.half{border-color:var(--gold);color:var(--gold);font-weight:700;
  background:linear-gradient(180deg,transparent 0 50%,var(--gold) 50% 100%)}
.stamped{animation:stamp .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes stamp{
  0%{transform:scale(1.7) rotate(-13deg);opacity:.25}
  55%{transform:scale(.93) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}}

.chk{width:27px;height:27px;flex:none;border:2px solid var(--edge);background:transparent;
  color:transparent;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .16s,border-color .16s,color .16s}
.chk.on{background:var(--indigo);border-color:var(--indigo);color:var(--onInd)}
.chk.half{border-color:var(--gold);color:var(--gold);font-weight:900;
  background:linear-gradient(180deg,transparent 0 50%,rgba(168,127,46,.22) 50% 100%)}
.chk.late{border-color:var(--seal)}

.inv-b{font-family:var(--sans);font-size:10px;letter-spacing:.08em;padding:1px 6px;
  border:1.5px solid var(--kraft-line);color:var(--grey);white-space:nowrap;display:inline-block}
.inv-b.yes{border-color:var(--gold);color:var(--gold)}
.inv-b.void{border-color:var(--seal);color:var(--seal)}
.inv-b.wait{border-color:var(--gold);color:var(--gold)}

/* LINE 收款訊息 */
.linemsg{border-top:1px dashed var(--kraft-line);padding:10px 0}
.linemsg:first-of-type{border-top:0;padding-top:2px}
/*
 * 文字連結樣式。原本只給 <a> 用，但 <button> 也會需要 ——
 * 沒有下面那行重設的話，按鈕會保留瀏覽器的白底、邊框和圓角，
 * 在深色的 CIS 版面上白得非常突兀。<a> 本來就沒有這些屬性，加了無害。
 */
.lnk{color:var(--indigo);text-decoration:underline;cursor:pointer;font-size:11px;
  font-family:var(--sans);margin-left:6px;
  background:none;border:0;border-radius:0;padding:0;
  -webkit-appearance:none;appearance:none}
.lnk:hover{color:var(--seal)}

table.spec{width:100%;border-collapse:collapse;background:var(--card);
  border:2px solid var(--edge);font-size:13.5px}
/* 表頭不要直排。欄位被擠窄時「案子」會變成兩個字疊起來 */
table.spec th{white-space:nowrap;background:var(--ink);color:var(--rice);text-align:left;padding:7px 12px;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;font-weight:700}
:root[data-theme="dark"] table.spec th{color:#211C13}
table.spec td{padding:8px 12px;border-top:1px dashed var(--kraft-line)}
table.spec td:first-child{font-weight:700;white-space:nowrap}
table.spec tr.clk{cursor:pointer}
table.spec tr.clk:hover td{background:var(--rice-lt)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.twrap{overflow-x:auto}

/*
 * 沒寫 type 的 input 預設就是 text，但 [type=text] 選不到它，
 * 會掉回瀏覽器預設的白底，深色模式下特別刺眼，所以改成不挑型別。
 * 包在 :where() 裡是為了讓這條規則的權重歸零，
 * 後面 .cell、.inp、.ymd input 這些才蓋得過它。
 */
input:where(:not([type=checkbox]):not([type=radio])),select,textarea{
  background:var(--rice);border:1.5px solid var(--edge);color:var(--ink);padding:6px 10px;
  font-family:var(--sans);font-size:13px;width:100%}
input::placeholder,textarea::placeholder{color:var(--grey);opacity:.75}
input:focus,select:focus,textarea:focus{outline:2px solid var(--seal);outline-offset:1px}
/* 日期用的數字框不要出現上下箭頭，會把三格擠歪 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp{width:106px;text-align:right;font-variant-numeric:tabular-nums}
/* 表格裡直接編輯的欄位。看起來像文字，點下去才像輸入框，表格才不會變成一片框 */
.cell{width:100%;background:transparent;border:1.5px solid transparent;color:inherit;
  font-family:inherit;font-size:inherit;padding:4px 6px}
.cell:hover{border-color:var(--kraft-line)}
.cell:focus{border-color:var(--indigo);background:var(--rice);outline:none}
select.cell{font-family:var(--sans);font-size:12px}
.nocode{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--grey);
  border:1.5px dotted var(--kraft-line);padding:1px 5px}
.memo{font-family:var(--serif);font-size:13.5px;line-height:1.8;resize:vertical}
label{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  color:var(--grey);margin-bottom:4px}
.field{margin-bottom:11px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
@media(max-width:560px){.g2,.g3{grid-template-columns:1fr}}

.seg{display:inline-flex;border:1.5px solid var(--edge)}
.seg button{font-family:var(--sans);font-size:11.5px;letter-spacing:.09em;padding:5px 13px;
  background:transparent;color:var(--grey);border:0;cursor:pointer;transition:.16s}
.seg button.on{background:var(--indigo);color:var(--onInd);font-weight:700}

/* 年月日 */
/*
 * 收款日。外面是一個框，年月日三個輸入格藏在裡面沒有各自的邊框，
 * 看起來是一格、打起來還是可以三段跳，中間用細線分隔。
 */
/* 一格的日期欄位。打 0811 就好，離開欄位自動翻成「2026 年 8 月 11 日」 */
.dt{width:auto;min-width:132px;font-family:var(--sans);font-size:13px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.dt:focus{letter-spacing:.12em}
@media(max-width:560px){.dt{min-width:0;width:100%}}

.ymd{display:inline-flex;align-items:stretch;font-family:var(--sans);
  border:1.5px solid var(--edge);background:var(--rice);
  transition:border-color .16s,box-shadow .16s}
.ymd:hover{border-color:var(--ink-soft)}
.ymd:focus-within{border-color:var(--indigo);box-shadow:0 0 0 2px var(--sel)}
.ymd input{width:auto;padding:5px 1px;text-align:center;font-variant-numeric:tabular-nums;
  font-size:13px;background:transparent;border:0;color:var(--ink)}
.ymd input:focus{outline:none}
.ymd .y{width:42px} .ymd .m,.ymd .d{width:26px}
/* 年月日三個字當分隔，同時是單位標示 */
.ymd span{display:flex;align-items:center;padding:0 3px 0 0;color:var(--grey);
  font-size:9.5px;letter-spacing:0;border-right:1px solid var(--kraft-line)}
.ymd span:last-child{border-right:0;padding-right:5px}

.btn{font-family:var(--sans);font-size:12px;letter-spacing:.1em;border:1.5px solid var(--edge);
  background:var(--rice-lt);color:var(--ink-soft);padding:7px 15px;cursor:pointer;transition:.16s}
.btn:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.go{background:var(--seal);border-color:var(--seal);color:var(--onSeal);font-weight:700}
.btn.ind{background:var(--indigo);border-color:var(--indigo);color:var(--onInd);font-weight:700}
.btn.sm{padding:4px 10px;font-size:11px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

.seal-stamp{width:88px;height:88px;border:3px solid var(--gold);border-radius:50%;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gold);
  gap:2px;transform:rotate(-7deg);animation:stampin .5s cubic-bezier(.2,1.4,.4,1)}
.seal-stamp b{font-size:16px;letter-spacing:.05em;line-height:1.15;text-align:center}
.seal-stamp .t{font-family:var(--sans);font-size:8px;letter-spacing:.18em}
@keyframes stampin{0%{transform:scale(1.9) rotate(-24deg);opacity:0}100%{transform:scale(1) rotate(-7deg);opacity:1}}

/* 對話框 */
.modal-bg{position:fixed;inset:0;background:rgba(20,16,8,.62);z-index:90;display:flex;
  align-items:flex-start;justify-content:center;padding:26px 14px;overflow-y:auto}
/*
 * 對話框內容比畫面高時要自己捲，不能溢出去。
 * 開發票那張表加上統編、載具、金額之後就超過一個螢幕了。
 */
.modal{background:var(--card);border:2px solid var(--edge);box-shadow:0 6px 0 rgba(0,0,0,.3);
  width:100%;max-width:620px;padding:22px 24px;animation:fadein .24s ease;
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain}
/* 表格本身也不能把對話框撐寬。橫向一律不給溢出，寧可折行 */
.modal{overflow-x:hidden}
.modal table.spec{table-layout:fixed;width:100%}
.modal table.spec td{word-break:break-word;overflow-wrap:anywhere}
.modal input,.modal select,.modal textarea{max-width:100%;box-sizing:border-box}

/* 提醒區塊。不放在表格列裡，那會被固定欄寬綁住而撐破外框 */
.warnbox{border:1.5px solid var(--seal);padding:9px 12px;margin-top:10px;line-height:1.8}
.modal h3{margin:0 0 4px;font-size:17px;font-weight:900;letter-spacing:.1em}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);
  background:var(--gold);color:var(--onInd);padding:8px 22px;font-family:var(--sans);font-weight:700;
  font-size:12.5px;letter-spacing:.12em;border:2px solid var(--edge);box-shadow:var(--shadow);
  z-index:120;transition:transform .28s cubic-bezier(.2,1.4,.4,1);max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--seal);color:var(--onSeal)}

/* 圖表 */
.bars{display:flex;align-items:flex-end;gap:5px;height:170px;padding-top:8px}
.bars .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:4px;height:100%}
.bar-stack{width:100%;display:flex;gap:2px;align-items:flex-end;flex:1}
.bars .bar{flex:1;background:var(--indigo);min-height:2px;transition:height .5s cubic-bezier(.2,.9,.3,1)}
.bars .bar.cost{background:var(--seal);opacity:.8}
.bars .lbl{font-family:var(--sans);font-size:10px;color:var(--grey)}

.login-wrap{max-width:380px;margin:14vh auto;padding:0 18px}
footer .foot-in{background:var(--bar);color:var(--onBar);opacity:.9;padding:20px;text-align:center;
  font-family:var(--sans);font-size:11px;letter-spacing:.14em}

/* ── 手機 ── */
@media(max-width:640px){
  .wrap{padding:16px 14px 70px}
  h1{font-size:20px;letter-spacing:.1em}
  /* 標題跟按鈕不要擠在同一行，會把標題壓到換行 */
  .pagehead{flex-direction:column;align-items:stretch;gap:10px}
  .pagehead .acts{margin:0}
  .pagehead .acts .btn{flex:1;text-align:center}

  /* flex 換行後邊框會落在半空中，手機改用固定兩欄的格線 */
  .monthbar{display:grid;grid-template-columns:1fr 1fr}
  .monthbar > div{min-width:0;padding:10px 13px;
    border-right:2px solid var(--edge);border-bottom:2px solid var(--edge)}
  .monthbar > div:nth-child(2n){border-right:0}
  .monthbar > div:nth-last-child(-n+2){border-bottom:0}
  .monthbar .v{font-size:19px}

  .tabs button{min-width:0;flex:1 0 33%;font-size:11px;padding:8px 2px}
  .pane{padding:16px 15px}
  .pname{font-size:19px}
  .phead{gap:10px}
  .seal-stamp{width:72px;height:72px}
  .seal-stamp b{font-size:13px}
  .bars{height:130px}
  table.spec{font-size:12.5px}
  table.spec td{padding:7px 9px}
  .inp{width:88px}
  .ymd .y{width:48px} .ymd .m,.ymd .d{width:34px}
  .modal{padding:18px 16px}
}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ── 脈絡卡 ── */
/* 錢／人／時間三行。左邊那一格是標籤，用直排的字當視覺錨點 */
.ctx3{width:100%;border-collapse:collapse;margin-top:4px}
.ctx3 td{padding:12px 0;border-bottom:1px dashed var(--kraft-line);vertical-align:top}
.ctx3 tr:last-child td{border-bottom:0}
.ctx3 .k{width:52px;font-family:var(--sans);font-size:11px;letter-spacing:.3em;
  color:var(--grey);padding-top:14px}

.pills{display:flex;gap:5px;flex-wrap:wrap}
.ctx-pill{font-family:var(--sans);font-size:11px;letter-spacing:.04em;padding:3px 8px;
  border:1.5px solid var(--kraft-line);color:var(--grey);white-space:nowrap}
.ctx-pill.ind{border-color:var(--indigo);color:var(--indigo)}
.ctx-pill.seal-c{border-color:var(--seal);color:var(--seal)}
.ctx-pill.gold-c{border-color:var(--gold);color:var(--gold)}

/* 對方最後說的那句話。引號與內縮，一眼看得出是引用不是我們的字 */
.lastmsg{margin-top:7px;padding:7px 11px;border-left:3px solid var(--kraft-line);
  background:var(--rice-lt);font-size:12.5px;color:var(--ink-soft);line-height:1.7}
.lastmsg::before{content:'「';color:var(--grey)}
.lastmsg::after{content:'」';color:var(--grey)}

.ctx-list{margin:0 0 4px;padding-left:20px;font-size:13.5px;line-height:2}
.ctx-list li{margin-bottom:2px}
.ctx-list.open li{color:var(--seal)}
.ink{color:var(--ink)}
.gold-c{color:var(--gold)}

/* 承諾底下的原句。看得到出處才敢照著做 */
.quote{font-size:12px;color:var(--ink-soft);line-height:1.7;margin:3px 0 6px;
  padding-left:9px;border-left:2px solid var(--kraft-line)}
.quote::before{content:'「';color:var(--grey)}
.quote::after{content:'」';color:var(--grey)}
.noquote{font-family:var(--sans);font-size:10px;letter-spacing:.08em;color:var(--seal);
  border:1px solid var(--seal);padding:0 5px;margin-left:6px}

/* ── toast 的復原鈕 ── */
.toast-undo{margin-left:14px;background:transparent;border:1.5px solid currentColor;
  color:inherit;font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
  padding:3px 11px;cursor:pointer}
.toast-undo:hover{background:rgba(255,255,255,.14)}

/* ── 命令面板 ⌘K ── */
/* 蓋在畫面上方三分之一處，眼睛不用往下找 */
.palette-bg{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:80;
  display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;
  animation:fade .12s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.palette{width:100%;max-width:560px;background:var(--card);border:2px solid var(--edge);
  box-shadow:0 12px 0 rgba(0,0,0,.16);animation:pop .14s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{transform:translateY(-8px);opacity:.6}to{transform:none;opacity:1}}
.palette input{border:0;border-bottom:2px solid var(--edge);background:transparent;
  font-size:16px;padding:15px 18px;font-family:var(--serif)}
.palette input:focus{outline:none}
.palette-res{max-height:46vh;overflow-y:auto}
.palette-row{display:flex;align-items:center;gap:10px;padding:9px 18px;cursor:pointer;
  border-bottom:1px dashed var(--kraft-line);font-size:13.5px}
.palette-row:last-child{border-bottom:0}
.palette-row.on{background:var(--sel)}
.palette-dot{color:var(--grey);font-family:var(--sans)}
.palette-empty{padding:22px 18px;text-align:center;color:var(--grey);font-size:13px}
.palette-foot{padding:8px 18px;border-top:2px solid var(--edge);background:var(--rice-lt);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;color:var(--grey)}
@media(max-width:560px){.palette-bg{padding-top:6vh}.palette-foot{display:none}}

/*
 * 支出表格的欄寬。
 * 日期是固定長度的東西，給它剛好的寬度就好；
 * 省下來的空間留給項目，那是唯一長度不固定、也最需要看清楚的欄。
 */
.costtable{table-layout:fixed}
.costtable .c-date{width:146px}
.costtable .c-cat{width:126px}
.costtable .c-proj{width:98px}
.costtable .c-amt{width:104px}
.costtable .c-del{width:44px}
.costtable td{overflow:hidden;text-overflow:ellipsis}
.costtable .inp{width:100%}
@media(max-width:820px){
  .costtable .c-cat{width:104px}
  .costtable .c-proj{display:none}
  .costtable .c-proj-td{display:none}
}

/* 上一步。沒有東西可以復原時就淡掉，不要讓人按了沒反應 */
#undo:disabled{opacity:.35;cursor:default}

/* ═══════════════════════════════ 信箱 ═══════════════════════════════ */

/*
 * 被收起來的類別，聚合成一排。
 *
 * 不是完全不顯示 —— 你要看得到「今天被藏起來的是哪幾類、各幾封」，
 * 才會發現規則出錯把重要的東西藏了。這一排就是那道保險。
 */
.mail-buried{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin:16px 0 18px;padding:11px 14px;background:var(--rice-lt);
  border:1.5px solid var(--kraft-line)}
.mail-buried .chip-n{font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;
  border:1.5px solid var(--edge);padding:3px 9px;background:var(--card);
  color:var(--ink-soft);white-space:nowrap}
.mail-buried .chip-n b{color:var(--seal);font-variant-numeric:tabular-nums;margin-right:4px}

.mail-sec{margin:0 0 20px}
.mail-head{display:flex;align-items:baseline;gap:9px;padding:0 2px 9px;
  border-bottom:1.5px solid var(--kraft-line);margin-bottom:9px}
.mail-head b{font-size:14px;letter-spacing:.12em;font-weight:900}
.mail-head em{font-style:normal;color:var(--seal);font-size:12.5px;
  font-variant-numeric:tabular-nums}

/*
 * C1 版面：主旨當標題。
 *
 * 主旨是要判斷的東西，給它最大的字和整行寬度；
 * 寄件者、信箱、時間壓成底下一行灰字，看得到就好。
 * 邊框和陰影沿用 .card 的語言，不要在同一個系統裡出現第二種卡片樣式。
 */
.mail-card{background:var(--card);border:2px solid var(--edge);
  box-shadow:var(--shadow);padding:13px 15px;margin:0 0 8px}
.mail-s{font-size:16px;line-height:1.45;color:var(--ink);
  overflow-wrap:anywhere;margin-bottom:6px}
.mail-p{font-size:12px;line-height:1.55;color:var(--ink-soft);margin:0 0 9px;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.mail-m{font-family:var(--sans);font-size:11px;color:var(--grey);
  display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.mail-m .who{color:var(--ink-soft)}
.mail-m .dot{opacity:.45}
.mail-m .due{color:var(--seal)}
.mail-m .mail-ok{margin-left:auto}

/* 未讀：左邊一道印泥紅、主旨加粗。不用特別找 */
.mail-card.un{box-shadow:inset 4px 0 0 var(--seal),var(--shadow)}
.mail-card.un .mail-s{font-weight:700}


/* ── 嵌入其他站台 ────────────────────────────── */
/*
 * 外框要吃掉整個可視高度，不然裡面的網站會出現「框裡再一條捲軸」，
 * 手機上那個雙層捲動幾乎沒辦法用。
 * 100dvh 而不是 100vh —— 手機瀏覽器的網址列會伸縮，vh 算的是最大高度，
 * 結果底部永遠被切掉一截。
 */
.embed-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  border:2px solid var(--edge);background:var(--card);padding:9px 12px;margin-bottom:9px}
.embed-bar .embed-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40ch}
.embed-bar a.btn{text-decoration:none;display:inline-flex;align-items:center}
.embed-warn{border:2px solid var(--seal);background:var(--rice-lt);color:var(--ink);
  padding:11px 13px;margin-bottom:9px;font-family:var(--sans);font-size:12.5px;line-height:1.7}
/*
 * 縮放的做法：外框固定高度、內層 iframe 反向放大再整個縮回去。
 *
 * 不能直接對 iframe 下 scale 就好 —— 那只會把畫面縮小，
 * 右邊和下面會空出一大塊，等於白縮。
 * 要讓 iframe 自己先變成 1/z 那麼大（縮 80% 就先撐到 125%），
 * 再 scale 回來，才會剛好填滿而且看到更多內容。
 *
 * transform-origin 一定要 0 0，預設是正中央，縮完會往中間跑掉一半。
 */
.embed-wrap{height:calc(100dvh - 210px);min-height:420px;overflow:hidden;
  border:2px solid var(--edge);background:var(--card)}
.embed-frame{width:calc(100% / var(--z,1));height:calc(100% / var(--z,1));
  transform:scale(var(--z,1));transform-origin:0 0;border:0;display:block}
.embed-zoom button{padding:4px 7px;font-size:11px}
@media (max-width:700px){
  .embed-bar .embed-url{display:none}
  .embed-wrap{height:calc(100dvh - 250px)}
}