/* ============================================================================
   個人中心（主頁 home.html）樣式
   ----------------------------------------------------------------------------
   本文件刻意 link 在 assets/style.css 之後：
     主題變量（--brand / --ink / --panel / --line …）、頂欄 .topbar/.logo、
     按鈕 .btn/.btn-primary/.btn-ghost、表單 .field/.ctrl/input、
     Toast .toast、[hidden] 兜底 —— 全部直接複用 index 那一套，保證兩頁觀感一致。
   這裡只寫「左側菜單 + 右側內容」的佈局與卡片，不重複定義任何基礎件。
   ============================================================================ */

body.home {
  background: var(--bg);
}

/* ============ 佈局骨架 ============ */
.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 22px 64px;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* ============ 頂欄右側 ============ */
.hb-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 語言切換（繁 / 簡 / EN）：按鈕樣式來自 style.css 的 .lang（home.html 也載入了它），
   這裡只管它在頂欄右側的排布與窄屏收縮 */
.hb-right .lang {
  flex: 0 0 auto;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  max-width: 220px;
}
.user-chip .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.user-chip .nm {
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-logout {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: 0.2s;
  white-space: nowrap;
}
.btn-logout:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
  background: #fff7e8;
}

/* ============ 左側菜單 ============
   注意：style.css 裡開戶頁的步驟側欄也叫 .side（display:flex / padding 等），
   這裡必須把泄漏過來的屬性全部顯式重置，否則名片、菜單、底部會被排成一行。 */
.side {
  display: block;
  padding: 0;
  gap: 0;
  cursor: default;
  text-align: left;
  position: sticky;
  top: 86px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* 帳戶名片 */
.who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(135deg, #fff8ea, #fdf1de);
  border-bottom: 1px solid var(--line-soft);
}
.who .av {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 10px 18px -10px rgba(224, 138, 0, 0.9);
}
.who-txt {
  min-width: 0;
}
.who-txt b {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.who-txt span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* 菜單項 */
.side-nav {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--ink-2);
  border: 1px solid transparent;
  /* 觸摸目標 ≥ 44px */
  min-height: 46px;
  transition: 0.2s;
  position: relative;
}
.side-item svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.side-item:hover {
  background: var(--panel-2);
  color: var(--brand-deep);
}
.side-item.on {
  background: linear-gradient(135deg, #fff6e5, #ffefd6);
  border-color: #f4dfb8;
  color: var(--brand-deep);
  font-weight: 700;
}
.side-item.on::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}
.side-item .arrow {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
}
.side-item.on .arrow {
  color: var(--brand-deep);
}

/* 菜單底部 */
.side-foot {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line-soft);
}
.side-link {
  font-size: 13px;
  color: var(--brand-deep);
  font-weight: 600;
}
.side-link:hover {
  text-decoration: underline;
}
.side-tip {
  margin: 9px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ============ 右側內容 ============ */
.content {
  min-width: 0;
}
.view {
  display: none;
}
.view.on {
  display: block;
  animation: viewIn 0.32s cubic-bezier(0.22, 0.8, 0.3, 1);
}
@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.vhead {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.vhead h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.4px;
}
.vhead .vsub {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.vhead .badge {
  margin-left: auto;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge.ok {
  color: #2f7c52;
  background: #eaf6ef;
  border: 1px solid #cfead9;
}
.badge.wait {
  color: #a8791f;
  background: #fdf5e3;
  border: 1px solid #f2e2bd;
}

/* ============ 出金重要提示（紅色警示條） ============
   風控要求：出金到帳方式需與入金支付方式一致，否則會被駁回。
   提交按鈕之前必須看到，所以放在表單最上方，用紅底 + 左側粗紅線強調。
   正文 #9d2b26 配 #fdf1f0 底，對比度 ≈ 7.5:1（WCAG AA 要求 4.5:1）。 */
.warn-bar {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #f3c6c1;
  border-left: 4px solid var(--danger);
  border-radius: 12px;
  background: linear-gradient(150deg, #fdf1f0, #fbe7e5);
  box-shadow: 0 6px 18px rgba(217, 83, 79, 0.08);
}
.warn-bar-ic {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--danger);
  animation: warnPulse 2.4s ease-in-out infinite;
}
.warn-bar-ic svg {
  display: block;
  width: 20px;
  height: 20px;
}
.warn-bar-tx {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 600;
  color: #9d2b26;
}
.warn-bar-tx b {
  font-weight: 800;
  color: #8d1f1b;
}
/* 圖示輕微呼吸，讓提示「自己跳出來」（關掉動效時自動停） */
@keyframes warnPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.82;
  }
}
@media (max-width: 560px) {
  .warn-bar {
    gap: 9px;
    padding: 11px 13px;
  }
  .warn-bar-tx {
    font-size: 12.5px;
  }
}

/* 資金概覽 */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.stat .k {
  font-size: 12px;
  color: var(--ink-3);
}
.stat .num {
  display: block;
  margin-top: 8px;
  font-size: 23px;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
.stat .d {
  display: inline-block;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--ink-3);
}
/* 中式配色：升/盈利 → 紅，跌/虧損 → 綠 */
.num.up,
.d.up {
  color: #cf3c35;
}
.num.down,
.d.down {
  color: var(--ok);
}
.stat.hero-stat {
  background: linear-gradient(135deg, #fff9ee, #fdf1dd);
  border-color: #f2e0bf;
}
.stat.hero-stat .num {
  color: var(--ink);
}

/* 卡片 */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 18px;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #fdfbf7, #f9f6f0);
}
.card-head b {
  font-size: 14px;
  color: var(--brand-deep);
  letter-spacing: 0.3px;
}
.card-head .tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--brand-deep);
  background: #fff3dd;
  border: 1px solid #f2e0bf;
}
.card-head .more {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--brand-deep);
  font-weight: 600;
}
.card-head .more:hover {
  text-decoration: underline;
}
.card-body {
  padding: 18px;
}

