@charset "utf-8";
/* ==========================================================================
   MT娛樂城 /action/ 改版樣式表(取代式)
   --------------------------------------------------------------------------
   這支是 v2 樣板唯一的自有樣式表,由 includes/head_clean.php 載入。
   head_clean 不載 style.css / marquee.css / fixmenu.css,所以版面要靠這裡撐完。
   舊樣板與舊樣式表一個字都沒動,還原就是把控制器指回舊 view。

   色票取自 mt8989.com WP 首頁實測值(深黑酒紅金),不是憑感覺調的。
   間距只有一組尺度(--s1~--s10),不逐處手調(天條 37)。
   區塊只設上間距,不設下間距(天條 38)。
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 設計 token */
:root {
  /* 底色:由上而下漸深,和 WP 首頁同一組 */
  --ink-0:   #160406;
  --ink-1:   #1c0609;
  --ink-2:   #210b10;
  --ink-3:   #2a1015;
  --card-a:  #341419;
  --card-b:  #241014;

  /* 分隔線 */
  --line:    #43242a;
  --line-2:  #4a2830;

  /* 金 —— 主要強調色 */
  --gold:     #d8af52;
  --gold-hi:  #efd07e;
  --gold-soft:#f6e3ae;
  --gold-ink: #3a2600;      /* 金底上的字 */

  /* 酒紅 —— 頁首與主要區塊底 */
  --wine-a:  #6d1420;
  --wine-b:  #4a0d15;

  /* 文字 */
  --text:    #f6ece2;
  --text-2:  #d4bcb4;
  --text-3:  #c5b1ab;
  --accent:  #e0466a;

  /* 狀態 */
  --ok:      #4fbf8b;
  --warn:    #e8b44a;
  --err:     #f49ba9;
  /* 狀態籤的底:不用「該色 14% 疊上去」——那會讓底色跟著文字色一起變亮,
     warn 那顆量出來只有 4.99。統一深底,顏色本身就不用為了對比被沖淡。 */
  --pill-bg: rgba(11,4,6,.62);

  /* 間距尺度:全站只用這十個值 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;

  /* 左右留白:手機不要接近滿版 */
  --edge: var(--s4);
  --maxw: 1180px;

  /* 字級:內文 16、區塊標題 24(規格指定)。
     h1 28 / h2 24 / h3 19 / 內文 16 —— 每頁一個 h1(天條 43),
     區塊標題維持 24,階梯再用字重與顏色加強(天條 42)。 */
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-body: 16px;
  --fs-lead: 17px;
  --fs-h3:   19px;
  --fs-h2:   24px;
  --fs-h1:   28px;

  /* 圓角 */
  --r1: 10px; --r2: 14px; --r3: 18px; --r-pill: 999px;

  /* 固定元件高度 */
  --hdr-h:  58px;
  --bnav-h: 62px;

  --shadow-card: 0 12px 26px -20px rgba(0,0,0,.95);
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

@media (min-width: 768px) {
  :root { --edge: var(--s6); --hdr-h: 64px; }
}
@media (min-width: 1024px) {
  :root { --edge: var(--s7); --hdr-h: 68px; }
}

/* ---------------------------------------------------------------- 2. 基底 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  /* 底部固定列不要壓住內容;不用 100vh 撐高,避免多出一截空白 */
  padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
@media (min-width: 1024px) { body { padding-bottom: 0; } }

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
/* bootstrap 有 `a:hover{color:#0a58ca}`(0,1,1),比上面那條 `a`(0,0,1)高一階 ——
   不寫這條的話,**全站每一個連結滑過去的瞬間都會變成 bootstrap 藍**:
   頁首的金色按鈕、遊戲卡名稱、公告條、會員選單全中,金底藍字只有 3.67:1。
   靜止狀態的對比巡檢量不到,要 tools/contrast_states.py 鎖 :hover 才看得見。
   這條放在這裡(而不是檔案最後),後面各元件自己的 :hover 才蓋得過它。 */
a:hover, a:focus, a:active { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: var(--fs-body); }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.35; font-weight: 800; color: var(--text); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4, h5, h6 { font-size: var(--fs-body); }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Bootstrap 4 的預設值會把底色刷白、字刷深,這裡按回來 */
.container, .container-fluid { padding-left: 0; padding-right: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- 3. 版面骨架 */
/* 背景區塊滿版,內容再限寬置中(天條 39) */
.sect { width: 100%; margin-top: var(--s8); }
.sect:first-child { margin-top: 0; }
.sect > .in,
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); }

/* 深一階的區塊底(滿版) */
.sect-alt { background: linear-gradient(180deg, var(--ink-1), var(--ink-0)); padding: var(--s8) 0; }
.sect-alt:first-child { margin-top: 0; }

/* 區塊標頭:間距走父層 gap,不用 margin-bottom */
.sect-hd { display: grid; gap: var(--s2); }
.sect-hd .kk {
  font-size: var(--fs-xs); letter-spacing: .32em; color: var(--gold);
  text-transform: uppercase;
}
.sect-hd .lede { color: var(--text-2); font-size: var(--fs-body); max-width: 56ch; }

.stack   { display: grid; gap: var(--s5); }
.stack-s { display: grid; gap: var(--s3); }

/* ---------------------------------------------------------------- 4. 頁首 */
.hdr {
  position: sticky; top: 0; z-index: 900;
  width: 100%;
  background: linear-gradient(180deg, var(--wine-a), var(--wine-b));
  border-bottom: 1px solid rgba(216,175,82,.4);
}
.hdr-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge);
  min-height: var(--hdr-h);
  display: flex; align-items: center; gap: var(--s3);
}
.hdr-logo { flex: none; display: flex; align-items: center; }
.hdr-logo img { height: 34px; width: auto; }
@media (min-width: 1024px) { .hdr-logo img { height: 38px; } }

.hdr-nav { display: none; }
@media (min-width: 1024px) {
  .hdr-nav { display: flex; align-items: center; gap: var(--s6); margin-left: var(--s7); }
  .hdr-nav a {
    color: var(--text); font-weight: 700; font-size: var(--fs-body);
    padding: var(--s2) 0; border-bottom: 2px solid transparent;
  }
  .hdr-nav a:hover, .hdr-nav a.on { color: var(--gold-hi); border-bottom-color: var(--gold); }
}

