/* ===== Wallet 頁面專屬（尚未從本檔分出去，見檔頭說明）===== */
.mini{display:flex;flex-direction:column;justify-content:center;gap:12px}
.mini .mrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mini .mrow .lab{font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.mini .mrow .lab i{width:9px;height:9px;border-radius:3px;flex:none}
.mini .mrow .val{font-size:19px;font-weight:700}
.mini .mrow .val.pos{color:var(--ink)} .mini .mrow .val.neg{color:var(--neg)}
.mini .sep{height:1px;background:var(--line)}
.bal a.warn{cursor:pointer;text-decoration:none}
.bal a.warn:hover{filter:brightness(.97)}
.gomore{margin-left:auto;font-weight:700;text-decoration:underline}
.ealert{display:flex;align-items:center;gap:8px;background:var(--danger-surface);color:var(--danger);border-radius:var(--r-sm);padding:12px 16px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.ealert .ico{font-size:18px}
.ealert b{font-weight:800}
.ealert .gomore{color:var(--danger)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-bottom:24px}
@media(max-width:1000px){.metric-grid{grid-template-columns:repeat(2,1fr)}}
/* 餘額四卡直接用總覽現成 .card.kpi / .card-t / .big / .sub；以下為餘額卡內的間距/字級微調 */
.metric-grid .card-h{margin-bottom:0}
.metric-grid .big{margin:8px 0 0}
/* 小字貼齊卡片底部，折成兩行時往上長；間距因此走 padding-top，margin-top 會被 auto 蓋掉 */
.metric-grid .card.kpi{display:flex;flex-direction:column}
.metric-grid .sub{font-size:12px;margin-top:auto;padding-top:16px;color:var(--muted)}
.metric-grid .sub:empty{display:none}
.metric-grid .sub.danger{color:var(--danger);font-weight:500}

/* 兩欄：左＝篩選（自行換行），右＝匯出。
   ⚠️ 匯出必須是 .ltoolbar 的直接子元素；放進 .lt-right 會跟著換行、落單靠右。 */
.ltoolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;margin-bottom:16px}
.lt-title{font-size:15px;font-weight:700;margin-bottom:12px}
.lt-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}

.search-box{height:36px;padding:0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--control-line);border-radius:var(--r-ctl);background:#fff}
.search-box .ico{font-size:14px;color:var(--muted)}
.search-box input{border:none;outline:none;font:inherit;font-size:13px;font-weight:400;background:none;width:140px;color:var(--ink)}
.tbtn{height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--control-line);background:#fff;border-radius:var(--r-ctl);font-size:13px;font-weight:400;color:var(--ink)}
.tbtn .ico{font-size:14px;color:var(--muted)}
.tbtn select{border:none;background:none;font:inherit;font-size:13px;font-weight:400;color:var(--ink);outline:none;cursor:pointer}
.lt-div{width:1px;align-self:center;height:22px;background:var(--line);margin:0 3px;flex:none}


.lt-reset{font-size:13px;margin-left:8px}
.lt-action{min-height:36px}

/* 起訖日期＝一個控制項。外層 .date-range 承載框線與高度，內層兩個 input 是裸的，
   與 .search-box / .tbtn / .amtbox 同一種結構。
   ⚠️ 不自製 date range picker：原生 input[type=date] 的日曆彈窗、鍵盤操作與
   地區格式都是瀏覽器提供且可靠的，自製要重寫這些、投入大又容易出錯。
   這裡只解決「看起來像兩個沒關係的欄位」的問題。 */