.cards2 {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* 資料行 */
.rows {
  padding: 4px 0;
}
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.row:last-child {
  border-bottom: 0;
}
.row .k {
  color: var(--ink-3);
  min-width: 84px;
  flex: 0 0 auto;
}
.row .v {
  margin-left: auto;
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.row .v.mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.4px;
}

/* 迷你列表（最近入金） */
.mini-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.mini-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.mini-list li:last-child {
  border-bottom: 0;
}
.mini-list .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  flex: 0 0 auto;
}
.mini-list .mt {
  min-width: 0;
}
.mini-list .mt b {
  display: block;
  font-size: 13px;
}
.mini-list .mt span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}
.mini-list .amt {
  margin-left: auto;
  font-weight: 700;
  color: #cf3c35;
  font-variant-numeric: tabular-nums;
}

/* ============ 入金申請 ============ */
.pay-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.pay-item {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 15px;
  background: var(--panel-2);
}
.pay-item .pk {
  font-size: 11.5px;
  color: var(--ink-3);
}
.pay-item .pv {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  word-break: break-all;
}
.pay-item .pv.mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.4px;
}
.copy-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-3);
  border-radius: 8px;
  font-size: 11px;
  padding: 4px 8px;
  margin-left: auto;
  flex: 0 0 auto;
  transition: 0.2s;
}
.copy-btn:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
  background: #fff7e8;
}

/* ============ 入金收款信息（RMB 銀行轉帳 / USDT TRC20，隨入金方式切換） ============ */
/* 顯隱由 #recvInfo 的 data-pay="|1|2" 屬性驅動（home.js 的 toggleHashField 維護）；
   入金方式默認不選（data-pay=""）時兩個面板都不顯示。
   數據當前為 home.html 裡的靜態模擬值 */