.hdr-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

/* 餘額點數:登入後頁首固定有一格,手機也看得到 */
.hdr-bal {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3);
  background: rgba(22,4,6,.5);
  border: 1px solid rgba(216,175,82,.45);
  border-radius: var(--r-pill);
  line-height: 1.2;
}
.hdr-bal .lb { font-size: var(--fs-xs); color: var(--text-2); display: none; }
.hdr-bal .vv { font-size: var(--fs-body); font-weight: 800; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.hdr-bal .ic { width: 18px; height: 18px; flex: none; }
@media (min-width: 768px) { .hdr-bal .lb { display: block; } }

/* 頁首按鈕 */
.hbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 40px; padding: 0 var(--s4);
  border-radius: var(--r1); font-weight: 800; font-size: var(--fs-sm);
  border: 1px solid transparent; white-space: nowrap; cursor: pointer;
}
.hbtn-ghost { color: var(--gold-hi); border-color: var(--gold); background: rgba(216,175,82,.08); }
.hbtn-solid { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink); }
/* 這兩顆是 <a>,所以互動狀態的字色**一定要自己寫**:
   上面那條中和 bootstrap 用的 `a:hover{color:inherit}` 是 0,1,1,
   比 `.hbtn-solid`(0,1,0)高 —— 不寫的話金底會配到繼承來的淺色字,1.50:1。
   兩個 class 的選擇器是 0,2,0,壓得過去。 */
.hbtn-ghost:hover, .hbtn-ghost:focus, .hbtn-ghost:active {
  /* 金字配「金 18% 疊在酒紅頁首上」只有 6.62 —— 底色跟著文字色一起變亮,
     兩邊一起靠攏。壓低疊色、字改最亮那階,量到 8.79。 */
  background: rgba(216,175,82,.12); color: var(--gold-soft);
}
.hbtn-solid:hover, .hbtn-solid:focus, .hbtn-solid:active {
  filter: brightness(1.06); color: var(--gold-ink);
}
.hbtn .btn-icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- 5. 底部固定選單 */
.bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  background: linear-gradient(180deg, #2a0a0e, #170406);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bnav ul { display: flex; }
.bnav li { flex: 1 1 0; min-width: 0; }
.bnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: var(--bnav-h); padding: var(--s2) var(--s1);
  color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; line-height: 1.2;
}
.bnav a .ic { width: 22px; height: 22px; object-fit: contain; }
.bnav a.on, .bnav a:hover { color: var(--gold-hi); }
.bnav a.on .ic, .bnav a:hover .ic { filter: brightness(1.25); }
/* 主要動作(儲值/註冊)給一顆金點提示 */
.bnav a.hot { color: var(--gold-hi); }
@media (min-width: 1024px) { .bnav { display: none; } }

/* ---------------------------------------------------------------- 6. 主視覺與跑馬燈 */
.hero { position: relative; width: 100%; }

/* 純 CSS 橫向捲動 + snap,不依賴 swiper 的初始化 */
.hero-rail {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-rail::-webkit-scrollbar { display: none; }
.hero-rail { border-radius: var(--r2); overflow: hidden; }
.hero-rail .slide { flex: 0 0 100%; scroll-snap-align: center; }
/* 不裁圖:橫幅上通常有字,object-fit:cover 會把字切掉。
   但**位子要先留好** —— 原本寫 `height:auto`,圖還沒到之前這一格是 0 高,
   圖一載進來整頁往下推。實測正式站電腦版 CLS 0.2176(門檻 0.1),
   位移來源就是 .sect,而且它是首屏第一個區塊,所以「一進站畫面跳一下」。
   給一個跟素材相同的比例把空間佔住,contain 保證永遠不裁 ——
   哪天後台換了別的比例,也只是上下留深底,不會裁掉字、也不會再跳。 */
.hero-rail .slide { aspect-ratio: 2172 / 724; background: var(--ink-2); }
.hero-rail .slide picture { display: block; width: 100%; height: 100%; }
.hero-rail .slide img { width: 100%; height: 100%; object-fit: contain; }
.hero-fallback { border-radius: var(--r2); }

/* 主視覺與它下面那排 CTA 貼近一點,不用整個區塊間距 */
.sect-tight { margin-top: var(--s4); }

.hero-fallback {
  width: 100%; aspect-ratio: 16 / 7;
  background:
    radial-gradient(120% 120% at 70% 20%, rgba(216,175,82,.22), transparent 60%),
    linear-gradient(180deg, var(--wine-b), var(--ink-1));
  display: grid; place-content: center; gap: var(--s3); text-align: center;
  padding: 0 var(--edge);
}
.hero-fallback .t { font-size: var(--fs-h1); font-weight: 900; color: var(--gold-hi); }
.hero-fallback .d { color: var(--text-2); }

.ticker {
  width: 100%; margin-top: var(--s4);
  background: rgba(42,16,21,.85);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ticker .in {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s2) var(--edge);
  display: flex; align-items: center; gap: var(--s3);
  color: var(--text-2); font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden;
}
.ticker .tag {
  flex: none; color: var(--gold-hi); font-weight: 800;
  border: 1px solid rgba(216,175,82,.5); border-radius: var(--r-pill);
  padding: 2px var(--s3); font-size: var(--fs-xs);
}
.ticker .msg { overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- 6b. 錢包快捷 */
.wallet-sect { margin-top: var(--s5); }
.wallet {
  display: grid; gap: var(--s4);
  padding: var(--s5);
  background: linear-gradient(120deg, var(--ink-3), var(--card-b) 62%);
  border: 1px solid rgba(216,175,82,.34); border-radius: var(--r2);
}
.wl-main { display: grid; gap: var(--s3); }
.wl-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.wl-lb  { font-size: var(--fs-sm); color: var(--text-2); }
.wl-uid { font-size: var(--fs-body); font-weight: 800; }
.wl-amt {
  font-size: 30px; font-weight: 900; color: var(--gold-hi);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.wl-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.wl-act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 64px; padding: var(--s2);
  border: 1px solid var(--line-2); border-radius: var(--r1);
  background: rgba(255,255,255,.04);
  color: var(--text); font-size: var(--fs-sm); font-weight: 700;
}
.wl-act i { font-size: 20px; color: var(--gold-hi); }
.wl-act:hover { border-color: rgba(216,175,82,.6); background: rgba(216,175,82,.1); }
.wl-act.hot { border-color: rgba(216,175,82,.7); background: rgba(216,175,82,.14); }
@media (min-width: 768px) {
  .wallet { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--s7); }
  .wl-main { gap: var(--s2); }
  .wl-row { justify-content: flex-start; gap: var(--s4); }
  .wl-acts { grid-template-columns: repeat(4, 96px); }
}

/* ---------------------------------------------------------------- 6c. 區塊標題(照 DG66)
   左邊一條金直線 + 標題,右上角一個文字連結。DG66 首頁每一區都是這個形狀。 */
.sec-hd {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.sec-hd h2, .sec-hd h1 {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--fs-h2);
}
.sec-hd h2::before, .sec-hd h1::before {
  content: ""; width: 4px; height: 1.05em; flex: none; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
}
.sec-hd .more-link {
  flex: none; color: var(--gold-hi); font-size: var(--fs-sm); font-weight: 700;
  white-space: nowrap;
}
.sec-hd .more-link:hover { color: var(--gold-soft); }

/* 主視覺下面兩顆並排(未登入) */
.hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

/* ---------------------------------------------------------------- 7. 遊戲小卡 */
/* 遊戲卡的網格看 .tgrid(玩法卡)與 .grid-p(優惠卡)。
   這裡原本還有一組 .grid-g,是舊的「體育・試玩」三張卡在用的 ——
   那個區塊拿掉之後沒有任何樣板再掛這個 class,規則留著也只會讓
   缺陷注入打在空氣上(注入成功、巡檢全過,看起來像檢查失效)。 */

.gcard {
  display: grid; grid-template-rows: auto auto; align-content: start;
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--line-2); border-radius: var(--r3);
  overflow: hidden; box-shadow: var(--shadow-card);
  color: var(--text);
}
.gcard:hover { border-color: rgba(216,175,82,.55); }
/* 卡片下緣一行。class 叫 .crow 不叫 .row —— .row 是 bootstrap 的核心
   (display:flex + flex-wrap:wrap + 負 margin),撞名會讓名稱與按鈕折成兩行。
   名稱靠左、進入遊戲靠右 —— DG66 首頁的卡就是這個形狀,
   不放敘述、不放標籤。這裡是操作介面,不是行銷頁(天條 53)。 */
