/* 字型與 design token 已抽到 tokens.css，需在本檔之前載入。 */

*{box-sizing:border-box;margin:0;padding:0;letter-spacing:normal}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.4}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}



.btn,
.btn-text,
.btn-icon,
.choice{
  font:inherit;
  font-weight:700;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.btn,
.btn-text,
.btn-icon,
.choice,
.pager-button,
.acct-btn,
.acct-menu a,
.nav a,
.pm-menu button,
.lt-reset,
.qchip,
/* 趨勢圖長條不是控制項，但它 hover 會換色，一樣不能瞬間跳；
   借用同一組轉場，「hover 換色要有轉場」在全站只有一個定義。 */
.bars .b{
  transition:
    background-color var(--motion-control-duration) var(--motion-control-ease),
    color var(--motion-control-duration) var(--motion-control-ease),
    border-color var(--motion-control-duration) var(--motion-control-ease),
    box-shadow var(--motion-control-duration) var(--motion-control-ease),
    opacity var(--motion-control-duration) var(--motion-control-ease);
}
.btn{
  min-height:44px;
  padding:0 20px;
  border:1px solid transparent;
  border-radius:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:6px;
  flex:none;
  font-size:14px;
  line-height:1.2;
  text-align:center;
}

/* 改固定 height 要先把 min-height 歸零，否則被 .btn 的 44px 夾住。
   與工具列控制項的 36px 刻意不同高，不必對齊。 */
.btn-sm{min-height:32px;padding:0 12px;font-size:13px}
.btn-block{width:100%}

.btn-primary{background:var(--action-primary);border-color:var(--action-primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--on-primary)}

.btn-ghost{background:transparent;border-color:var(--action-ghost-line);color:var(--action-ghost)}
.btn-ghost:hover{background:transparent;border-color:currentColor;color:var(--action-ghost-hover)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 86%,black);border-color:color-mix(in srgb,var(--danger) 86%,black)}
.btn-danger-ghost{background:var(--danger-surface);border-color:var(--danger-surface);color:var(--danger)}
.btn-danger-ghost:hover{background:color-mix(in srgb,var(--danger-surface) 84%,var(--danger));border-color:color-mix(in srgb,var(--danger-surface) 84%,var(--danger))}
.btn .ico{font-size:16px}

.btn-text{
  /* min-height 是點擊區域，不是可見的盒子（padding:0，所以文字本身只有約 18px 高）。
     24px 是 WCAG 2.5.8（2.2 AA）目標尺寸的下限，取這個值＝達標且佔用最少版面。
     ⚠️ 不要拿掉：拿掉後可點高度只剩文字的 18px，低於門檻。 */
  min-height:24px;
  padding:0;
  border:0;
  border-radius:var(--r-ctl);
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--action-primary);
  font-size:14px;
  line-height:1.25;
}

.btn-text:hover{color:var(--action-primary-hover)}

.btn-text-sm{font-size:13px}
.btn-text-block{width:100%;justify-content:flex-start}
.btn-text-danger{color:var(--danger)}
.btn-text-danger:hover{color:color-mix(in srgb,var(--danger) 82%,black)}

.btn-text .ico{font-size:16px}

.btn[hidden],
.btn-text[hidden],
.btn-icon[hidden],
.choice[hidden]{display:none}