.recv-info {
  margin: 2px 0 6px;
}
.recv-pane {
  display: none;
  border: 1px solid #f2e2bd;
  background: linear-gradient(160deg, #fffaf0, #fff4dd);
  border-radius: 13px;
  padding: 13px 15px;
}
.recv-info[data-pay="1"] .recv-pane[data-for="1"],
.recv-info[data-pay="2"] .recv-pane[data-for="2"],
.recv-info[data-pay="3"] .recv-pane[data-for="3"] {
  display: block;
  animation: viewIn 0.3s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* USDT 自助充值（payType=3，home.js 的 FEATURES.usdtSelfPay）：
   走後端下單拿支付鏈接跳轉，收款信息 / 交易哈希 / 轉帳憑證整塊收起，
   表單只剩 金額 + 「確認支付」。顯隱由 #depForm 的 data-mode 屬性驅動
   （home.js 的 syncDepositFields 維護），不用 JS 一塊塊去 hidden */
#depForm[data-mode="self"] #recvInfo,
#depForm[data-mode="self"] #depHashField,
#depForm[data-mode="self"] #depVoucherField,
#depForm[data-mode="self"] .form-foot .hint {
  display: none;
}

/* 自助充值下單結果：優盾（Udun）返回的收款地址塊 #depSelfResult，
   由 home.js 的 renderUdunResult 填值並展開，拿到地址後客戶按地址轉帳 */
.udun-result {
  margin: 4px 0 6px;
  border: 1px solid #f2e2bd;
  background: linear-gradient(160deg, #fffaf0, #fff4dd);
  border-radius: 13px;
  padding: 13px 15px;
  animation: viewIn 0.3s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.udun-result[hidden] {
  display: none;
}
.udun-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.udun-head-txt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.udun-head b {
  font-size: 14px;
  color: var(--ink);
}
.udun-chip {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-deep);
  background: #fff2d6;
  border: 1px solid #f2e2bd;
  border-radius: 999px;
  padding: 3px 9px;
}
/* 收款地址二維碼（本地 canvas 生成，見 home.js 的 drawUdunQr） */
.udun-qr {
  flex: 0 0 auto;
  margin-left: auto;
  background: #fff;
  border: 1px solid #f2e2bd;
  border-radius: 10px;
  padding: 5px;
  line-height: 0;
  box-shadow: 0 6px 14px -10px rgba(30, 26, 12, 0.4);
}
.udun-qr[hidden] {
  display: none;
}
.udun-qr canvas {
  display: block;
  width: 96px;
  height: 96px;
}

/* 平台收款二維碼（GET /api/payout-account 的 qrCodeUrl，home.js 的 showRecvQr 維護） */
.recv-qr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed #ecd9ae;
}
.recv-qr[hidden] {
  display: none;
}
.recv-qr img {
  display: block;
  width: 128px;
  height: 128px;
  box-sizing: border-box;
  padding: 6px;
  background: #fff;
  border: 1px solid #eee2c8;
  border-radius: 10px;
}
.recv-qr-tip {
  font-size: 12px;
  line-height: 1.7;
  color: #8a7a55;
}

/* ============ 出金收款信息（銀行卡 / USDT，隨到帳方式切換） ============ */
/* 顯隱由 #wdDetail 的 data-wd-pay="1|2" 屬性驅動（home.js 的
   syncWithdrawFields 維護）；屬性默認寫 1，所以無 JS 時也與默認的
   銀行卡到帳一致。 */
.wd-detail[data-wd-pay="1"] .wd-group[data-for="1"],
.wd-detail[data-wd-pay="2"] .wd-group[data-for="2"] {
  display: block;
  animation: viewIn 0.3s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.wd-group {
  display: none;
  border: 1px solid #f2e2bd;
  background: linear-gradient(160deg, #fffaf0, #fff4dd);
  border-radius: 13px;
  padding: 14px 15px 4px;
  margin: 2px 0 20px;
}
.wd-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-deep);
}
.wd-group-title::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), #f0b34a);
}
/* 卡號 / 錢包地址：等寬字體，避免長串看錯位 */
#wd_card,
#wd_wallet {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  letter-spacing: 0.4px;
}
#wd_wallet {
  font-size: 13.5px;
}
.wd-group .note {
  margin-top: 6px;
}
/* 窄屏：分組內左右留白收一點，長地址不撐破卡片 */
@media (max-width: 720px) {
  .wd-group {
    padding: 12px 12px 2px;
  }
  #wd_wallet {
    font-size: 12.5px;
  }
}
.recv-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--brand-deep);
  margin-bottom: 10px;
}
.recv-chip {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-deep);
  background: #ffe9c2;
  border-radius: 999px;
  padding: 2px 9px;
  flex: 0 0 auto;
}
.recv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.recv-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
}
.recv-list .rk {
  flex: 0 0 auto;
  width: 6.5em;
  color: var(--ink-3);
}
.recv-list .rv {
  color: var(--ink);
  font-weight: 700;
  word-break: break-all;
  min-width: 0;
}
.recv-list .rv.mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.3px;
}
.recv-list .copy-btn {
  margin-left: auto;
}
.recv-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
}
/* 移動端：標籤與內容換行堆疊，避免長卡號/地址擠壓 */
@media (max-width: 720px) {
  .recv-list li {
    flex-wrap: wrap;
  }
  .recv-list .rk {
    width: auto;
    min-width: 5.5em;
  }
  .recv-list .copy-btn {
    margin-left: 0;
  }
}