.gcard .crow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
}
.gcard .crow .nm { font-size: var(--fs-body); font-weight: 800; min-width: 0; }
.gcard .crow .go { flex: none; color: var(--gold-hi); font-size: var(--fs-sm); font-weight: 800; }
/* 手機兩欄時卡片只有 ~173px:「極速百家」+「進入大廳 ›」放不進同一行,
   名稱會折成兩行,同一列的六張卡看起來高低不齊。窄螢幕改成上下兩行,
   名稱一行、連結靠右一行 —— 字都留著,不靠縮字級硬塞。 */
@media (max-width: 520px) {
  .gcard .crow { flex-wrap: wrap; row-gap: 2px; padding: var(--s2) var(--s3); }
  .gcard .crow .nm { flex: 1 0 100%; }
  .gcard .crow .go { margin-left: auto; }
}

/* 玩法卡:卡面用 mt8989 自己 WP 前台的荷官實拍圖(tools/make_game_art.py 裁切),
   不是別站的圖(天條 27)。原圖是直式,裁成 4:3 才留得住臉 ——
   手機兩欄時卡片只有 ~173px 寬,壓成 16:10 臉就沒了。 */
.tgrid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .tgrid { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.gcard .art {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(180deg, var(--ink-2), var(--card-b));
}
/* 用 cover 釘死,不靠 img 的原生比例剛好等於容器比例 —— 換圖就會歪 */
.gcard .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gcard .art svg { width: 56px; height: 56px; color: var(--gold-hi); }
@media (min-width: 1024px) { .gcard .art svg { width: 64px; height: 64px; } }
.gcard:hover .art svg { color: var(--gold-soft); }
/* 玩法標籤:名稱取自程式裡真實的 gametypearray,不是裝飾 */
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chips li {
  font-size: var(--fs-xs); line-height: 1.6; color: var(--text-2);
  padding: 1px var(--s2); border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
}
.gcard .go {
  margin-top: var(--s1); display: inline-flex; align-items: center; gap: var(--s1);
  color: var(--gold-hi); font-weight: 800; font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------- 8. 優惠小卡 */
/* DG66 的優惠是桌機兩欄、手機一欄 —— 活動圖是寬幅,兩欄才看得清楚 */
.grid-p { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
/* 線上就三則活動。電腦版直接排三欄,一列剛好放完、沒有落單尾巴(天條 55);
   兩欄的話第三張得撐滿整列,而那三張圖同時也是主視覺輪播的圖 ——
   一張 393px 高的大橫幅緊接在主視覺下面,看起來像同一張貼了兩次。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-p { grid-template-columns: repeat(2, 1fr); }
  .grid-p > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 1024px) { .grid-p { grid-template-columns: repeat(3, 1fr); } }

/* 優惠卡:大圖 + 一行(標題左、查看辦法右)—— 與遊戲卡同一種形狀 */
.pcard {
  display: grid; grid-template-rows: auto auto; align-content: start;
  background: linear-gradient(180deg, var(--ink-3), var(--card-b));
  border: 1px solid var(--line); border-radius: var(--r2);
  overflow: hidden; color: var(--text);
}
.pcard:hover { border-color: rgba(216,175,82,.55); }
/* 活動圖的比例照線上素材給:2172x724(3:1)的長橫幅,標題、辦法、按鈕全烤在圖裡。
   原本框成 16:9 + cover,左右各裁掉四分之一 —— 「24 小時快速出金」的
   LOGO 跟右邊那支手機都被切掉。改成 3:1 + contain:
   比例一樣的就是滿版不裁;哪天後台換了一張別的比例,也只是上下留深底,
   不會把字裁掉。卡片高度靠 aspect-ratio 鎖住,兩張並排一樣高。 */
/* 選擇器不能寫 `.pcard > img` —— 圖包了一層 `<picture>` 之後 img 變成孫層,
   子選擇器就對不到,卡片會塌成原圖高度。`<picture>` 本身是 inline,
   在 grid 裡要自己變 block,不然下面會多一條基線的空隙。 */
.pcard > picture { display: block; min-width: 0; }
.pcard > img,
.pcard > picture > img {
  width: 100%; aspect-ratio: 3 / 1; object-fit: contain; background: var(--ink-2);
}
.pcard .crow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line);
}
.pcard .crow .nm { font-size: var(--fs-body); font-weight: 800; min-width: 0; }
.pcard .crow .go { flex: none; color: var(--gold-hi); font-size: var(--fs-sm); font-weight: 800; }
.pcard .ic {
  width: 44px; height: 44px; border-radius: var(--r1);
  background: rgba(216,175,82,.1); border: 1px solid rgba(216,175,82,.35);
  display: grid; place-content: center; color: var(--gold-hi); font-size: 22px;
}
.pcard h3 { font-size: var(--fs-h3); }
.pcard p  { color: var(--text-2); font-size: var(--fs-sm); }

/* 客服橫幅:手機直式、電腦一整排,不留大片空白 */
.cs-band {
  display: grid; gap: var(--s4); justify-items: start;
  padding: var(--s6);
  background: linear-gradient(120deg, var(--ink-3), var(--card-b) 60%);
  border: 1px solid rgba(216,175,82,.32); border-radius: var(--r2);
}
.cs-band .ic {
  width: 48px; height: 48px; border-radius: var(--r1); flex: none;
  background: rgba(216,175,82,.12); border: 1px solid rgba(216,175,82,.4);
  display: grid; place-content: center; color: var(--gold-hi); font-size: 24px;
}
.cs-band .tx { display: grid; gap: var(--s1); }
.cs-band .tx h2 { font-size: var(--fs-h2); }
.cs-band .tx p  { color: var(--text-2); font-size: var(--fs-sm); }
@media (min-width: 768px) {
  .cs-band {
    grid-template-columns: auto 1fr auto;
    align-items: center; gap: var(--s5); justify-items: stretch;
  }
}

/* ---------------------------------------------------------------- 9. 按鈕 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s6);
  border: 1px solid transparent; border-radius: var(--r1);
  font-weight: 800; font-size: var(--fs-body); cursor: pointer;
  background: rgba(216,175,82,.08); color: var(--gold-hi); border-color: rgba(216,175,82,.6);
}
.btn-primary { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink); border-color: transparent; }
.btn-quiet { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--line-2); }
.btn-block { width: 100%; }

/* ── .btn 撞名 bootstrap,互動狀態一定要自己全部寫掉 ────────────────────
   bootstrap.min.css 裡有這幾條,而且都是 0,2,0 比我的 `.btn`(0,1,0)高:
     .btn:hover                    { color:#212529 }              ← 近黑
     .btn:focus                    { box-shadow: 0 0 0 .25rem rgba(13,110,253,.25) }
     .btn-primary:hover / :focus   { color:#fff; background:#0b5ed7 }  ← 藍
     .btn-primary:active           { color:#fff; background:#0a58ca }
   結果:滑過／按下去的那一瞬間,金色外框鈕的字被刷成近黑色,配我的深底
   = 對比 1.3,字直接不見;金色實心鈕則整顆變成 bootstrap 藍。
   一般的對比巡檢量的是靜止狀態,量不到這個。
   base.css 排在 bootstrap 後面,同權重後寫的贏 —— 但**每一個屬性都要寫出來**,
   沒寫到的那個屬性(原本就是漏了 color)還是會掉回 bootstrap。 */
.btn:hover, .btn:focus, .btn:active, .btn.active {
  background: rgba(216,175,82,.18);
  color: var(--gold-hi);
  border-color: var(--gold);
  box-shadow: none;
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-hi));
  color: var(--gold-ink);
  border-color: transparent;
  box-shadow: none;
}
.btn-quiet:hover, .btn-quiet:focus, .btn-quiet:active, .btn-quiet.active {
  background: rgba(255,255,255,.12);
  color: var(--text);
  border-color: var(--line-2);
  box-shadow: none;
}