.btn-icon{
  width:36px;
  height:36px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  display:grid;
  place-items:center;
  flex:none;
  color:var(--ink-2);
}
.btn-icon:hover{background:var(--bg);color:var(--ink)}
.btn-icon-sm{width:32px;height:32px}
.btn-icon-xs{width:24px;height:24px}
.btn-icon-square{border-radius:var(--r-icon)}
.btn-icon-muted{background:#f4f6f7}
.btn-icon-muted:hover{background:#e8ecef}
/* 圖示字級 ＝ 按鈕邊長的一半，三個尺寸共用同一條比例：36px → 18px、32px → 16px、24px → 12px。
   ⚠️ **全站圖示字級一律取偶數**（12／14／16／18／20／22…）。要新增圖示鈕尺寸請照這條 1/2 比例挑，
   不要就地寫一個新數字。
   ⚠️ 24px 是 WCAG 2.5.8 目標尺寸的下限，不要再往下開更小的尺寸。 */
.btn-icon .ico{font-size:18px}
.btn-icon-sm .ico{font-size:16px}
.btn-icon-xs .ico{font-size:12px}

.choice{
  border:1px solid var(--control-line);
  background:var(--card);
  color:var(--ink-2);
}
.choice:hover{background:var(--bg);color:var(--ink)}

.btn:focus-visible,
.btn-text:focus-visible,
.btn-icon:focus-visible,
.choice:focus-visible,
.pager-button:focus-visible,
.acct-btn:focus-visible,
.nav a:focus-visible,
.acct-menu a:focus-visible,
.pm-menu button:focus-visible,
.invlink:focus-visible,
.link:focus-visible{
  outline:3px solid var(--brand-focus);
  outline-offset:2px;
}
/* 停用狀態：整顆元件降透明度，各 variant 保留自己的色相，只是變淡。
   透明度統一取 --opacity-disabled，不要在各處寫死近似值。 */
.btn:disabled,
.btn-text:disabled,
.btn-icon:disabled,
.choice:disabled,
.pager-button:disabled,
.btn[aria-disabled="true"],
.btn-text[aria-disabled="true"],
.btn-icon[aria-disabled="true"]{
  opacity:var(--opacity-disabled);
  cursor:not-allowed;
  pointer-events:none;
}
/* 處理中：不吃上面的停用淡化。busy 與 disabled 常常同時掛在同一顆按鈕上
   （送出後要鎖住避免重複送單），但兩者對使用者是不同意思——
   busy 是「你按的這顆正在跑」，disabled 是「這顆現在不能按」。
   同一批被連帶鎖住的兄弟按鈕只有 disabled，維持 --opacity-disabled，
   於是「我點的那顆」和「被順帶鎖住的那些」在畫面上分得開。
   ⚠️ 這條必須排在停用規則之後：兩者同權重(0,2,1)，靠順序決勝。 */
.btn[aria-busy="true"],
.btn-text[aria-busy="true"],
.btn-icon[aria-busy="true"]{opacity:1;cursor:progress}

/* 展開與收合分開設定時長：套用的是「新狀態」那一條規則，
   移除 .collapsed（展開）吃 .mc-app 的 .24s；加上 .collapsed（收合）吃下一條的 .32s。
   收合時標籤在 t=0 即消失，若時長相同會顯得比展開倉促，故拉長。 */
.mc-app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;transition:grid-template-columns .24s cubic-bezier(.4,0,.2,1)}
.mc-app.collapsed{grid-template-columns:76px 1fr;transition:grid-template-columns .32s cubic-bezier(.4,0,.2,1)}
.mc-scrim{display:none}
.hamburger{display:none}


.side{background:var(--neutral-900);color:#fff;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;gap:16px;padding:16px 12px;overflow:hidden}
/* 固定高：收合時 .cbtn(30px) 隱藏，若讓內容決定高度會縮 4px，使整塊導覽上移造成閃動 */
.side-top{height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 6px}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
/* 正式 logo 為 1.62:1（寬>高）：以高度定錨、寬度自適應，避免比例被壓扁。
   26px 高（約 42px 寬）讓收合側欄 52px 可用寬留有餘裕，展開與收合共用同一尺寸 */
.brand .mk{height:26px;width:auto;flex:none;display:block}
.brand .txt b{font-size:15px;font-weight:700;color:#fff;white-space:nowrap}

.btn-icon.cbtn,.btn-icon.hamburger,.btn-icon.dclose{color:#fff;background:transparent;opacity:1}
.btn-icon.cbtn:hover,.btn-icon.hamburger:hover,.btn-icon.dclose:hover{background:transparent;color:rgba(255,255,255,.65);opacity:1}
/* 手機版選單的關閉鈕：站在漢堡的位置、與漢堡同尺寸（見 ≤900px 區塊）。
   桌機沒有這顆，故預設隱藏（.btn-icon 的 display:grid 會被這裡蓋掉，要記得改回來）。 */
.dclose{display:none}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:8px;color:rgba(255,255,255,.9);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden}

.nav a .ico{font-size:18px;opacity:.85}

.nav a:hover{background:var(--surface-hover-overlay);color:#fff}
/* active 用品牌綠實色，是側欄裡唯一的品牌色塊。
   ⚠️ 維持原色階的前提下 Green/600 配白字只有 3.98:1，故取 Green/700（5.54:1）。
   ⚠️ active 刻意「沒有」hover 態：目前頁不是可前往的目的地，給 hover 回饋等於
   暗示可以再點一次，點了卻停在原地。cursor 也改回 default，不顯示手指。
   靠的是 .nav a.active 與 .nav a:hover 同權重、且宣告在後面而勝出 ——
   要在這之後新增 .nav 規則時請保持這個順序。
   保留 <a> 與 aria-current="page"，鍵盤仍可 Tab 進來、螢幕閱讀器仍讀得到「目前頁面」，
   不用 pointer-events:none（那會連焦點一起拿掉）。 */
.nav a.active{background:var(--green-700);color:#fff;cursor:default}

/* ===== 付費中心支援的平台（外連組）=====
   排在三項主導覽之下、帳號區之上。分組靠分隔線＋灰色小標＋字重降一階（600→500），
   文字色與 .nav a 相同——灰字用在可點的選項上會讀成停用，淡化只給不可點的小標。
   ⚠️ 這一組永遠不會是「目前所在頁」，不要為它加 .active 樣式。
   上緣間距 = .side 的 gap:16px（線之上）＋ padding-top:20px（線之下）。 */
.nav-ext{display:flex;flex-direction:column;gap:4px;padding-top:20px;border-top:1px solid var(--neutral-700)}
/* ⚠️ --neutral-400 對側欄底是 5.64:1；12px 小字的 AA 門檻是 4.5:1，要調淡先算對比。 */
.nav-ext .gt{padding:0 12px;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--neutral-400);white-space:nowrap;overflow:hidden}
/* 高度／內距／圓角／文字色一律比照 .nav a，唯一的差別是 font-weight 500（.nav a 是 600）。 */
.nav-ext a{height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:8px;color:rgba(255,255,255,.9);font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden}
.nav-ext a:hover{background:var(--surface-hover-overlay);color:#fff}
/* ⚠️ 邊長必須等於 .nav a .ico 的字級（桌機 18px／手機 20px）——兩組的 gap 都是 8px，
      一大一小文字起點就不對齊，側欄會看出兩條左緣。
   ⚠️ 收合時整列只剩這一顆，各平台全靠它區辨；不要改成統一的外連圖示。 */
.nav-ext a .plogo{width:18px;height:18px;flex:none;border-radius:4px;object-fit:contain}
/* 外連箭頭推到最右：它標的是「這會離開付費中心」，不是平台名稱的一部分。
   字級與透明度同 .nav a .ico（桌機 18px／手機 20px、.85），三處要一起改。
   ⚠️ 圖示沿用全站既有的開新分頁語彙 ri-arrow-right-up-line（同發票號碼連結），
      不要另外引入 ri-external-link-line —— 同一件事只該有一種圖形。
   ⚠️ class 刻意不叫 .ext：那個名字屬於 orders.css 的行內版（12px／vertical-align:-1px），
      而 orders.css 只有訂單頁載入，共用同名會讓側欄箭頭在訂單頁比其他四頁低 1px。 */
.nav-ext a .ext-ico{margin-left:auto;font-size:18px;opacity:.85}

.acct{margin-top:auto;position:relative}
/* 圓角 8px 與 .nav a 對齊：兩者同在側欄、同為整列可點的控制項 */
.acct-btn{width:100%;height:52px;display:flex;align-items:center;gap:10px;padding:0 8px;border-radius:8px;background:none;text-align:left;color:#fff}
.acct-btn:hover{background:var(--neutral-800)}

.acct-btn .av{width:34px;height:34px;border-radius:50%;background:var(--green-200);color:var(--brand-on-accent);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.acct-btn .info{flex:1;min-width:0}
.acct-btn .info b{font-size:14px;font-weight:700;color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-btn .info small{font-size:12px;color:rgba(255,255,255,.5);font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-btn .caret{flex:none}
.acct-btn .caret .ico{font-size:18px;color:#fff;opacity:.85;transition:transform .15s}
.acct.open .acct-btn .caret .ico{transform:rotate(180deg)}

.acct-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:var(--neutral-800);border:1px solid var(--neutral-600);border-radius:12px;padding:6px;box-shadow:0 12px 34px rgba(0,0,0,.4);display:none;flex-direction:column;gap:4px}
.acct.open .acct-menu{display:flex}
/* 文字色比照 .nav a 的 rgba(255,255,255,.9)（對面板 8.34:1）。
   高度／內距／gap／圓角一律比照 .nav a：兩者都是側欄裡整列可點的導覽項，
   選單展開時會與上方 .nav 同框出現，行高不一致會看出兩套節奏。 */
.acct-menu a{height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:600;color:rgba(255,255,255,.9)}
/* 尺寸與透明度同 .nav a .ico，兩邊必須一致 */
.acct-menu a .ico{font-size:18px;opacity:.85}
/* hover 比照 .nav a 的規則「往亮走一格」：nav 在 Neutral/900 上走到 Neutral/800，
   選單面板本身是 Neutral/800，故走到 Neutral/700。 */
/* 與 .nav a:hover 同一個疊層：選單底是 Neutral/800（比側欄淺一階），
   同一個半透明疊層在這裡自動算出對應的提亮，與底差 1.33:1（原 Neutral/700 為 1.28:1）。 */
.acct-menu a:hover{background:var(--surface-hover-overlay);color:#fff}
.acct-menu .sep{height:1px;background:rgba(255,255,255,.12);margin:2px 4px}
/* 深底專用的紅（Red/400）。不能用 --danger（Red/700）—— 對 Neutral/800 只有 2.57:1。 */
.acct-menu a.danger{color:var(--danger-on-dark)}
/* 危險項的 hover 走自己的紅色疊層，不吃上面那條綠色疊層。
   ⚠️ color 必須重寫：上面 .acct-menu a:hover 的 color:#fff 是另一個屬性，
   不會因為本條選擇器較具體就被整條蓋掉，不寫的話 hover 時紅字會變白字。 */
.acct-menu a.danger:hover{background:var(--surface-hover-overlay-danger);color:var(--danger-on-dark)}


@media(min-width:901px){
  /* ⚠️ z-index 給的是 `.side` 而不是選單本身。`.side` 是 `position:sticky`，
     sticky 會自己建立一個堆疊環境，所以選單寫多高的 z-index 都只在側欄內部有效，
     整個側欄仍然在 `.main` 的卡片（`position:relative`、DOM 排在後面）底下 ——
     實測選單只剩露在卡片外的一小條看得見。要浮起來必須把**側欄**抬高。 */
  .mc-app.collapsed .side{padding:16px 18px;z-index:40}
  .mc-app.collapsed .side-top{padding:0}
  .mc-app.collapsed .brand{cursor:pointer}
  .mc-app.collapsed .brand .txt,.mc-app.collapsed .side-top .cbtn,.mc-app.collapsed .nav a .label,.mc-app.collapsed .acct-btn .info,.mc-app.collapsed .acct-btn .caret{display:none}
  .mc-app.collapsed .nav a{width:40px;justify-content:center;gap:0;padding:0}
  /* 收合後整列只剩識別圖，小標與箭頭一起收掉。
     ⚠️ 名稱靠 <a> 的 aria-label 撐著（展開／收合都讀得到），不要改成靠 .label 供讀屏。 */
  .mc-app.collapsed .nav-ext .gt,.mc-app.collapsed .nav-ext a .label,.mc-app.collapsed .nav-ext a .ext-ico{display:none}
  .mc-app.collapsed .nav-ext a{width:40px;justify-content:center;gap:0;padding:0}
  .mc-app.collapsed .acct-btn{width:40px;justify-content:center;padding:0}

  .mc-app.collapsed .acct-menu{position:fixed;left:18px;right:auto;bottom:76px;width:216px;z-index:70}
}

/* Main */
.main{min-width:0;padding:22px 28px}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:2px 0 18px;flex-wrap:wrap}
.head h1{font-size:30px;font-weight:700}
.head p{color:var(--muted);font-size:14px;font-weight:500;margin-top:4px}
.head p b{color:var(--ink);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);margin-top:var(--gap)}
.card{background:var(--card);border-radius:var(--r);padding:var(--pad);position:relative}
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}
.row-2{grid-row:span 2}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:21px}
.card-t{font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px}
/* .card-lead＝「卡片標題＋數值＋補充說明」一組（首頁四張 metric／圖表卡）。
   有它的卡片頭本身就是一個高矮不一的區塊，出口箭頭與這一組並排、對齊它的**頂端**，
   所以只有這種卡片頭改 flex-start。
   沒有 .card-lead 的卡片頭（其它四頁、首頁「最近交易」）維持單列置中，不受影響。
   ⚠️ 代價：.card-lead 的寬度是「卡片寬 − 箭頭 32px − 間距 12px」，
   窄卡片（本月新增／本月使用）在 1350px 以下，數值後面的百分比標籤會折到第二行。
   那是這個結構必然的結果，不是 bug；不要為了擠回一行去縮字級或動 .card-lead 的寬度。 */
.card-lead{flex:1;min-width:0}
.card-h:has(.card-lead){align-items:flex-start;gap:12px}
.out-btn{flex:none}
.link{font-size:13px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.link .ico{font-size:14px}

.badge{font-size:12px;line-height:1.4;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--brand-surface-strong);color:var(--brand-text);display:inline-flex;align-items:center;gap:4px}

/* display:inline-flex 會蓋掉 [hidden] 內建的 display:none，必須明確寫回來，
   否則 app.js 設 badge.hidden=true 也還是看得到。 */
.badge[hidden]{display:none}
.badge-neg{background:var(--neg-surface);color:var(--neg)}

.tag{display:inline-flex;align-items:center;padding:2px 8px;line-height:1.4;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}
/* 狀態色調直接引用語意 token（--neg / --warn / --info…），不另建一層 --status-* 別名。 */
/* in 與 active 同色值但不合併：tag-in 是金流方向（入帳）、tag-active 是生命週期
   （正常可用），語意不同，保留兩個 class 未來要再分色只動這裡就好
   （tag-ok 被併進 tag-neutral 是因為名字誤導，這裡兩個名字都準確）。
   全站盤點過兩者從不出現在同一個畫面（in 只在 /wallet 異動明細的類型欄；
   active 在 /orders、首頁最近交易、lots 面板、plans 面板），共用藍色不會撞；
   且入（藍）／出（紅）的方向對比對紅綠色盲比舊的綠／紅可靠。 */
.tag-in{background:var(--info-surface);color:var(--info)}      /* 入帳：購買／贈送／退回 */
.tag-out{background:var(--neg-surface);color:var(--neg)}       /* 出帳：使用扣抵 */

.tag-fail{background:var(--neg-surface);color:var(--neg)}      /* 錯誤：付款失敗 */
/* hold＝等待處理、還沒結束：待付款、待繳款（ATM）、需要處理、凍結、
   狀態確認中、處理中。這些對使用者是同一種處境（再等，或去補一個動作），
   所以共用一個顏色；分色只會讓人以為是兩種不同的狀況。 */
.tag-hold{background:var(--warn-surface);color:var(--warn)}
/* tag-active＝「這個東西處於正常可用的狀態」。三種實際用法共用這一個語意：
   已完成（訂單終結成功）／有效（額度批次還能用）／已啟用（自動加值開著）。
   ⚠️ 不要為了「終結 vs 持續」把它拆成兩個色調 —— 這三者從不出現在同一個畫面上
   （/orders 與首頁 vs lots 面板 vs plans 面板），拆開只會多一組 token、零收益。
   與 tag-in 共用藍色的理由見上方 tag-in 註解（狀態 chip 不用綠、綠獨留品牌層）。 */
.tag-active{background:var(--info-surface);color:var(--info)}

.tag-default{background:var(--info-surface);color:var(--info)}


.tag-neutral{background:var(--neutral-100);color:var(--neutral-600)}



.st-sub{font-size:12px;font-weight:600;color:var(--danger);margin-left:4px}

.big{font-size:34px;font-weight:700;line-height:1;margin-top:16px}
.big .u{font-size:14px;font-weight:600;color:var(--muted)}
.sub{font-size:12px;color:var(--muted);font-weight:500;margin-top:8px}
.sub.danger{color:var(--danger);font-weight:500}
.placeholder-note{font-size:11px;color:var(--muted);opacity:.8}
.dashboard-empty{font-size:13px;color:var(--muted);padding:10px 0;font-weight:500}

/* 螢幕閱讀器專用：視覺隱藏但保留語意（icon 前綴的文字說明） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 資料更新時間：描述本頁內容的新鮮度，屬內容範圍，靠左貼齊卡片 */
.page-updated{margin:14px 0 0;font-size:12px;color:var(--muted)}
.page-updated:empty{display:none}
/* 有系統訊息時兩者貼近成一組（同屬本頁狀態資訊），彼此的區別交給顏色表達；
   訊息不存在時維持 14px，避免直接黏在卡片下緣 */
.statusline:not(:empty) + .page-updated{margin-top:4px}

/* 站台頁尾：公司聯絡資訊單列（以分隔線區隔），置中並與上方內容拉開距離 */
.page-foot{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:8px}
.foot-org{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 0;font-size:13px;color:var(--ink)}
.foot-org .fi{position:relative;padding:0 12px;line-height:1.5;color:var(--ink);text-decoration:none}
/* 分隔線用絕對定位的虛擬元素，高度與 line-height 脫鉤：
   line-height 維持 1.5 讓小螢幕換行時不擁擠，分隔線仍可固定 12px */
.foot-org .fi + .fi::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:12px;background:var(--muted)}
.foot-org .fi:first-child{padding-left:0}
.foot-org .fi:last-child{padding-right:0}
.foot-org a.fi:hover .ft{text-decoration:underline}
/* 上下排列時分隔線必須消失。斷點設 1020px：單列需 694px 內容寬，
   若沿用 640px，在 640〜1018px 之間會折行並在行首留下一條孤立分隔線 */
@media(max-width:1020px){
  .foot-org{flex-direction:column;gap:8px}
  .foot-org .fi{padding:0}
  .foot-org .fi + .fi::before{display:none}
}



.grid-main{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.grid-main .acctcard{grid-column:span 2}
.grid-main .trend{grid-column:span 3}
.grid-main .txl{grid-column:1 / -1}

/* 上界是 1120 不是 1000：4 欄在 1000～1120px 之間會把額度卡壓到約 121px，
   卡內「平台名稱｜金額（百分比）」那行連「購買」兩個字都會被截。 */
@media(min-width:641px) and (max-width:1120px){
  .grid-main .acctcard{grid-column:span 4}
  .grid-main .mcard{grid-column:span 2}
}
@media(max-width:640px){.grid-main{grid-template-columns:minmax(0,1fr)}.grid-main .acctcard,.grid-main .trend{grid-column:auto}}

/* 角落「↗ 看更多」按鈕：absolute 脫離 header 流，避免 32px 圓鈕把標題往下推、與無按鈕卡標題對不齊 */




/* 總持有額度卡：數字→按鈕(數字下方)→組成分解(卡底)，垂直動線 */
.acctcard{display:flex;flex-direction:column}
.acctcard .amt{font-size:48px;font-weight:700;line-height:.95;margin-top:8px}
.acctcard .amt .u{font-size:16px;font-weight:600;color:var(--muted)}
.acctcard .bal-avail{margin-top:8px;font-size:13px;color:var(--muted);font-weight:500}
.acctcard .bal-avail b{color:var(--ink);font-weight:700}

.acctcard .bal-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.acctcard .bal-actions .ico{font-size:16px}
.acct-sec{margin-top:auto;padding-top:24px}
.acct-comp{display:flex;gap:16px}
.acct-comp .ac{flex:1;min-width:0}
.acct-comp .ac-l{font-size:13px;font-weight:500;color:var(--muted);display:block;margin-bottom:5px}
.acct-comp .ac-n{font-size:20px;font-weight:700}

/* 本月新增/本月使用 小卡：數字＋水平長條 */
.mcard{display:flex;flex-direction:column}


.mcard-num,
.expiry .exp-total{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:28px;font-weight:700;margin:4px 0 20px}
.mcard-num .badge{align-self:center;margin-left:2px}
.mcard-num .u,
.expiry .exp-total .u{font-size:13px;color:var(--muted);font-weight:600}
.flux-bars{display:flex;flex-direction:column;gap:20px}
.fb-top{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:7px}
.fb-top span{color:var(--ink-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-top b{font-weight:700;flex:none}
.fb-track{height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.fb-track i{display:block;height:100%;border-radius:4px}

/* 即將到期小卡：總數＋到期日｜額度清單 */
.expiry{display:flex;flex-direction:column}

.exp-rows{display:flex;flex-direction:column}
.exp-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.exp-row:last-child{border-bottom:none;padding-bottom:0}
.exp-d{color:var(--ink-2);font-weight:500}
.exp-v{font-weight:700}

/* 趨勢卡：圖表 flex 撐滿卡片高度(對齊同排卡)、最矮 200 取代寫死高度 */
.trend{display:flex;flex-direction:column}
.trend .card-h{flex:none}
.trend .chart{flex:1;height:auto;min-height:200px}

.kpi .big{font-size:32px}


.chart{position:relative;height:170px;margin-top:24px}
.chart-grid,
.bars{position:absolute;left:48px;right:0;top:8px;bottom:22px}
.gl{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.yl{position:absolute;right:100%;top:0;margin-right:8px;transform:translateY(-50%);font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.bars{display:flex;align-items:flex-end;gap:22px}
/* 整欄（含長條上方的空白與月份標籤）都是命中區，不是只有塗到顏色的那幾 px */
.bars .col{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%;position:relative;cursor:default}
.bars .col:focus{outline:none}
.bars .col:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px;border-radius:4px}
/* 上緣 4px 圓角、貼齊基線那端維持直角；值不為 0 時至少留 2px，免得小額變成看不見 */
.bars .b{flex:1;max-width:24px;min-height:2px;border-radius:4px 4px 0 0;position:relative;z-index:1}
.bars .b.is-zero{min-height:0}

.bars .col.hot .b.buy{background:var(--chart-series-1-hover)}
.bars .col.hot .b.use{background:var(--chart-series-2-hover)}
.bars .col.hot .t{color:var(--ink)}
/* 提示框：值在前、標籤在後（讀的人已經知道是哪個系列，要的是數字）。
   系列身分用一小段線段標示，不用實心方塊 —— 方塊在這個密度下太重。
   ⚠️ 底色是白卡不是深色：--chart-series-2 是深中性色，放在深色提示框上等於看不見。 */
.chart-tip{position:absolute;z-index:2;min-width:132px;padding:9px 11px;border-radius:10px;background:var(--card);color:var(--ink);font-size:12px;font-weight:600;pointer-events:none;transform:translate(-50%,-100%);box-shadow:0 6px 20px rgba(0,0,0,.14)}
/* 上方放不下時改放在該欄的右邊／右邊也放不下就放左邊（JS 量完才決定，不要預設其中一種）。
   刻意不往下翻：往下就會蓋住正在看的那兩根長條。 */
.chart-tip.side-r{transform:translate(0,-50%)}
.chart-tip.side-l{transform:translate(-100%,-50%)}
.chart-tip[hidden]{display:none}
.chart-tip .tt-m{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px}
.chart-tip .tr{display:flex;align-items:center;gap:6px;line-height:1.8}
.chart-tip .tr i{width:10px;height:2px;border-radius:1px;flex:none}
.chart-tip .tr span{color:var(--ink-2);font-weight:600}
.chart-tip .tr b{margin-left:auto;font-weight:700}
.chart-empty{color:var(--muted);font-size:13px;font-weight:500;display:grid;place-items:center;height:100%}

.bars .b.buy{background:var(--chart-series-1)}
.bars .b.use{background:var(--chart-series-2)}
.bars .t{position:absolute;bottom:-20px;font-size:11px;color:var(--muted);font-weight:600}

.legend{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.legend span{font-size:12px;color:var(--ink-2);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px}
/* 單欄之後（≤640px）繪圖區只剩 266px（390px 視窗實測），六個月份的 22px 欄距吃掉 110px，
   兩根長條被壓到 12px 寬 —— 長條比欄與欄之間的空白還細，圖看起來是「一堆縫」而不是資料。
   欄距是這裡唯一能讓的：`.b` 的 24px 是上限不是固定寬，省下來的空間會全部回到長條上
   （實測 390px 下欄寬 26→34.3px、每根長條 12→16.2px）。 */
@media(max-width:640px){
  .bars{gap:12px}
}

/* 最近交易 */

.empty-state{color:var(--muted);font-size:13px;font-weight:500;text-align:center;padding:20px 8px;line-height:1.6}
.txl .empty-state{padding:16px 0}

.txl .lempty{padding:32px 16px 28px}
.txl .lempty b{font-size:14px;font-weight:600;color:var(--ink-2)}
.txl .lempty-ico{font-size:36px}
.txl .row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.txl .row:last-child{border-bottom:none;padding-bottom:0}
.txl .row:first-of-type{padding-top:14px}

.txl .who{flex:1;min-width:0}
.txl .who b{font-size:14px;font-weight:600;display:block}
.txl .who small{color:var(--muted);font-size:12px;font-weight:500}
.txl .stwrap{display:flex;align-items:center;gap:12px}
/* 狀態 chip 與待付款時效（.st-sub）要黏在一起當成同一個元素，
   否則 .stwrap 的 12px gap 會把「14:29 前」推得像是另一欄。間距由 .st-sub 自己的 4px 提供。 */
.txl .stcell{display:inline-flex;align-items:center;white-space:nowrap}


.txl .amt{font-size:15px;font-weight:700;text-align:right}
.txl .amt.out{color:var(--neg)}
.txl .btn{white-space:nowrap}

/* 系統訊息：預設黑字，與下方灰色的「最後更新」拉開層級；只有載入中維持安靜的灰 */
.statusline{margin-top:14px;font-size:13px;color:var(--ink)}
.statusline[data-tone="loading"]{color:var(--muted)}
.statusline[data-tone="warning"]{color:var(--warn)}
/* app.js 送出的是 danger；error 保留相容，避免其它頁改用時失去樣式 */
.statusline[data-tone="danger"],
.statusline[data-tone="error"]{color:var(--danger);font-weight:600}
.statusline:empty{display:none}

@media(max-width:900px){
  .mc-app,.mc-app.collapsed{grid-template-columns:1fr}


  /* ⚠️ 滑入動畫用 `left` 而**不是** `transform`：`.side-top` 是 `.side` 的 fixed 子元素，
     只要 `.side` 有 transform 就會變成它的 containing block，頂部列會跟著面板一起被推出
     畫面（實測整條列消失）。這條看起來像可以順手改成 transform，不要改。 */
  .side{position:fixed;top:52px;left:calc(-1 * min(280px,82%));bottom:0;width:min(280px,82%);height:auto;z-index:60;
    padding:8px 12px calc(12px + env(safe-area-inset-bottom));gap:8px;
    overflow-y:auto;overscroll-behavior:contain;
    transform:none;transition:left .22s ease}
  .mc-app.drawer-open .side{left:0}
  /* 頂部列：52px 是 `.main` 上內距、面板 top 與遮罩 top 的共同基準，四處要一起改。 */
  .side-top{position:fixed;top:0;left:0;right:0;height:52px;z-index:62;
    background:var(--neutral-900);padding:0 12px 0 52px}
  /* 漢堡與 × 是**同一個位置的同一顆控制項**，只是狀態不同：同一個 36px 盒子、
     同樣 fixed 在 (8,8)、同樣沒有背景、同樣白色 hover 降透明度（見上方深底規則）。
     所以定位與尺寸寫在同一條選擇器裡，不要再各寫一份 —— 那正是它們會長不一樣的原因。 */
  .hamburger,.side-top .dclose{display:grid;place-items:center;position:fixed;top:8px;left:8px;z-index:63;
    width:36px;height:36px;border-radius:var(--r-icon);box-shadow:none}
  /* 開啟時漢堡原地換成 ×：同一個位置永遠只有一顆按鈕。 */
  .side-top .dclose{display:none}
  .mc-app.drawer-open .hamburger{display:none}
  .mc-app.drawer-open .side-top .dclose{display:grid}
  /* ⚠️ 兩個字級刻意**不相同**：`ri-menu-line` 的三條橫線幾乎佔滿 1em 的寬，
     `ri-close-line` 的叉只佔約 6 成，同字級並排時漢堡會明顯看起來比較大顆
     （使用者實際回報過）。× 補 2px 之後兩顆的視覺重量才對得起來。
     兩個值都維持偶數（20／22），不要為了「數字一致」把它們調成同一個 —— 那會看起來不一樣大。 */
  .hamburger .ico{font-size:20px}
  .side-top .dclose .ico{font-size:22px}
  /* 手機版沒有「收合」這件事（`.side` 不是常駐欄），收合鈕整顆藏起來。
     若使用者曾在桌機收合，`collapsed` 仍留在 localStorage，但整組收合規則已鎖在
     min-width:901px，這裡不需要再逐條把它改回去。 */
  .side-top .cbtn{display:none}

  /* ⚠️ 側欄面板在手機版不放大列高與圖示：側面板的每一項就是桌機的那一項，
     尺寸只有一套。要改觸控尺寸請連桌機一起改，不要只加手機版分支。 */

  /* 遮罩壓暗面板以外的內容，但**不蓋頂部列**（`top:52px`）。點遮罩關閉，與點 × 等效。 */
  .mc-scrim{display:block;position:fixed;top:52px;left:0;right:0;bottom:0;background:rgba(0,0,0,.42);z-index:55;opacity:0;pointer-events:none;transition:opacity .22s}
  .mc-app.drawer-open .mc-scrim{opacity:1;pointer-events:auto}
  /* 選單開著時底下的頁面不該還能捲動（捲了看不到，回來卻換了位置）。 */
  body:has(.mc-app.drawer-open){overflow:hidden}

  /* 52px 的頂部列 ＋ 16px 呼吸 */
  .main{padding:68px 16px 20px}
  .grid,.grid-2{grid-template-columns:minmax(0,1fr)}
  .span-2,.span-3{grid-column:auto}
  .row-2{grid-row:auto}
  .acctcard .amt{font-size:42px}
}


.txl .stwrap{flex:none;flex-wrap:nowrap}
@media(max-width:520px){

  .txl .stwrap{gap:8px}

  .txl .who b{line-height:1.3}
  /* ⚠️ `small` 是 inline，單獨給它 line-height 沒有用 —— 行框高度由所屬區塊
     （`.who`）的 strut 決定，實測只縮了 1px。必須先變成 block（`b` 本來就是
     block，所以它的 1.3 有效），自己的行高才算數。 */
  .txl .who small{display:block;line-height:1.25}
}

/* 極窄畫面（375px 以下）的最後手段：**只讓按鈕掉到第二行並靠右**，狀態與金額
   仍然並排在第一行。到這裡右欄已經壓無可壓（狀態 56 ＋ 金額 53 ＋ 按鈕 82 ＋
   兩個 8px 間距 ＝ 207px），而 320px 的列寬只有 236px，左欄會被壓到 22px、
   品名變成四行的直排（實測列高 131px）—— 那比讓按鈕換行難看得多。
   斷點取 375px：列寬 ≈ 視窗 − 84（32 主內距 ＋ 52 卡片內距），375 時左欄剛好
   留得住 76px，品名「100 元方案」（約 70px）維持單行。
   ⚠️ `.stwrap` 必須改回可收縮（`flex:0 1 auto`）換行才會啟動；同時給 `.who`
   一個下限逼它收縮，否則 `.stwrap` 取自然寬度、容器對它永遠「夠寬」。
   ⚠️ 按鈕維持自然寬度，不要加 `flex-basis:100%` —— 撐滿整行會被讀成整列的主動作。 */
@media(max-width:374px){
  /* ⚠️ `justify-content:flex-end` 不可省：換行後容器寬度＝最寬那一行（狀態＋金額
     124px），按鈕只有 82px，預設 flex-start 會把它靠左貼在 124px 的框裡、
     離列右緣 58px（實測）。兩行都要靠右才對得齊列的右緣。 */
  .txl .stwrap{flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
  /* 80px＝品名「100 元方案」（約 70px）維持單行的最小值。取這麼緊是為了讓
     五位數金額那種極端列（`NT$12,345` 要 83px，狀態＋金額共 147px）也還排得下
     ——96px 時它會被擠成「狀態一行、金額一行」。
     ⚠️ 這只是下限，不是固定寬：一般長度的列 `.who` 仍吃得到剩餘空間（320px 下實測 91px）。 */
  .txl .who{min-width:80px}
  .txl .stcell{flex-direction:column;align-items:flex-end;gap:2px}
  .txl .stcell .st-sub{margin-left:0}
}

@media(prefers-reduced-motion:reduce){
  /* ⚠️ 這份清單必須與上方轉場清單逐項一致；那邊加了控制項這裡沒加，
     使用者開了「減少動態效果」仍會看到它在動。 */
  .btn,.btn-text,.btn-icon,.choice,.pager-button,.acct-btn,.acct-menu a,.nav a,.pm-menu button,.lt-reset,.qchip,.bars .b{transition:none}
}


html:has(body.has-detail),
html:has(.modal-scrim.open){overflow:hidden;scrollbar-gutter:stable}