.amount-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.amount-row .field {
  flex: 1 1 200px;
  min-width: 180px;
  margin-bottom: 0;
}
.amount-row select {
  border: 0;
  border-bottom: 1.6px solid var(--line);
  background: transparent;
  padding: 9px 2px;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: 0.25s;
}
.amount-row select:focus {
  border-bottom-color: var(--brand);
}

/* 下拉 / 日期：跟 .field input 的下劃線風格保持一致
   （style.css 的 .field input 只覆蓋了 text/email/tel/password） */
.field .ctrl select,
.field .ctrl input[type="date"] {
  flex: 1;
  width: 100%;
  border: 0;
  border-bottom: 1.6px solid var(--line);
  background: transparent;
  padding: 9px 2px;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: 0.25s;
  min-height: 44px;
}
.field .ctrl select:focus,
.field .ctrl input[type="date"]:focus {
  border-bottom-color: var(--brand);
}
.field input[type="date"] {
  color-scheme: light;
}

.quick-amt {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.quick-amt button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  border-radius: 999px;
  font-size: 12px;
  padding: 6px 13px;
  transition: 0.2s;
}
.quick-amt button:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
  background: #fff7e8;
}

/* 檔案上傳 */
.file-drop {
  border: 1.6px dashed var(--line);
  border-radius: 13px;
  padding: 18px;
  text-align: center;
  background: var(--panel-2);
  transition: 0.2s;
  cursor: pointer;
  display: block;
}
.file-drop:hover,
.file-drop.drag {
  border-color: var(--brand);
  background: #fffaf0;
}
.file-drop svg {
  width: 26px;
  height: 26px;
  stroke: var(--brand-deep);
  stroke-width: 1.7;
  fill: none;
  margin: 0 auto 8px;
}
.file-drop b {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
}
.file-drop span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.file-drop input[type="file"] {
  display: none;
}
.file-picked {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  font-size: 12.5px;
}
.file-picked .fi {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff3dd;
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  flex: 0 0 auto;
}
.file-picked .fname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-picked .fsize {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 11.5px;
  flex: 0 0 auto;
}
.file-picked .fx {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 7px;
}
.file-picked .fx:hover {
  color: var(--danger);
  background: #fdf1f0;
}
/* 憑證即時上傳狀態：上傳中（琥珀）/ 成功（綠）/ 失敗（紅 + 重試） */
.vch-state {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.vch-state.uploading {
  color: #a8791f;
}
.vch-state.ok {
  color: #1d7a45;
}
.vch-state.fail {
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vch-retry {
  border: 1px solid var(--danger);
  background: #fff;
  color: var(--danger);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  cursor: pointer;
}
.vch-retry:hover {
  background: #fdf1f0;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
  min-height: 44px;
}
.check-row input {
  margin: 4px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  flex: 0 0 auto;
}

.form-foot {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 16px;
  margin-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.form-foot .btn {
  padding: 11px 26px;
  font-size: 14px;
}
.form-foot .hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* 表單錯誤（不清空輸入，只內聯高亮） */
.f-err {
  background: #fdf1f0;
  border: 1px solid #f5d9d7;
  color: var(--danger);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 12.5px;
  margin: 0 0 16px;
  line-height: 1.6;
}
.field.bad input,
.field.bad select {
  border-bottom-color: var(--danger) !important;
}

/* 密碼規則清單 */
.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.rules li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-3);
  transition: 0.2s;
}
.rules li .ic {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 10px;
  color: transparent;
  transition: 0.2s;
}
.rules li.ok {
  color: var(--ok);
}
.rules li.ok .ic {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

/* 強度條 */
.strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.strength .bars {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}
.strength .bars i {
  width: 34px;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  transition: 0.25s;
}
.strength .lbl {
  font-size: 11.5px;
  color: var(--ink-3);
}
.strength[data-lv="1"] .bars i:nth-child(1) {
  background: var(--danger);
}
.strength[data-lv="2"] .bars i:nth-child(-n + 2) {
  background: var(--brand);
}
.strength[data-lv="3"] .bars i {
  background: var(--ok);
}

/* 頂欄在窄屏時收緊 */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    padding: 16px 14px 52px;
    gap: 16px;
  }
  /* 側欄改成「橫向標籤條」，跟著頁面滾動（不再 sticky）；
     同時中和 style.css 窄屏 .side 泄漏進來的 padding / min-width / text-align */
  .side {
    position: static;
    padding: 0;
    min-width: 0;
    text-align: left;
  }
  .who {
    padding: 13px 15px;
  }
  .who .av {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 15px;
  }
  .side-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 9px;
    gap: 8px;
  }
  .side-item {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    padding: 10px 14px;
    min-height: 44px;
  }
  .side-item.on::before {
    display: none;
  }
  .side-item .arrow {
    display: none;
  }
  .side-foot {
    display: none;
  }
  .cards2 {
    grid-template-columns: 1fr;
  }
  .user-chip .nm {
    display: none;
  }
  .user-chip {
    padding: 5px;
  }
  /* 窄屏：語言切換與頭像 / 登出擠一行，收緊間距與按鈕內邊距 */
  .hb-right {
    gap: 8px;
  }
  .hb-right .lang button {
    padding: 4px 7px;
  }
  .vhead h1 {
    font-size: 19px;
  }
  .stat .num {
    font-size: 20px;
  }
}