/* 成對按鈕:同一行、左右兩顆(規格指定) */
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.btn-row .btn { width: 100%; }

/* 沒有 class 的裸 button 也要有底色,不然掉回瀏覽器預設的白底白字 */
button:not([class]),
.modal button:not([class]) {
  background: rgba(255,255,255,.06); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r1);
  min-height: 44px; padding: 0 var(--s5); font-weight: 700; cursor: pointer;
}

/* ---------------------------------------------------------------- 10. 表單 */
.fld { display: grid; gap: var(--s2); }
.fld > label, .lbl {
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-2);
}
.fld .hint { font-size: var(--fs-xs); color: var(--text-3); }

/* 注意 input:not([type]) —— 超商的郵遞區號欄沒寫 type,
   只靠 input[type="text"] 選不到,會留下一個白底白字的框。 */
input:not([type]),
input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="tel"], input[type="date"], select, textarea,
.form-control {
  width: 100%; min-height: 48px;
  padding: var(--s2) var(--s3);
  background: rgba(11,4,6,.72);
  border: 1px solid var(--line-2); border-radius: var(--r1);
  color: var(--text); font-size: var(--fs-body); line-height: 1.5;
}
textarea, textarea.form-control { min-height: 96px; padding: var(--s3); }
/* .form-control::placeholder 是 bootstrap 給的 #6c757d,在深底上只有 4.2:1。
   選擇器要寫得比它具體才壓得過去。 */
input::placeholder, textarea::placeholder,
.form-control::placeholder,
input.form-control::placeholder, textarea.form-control::placeholder { color: var(--text-3); opacity: 1; }
input:focus, select:focus, textarea:focus, .form-control:focus {
  outline: none; border-color: var(--gold); background: rgba(11,4,6,.9);
  box-shadow: 0 0 0 3px rgba(216,175,82,.18);
}
select, select.form-control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s8);
}
select option { background: var(--ink-2); color: var(--text); }
/* 檔案上傳:原生控制項是白底,按鈕文字還是瀏覽器給的英文 "Choose File",
   ::file-selector-button 改得了顏色但改不了字。所以把原生欄位藏起來,
   用 label 當按鈕(label 點下去照樣會開檔案選擇器,input 的 name/id 完全沒動)。 */