.date-range{
  height:36px;
  padding:0 12px;
  border:1px solid var(--control-line);
  border-radius:var(--r-ctl);
  background:#fff;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.date-range > .ico{font-size:14px;color:var(--muted);flex:none}
.date-range-sep{color:var(--muted);font-size:13px;flex:none}
/* 隱藏瀏覽器自己的小日曆圖示 —— 我們已經在區間最前面放了一個，兩個會很吵。
   點擊開啟日曆改由 app.js 呼叫 input.showPicker() 補回（見 app.js）。
   ⚠️ 不用「把 indicator 透明化並覆蓋整欄」那招：::-webkit-calendar-picker-indicator
   的樣式無法用 getComputedStyle 驗證，做了也不知道有沒有生效。 */

.date-filter{position:relative;display:inline-flex;align-items:center}

.date-ph{
  font-size:13px;
  color:var(--control-placeholder);
  white-space:nowrap;
  pointer-events:none;
}
.date-filter input:not(.has-value){
  position:absolute;
  inset:0;
  width:100%;
  color:transparent;
}
.date-filter input.has-value ~ .date-ph{display:none}
.date-filter input::-webkit-calendar-picker-indicator{display:none}
.date-filter input{
  border:0;
  cursor:pointer;
  background:none;
  padding:0;
  font:inherit;
  font-size:13px;
  color:var(--ink);
  outline:none;
}


.search-box input::placeholder,
.field input::placeholder,
.amtbox input::placeholder{
  color:var(--control-placeholder);
}

.tbtn:has(select option[value=""]:checked) select{
  color:var(--control-placeholder);
}

.source-cell{display:flex;flex-direction:column;gap:4px}
.source-cell strong{font-size:14px;color:var(--ink);font-weight:700}
.source-cell small{font-size:12px;color:var(--muted);font-weight:500}

/* 分頁 footer */
.tfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.tfoot .cnt{font-size:13px;color:var(--muted)}
/* 分頁：/wallet 異動明細與 /orders 共用同一套（箭頭 + 動態頁碼）。
   頁碼由 app.js renderPagerNumbers 依總頁數插入，HTML 不寫死。 */
.pager{display:flex;align-items:center;gap:4px}
.pager-button{min-width:32px;height:32px;border:1px solid var(--control-line);background:#fff;border-radius:var(--r-icon);font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);padding:0 8px;cursor:pointer}
.pager-button:hover{background:var(--bg)}
.pager-button[aria-current="page"]{background:var(--bar);color:#fff;border-color:var(--bar)}
.pager-button[aria-current="page"]:hover{background:var(--bar)}
/* 停用的箭頭要看得出來不能點，否則使用者會一直戳 */
.pager-button:disabled{color:var(--bar-dim);border-color:var(--line);background:#fff}
.pager-button:disabled:hover{background:#fff}
/* 頁數多時的省略號，非按鈕、不可點 */
.pager-gap{min-width:20px;text-align:center;font-size:13px;font-weight:600;color:var(--muted);user-select:none}
/* 窄螢幕工具列（三張表共用，不要複製到單頁 CSS）：≤640 篩選兩欄，≤480 整排單欄。 */
@media(max-width:640px){
  .metric-grid{grid-template-columns:1fr}
  .search-box input{width:100%}
  /* grid 容器是 .lt-right 不是 .ltoolbar：控制項是它的子元素 */
  .ltoolbar .lt-right{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .ltoolbar .search-box,.ltoolbar .date-range,.ltoolbar .lt-reset{grid-column:1/-1}
  .ltoolbar .search-box{flex:none;max-width:none}
  .ltoolbar .lt-reset{justify-self:start;margin-left:0}
  /* min-width:0 讓格子能收窄到比 select 最長選項還小，否則 select 撐破版 */
  .ltoolbar .tbtn{width:auto;min-width:0;justify-content:flex-start}
  .ltoolbar .tbtn select{flex:1;min-width:0}
  .ltoolbar .search-box,.ltoolbar .tbtn,.ltoolbar .date-range{height:40px}
  /* ⚠️ 用 min-height：.btn 自帶 min-height，寫 height 會被夾住而失效 */
  .ltoolbar .lt-action{min-height:40px}
}
@media(max-width:480px){
  .ltoolbar{grid-template-columns:1fr}
  .ltoolbar .lt-right{grid-template-columns:1fr}
  .ltoolbar .lt-action{justify-content:center}
}
/* 分頁 */
.wtabs{display:inline-flex;gap:4px;margin:0 0 22px;background:#fff;padding:4px;border-radius:30px}
.wtab{font-size:14px;font-weight:600;color:var(--muted);padding:9px 18px;border:0;border-radius:30px;line-height:1;white-space:nowrap}
.wtab:hover{color:var(--ink)}
.wtab[aria-selected="true"]{background:var(--bar);color:#fff;font-weight:700}
.wpanel[hidden]{display:none}
/* 表格 */

.wtable{width:100%;border-collapse:collapse;font-size:13px}
.wtable th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.wtable th.num{text-align:right}
.wtable td{padding:18px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle;font-size:14px}

.wtable th,.wtable td{padding-left:12px;padding-right:12px}
.wtable th:first-child,.wtable td:first-child{padding-left:0}
.wtable th:last-child,.wtable td:last-child{padding-right:0}

.daycell{display:inline-flex;align-items:center;gap:4px}
.exp-tag{background:var(--danger-surface);color:var(--danger);border-radius:4px;padding:2px 4px;font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap}
.submuted{color:var(--muted);font-weight:400}
.head-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap}
.wtable tbody tr:last-child td{border-bottom:none}
.wtable td.num{text-align:right}

.wtable .pos{color:var(--ink);font-weight:700}
.wtable .neg{color:var(--neg);font-weight:700}
.wtable .item b{color:var(--ink);font-weight:600;display:block}
.wtable .item small{color:var(--muted);font-size:12px}
.contpay{display:inline-block;margin-top:5px;background:var(--bar);color:#fff;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700}
/* 底線只畫在號碼上：畫在 <a> 上會連尾端的 .ext 箭頭一起劃線，
   而箭頭是「開新分頁」的指示符號，不是連結文字的一部分。 */
.invlink{color:var(--ink);font-weight:600;text-decoration:none}
.invlink .invno{text-decoration:underline;text-underline-offset:2px}
.invmuted{color:var(--muted)}
/* 類型 tag（異動） */

/* segmented + 累計條 */
.segrow{display:flex;gap:8px;margin-bottom:14px}
.seg{border:1px solid var(--control-line);background:#fff;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);padding:8px 15px;border-radius:20px}
.seg.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.cumrow{display:flex;gap:26px;flex-wrap:wrap}
.cumrow .c{display:flex;flex-direction:column;gap:2px}
.cumrow .c span{font-size:12px;color:var(--muted)}
.cumrow .c b{font-size:18px;font-weight:700}
.subhint{color:var(--muted);font-size:12px;margin-bottom:14px}

/* 可用額度：頁首右側純文字（不做卡片），選方案時的參考值；明細請切「我的額度」分頁 */
.head-bal{text-align:right;flex:none}
.head-bal .hb-top{display:flex;align-items:baseline;justify-content:flex-end;gap:8px}
.head-bal .hb-l{font-size:13px;color:var(--muted);font-weight:600}
.head-bal .hb-v{font-size:22px;font-weight:700;line-height:1}
.head-bal .hb-v i{font-style:normal;font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
/* 區塊標題：標題與說明一律上下排列 */
.sec-h{display:flex;flex-direction:column;gap:4px;margin:0 0 12px}
.sec-h h2{font-size:16px;font-weight:700}
.sec-h span{font-size:13px;color:var(--muted);font-weight:500}
.plan-grid + .sec-h{margin-top:32px}

.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.plan-card{background:var(--card);border-radius:var(--r);padding:var(--pad);display:flex;flex-direction:column;position:relative}
.plan-card .ptop{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:24px}
/* 名稱可壓縮、標籤群固定寬：卡頭排不下時換行的是方案名，標籤群永遠在卡頭右上。
   align-items 用 baseline 不用 center／flex-start —— 方案名一行時要與標籤看起來同一條線，
   換成兩行時標籤要留在第一行旁邊，不能跟著掉到兩行的視覺中線。 */
.plan-card .pname{font-size:14px;font-weight:700;min-width:0}
.plan-card .ptags{display:flex;align-items:center;gap:6px;flex:none}

.ptag{display:inline-flex;align-items:center;padding:4px 10px;line-height:1.4;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--neutral-100);color:var(--ink-2)}

.ptag-recommend{background:var(--green-50);color:var(--green-700)}

.plan-card .ptot{font-size:14px;font-weight:700;line-height:1.45;margin-top:8px}
.plan-card .pnum{font-size:36px;font-weight:700;line-height:1}
.plan-card .ptot .u{font-size:14px;font-weight:600;color:var(--muted)}
/* 每點單價緊貼總點數作換算註記 */
.plan-card .prate{font-size:12px;font-weight:500;color:var(--muted);margin-left:6px;white-space:nowrap;display:inline-block}

.plan-card .pbreak{margin-top:24px;flex:1 1 auto}
/* 沒有贈送列時，組成表收成單獨一行效期，不撐到卡片中段。
   間距與大數字同為 8px：效期是那個數字的屬性，分組交給下方分隔線做。 */
.plan-card .pbreak:has(>.pvalid){margin-top:8px}
.plan-card .pvalid{font-size:13px;color:var(--muted);font-weight:500}
.plan-card .prow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:8px}
.plan-card .prow.total{margin-bottom:16px}
.plan-card .plab{font-size:13px;color:var(--muted);font-weight:500}
.plan-card .pval{font-weight:700;color:var(--ink-2)}
.plan-card .pval.gift{color:var(--pos)}
.plan-card .pval.none{color:var(--muted);font-weight:600}
.plan-card .psep{height:1px;background:var(--line);margin:14px 0}
.plan-card .ppay{font-size:20px;font-weight:700;line-height:1}

.plan-card .btn{width:100%}

/* 全寬橫條：左狀態、右按鈕 */
.wide-bar{background:var(--card);border-radius:var(--r-sm);padding:16px var(--pad);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.wide-bar + .sec-h{margin-top:32px}
.plan-grid + .buy-bar{margin-top:var(--gap)}
.wide-bar .wb-main{flex:1;min-width:260px}
.wide-bar .wb-title{display:flex;align-items:center;gap:8px;min-height:24px}
.wide-bar h3{font-size:15px;font-weight:700}
.wide-bar .wb-desc{font-size:13px;color:var(--muted);font-weight:500;margin-top:6px}
.wide-bar .wb-desc b{color:var(--ink-2);font-weight:700}
.wide-bar .btn{flex:none}

.token-purchase{scroll-margin-top:18px}
.plan-grid.entry-focus{outline:2px solid var(--brand-text);outline-offset:8px;border-radius:var(--r)}
.plan-card.entry-preselected{outline:2px solid var(--brand-text)}
/* 改 flex 是為了容納 tone 圖示（目前只有 warning 有，由 app.js applyFormMessage 插入）。
   ⚠️ flex-start 而非 center：第五則警告會換行，置中會讓圖示掉到兩行之間。
   ⚠️ 下面的 [hidden] 靠的是屬性選擇器權重高於這條，順序無關，不要為了「蓋掉 flex」把它往後搬。 */
.form-message{display:flex;align-items:flex-start;gap:8px;margin:var(--gap) 0 0;padding:11px 14px;border-radius:12px;background:var(--bg);color:var(--ink-2);font-size:13px;line-height:1.5}
/* 圖示比 13px 內文大一階、不隨文字縮，margin-top 是對齊第一行文字的視覺基線 */
.form-message .ico{font-size:16px;flex:none;margin-top:1px}
/* 購買訊息由 app.js 動態插在 .plan-grid **前面**，是整區的回饋、不是第 4 張方案卡。
   通用 .form-message 的 margin 是「接在表單後面」的上留白；這裡位置反過來，
   改成只留下留白，與方案卡之間走同一個 --gap。 */
.token-purchase-message{margin:0 0 var(--gap)}
.form-message[hidden]{display:none}
.form-message[data-tone="loading"]{background:var(--bg);color:var(--ink-2)}
.form-message[data-tone="success"]{background:var(--brand-surface);color:var(--brand-text)}

.form-message[data-tone="warning"]{background:var(--danger-surface);color:var(--danger)}
.fnote{color:var(--muted);font-size:12px;margin:10px 0 0}
/* 表單欄位（沿用 .field 基礎，擴充 plans 用途） */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field[hidden]{display:none}
.field label{font-size:13px;color:var(--ink-2);font-weight:600}
.field input,.field select{height:36px;padding:0 12px;font:inherit;font-size:14px;border:1px solid var(--control-line);border-radius:var(--r-ctl);background:#fff;color:var(--ink)}
/* 原生 select 收回外觀自畫箭頭，讓 padding/高度/文字左緣與 input 一致 */
.field select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%238b9298' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.field select option:disabled{color:var(--muted)}
.field .fhint{font-size:12px;color:var(--muted);font-weight:500}
/* 自訂加值額度的即時贈送回饋，接在 fhint 下方 */
.field .fgift{font-size:12px;font-weight:700;color:var(--pos)}
.field .fgift.none{color:var(--muted);font-weight:500}

.field .fgift.err{color:var(--danger);font-weight:400;margin-top:-2px}
.field .ferr{font-size:12px;font-weight:400;color:var(--danger);margin-top:-2px}
.ferr{font-size:12px;font-weight:400;color:var(--danger)}
.ferr[hidden]{display:none}
/* 訊息槽掛在整組（.frow）下面、跨兩欄的版本：用於「一個輸入決定另一個唯讀值」的欄位對
   （目前是捐贈發票的愛心碼＋捐贈機構）。右欄唯讀、不會有自己的訊息，硬塞在單欄底下只會
   讓左右高度不齊。
   順序是「常駐說明在上、錯誤在下」，與本檔其他欄位（手機條碼、買受人地址、自動加值）
   一致：說明的位置不會因為冒出錯誤而位移。
   ⚠️ 要帶 :not([hidden])，否則這條的特異度會蓋掉 `.ferr[hidden]{display:none}`，
   讓沒訊息時也長出一個空行。 */
.frow + .fhint + .ferr:not([hidden]){display:block;margin-top:4px;margin-bottom:14px}
.frow + .fhint:has(+ .ferr:not([hidden])){margin-bottom:4px}
/* 進行中狀態（查詢受贈機構中）借用同一個槽，但它不是「使用者打錯」：降成說明色，
   也不連帶把輸入框變紅——紅框留給真的輸入錯誤。 */
.ferr[data-tone="muted"]{color:var(--muted);font-weight:500}
/* 唯讀欄位（目前是捐贈發票的受贈機構）：值由後端／provider 帶入，不是使用者填的。
   底色／文字色刻意與 account.css 的 `.form input[readonly]`（/account 的會員信箱）
   同一套 —— 同一件事不要兩種長相。框線 token 兩邊各自回自己系統的預設。 */
.field input[readonly]{background:var(--bg);color:var(--muted);cursor:default;caret-color:transparent}
/* 唯讀＝沒有可編輯的東西，就不該有「我正在編輯這格」的收尾樣式。
   點下去不變框線、不出游標；值仍可選取複製，也仍留在 tab 順序裡讓螢幕閱讀器讀得到。
   靠 [readonly] 多一階特異度蓋掉下面焦點區塊的 `.field input:focus`，與擺放順序無關。 */
.field input[readonly]:focus{border-color:var(--control-line);outline:none}
.field.err input,.field.err select,.field.err .amtbox{border-color:var(--danger)}
.field .btn-text{align-self:flex-start;margin-top:2px}
/* 綁卡完成後留在彈窗內的回饋（setStatus 寫的頁尾狀態列被遮罩蓋住，看不到） */
.field .pmhint{font-size:12px;font-weight:600;color:var(--muted);line-height:1.6;margin-top:2px}
/* 白底上的成功文字走 --pos，不是 --brand-text —— 後者是配淺綠底的深階（見 tokens.css）。 */
.field .pmhint[data-tone="success"]{color:var(--pos)}
.field .pmhint[hidden]{display:none}
/* 標籤列：左標籤、右補充（價格換算只講一次） */
.field.lbl-row{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.field .lbl-hint{font-size:12px;color:var(--muted);font-weight:500}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* 兩欄共用一句說明時（例如捐贈發票的愛心碼＋機構名稱），說明掛在 .frow 外面、是 .field 的
   兄弟而不是子元素，因此吃不到 .field 內 label/input/hint 的 6px gap，中間卡的是 .field
   自己的 14px 下留白 —— 同一句說明只因為服務兩個欄位就離輸入框遠一倍多。
   收掉那 14px、由說明自己補 6px，欄位群與下一段的距離改由說明的 margin-bottom 維持 14px。
   ⚠️ 需要 display:block —— .fhint 是 <span>，在 .field 裡是 flex item 才表現得像區塊，
   移到 .frow 外面後是行內元素，上下 margin 不會生效。 */
.frow:has(+ .fhint) .field{margin-bottom:0}
.frow + .fhint{display:block;margin-top:6px;margin-bottom:14px}
/* 自訂購買彈窗：快捷 chip + 標籤外置輸入 + 試算 */
.qrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.qchip{border:1px solid var(--control-line);background:#fff;border-radius:20px;height:32px;padding:0 14px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2)}
.qchip:hover{background:var(--bg)}
.qchip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.amt-field{margin-bottom:0}
.amtbox{height:36px;padding:0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--control-line);border-radius:var(--r-ctl);background:#fff}
.amtbox input{flex:1;min-width:0;border:none;outline:none;padding:0;font:inherit;font-size:16px;font-weight:700;color:var(--ink);text-align:right;background:none}
.amtbox .suf{font-size:13px;color:var(--muted);font-weight:600;flex:none}
/* 試算：與輸入以間距區隔，不用分隔線 */
.calc{margin-top:22px;display:flex;flex-direction:column}
.calc .crow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:11px}
.calc .crow span{color:var(--muted);font-weight:500}
.calc .crow b{font-weight:700}
.calc .crow b.gift{color:var(--pos)}
.calc .csep{height:1px;background:var(--line);margin:4px 0 14px}
/* 付款金額與標籤同一行、數字靠右 */
.calc .ctotal{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.calc .ctotal span{font-size:13px;font-weight:600;color:var(--ink-2)}
.calc .ctotal b{font-size:26px;font-weight:700;line-height:1}
.calc .cnote{font-size:12px;color:var(--muted);margin-top:10px}
/* 彈窗 */
.modal-scrim{position:fixed;inset:0;background:rgba(16,19,22,.5);display:none;align-items:center;justify-content:center;padding:24px;z-index:80}
.modal-scrim.open{display:flex}
/* app.js 的 showDetail() 用 hidden 屬性 + body.has-detail 控制開關（不是 .open），
   /payment 的動態彈窗走這條；[hidden] 需明確覆寫，否則 display:flex 會蓋掉它。 */
.modal-scrim[data-detail-panel]{display:none}
body.has-detail .modal-scrim[data-detail-panel]{display:flex}
.modal-scrim[data-detail-panel][hidden]{display:none}
.modal{background:var(--card);border-radius:var(--r);padding:var(--pad-overlay);width:min(560px,100%);max-height:90vh;overflow-y:auto}

.modal:has(.modal-body){display:flex;flex-direction:column;overflow:hidden;padding:0}
.modal:has(.modal-body) > .mstep:not([hidden]){display:flex;flex-direction:column;min-height:0;flex:1}
.modal:has(.modal-body) form:has(> .modal-body){display:flex;flex-direction:column;min-height:0;flex:1}
/* 內距改掛在三個區塊自己身上，.modal 不再留 padding：捲動區要滿寬到卡片內緣，
   捲軸才會像一般彈窗那樣貼著邊，而不是浮在內容旁邊、離卡片邊緣一個內距。 */
.modal:has(.modal-body) .modal-h{padding:var(--pad-overlay) var(--pad-overlay) 0;margin-bottom:0}
.modal-body{flex:1;min-height:0;overflow-y:auto;padding:18px var(--pad-overlay)}

.modal:has(.modal-body) .modal-f{position:static;margin:0;padding:16px var(--pad-overlay)}
.modal-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
/* 標題列三個元件高度不同（返回鍵 36、標題 28、關閉鍵 32），一律 flex-start 會讓三條中心線
   各自錯開，單行標題時看起來沒對齊。沒有副標時整列改 center。
   ⚠️ 有副標的彈窗維持 flex-start —— 置中會把關閉鍵拉到主標與副標中間，而不是與主標同一列。 */
.modal-h:not(:has(p)){align-items:center}

.modal-h h2{font-size:20px;font-weight:700}
.modal-h p{font-size:13px;color:var(--muted);font-weight:500;margin-top:5px}
.opt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.opt{border:1px solid var(--control-line);border-radius:var(--r-sm);padding:14px 10px;text-align:center;background:#fff}
.opt b{font-size:16px;font-weight:700;display:block}
.opt small{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-top:4px}
.opt small.gift{color:var(--pos)}
.opt[aria-pressed="true"]{border-color:var(--ink);border-width:2px;padding:13px 9px}
.opt:hover{background:var(--bg)}
.modal .msum{font-size:13px;background:var(--brand-surface);color:var(--brand-text);border-radius:12px;padding:12px 15px;margin:4px 0 18px}
.modal .msum b{font-weight:700}

.modal .msum.idle{background:var(--bg);color:var(--muted)}
/* 動作列一律靠右成組：次要動作（關閉／取消／返回）在左、主要動作在右，兩顆相鄰。
   ⚠️ 不要改回 space-between 把次鈕釘在最左 —— 左邊那格是留給「第三類動作」的
   （.mnote 說明文字、自動加值的「停用自動加值」），釘死次鈕就沒地方放它們。
   .mact 的 margin-left:auto 讓三種情形都成立：只有按鈕組 → 靠右；左側有東西 →
   左右分開；左側元素被 hidden（如未啟用時的停用鈕）→ 按鈕組仍留在右邊。
   按鈕依內容寬，不做滿寬。 */
.modal-f{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.modal-f .mnote{font-size:13px;color:var(--muted)}
.modal-f .mact{display:flex;gap:8px;margin-left:auto}

.modal-scrim .modal-f{
  position:sticky;bottom:calc(var(--pad-overlay) * -1);
  margin:18px calc(var(--pad-overlay) * -1) calc(var(--pad-overlay) * -1);
  padding:16px var(--pad-overlay);
  background:var(--card);border-top:1px solid var(--line);
  border-radius:0 0 var(--r) var(--r)}
/* 自動加值設定彈窗的兩個步驟：settings ↔ binding（新增付款方式）。
   同一個彈窗換頁，不是就地展開——綠界表單很高，疊在設定下方會讓彈窗
   長到必須一路捲動，兩組主要動作也會同時出現。 */
.mstep[hidden]{display:none}
/* 步驟切換動畫：只動「進場」那一步（滑入＋淡入），離場直接隱藏——
   兩步驟共用同一個捲動容器，要同時可見得再疊一層絕對定位，複雜度不成比例。
   方向有語意：往 binding 從右滑入（前進）、回 settings 從左滑入（返回）。
   動畫結束停在 transform:none（fill both 的 to 幀），不會殘留 transform
   影響綠界 SDK 的內部定位；reduced-motion 使用者則維持瞬間切換。 */
@media (prefers-reduced-motion: no-preference){
  .mstep[data-anim="forward"]{animation:mstep-in-right .24s ease both}
  .mstep[data-anim="back"]{animation:mstep-in-left .24s ease both}
}
@keyframes mstep-in-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes mstep-in-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
/* 步驟二的標題列多一顆返回鍵，讓使用者知道這是同一個彈窗的下一步 */
.mh-back{display:flex;align-items:flex-start;gap:6px;min-width:0}
.mh-back:not(:has(p)){align-items:center}
.binding-step-back{margin-left:-8px}

.dnote{font-size:13px;color:var(--ink-2);line-height:1.65;background:var(--bg);border-radius:12px;padding:13px 15px;margin-top:4px}
/* 綠＝安全，其餘＝灰：基底是中性的，只有安全／信任說明才掛 .is-secure。
   讓每個說明框都是綠，綠就從「安全」滑成「泛用提示」，也會跟主動作按鈕搶同一個顏色。 */
.dnote.is-secure{background:var(--green-50);color:var(--green-700)}
/* 綠界站內付表單自己帶樣式進來，我們只負責預留空間。
   ⚠️ 不可加 transform/overflow 等會建立新 containing block 的屬性，會影響第三方 SDK 內部定位。
   這裡是唯一一份定義：/wallet 的自動加值彈窗也會開綁卡，而 /wallet 不載 account.css，
   所以規則只能放在這支共用檔，不要再往 account.css 複製一份。
   沒有 margin-top：與上方說明框的距離由綠界外層 .ecpay-MAIN-CONTENT 的 padding-top 給，
   再加 margin 會變成兩段留白相疊。
   min-height 只在表單掛載前佔位，避免載入完成時彈窗跳一大格；SDK 一把內容塞進來
   :empty 就不再成立，容器改由實際內容決定高度，底部不會留下多餘空白。 */
.ecpay-binding-frame{width:100%}
.ecpay-binding-frame:empty{min-height:300px}
.ecpay-binding-status{font-size:13px;color:var(--muted);font-weight:500;margin-top:12px;line-height:1.6}
.ecpay-binding-status.is-error{color:var(--danger);font-weight:700}
/* 欄位旁已標紅時 app.js 會把這行清空（避免同一句話出現兩次），空的話連上方留白一起收掉 */
.ecpay-binding-status:empty{display:none}
/* 停用是破壞性動作的入口，使用全站 .btn-danger-ghost（淡底），且需再過確認彈窗。
   margin-right:auto 是給 390px 這種窄螢幕用的：底列 .modal-f 是 justify-content:flex-end，
   放不下而換行時，停用鈕會被推到右邊、和「儲存變更」擠成一組。auto margin 會吃掉整行剩餘
   空間，優先於 justify-content，讓它自己那行仍靠左，維持「左＝停用／右＝存檔」的分組。 */
[data-open-cancel]{margin-right:auto}
[data-open-cancel][hidden]{display:none}
/* 停用確認彈窗：比設定彈窗窄 */
.modal.confirm{width:min(420px,100%)}

.modal .confirm-text{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0}
.modal .confirm-text + .cursetting{margin-top:16px}
.modal.confirm .cursetting{background:var(--bg);border-radius:12px;padding:13px 15px;margin-bottom:20px}
.modal.confirm .cursetting span{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-bottom:4px}
.modal.confirm .cursetting b{font-size:13px;font-weight:600;color:var(--ink-2)}

@media(max-width:900px){.plan-grid{grid-template-columns:1fr}.sec-h{display:block}.sec-h span{display:block;margin-top:4px}.head-bal{text-align:left}}

@media(max-width:600px){.opt-grid{grid-template-columns:repeat(2,1fr)}.frow{grid-template-columns:1fr}}
@media(max-width:640px){
  .pricing-preview{grid-template-columns:1fr 1fr}
  /* 自訂額度：限制說明較長，改上下排列避免與金額互相穿插 */
  .fmeta{flex-direction:column;align-items:flex-start;gap:4px}

  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 欄位在窄螢幕不擠成一團；總寬超過容器時由 .tablewrap 捲動 */
  .wtable{min-width:640px}
  .wtable th,.wtable td{white-space:nowrap}
  /* 項目欄允許折行，否則長品名會把整表撐得過寬 */
  .wtable td.item,.wtable td[data-l="項目"]{white-space:normal;min-width:180px}
}

/* 列表空狀態（比照 /orders 的 .lempty；.lempty 樣式原只在 orders.css，此頁未載入故在此補上） */
.lempty{padding:64px 16px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.lempty[hidden]{display:none}
.lempty-ico{font-size:44px;color:var(--bar-dim)}
.lempty b{font-size:16px;font-weight:700}
.lempty span{font-size:13px;color:var(--muted);line-height:1.6;max-width:320px}
.lempty .btn{margin-top:10px}


.dscrim{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}
.drawer{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:100%;background:var(--card);z-index:71;display:flex;flex-direction:column;

  visibility:hidden;transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s .24s;
  box-shadow:-8px 0 34px rgba(0,0,0,.16)}
.drawer[hidden]{display:flex}
/* 開啟時 app.js 把焦點放在明細浮層的容器上（tabindex="-1"），它不是使用者可以 Tab 到的
   控制項，不該畫焦點框。/payment 的明細是 .modal-scrim，容器是裡面的 .modal。
   控制項自己的 :focus-visible 樣式不受影響。 */
.drawer:focus,.drawer:focus-visible,
[data-detail-panel]:focus,[data-detail-panel]:focus-visible,
[data-detail-panel] > .modal:focus,[data-detail-panel] > .modal:focus-visible{outline:none}
/* app.js 把內容塞進 [data-detail-content];display:contents 讓 dhead/dbody/dfoot 直接參與抽屜的 flex 版型 */
.drawer > [data-detail-content]{display:contents}
body.has-detail .dscrim{opacity:1;pointer-events:auto}
body.has-detail .drawer{visibility:visible;transform:translateX(0);transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s}
.dhead{padding:22px var(--pad-overlay) 18px;border-bottom:1px solid var(--line);position:relative;flex:none}
.dhead .eyebrow{font-size:12px;color:var(--muted);font-weight:600}
.dhead h2{font-size:20px;font-weight:700;margin-top:4px;padding-right:44px}
.drawer-close{position:absolute;top:20px;right:20px}
/* 內容捲動區：抽屜高度固定，只有這一段可捲 */
.dbody{flex:1;overflow-y:auto;padding:0 var(--pad-overlay) 8px}

.dempty{padding:56px 8px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.dempty-ico{font-size:40px;color:var(--bar-dim)}
.dempty b{font-size:15px;font-weight:700}
.dempty span{font-size:13px;color:var(--muted);line-height:1.6;max-width:280px}
.dempty .btn{margin-top:8px}


/* 綠界站內付表單（#ECPayPayment）的覆寫已抽到 assets/ecpay-form.css，與付款頁共用。 */



.search-box:focus-within,
.tbtn:focus-within,
.amtbox:focus-within,
.date-range:focus-within,
.field input:focus,
.field select:focus{
  border-color:var(--control-line-focus);
  outline:none;
}
/* 出錯的欄位聚焦時仍然是紅框。上面那條與 `.field.err input` 特異度相同、又寫在後面，
   會贏；被送回這一欄的人剛好就是最需要看到紅框的人，卻看不到。 */
.field.err input:focus,
.field.err select:focus{
  border-color:var(--danger);
}

/* （二）按鈕類：保留鍵盤焦點環 */
.seg:focus-visible,
.qchip:focus-visible,
.opt:focus-visible{
  outline:3px solid var(--brand-focus);
  outline-offset:2px;
}


.toast-host{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.toast{--toast-fs:13px;--toast-lh:1.5;display:flex;align-items:flex-start;gap:8px;width:min(360px,calc(100vw - 40px));background:var(--bar);color:#fff;border-radius:12px;padding:13px 16px;font-size:var(--toast-fs);font-weight:650;line-height:var(--toast-lh);box-shadow:0 12px 34px rgba(16,19,22,.2);transform:translateY(18px);opacity:0;transition:transform .2s ease,opacity .2s ease;pointer-events:auto}
.toast.show{transform:translateY(0);opacity:1}
/* 深底上只有 --danger 有專屬階（--danger-on-dark）；warning 深底沒有對應 token，
   因此三種狀態一律靠圖示形狀區分，不自創新的色彩語意。 */
/* 圖示與關閉鈕的高度＝一行文字的高度，內部各自置中：單行時看起來與文字垂直置中，
   換行時則對齊第一行，不會滑到整段的中間。高度綁在字級與行高上，改字級要一起看。 */
.toast .toast-ico,
.toast .toast-close{display:inline-flex;align-items:center;justify-content:center;height:calc(var(--toast-fs) * var(--toast-lh));flex:none}
.toast .toast-ico{font-size:16px}

.toast[data-tone="danger"] .toast-ico,
.toast[data-tone="danger"] .toast-msg{color:var(--danger-on-dark)}
.toast-msg{flex:1;min-width:0}
.toast-close{width:calc(var(--toast-fs) * var(--toast-lh));margin-right:-4px;padding:0;border:none;background:none;color:#fff;opacity:.7;font-size:16px;cursor:pointer;border-radius:6px}
.toast-close:hover{opacity:1}
.toast-close:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1}

@media (max-width:480px){
  .toast-host{right:16px;left:16px;bottom:16px;align-items:stretch}
  .toast{width:auto}
}

@media (prefers-reduced-motion:reduce){
  .toast{transition:none}
}