@media (max-width: 560px) {
  .row {
    font-size: 13px;
  }
  .row .k {
    min-width: 66px;
  }
  .form-foot .btn {
    flex: 1 1 auto;
  }
  .form-foot .hint {
    margin-left: 0;
  }
}

/* ============ 入金申請補充 ============ */
/* 登入帶出的唯讀欄位 */
.field .ctrl input[readonly] {
  color: var(--ink-2);
  cursor: default;
}
/* 欄位下方說明 */
.note {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.6;
}
/* 入金記錄列表 */
.mini-list .badge {
  margin-left: auto;
  flex: 0 0 auto;
}
.mini-list .dep-url {
  margin-left: 14px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-deep);
  white-space: nowrap;
}
.mini-list .dep-url:hover {
  text-decoration: underline;
}
.dep-remark {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-2);
  background: #fdf6e8;
  border-left: 2px solid var(--brand);
  padding: 4px 9px;
  border-radius: 0 6px 6px 0;
  word-break: break-all;
}
.mini-list .mt span {
  word-break: break-all;
}
.dep-empty {
  display: block;
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
  padding: 24px 18px;
}
.dep-empty:last-child {
  border-bottom: 0;
}
.dep-retry {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-deep);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  margin-left: 8px;
}
.dep-retry:hover {
  border-color: var(--brand);
  background: #fff7e8;
}

/* ============ 「我的帳戶」顯隱 ============ */
/* 開關由 FEATURES.account（見 assets/home.js 頂部）驅動，
   落到 home.html 的 <html data-account="on|off"> 屬性上（標籤默認寫 off）。
   關掉時：側欄菜單項與帳戶總覽整塊一起收起，默認視圖改由 JS 落到「入金申請」。 */