.filefield { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.filefield input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.filefield > label.pickbtn {
  flex: none; min-height: 44px; padding: 0 var(--s4);
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid rgba(216,175,82,.6); border-radius: var(--r1);
  background: rgba(216,175,82,.12); color: var(--gold-hi);
  font-size: var(--fs-sm); font-weight: 800; cursor: pointer;
}
.filefield > label.pickbtn:hover { background: rgba(216,175,82,.24); }
.filefield input[type="file"]:focus-visible + label.pickbtn {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.filefield .fname {
  min-width: 0; color: var(--text-2); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filefield .fname.picked { color: var(--text); }

/* ---------------------------------------------------------------- 11. 會員中心 */
/* 分頁列、側欄、內容都是 .mc 的子項:手機單欄由上而下,
   電腦把分頁列關掉、剩側欄與內容兩欄。導覽因此可以做成一個共用件。 */
.mc { display: grid; gap: var(--s5); }
@media (min-width: 1024px) {
  /* 兩欄都靠上。試過把側欄拉到滿高,結果 .mc-body 跟著變高,
     裡面用 gap 排的 panel 被平均分配 —— 快捷鈕變成橢圓、表格跟分頁中間開一個大洞。
     內容短的頁面下面留白是正常的,不要為了填滿而拉伸。 */
  .mc { grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: var(--s7); }
}

/* 側欄(電腦)/ 橫向分頁(手機) */
/* 手機用上方的 .mc-tabs,側欄只在電腦出現 —— 兩個都出來就是重複導覽 */
.mc-side { display: none; }
@media (min-width: 1024px) {
  .mc-side {
    display: grid; gap: var(--s4);
    background: linear-gradient(180deg, var(--ink-3), var(--card-b));
    border: 1px solid var(--line); border-radius: var(--r2);
    padding: var(--s4);
  }
}
.mc-user { display: grid; gap: var(--s1); }
.mc-user .uid { font-weight: 800; font-size: var(--fs-lead); }
.mc-user .lv  { font-size: var(--fs-xs); color: var(--gold-hi); }
.mc-wallet {
  display: grid; gap: var(--s1);
  padding: var(--s3); border-radius: var(--r1);
  background: rgba(11,4,6,.6); border: 1px solid rgba(216,175,82,.3);
}
.mc-wallet .lb { font-size: var(--fs-xs); color: var(--text-2); }
.mc-wallet .vv { font-size: 22px; font-weight: 900; color: var(--gold-hi); font-variant-numeric: tabular-nums; }

.mc-menu { display: grid; gap: var(--s1); }
.mc-menu a {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 48px; padding: 0 var(--s3);
  border-radius: var(--r1); color: var(--text); font-weight: 700; font-size: var(--fs-sm);
}
.mc-menu a .ic { width: 22px; height: 22px; flex: none; }
.mc-menu a:hover { background: rgba(216,175,82,.08); }
.mc-menu a.on { background: rgba(216,175,82,.14); color: var(--gold-hi); }

/* 手機:選單改成可捲的分頁列(自己捲,不讓整頁橫捲) */
.mc-tabs { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.mc-tabs::-webkit-scrollbar { display: none; }
.mc-tabs a {
  flex: none; min-height: 44px; padding: 0 var(--s4);
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--text-2); font-weight: 700; font-size: var(--fs-sm);
  background: rgba(255,255,255,.03);
}
.mc-tabs a.on { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: transparent; }
@media (min-width: 1024px) { .mc-tabs { display: none; } }

.mc-body { display: grid; gap: var(--s6); min-width: 0; }

/* 完成度進度卡(照 DG66 的引導卡) */
.mp { border-color: rgba(216,175,82,.4); }
.mp-bar {
  height: 6px; border-radius: var(--r-pill); overflow: hidden;
  background: rgba(255,255,255,.08);
}
.mp-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
}
.mp-steps { display: grid; gap: var(--s3); }
.mp-step {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r1);
  background: rgba(11,4,6,.45); border: 1px solid var(--line);
}
.mp-no {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-content: center;
  font-size: var(--fs-sm); font-weight: 900;
  color: var(--gold-hi); background: rgba(216,175,82,.12);
  border: 1px solid rgba(216,175,82,.45);
}
.mp-step.done { border-color: rgba(79,191,139,.4); }
.mp-step.done .mp-no {
  color: var(--ok); background: rgba(79,191,139,.14); border-color: rgba(79,191,139,.45);
}
.mp-tx { display: grid; gap: 2px; min-width: 0; }
.mp-nm {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-body); font-weight: 800;
}
.mp-nm i { color: var(--gold-hi); }
.mp-ds { font-size: var(--fs-xs); color: var(--text-2); }
.mp-step .btn { min-height: 44px; padding: 0 var(--s4); font-size: var(--fs-sm); }
@media (max-width: 479px) {
  /* 窄螢幕:按鈕換到下一行整排,不要把說明擠成一個字一行 */
  .mp-step { grid-template-columns: 32px minmax(0, 1fr); }
  .mp-step > .pill, .mp-step > .btn { grid-column: 1 / -1; }
  .mp-step > .btn { width: 100%; }
}

/* 內容面板 */
.panel {
  background: linear-gradient(180deg, var(--ink-3), var(--card-b));
  border: 1px solid var(--line); border-radius: var(--r2);
  padding: var(--s5);
  display: grid; gap: var(--s4);
  min-width: 0;
}
.panel > .panel-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.panel > .panel-hd h1 { font-size: var(--fs-h1); }
.panel > .panel-hd h2 { font-size: var(--fs-h2); }
.panel > .panel-hd .note { flex: none; }
.panel > .panel-hd h3 { font-size: var(--fs-h3); }
.panel .note { color: var(--text-3); font-size: var(--fs-xs); }
.panel .warn-note { color: var(--warn); font-size: var(--fs-xs); }

/* 兩欄表單(電腦),手機自動變一欄 */
.form-grid { display: grid; gap: var(--s4); min-width: 0; }
@media (min-width: 768px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
/* 縣市 / 鄉鎮市區 / 郵遞區號 是三格,排兩欄的話郵遞區號自己一列、右邊空一半。
   郵遞區號是唯讀的 3~5 碼,給它一個窄欄剛好排成一列。
   (name/id/data-role 都沒動,twzipcode 那支外掛照樣認得。) */
@media (min-width: 560px) {
  .form-grid.two.twzipcode { grid-template-columns: 1fr 1fr 96px; gap: var(--s3); }
}

/* 帳戶管理裡的子卡。
   這幾張卡高度差很多(USDT 只有一欄、超商有七欄),用 grid 排兩欄的話
   短的那一欄下面會開一個大洞。改用 column —— 卡片會自己往上遞補,
   高度自然接近,不會留洞。 */
/* 帳戶管理分兩組:必填 / 其他出入金方式(選填)。
   五張擠在同一個 column 容器裡,已綁定狀態下兩欄底部差 454px —— 一邊早就結束、
   另一邊還在跑七欄的超商表單。分組之後高度自然收斂,頁也短很多。 */
.sc-group {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--fs-h3); margin-top: var(--s2);
}
.sc-group::before {
  content: ""; width: 3px; height: 1em; flex: none; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
}
.sc-group span {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 1px var(--s2);
}
.sub-cards { display: grid; gap: var(--s4); min-width: 0; }
@media (min-width: 768px) {
  .sub-cards.two { display: block; column-count: 2; column-gap: var(--s4); }
  .sub-cards.two > .sub-card { break-inside: avoid; margin-top: var(--s4); }
  .sub-cards.two > .sub-card:first-child { margin-top: 0; }
}
.sub-card {
  background: rgba(11,4,6,.45); border: 1px solid var(--line);
  border-radius: var(--r2); padding: var(--s5);
  display: grid; gap: var(--s4);
  min-width: 0;
}

/* grid/flex 項目預設 min-width:auto,裡面只要有一個量不縮的東西
   (長字串、檔案選擇欄、不換行的連結列)就會把整欄撐出視窗。
   這幾層一律歸零,橫向溢出才收得住。 */
.panel > *, .sub-card > *, .form-grid > *, .stack > *, .stack-s > *, .fld > * { min-width: 0; }
.fld { min-width: 0; }
.fld strong, .panel p, .sub-card p { overflow-wrap: anywhere; }
input[type="file"], .custom-file-input { max-width: 100%; }
.sub-card > h3 { font-size: var(--fs-h3); }

/* 折疊卡:收起只看標題 + 狀態籤。已設定的收起來,還沒設定的預設打開。
   只在最外層包一層 details,表單的 name/id/JS 掛鉤都沒動。 */
.sub-card > .sc { display: grid; gap: var(--s4); }
.sub-card > .sc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 44px; cursor: pointer; list-style: none;
}
.sub-card > .sc > summary::-webkit-details-marker { display: none; }
.sub-card > .sc > summary .sc-t {
  font-size: var(--fs-h3); font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: var(--s2);
}
.sub-card > .sc > summary .sc-t::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg); transition: transform .15s;
}
.sub-card > .sc[open] > summary .sc-t::before { transform: rotate(45deg); }
.sub-card > .sc > summary:hover .sc-t { color: var(--gold-hi); }
.sub-card > .sc > .sc-body { display: grid; gap: var(--s4); min-width: 0; }

/* 「看範本」這種行內連結要看得見,不能用最淡的那階 */
a.hint { color: var(--gold-hi); text-decoration: underline; }

/* ---------------------------------------------------------------- 12. 紀錄表格 */
/* 所有紀錄都用表格。寬表格自己包一層水平捲動,整頁不橫捲(天條 34) */
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm);
}
/* 只有欄數多的表格需要最小寬度(不夠寬就橫捲);
   兩欄的表(例如每日派發)不加,不然手機上也被迫橫捲。 */
table.tbl.wide { min-width: 560px; }
table.tbl thead th {
  position: sticky; top: 0;
  background: var(--ink-2); color: var(--gold-hi);
  font-weight: 800; font-size: var(--fs-xs); letter-spacing: .06em;
  text-align: left; padding: var(--s3); white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.tbl tbody td {
  padding: var(--s3); border-bottom: 1px solid rgba(67,36,42,.6);
  color: var(--text); vertical-align: middle;
}
table.tbl tbody tr:nth-child(2n) td { background: rgba(255,255,255,.02); }
table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 欄寬:時間與狀態縮到剛好,把多出來的寬度讓給中間那幾欄,
   不然會變成兩邊貼邊、中間空一大片。 */
table.tbl th:first-child, table.tbl td:first-child { white-space: nowrap; width: 1%; }
table.tbl th:last-child,  table.tbl td:last-child  { white-space: nowrap; width: 1%; text-align: right; }
table.tbl td:last-child .pill { margin-left: auto; }

/* 資料裡直接帶 <span class="st st-ok"> 這種舊標記,base.css 不認就變成裸文字。
   對映到 pill,狀態欄才看得出狀態。 */
.st {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: 0 var(--s2); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,.06); color: var(--text-2); border: 1px solid var(--line-2);
}
.st-ok   { background: var(--pill-bg); color: var(--ok);   border-color: rgba(79,191,139,.55); }
.st-wait { background: var(--pill-bg); color: var(--warn); border-color: rgba(232,180,74,.55); }
.st-no   { background: var(--pill-bg); color: var(--err); border-color: rgba(244,155,169,.55); }
table.tbl .pos { color: var(--ok); }
table.tbl .neg { color: var(--err); }