html[data-account="off"] .side-item[data-v="account"],
html[data-account="off"] .view[data-v="account"] {
  display: none !important;
}

/* ============ 支付方式開關（入金 / 出金共用） ============ */
/* 開關由 FEATURES.payMethods（見 assets/home.js 頂部）驅動，
   落到 home.html 的 <html data-pay-bank="on|off" data-pay-usdt="on|off">
   （標籤當前默認寫 off / on，即只留 USDT）。
   home.js 的 applyPayMethods() 會直接把關掉的 option 節點移除，
   這裡是「首屏 / 無 JS」的兜底收起。 */
html[data-pay-bank="off"] #dep_payType option[value="1"],
html[data-pay-bank="off"] #wd_payType option[value="1"],
html[data-pay-usdt="off"] #dep_payType option[value="2"],
html[data-pay-usdt="off"] #wd_payType option[value="2"] {
  display: none;
}

/* 被關掉的方式，其收款信息面板一併收起
   （即使 JS 還沒來得及改 #recvInfo / #wdDetail 上的 data-pay 屬性） */
html[data-pay-bank="off"] #recvInfo .recv-pane[data-for="1"],
html[data-pay-bank="off"] #wdDetail .wd-group[data-for="1"],
html[data-pay-usdt="off"] #recvInfo .recv-pane[data-for="2"],
html[data-pay-usdt="off"] #wdDetail .wd-group[data-for="2"] {
  display: none !important;
}

/* ============ 未登入守衛層 ============ */
/* 開關由 home.html 的 <html data-auth> 屬性驅動
   （inline 腳本在首屏渲染前就寫好，見 head 註釋） */
html[data-auth="off"] .topbar,
html[data-auth="off"] .shell,
html[data-auth="off"] .toast {
  display: none !important;
}

.auth-gate {
  display: none;
}
html[data-auth="off"] .auth-gate {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(720px 420px at 16% 10%, rgba(245, 166, 35, 0.2), transparent 62%),
    radial-gradient(560px 380px at 88% 90%, rgba(224, 138, 0, 0.15), transparent 60%),
    linear-gradient(160deg, #fbf8f2 0%, #f4f1ea 48%, #eee8dd 100%);
  animation: gate-fade 0.3s ease both;
}
@keyframes gate-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.gate-card {
  width: min(430px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 34px 30px 26px;
  text-align: center;
}
.gate-lock {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--brand-2), var(--brand-deep));
  box-shadow: 0 10px 26px -10px rgba(224, 138, 0, 0.75);
  animation: gate-pulse 2.4s ease-in-out infinite;
}
@keyframes gate-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
.gate-lock svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gate-card h2 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: 0.4px;
  color: var(--ink);
}
.gate-card p {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* 自動跳轉進度條：時長與 home.js 的 3000ms 對齊 */
.gate-bar {
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line-soft);
  margin-bottom: 18px;
}
.gate-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  animation: gate-fill 3s linear forwards;
}
@keyframes gate-fill {
  to {
    width: 100%;
  }
}

.gate-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.gate-foot > span {
  font-size: 12.5px;
  color: var(--ink-3);
}
.gate-foot > span b {
  color: var(--brand-deep);
  font-size: 15px;
}
.gate-foot .btn {
  padding: 10px 20px;
  font-size: 13.5px;
}

@media (max-width: 420px) {
  .gate-foot {
    flex-direction: column;
  }
  .gate-foot .btn {
    width: 100%;
  }
}

/* 尊重 prefers-reduced-motion：關掉呼吸與進度條動畫 */
@media (prefers-reduced-motion: reduce) {
  html[data-auth="off"] .auth-gate,
  .gate-lock,
  .gate-bar i {
    animation: none;
  }
  .gate-bar i {
    width: 100%;
    opacity: 0.45;
  }
  /* 收款信息切換的淡入也一併關掉（銀行卡 / USDT、入金 / 出金兩處） */
  .recv-info .recv-pane,
  .wd-detail .wd-group {
    animation: none;
  }
  /* 出金警示條圖示的呼吸也關掉 */
  .warn-bar-ic {
    animation: none;
  }
}