.pill {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: 0 var(--s2); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.pill-ok   { background: var(--pill-bg); color: var(--ok);   border: 1px solid rgba(79,191,139,.55); }
.pill-wait { background: var(--pill-bg); color: var(--warn); border: 1px solid rgba(232,180,74,.55); }
.pill-no   { background: var(--pill-bg); color: var(--err); border: 1px solid rgba(244,155,169,.55); }

.empty { padding: var(--s8) var(--s4); text-align: center; color: var(--text-3); }

/* 手機表格:**維持表格,不要改成一筆一張卡** ——
   gr66 那次把紀錄表改成一筆一張卡被 Owner 打回(見 casino-member-center-playbook),
   所以這裡走同一個結論:表格照舊,用水平捲動容器裝。
   原本的問題是「右半邊被切掉又看不出可以滑」,那用捲動提示解決,不是拆掉表格。 */
/* 捲動提示。
   本來想在右緣壓一道漸層,但 .tbl-wrap 自己就是捲動容器,
   絕對定位的 ::after 會跟著內容一起捲走 —— 只留一行文字提示,到處都對。
   .can-scroll 由 more_rows.js 在真的溢出時才加。 */
.tbl-hint { display: none; color: var(--text-3); font-size: var(--fs-xs); }
.tbl-wrap.can-scroll + .tbl-hint { display: block; }

/* 載入更多 */
.more-row { display: flex; justify-content: center; }

/* 可領取／待派發金額那條 */
.sum-band {
  display: grid; gap: var(--s4);
  padding: var(--s5);
  background: linear-gradient(120deg, rgba(216,175,82,.12), rgba(36,16,20,.6) 62%);
  border: 1px solid rgba(216,175,82,.4); border-radius: var(--r2);
}
.sum-main { display: grid; gap: var(--s1); }
.sum-main .lb  { font-size: var(--fs-sm); color: var(--text-2); }
.sum-main .amt {
  font-size: 30px; font-weight: 900; color: var(--gold-hi);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
@media (min-width: 640px) {
  .sum-band { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
}

/* 兩三個數字並排 */
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 640px) {
  .stat-row.three { grid-template-columns: repeat(3, 1fr); }
  /* 四格就排四欄 —— 用三欄排四個會有一格落單(天條 55) */
  .stat-row.four  { grid-template-columns: repeat(4, 1fr); }
}
.stat {
  display: grid; gap: var(--s1);
  padding: var(--s4); border-radius: var(--r1);
  background: rgba(11,4,6,.5); border: 1px solid var(--line);
}
.stat .lb { font-size: var(--fs-xs); color: var(--text-2); }
.stat .vv {
  font-size: var(--fs-h3); font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat .vv.pos { color: var(--ok); }
.stat .vv.neg { color: var(--err); }

/* 金額欄 + 「全部」 */
.amt-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s2); }
.amt-row input { font-size: var(--fs-h3); font-weight: 800; font-variant-numeric: tabular-nums; }
/* 單位不是按鈕,不要做成按鈕的樣子(看起來可以點卻點不了) */
.amt-row .unit {
  display: inline-flex; align-items: center; padding: 0 var(--s3);
  color: var(--text-2); font-size: var(--fs-body);
}

/* 分頁(控制器產生的 <a>,套上按鈕外觀) */
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2); }
.pager a, .pager strong, .pager b {
  min-width: 44px; min-height: 44px; padding: 0 var(--s3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r1);
  color: var(--text-2); font-weight: 700; font-size: var(--fs-sm);
}
.pager a:hover { border-color: var(--gold); color: var(--gold-hi); }
.pager strong, .pager b {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--gold-ink); border-color: transparent;
}

/* 日期篩選 */
.filter { display: grid; gap: var(--s3); }
.filter .quick { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filter .quick button {
  min-height: 40px; padding: 0 var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.filter .quick button:hover { border-color: var(--gold); color: var(--gold-hi); }
.filter .range { display: grid; gap: var(--s3); }
@media (min-width: 640px) {
  .filter .range { grid-template-columns: 1fr 1fr auto; align-items: end; }
}

/* ---------------------------------------------------------------- 13. 儲值選項 */
.pay-groups { display: grid; gap: var(--s4); }
/* 用 flex 不用 grid:付款方式的數量由後台設定決定(3~6 種都可能),
   固定欄數一定會有某個數量落單、右邊空一格。flex 的最後一列會自己撐滿。
   (天條 55「欄數配合實際數量」) */
.pay-opts { display: flex; flex-wrap: wrap; gap: var(--s3); }
.pay-opts > * { flex: 1 1 150px; }
@media (min-width: 1024px) { .pay-opts > * { flex: 1 1 200px; } }

.pay-opt {
  display: grid; gap: var(--s2); justify-items: center; text-align: center;
  padding: var(--s4) var(--s3); min-height: 96px;
  background: rgba(11,4,6,.45); border: 1px solid var(--line-2);
  border-radius: var(--r2); cursor: pointer; color: var(--text);
}
.pay-opt .ic {
  width: 40px; height: 40px; border-radius: var(--r1);
  display: grid; place-content: center; font-size: 20px;
  background: rgba(216,175,82,.1); border: 1px solid rgba(216,175,82,.35); color: var(--gold-hi);
}
.pay-opt .nm { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.pay-opt .ds { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4; }
.pay-opt .ic svg { width: 22px; height: 22px; }
.pay-opt .select-indicator {
  position: absolute; top: var(--s2); right: var(--s2);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line-2);
}
.pay-opt { position: relative; }
/* 舊 JS 用的是 .active,不是 .on —— 兩個都認,才不會換了 class 就沒反應 */
.pay-opt.on, .pay-opt.active {
  border-color: var(--gold); background: rgba(216,175,82,.12);
}
.pay-opt.on .ic, .pay-opt.active .ic {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink);
}
.pay-opt.active .select-indicator {
  border-color: var(--gold); background: var(--gold);
  box-shadow: inset 0 0 0 3px var(--ink-2);
}

/* 超商子項目:選了超商才展開 */
.sub-payment-wrap { display: none; }
.sub-payment-wrap.on { display: grid; }
/* deposit.js 選 USDT 時把匯率訊息寫進 #usdtcur.info-box —— 要有底色才看得見 */
.info-box {
  padding: var(--s3) var(--s4); border-radius: var(--r1);
  background: rgba(11,4,6,.55); border: 1px solid var(--line-2);
  color: var(--text-2); font-size: var(--fs-sm);
}
.info-box:empty { display: none; }

.pay-sub .brand-icon {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  display: inline-grid; place-content: center; margin-right: var(--s2);
  color: #fff; font-size: 11px; font-weight: 900;
}

/* 子項目 */
.pay-subs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pay-subs > * { flex: 1 1 130px; }
.pay-sub {
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s3); border-radius: var(--r1);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); cursor: pointer;
}
.pay-sub.on { border-color: var(--gold); color: var(--gold-hi); background: rgba(216,175,82,.12); }

/* ---------------------------------------------------------------- 14. 彈窗 */
/* modal.js 用 inline style.display='block' 開關,所以佈局走 block + margin,
   寫 flex 會被 inline style 蓋掉。自寫的 .modal 一定要有 display:none 起手。 */
.modal.authModal {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8,3,4,.78);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* 垂直置中(Owner 2026-09-08:「彈出視窗、手機置中」)。
   容器不能改 flex/grid —— modal.js 是用 inline style.display='block' 開關的,
   inline 樣式權重最高,寫 display:flex 會被它蓋掉(這個坑踩過)。
   改用絕對定位 + translate,在 display:block 的容器裡照樣置中。
   高度已經被 max-height 鎖在 76vh(Owner 要的「七成五」),
   不會出現「比視窗高、上緣被切掉又捲不到」的情況。 */
.modal.authModal .modal-box {
  width: 80vw; max-width: 440px;
  max-height: 76vh; overflow-y: auto;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-0));
  border: 1px solid rgba(216,175,82,.42); border-radius: var(--r3);
  padding: var(--s6);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.95);
}
@media (min-width: 1024px) {
  .modal.authModal .modal-box { width: 34vw; max-width: 430px; }
}
.modal.authModal .close_m {
  position: absolute; top: var(--s3); right: var(--s4);
  width: 36px; height: 36px; display: grid; place-content: center;
  font-size: 24px; line-height: 1; color: var(--text-2); cursor: pointer;
}
.modal.authModal .close_m:hover { color: var(--gold-hi); }

.modal.authModal .tab-header { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.modal.authModal .tab-btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  border-radius: var(--r1); border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04); color: var(--text-2);
  font-weight: 800; font-size: var(--fs-sm); cursor: pointer;
}
.modal.authModal .tab-btn.active {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--gold-ink); border-color: transparent;
}
.modal.authModal .tab-btn .btn-icon { width: 16px; height: 16px; }

.modal.authModal .tab-content { margin-top: var(--s5); }
.modal.authModal form { display: grid; gap: var(--s3); }
.modal.authModal form h5 { font-size: var(--fs-h3); }
.modal.authModal form > span { font-size: var(--fs-xs); letter-spacing: .28em; color: var(--gold); margin-top: calc(var(--s3) * -1); }
.modal.authModal .codeimg { height: 44px; width: auto; border-radius: var(--r1); }
.modal.authModal .login,
.modal.authModal .register,
.modal.authModal .btn-confirm {
  min-height: 48px; border: none; border-radius: var(--r1);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--gold-ink); font-weight: 900; font-size: var(--fs-body); cursor: pointer;
}
.modal.authModal form > a { color: var(--gold-hi); font-size: var(--fs-sm); text-align: center; }
.modal.authModal .LoginError,
.modal.authModal .RegisterError { color: var(--err); font-size: var(--fs-sm); min-height: 0; }
.modal.authModal .login-else-box {
  margin-top: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.modal.authModal .login-else-box > span { font-size: var(--fs-sm); color: var(--text-2); }
.modal.authModal .log-img img { width: 32px; height: 32px; }

/* 站內公告彈窗的內容 */
.np-list { display: grid; gap: var(--s4); }
.np-list li {
  display: grid; gap: var(--s1);
  padding-top: var(--s4); border-top: 1px solid var(--line);
}
.np-list li:first-child { padding-top: 0; border-top: 0; }
.np-kind {
  justify-self: start;
  font-size: var(--fs-xs); font-weight: 700; color: var(--gold-hi);
  border: 1px solid rgba(216,175,82,.5); border-radius: var(--r-pill);
  padding: 1px var(--s2);
}
.np-list h5 { font-size: var(--fs-h3); }
.np-list p { color: var(--text-2); font-size: var(--fs-sm); }
#indexShowBox .modal-body { max-height: 52vh; overflow-y: auto; }
#indexShowBox .modal-footer { display: block; }
#indexShowBox .btn-row { width: 100%; }

/* Bootstrap 的 .modal(#notice 之類)配深底 */
.modal .modal-content {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-0));
  border: 1px solid rgba(216,175,82,.4); border-radius: var(--r3); color: var(--text);
}
.modal .modal-header, .modal .modal-footer { border-color: var(--line); }
/* 這顆 × 沒有拿到 bootstrap 的透明底,掉回瀏覽器預設的 #f0f0f0,
   配上淺灰字只有 1.96:1。底色與顏色都要自己給。 */
.modal .close, .modal .modal-header .close, .modal button.close {
  background: transparent; border: 0; box-shadow: none;
  color: var(--text-2); opacity: 1; text-shadow: none;
  min-height: 44px; min-width: 44px; font-size: 24px; line-height: 1; cursor: pointer;
}
.modal .close:hover { color: var(--gold-hi); }
.modal .modal-title { color: var(--gold-hi); font-size: var(--fs-h3); }
/* 垂直置中。等同 bootstrap 的 .modal-dialog-centered,但寫在樣式表裡 ——
   #notice / #indexShowBox / #forgot 的 markup 是舊檔搬過來的,
   不在上面加 class(天條 59:舊樣板一個字都不改的原則,新樣板也照抄原樣)。 */
.modal .modal-dialog {
  max-width: 76vw;
  display: flex; align-items: center; min-height: calc(100% - 1rem);
}
/* min-height 要扣掉 .modal-dialog 自己的上下 margin,不然它比容器高,
   多出來的高度會把內容往下推 —— 量出來剛好上下差 40px。
   bootstrap 的 margin 在 576px 以上從 .5rem 變成 1.75rem,所以這裡也要跟著換。 */
@media (min-width: 576px) {
  .modal .modal-dialog { min-height: calc(100% - 3.5rem); }
}
.modal .modal-dialog > .modal-content { width: 100%; max-height: 88vh; }
@media (min-width: 1024px) { .modal .modal-dialog { max-width: 640px; } }
.modal .nav-tabs { border-color: var(--line); }
.modal .nav-tabs .nav-link { color: var(--text-2); border: none; }
.modal .nav-tabs .nav-link.active { color: var(--gold-hi); background: transparent; border-bottom: 2px solid var(--gold); }

/* ---------------------------------------------------------------- 15. 關掉舊版面殼 */
/* footer.php 一定要繼續 include(彈窗與全部 JS 都在裡面),
   但視覺頁尾、回到頂部、舊的底部列不要。 */
#footer,
.back-to-top,
.ft-navbar,
#header.align-items-center,
.mobile-nav-toggle { display: none !important; }

/* ---------------------------------------------------------------- 16. 小工具 */
.only-desktop { display: none; }
@media (min-width: 1024px) { .only-desktop { display: initial; } .only-mobile { display: none !important; } }
.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;
}