/* ==========================================================================
   cali77 /action/ —— base.css
   ------------------------------------------------------------------
   這支是「取代」用的樣式表,不是覆蓋層。
   搭配 head_clean.php 使用:該檔只載 bootstrap.min.css(彈窗 JS 需要)
   + aos.css + 本檔,不載 style.css / style_dg.min.css,
   所以舊主題的全域樣式完全進不來。

   還原方式:把頁面的 include 從 head_clean.php 換回 head.php 即可,
   head.php / style.css / style_dg.css 一個字都沒動。

   色系沿用 cali77.net 主站首頁的 design token(2026-09-01 實測擷取)。
   版面是重做的,不套主站行銷頁的區塊順序 —— 這裡是登入後的操作介面。
   ========================================================================== */

/* ==========================================================================
   1. Token
   ========================================================================== */
:root{
  /* 色票:與主站同源 */
  --ink-900:#0A0A0A;
  --ink-850:#0D0C0A;
  --ink-800:#151310;
  --ink-700:#1B1814;
  --gold-100:#FFF6DC;
  --gold-300:#F1D592;
  --gold-500:#D8B65C;
  --gold-600:#C0983E;
  --gold-800:#8A6A24;
  --on-dark:rgba(255,255,255,.78);
  --on-dark-hi:#F3EFE7;
  --on-gold:#17110A;
  /* --mute 專門給 12～14px 的次要文字。原本 #8C8579 只有 5.29:1,
     過得了 AA 但小字看起來很薄;#A8A196 在卡片底 #0F0E0C 上是 7.6:1。 */
  --mute:#A8A196;
  /* 站上有幾處寫死 color:red,純紅在深底只有 4.84:1 —— 統一導到這個亮一階的紅(8.9:1) */
  --danger:#EE9A93;
  --ok:#7FC08A;

  --a08:rgba(192,152,62,.08);
  --a14:rgba(192,152,62,.14);
  --a18:rgba(192,152,62,.18);
  --a28:rgba(192,152,62,.28);
  --a42:rgba(192,152,62,.42);
  --a55:rgba(192,152,62,.55);

  /* 框線。
     原本容器外框都用 --a18 / --a28,疊在 #0F0E0C 的深底上只有 1.4:1 / 1.9:1,
     等於看不到框(WCAG 1.4.11 要求元件邊界 3:1)。
     --line 是「容器外框」用的,亮到看得出邊界;
     --line-in 是容器內部的分隔線(表格列、彈窗頁首腳),刻意留暗 ——
     內外都拉到 3:1 整頁會變成一張金色格線圖。 */
  --line:rgba(216,182,92,.58);
  --line-in:rgba(216,182,92,.34);

  --gbtn:linear-gradient(180deg,#DDBC63 0%,#C0983E 48%,#B08A34 78%,#9C7A2E 100%);
  --gtext:linear-gradient(110deg,#8A6A24 0%,#C0983E 20%,#F1D592 44%,#FFF6DC 50%,#F1D592 58%,#C0983E 80%,#8A6A24 100%);
  --gline:linear-gradient(90deg,rgba(192,152,62,0),rgba(192,152,62,.45) 28%,#F1D592 50%,rgba(192,152,62,.45) 72%,rgba(192,152,62,0));
  --darkcard:linear-gradient(160deg,#151310 0%,#0D0C0A 55%,#0A0A0A 100%);
  --sh-hi:inset 0 1px 0 rgba(255,255,255,.05);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* 間距尺度:8px 基準,版面上所有間距只從這裡取 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:44px; --s8:64px;

  /* 版面 */
  --wrap:1160px;
  --gutter:20px;          /* 手機左右留邊,不做滿版 */
  --r-card:10px;
  --r-btn:6px;
  --r-pill:999px;
  --tap:48px;
  --bnav-h:64px;          /* 底部固定選單高度 */

  /* 字級:內文 16、標題 24 */
  --fs-h1:24px;
  --fs-h2:20px;
  --fs-h3:17px;
  --fs-body:16px;
  --fs-sm:14px;
  --fs-micro:12px;
  --lh:1.75;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC",
         "Noto Sans TC","Microsoft JhengHei UI","Microsoft JhengHei",sans-serif;
}

/* ==========================================================================
   2. Reset / 基礎
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

/* aos.css 把 [data-aos] 的起始狀態設成 opacity:0,要靠捲動觸發才淡入。
   會員頁有兩張卡(變更密碼、銀行設定)實測就停在 opacity:0。
   這裡是登入後的操作介面,表單淡入沒有意義,卻有整張卡看不見的風險 —— 一律關掉。
   關的是視覺效果,樣板上的 data-aos 屬性沒有動,還原不受影響。 */
[data-aos],
[data-aos].aos-init,
[data-aos].aos-animate{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
html,body{ overflow-x:hidden; }
body{
  margin:0;
  background:var(--ink-900);
  color:var(--on-dark);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh);
  /* 底部固定選單會蓋住頁尾內容,先留出等高空間 */
  padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold-500); text-decoration:none; transition:color .2s var(--ease); }
a:hover{ color:var(--gold-300); }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-weight:700; line-height:1.35; color:var(--on-dark-hi); }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ margin:0; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }

/* 內容限寬置中,不整片拉滿(天條 55) */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* 區塊間距只給上方(天條 38),背景滿版、內容才限寬(天條 39) */
.sec{ width:100%; padding-top:var(--s6); }
.sec:first-of-type{ padding-top:var(--s5); }   /* 首區塊貼頁首,收窄 */
.sec:last-of-type{ padding-bottom:var(--s6); }
.sec-dark{ background:var(--ink-850); }

.sec-head{ margin-bottom:var(--s4); }
.sec-head h2{
  font-size:var(--fs-h2);
  background:var(--gtext);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sec-head .sub{ color:var(--mute); font-size:var(--fs-sm); margin-top:var(--s1); }

/* ==========================================================================
   3. 頁首
   ========================================================================== */
.hd{
  position:sticky; top:0; z-index:900;
  background:var(--darkcard);
  border-bottom:1px solid var(--a28);
}
.hd-in{
  display:flex; align-items:center; gap:var(--s4);
  min-height:60px;
}
.hd-logo{ display:flex; align-items:center; flex:0 0 auto; }
.hd-logo img{ width:186px; height:auto; }
@media (max-width:359.98px){ .hd-logo img{ width:150px; } }
/* 電腦版頁首有 60px 高、左右也有空間,logo 可以放大一階撐住份量 */
@media (min-width:992px){ .hd-logo img{ width:218px; } }
/* 頁首的登入/註冊/登出是主要操作,不能因為叫 btn-sm 就縮到 44px 以下 */
.hd .btn-sm{ min-height:var(--tap); padding:0 var(--s4); font-size:var(--fs-sm); }
.hd-nav{ display:none; margin-left:auto; }
.hd-nav a{
  display:inline-flex; align-items:center;
  min-height:var(--tap);
  padding:0 var(--s3);
  border-radius:var(--r-btn);
  color:var(--on-dark);
  font-size:var(--fs-body);
}
.hd-nav a:hover,.hd-nav a.on{ color:var(--gold-300); background:var(--a08); }
.hd-right{ margin-left:auto; display:flex; align-items:center; gap:var(--s2); }
.hd-user{
  display:none; align-items:center; gap:var(--s2);
  color:var(--gold-300); font-size:var(--fs-sm); font-weight:700;
}
/* 餘額點數(取代原本的「進入遊戲」按鈕)。
   手機上頁首只有 61px 高,帳號那顆已經藏起來,餘額留著 —— 進站要先看到自己有多少點。
   點下去到儲值頁,所以做成可點的樣子,但不用金底按鈕,免得跟主要動作搶。 */
.hd-bal{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:36px;
  padding:0 var(--s3);
  background:var(--a08);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  white-space:nowrap;
}
.hd-bal:hover{ background:var(--a14); border-color:var(--gold-500); }
.hd-bal .lb{ display:none; color:var(--mute); font-size:var(--fs-micro); letter-spacing:.06em; }
.hd-bal .val{
  color:var(--gold-300); font-size:var(--fs-body); font-weight:800;
  font-variant-numeric:tabular-nums; line-height:1;
}
@media (min-width:576px){
  .hd-bal .lb{ display:inline; }
}
/* 平板(768px 起)就把主選單放出來 —— 這個區間底部固定列還在,
   但底部列只有 5 個常用動作,娛樂產品/關於我們得靠頁首才進得去 */
@media (min-width:768px){
  .hd-nav{ display:flex; gap:2px; }
  .hd-nav a{ padding:0 var(--s2); font-size:var(--fs-sm); }
  .hd-right{ margin-left:0; }
}
@media (min-width:992px){
  .hd-nav{ gap:var(--s1); }
  .hd-nav a{ padding:0 var(--s3); font-size:var(--fs-body); }
  .hd-user{ display:inline-flex; }
}

/* 公告列 */
.mq{
  background:var(--ink-900);
  border-bottom:1px solid var(--a18);
}
.mq-in{
  display:flex; align-items:center; gap:var(--s3);
  min-height:var(--tap);
}
.mq-tag{
  display:inline-flex; align-items:center; gap:var(--s2);
  flex:0 0 auto;
  color:var(--gold-500); font-size:var(--fs-sm); font-weight:700;
}
.mq-tag img{ width:20px; }
.mq-track{ flex:1 1 auto; min-width:0; overflow:hidden; }
.mq-track ul{ display:flex; gap:var(--s6); white-space:nowrap; animation:mqrun 30s linear infinite; }
.mq-track li{ color:var(--on-dark); font-size:var(--fs-sm); }
.mq-track:hover ul{ animation-play-state:paused; }
@keyframes mqrun{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .mq-track ul{ animation:none; } }

/* ==========================================================================
   4. 按鈕
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--tap);
  padding:0 var(--s5);
  border:1px solid transparent;
  border-radius:var(--r-btn);
  font-size:var(--fs-body);
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:filter .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.btn-gold{
  background:var(--gbtn);
  color:var(--on-gold);
  box-shadow:0 8px 20px -10px var(--a55);
}
.btn-gold:hover{ filter:brightness(1.08); color:var(--on-gold); }
.btn-line{
  background:transparent;
  border-color:var(--line);   /* a42 疊在深底只有 2.18:1,按鈕邊界看不出來 */
  color:var(--gold-300);
}
.btn-line:hover{ background:var(--a08); border-color:var(--gold-600); color:var(--gold-100); }
.btn-block{ width:100%; }
.btn img{ width:20px; height:20px; }

/* 按鈕成組:一律同一行、左右兩顆等寬(Owner 指定) */
.btn-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s3);
  margin-top:var(--s4);
  /* 手機吃滿寬,電腦不要讓兩顆各長到 500px —— 按鈕不是橫幅 */
  max-width:520px;
}
.btn-row .btn{ width:100%; padding:0 var(--s3); }
.btn-row-1{ grid-template-columns:1fr; max-width:520px; }

/* ==========================================================================
   5. 卡片
   ========================================================================== */
.card{
  background:var(--darkcard);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-hi);
  padding:var(--s5);
}
.card + .card{ margin-top:var(--s4); }
.card-h{
  display:flex; align-items:center; gap:var(--s2);
  font-size:var(--fs-h3); font-weight:700;
  color:var(--gold-300);
  padding-left:var(--s3);
  border-left:3px solid var(--gold-600);
  margin-bottom:var(--s4);
}

/* --- 餘額卡:進站三秒要看到「我是誰」(天條 55) --- */
/* 手機版原本是 flex-wrap + 兩塊各 flex:1 1 160px:
   350px 的卡裝不下 160+160+gap,於是斷成兩列 ——
   帳號靠左、可用點數靠右,兩列對齊方向相反,看起來就是散的。
   改成單欄全部靠左,金額用一條分隔線隔開自成一段。 */
.wallet{
  display:flex; flex-direction:column; gap:var(--s4);
  background:var(--darkcard);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-hi);
  padding:var(--s5);
}
.wallet-id{ min-width:0; }
.wallet-id .lb,.wallet-amt .lb{ color:var(--mute); font-size:var(--fs-micro); letter-spacing:.1em; }
.wallet-id .val{ color:var(--on-dark-hi); font-size:var(--fs-body); font-weight:700; word-break:break-all; }
.wallet-amt{
  text-align:left;
  padding-top:var(--s4);
  border-top:1px solid var(--line-in);
}
.wallet-amt .val{
  font-size:34px; font-weight:800; line-height:1.15;
  font-variant-numeric:tabular-nums;
  background:var(--gtext);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wallet .btn-row{ margin-top:0; }
@media (min-width:768px){
  /* 寬螢幕改回橫條:帳號與餘額靠左成一組、按鈕靠右,
     分隔線跟著轉成直線,對齊方向仍然全部靠左。 */
  .wallet{ flex-direction:row; align-items:center; gap:var(--s5); padding:var(--s4) var(--s5); }
  .wallet-id,.wallet-amt{ flex:0 0 auto; }
  .wallet-amt{
    margin-right:auto;
    padding-top:0; padding-left:var(--s5);
    border-top:0; border-left:1px solid var(--line-in);
  }
  .wallet-amt .val{ font-size:28px; }
  .wallet .btn-row{ flex:0 0 auto; width:300px; }
}

/* --- 餘額卡:單獨站一頁的版本(登入後首頁) ---
   上面那套是「餘額卡上面還有別的東西」時的橫條造型。
   登入後首頁現在整頁只有這一張卡,橫條攤在 1120px 上會變成一條細帶、
   底下空 700px(天條 55:寬螢幕也不留大片空白)。
   所以單獨出現時改成限寬置中的直式卡,餘額當主角放大。 */
.wallet-solo{ max-width:520px; margin-inline:auto; }
@media (min-width:768px){
  .wallet-solo{ flex-direction:column; align-items:stretch; gap:var(--s5); padding:var(--s6); }
  .wallet-solo .wallet-id{ flex:0 0 auto; }
  .wallet-solo .wallet-amt{
    flex:0 0 auto; text-align:left; margin-right:0;
    padding-top:var(--s5); padding-left:0;
    border-top:1px solid var(--line-in); border-left:0;   /* 直式卡的分隔線要橫的 */
  }
  .wallet-solo .wallet-amt .val{ font-size:44px; }
  .wallet-solo .btn-row{ width:auto; }
}

/* --- 活動輪播 ---
   素材是 2000×600(10:3),框用同比例,圖片不會被拉變形。
   走站上已經載入的 bootstrap carousel,不另外引函式庫。 */
.promo{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--ink-800);
}
.promo .carousel-item{
  aspect-ratio:10/3;
}
.promo .carousel-item > a,
.promo .carousel-item > span{
  display:block; width:100%; height:100%;
}
.promo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
/* 指示點那一列壓在圖上,底部給一小段漸層讓白點不會消失在亮圖上 */
.promo::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:56px;
  background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.55));
  pointer-events:none;
}
/* 左右箭頭:48px 觸控區,深底半透明圓鈕 */
.promo .carousel-control-prev,
.promo .carousel-control-next{
  width:auto;
  padding:0 var(--s3);
  opacity:1;
}
.promo .carousel-control-prev-icon,
.promo .carousel-control-next-icon{
  width:40px; height:40px;
  background-color:rgba(10,10,10,.55);
  border:1px solid var(--line);   /* 前後鈕壓在圖上,框線太暗會整顆消失在深色照片裡 */
  border-radius:50%;
  background-size:16px 16px;
}
.promo .carousel-control-prev:hover .carousel-control-prev-icon,
.promo .carousel-control-next:hover .carousel-control-next-icon{
  background-color:rgba(10,10,10,.8);
  border-color:var(--gold-600);
}
/* 指示點:做成金色小條,觸控區用 padding 撐開 */
.promo .carousel-indicators{
  margin:0 0 var(--s2);
  gap:var(--s2);
  align-items:center;
  z-index:2;
}
.promo .carousel-control-prev,
.promo .carousel-control-next{ z-index:2; }
.promo .carousel-indicators li{
  width:22px; height:3px;
  margin:0;
  border:0;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.38);
  opacity:1;
  box-sizing:content-box;
  padding:12px 0;            /* 觸控高度拉到 27px,視覺仍是 3px 細條 */
  background-clip:content-box;
}
.promo .carousel-indicators li.active{ background:var(--gold-300); background-clip:content-box; }

@media (max-width:575.98px){
  /* 手機上輪播只有 104px 高,箭頭與底部漸層都要收小,不然整條被蓋掉 */
  .promo::after{ height:34px; }
  .promo .carousel-indicators{ margin-bottom:0; }
  .promo .carousel-indicators li{ padding:8px 0; width:18px; }
  .promo .carousel-control-prev-icon,
  .promo .carousel-control-next-icon{ width:30px; height:30px; background-size:12px 12px; }
  .promo .carousel-control-prev,
  .promo .carousel-control-next{ padding:0 var(--s2); }
}

/* --- 遊戲小卡 --- */
.cards{
  display:grid;
  /* 手機 2 欄 —— 6 個項目排 2 欄剛好 3 列,不留落單尾巴(天條 55) */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3);
}
@media (min-width:768px){ .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); } }
@media (min-width:1100px){ .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); } }
/* 四張一組:手機 2×2、電腦一列排完,兩種都不留落單尾巴 */
@media (min-width:768px){ .cards-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.gcard{
  display:flex; flex-direction:column;
  background:var(--darkcard);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.gcard:hover{ border-color:var(--a42); transform:translateY(-2px); }
/* 圖片維持素材原比例 645×515 = 5:4,不硬拉不變形 */
.gcard-img{
  position:relative;
  aspect-ratio:5/4;
  background:var(--ink-800);
  overflow:hidden;
}
.gcard-img img{
  width:100%; height:100%;
  object-fit:cover;          /* 裁切而非壓扁,不失真 */
  object-position:center;
  transition:transform .35s var(--ease);
}
.gcard:hover .gcard-img img{ transform:scale(1.04); }
.gcard-body{
  padding:var(--s3) var(--s4) var(--s4);
  display:flex; flex-direction:column; gap:var(--s1);
}
.gcard-name{ color:var(--on-dark-hi); font-size:var(--fs-body); font-weight:700; line-height:1.4; }
.gcard-sub{ color:var(--mute); font-size:var(--fs-micro); }
@media (max-width:575.98px){
  .gcard-body{ padding:var(--s2) var(--s3) var(--s3); }
  .gcard-name{ font-size:var(--fs-sm); }
}

/* --- 功能捷徑小卡 ---
   目前沒有樣板在用(登入前的「快速前往」、登入後的功能磚都已依指示拿掉)。
   規則留著是因為之後若要再放捷徑就直接可用,拿掉也不影響現有版面。 */
.tiles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3);
}
@media (min-width:768px){ .tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); } }
.tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s2);
  min-height:88px;
  padding:var(--s4) var(--s2);
  background:var(--a08);
  border:1px solid var(--a18);
  border-radius:var(--r-card);
  color:var(--on-dark);
  text-align:center;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.tile:hover{ background:var(--a14); border-color:var(--gold-600); color:var(--gold-300); }
.tile img{ width:26px; height:26px; }
.tile span{ font-size:var(--fs-sm); font-weight:700; line-height:1.3; }
/* 純文字磚:沒有對應圖素材的遊戲入口,用分類眉標 + 名稱撐層級,不硬塞不相干的圖示 */
/* --- 電腦版:磚塊改成橫向 ---
   手機上圖示疊在文字上方是對的(欄窄);到了電腦版一欄有 260px 寬,
   還維持直式就會上下留一大片空,整頁被撐得很長。改成同一行、高度砍半。 */
@media (min-width:992px){
  .tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tile{
    flex-direction:row;
    justify-content:flex-start;
    gap:var(--s3);
    min-height:60px;
    padding:0 var(--s4);
    text-align:left;
  }
  .tile img{ width:22px; height:22px; flex:0 0 auto; }
  .tile span{ font-size:var(--fs-body); }
}

/* ==========================================================================
   6. 表單
   ========================================================================== */
.field{ margin-top:var(--s4); }
.field:first-child{ margin-top:0; }
.field > label{
  display:block;
  color:var(--gold-300);
  font-size:var(--fs-sm);
  font-weight:700;
  margin-bottom:var(--s2);
}
/* 用排除法而不是列舉 type —— 站上有欄位根本沒寫 type 屬性
   (例:超商儲值的 zipcode),列舉 input[type=text] 會整個漏掉,
   那一欄就會維持瀏覽器預設的黑字,在深底上等於隱形。 */
.inp,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=image]):not([type=range]):not([type=color]):not([type=hidden]),
select,textarea{
  width:100%;
  height:var(--tap);
  padding:0 var(--s3);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);   /* 表單欄位是互動元件,邊界也要 3:1 */
  border-radius:var(--r-btn);
  color:var(--on-dark-hi);
  font-family:inherit;
  font-size:var(--fs-body);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
textarea{ height:auto; min-height:120px; padding:var(--s3); line-height:var(--lh); }
input::placeholder,textarea::placeholder{ color:var(--mute); }
.inp:focus,input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--gold-600);
  box-shadow:0 0 0 3px var(--a14);
}
/* 唯讀顯示欄(帳號、姓名、點數)是用 disabled 做的,不是真的停用控制項。
   用 opacity 壓下去會把字一起壓暗 —— 改成只換底色與邊框,文字維持原亮度。 */
input[disabled],select[disabled],textarea[disabled]{
  opacity:1;
  cursor:not-allowed;
  background:rgba(255,255,255,.02);
  border-color:var(--a14);
  color:var(--on-dark-hi);
  -webkit-text-fill-color:var(--on-dark-hi);   /* iOS Safari 會自己把 disabled 文字打灰 */
}
.field-note{ color:var(--mute); font-size:var(--fs-micro); margin-top:var(--s2); }

/* 欄位 + 後綴按鈕(驗證碼那種)排同一行 */
.field-row{ display:flex; gap:var(--s2); align-items:stretch; }
.field-row > :first-child{ flex:1 1 auto; min-width:0; }
.field-row > .btn,.field-row > img{ flex:0 0 auto; }
.field-row img{ height:var(--tap); width:auto; border-radius:var(--r-btn); }

/* 提示框 */
.note{
  margin-top:var(--s4);
  padding:var(--s4);
  background:var(--a08);
  border:1px solid var(--a18);
  border-left:3px solid var(--gold-600);
  border-radius:var(--r-btn);
  color:var(--on-dark);
}
.note h4{ color:var(--gold-300); font-size:var(--fs-h3); margin-bottom:var(--s2); }
.note ul{ list-style:disc; padding-left:var(--s5); }
.note li{ margin-top:var(--s2); line-height:1.7; }
.note li:first-child{ margin-top:0; }

/* ==========================================================================
   7. 分頁導覽(會員中心)
   ========================================================================== */
/* 一列到底、等寬。
   原本用 flex-wrap + flex:1 1 auto —— 五個項目在手機上斷成 3+2,
   第二列兩顆被撐成三倍寬,長度還跟著字數跑,整排歪掉。
   五是質數,任何多欄網格都會留落單尾巴(天條 55),所以只有「一列 N 欄」排得乾淨。
   grid-auto-flow:column + grid-auto-columns:1fr 不必寫死欄數 ——
   未驗證會員只顯示三項,同一組規則照樣是一列等寬。 */
.tabs{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--s1);
  padding:var(--s2);
  background:var(--a08);
  border:1px solid var(--line);
  border-radius:var(--r-card);
}
.tabs a{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--tap);
  padding:0 var(--s3);
  border-radius:var(--r-btn);
  color:var(--on-dark);
  font-size:var(--fs-sm);
  white-space:nowrap;
}
.tabs a:hover{ color:var(--gold-300); background:var(--a14); }
.tabs a.on{ background:var(--gbtn); color:var(--on-gold); font-weight:700; }
.tabs img{ width:20px; height:20px; flex:0 0 auto; }
.tabs a.on img{ filter:brightness(0) saturate(100%); }
/* 五欄之後每格只剩 65px 左右,圖示與四個字並排一定塞不下 ——
   窄螢幕改成圖示疊在字上方(app 分頁列的做法),字級不再往下砍。 */
@media (max-width:767.98px){
  .tabs{ padding:var(--s1); }
  .tabs a{
    flex-direction:column; gap:2px;
    min-height:56px; padding:var(--s2) 2px;
    font-size:var(--fs-micro); line-height:1.25;
  }
  .tabs img{ width:20px; height:20px; }
}

/* ==========================================================================
   8. 表格 —— 寬內容自己包水平捲動(天條 34)
   ========================================================================== */
.tw{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:var(--s4); }
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);   /* 表格外框是容器邊界,內部的 td 線才留 --line-in */
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--ink-850);
}
th{
  background:var(--a08);
  color:var(--gold-300);
  font-size:var(--fs-sm);
  font-weight:700;
  text-align:left;
  white-space:nowrap;
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--a28);
}
td{
  color:var(--on-dark);
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--a08);
  vertical-align:middle;
}
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover td{ background:rgba(255,255,255,.03); }
/* bootstrap 的 .table-bordered 框線是給白底設計的,在深底會變成刺眼的白格 */
/* 外框(容器邊界)與格線(內部分隔)分開:格線一起拉到 3:1 會變成一張金色格網 */
.table-bordered{ border-color:var(--line) !important; }
.table-bordered th,
.table-bordered td{ border-color:var(--line-in) !important; }
.table-striped tbody tr:nth-of-type(odd),
table tbody tr:nth-of-type(even){ background:transparent; }
td .ok{ color:var(--ok); }
td .no{ color:var(--danger); }
td > a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--s2);
}

/* 窄螢幕改一列一卡,不讓使用者橫向捲。
   除了自己包的 .tw,站上原本就有一種 table.wdn_responsive_table:
   有 thead、每個 td 帶 data-header —— 就是為了這種堆疊而寫的,
   但外面沒有 .tw 包,所以規則從來沒生效過,五欄的紀錄表在 390px 會超出 18px,
   而且被 body 的 overflow-x:hidden 裁掉:量 document.scrollWidth 是正常的,
   畫面上卻是「交易點數」那一欄被切掉一半。
   條件是 :has(td[data-header]) 而不是 :has(thead) —— 差別很重要:
     · 拿表格排版的(轉點那一列)沒有 thead,兩種寫法都排除得掉
     · 但總計／此頁小計那兩張摘要表有 thead、td 卻沒有 data-header,
       用 thead 判斷就會把它們也堆疊起來,而 ::before 取不到欄名,
       結果是「總筆數 / 總投注量 / 總洗碼量 / 總輸贏」四個標題整組消失,
       畫面上只剩三個孤零零的 0.00。四欄短數字在 360px 排得下,維持表格即可。 */
@media (max-width:575.98px){
  .tw table,.tw tbody,.tw tr,.tw td,
  table.wdn_responsive_table:has(td[data-header]),
  table.wdn_responsive_table:has(td[data-header]) tbody,
  table.wdn_responsive_table:has(td[data-header]) tr,
  table.wdn_responsive_table:has(td[data-header]) td{ display:block; width:100%; }
  .tw thead,
  table.wdn_responsive_table:has(td[data-header]) thead{ display:none; }
  table.wdn_responsive_table caption{ display:none; }   /* 空的 caption 也會撐寬度 */
  .tw table,
  table.wdn_responsive_table:has(td[data-header]){ border:0; background:transparent; }
  .tw tr,
  table.wdn_responsive_table:has(td[data-header]) tr{
    background:var(--ink-800);
    /* 手機把每一列拆成一張卡,這時 tr 是容器外框不是格線 */
    border:1px solid var(--line);
    border-radius:var(--r-btn);
    margin-top:var(--s3);
    padding:var(--s2) var(--s3);
  }
  .tw tr:first-child,
  table.wdn_responsive_table:has(td[data-header]) tbody tr:first-child{ margin-top:0; }
  .tw td,
  table.wdn_responsive_table:has(td[data-header]) td{
    display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
    padding:var(--s2) 0;
    border-bottom:1px solid var(--line-in);
    text-align:right;
  }
  .tw tr td:last-child,
  table.wdn_responsive_table:has(td[data-header]) tr td:last-child{ border-bottom:0; }
  /* 欄名來源:自己包的用 data-th,站上原本的用 data-header */
  .tw td::before,
  table.wdn_responsive_table:has(td[data-header]) td::before{
    content:attr(data-th) attr(data-header);
    flex:0 0 auto;
    color:var(--gold-300);
    font-size:var(--fs-micro);
    font-weight:700;
    text-align:left;
    white-space:nowrap;
  }
}

/* 紀錄表的「載入更多」(loadmore.js 產生)。
   放在表格正下方、滿寬,手指在哪裡就按哪裡,不用往回找。 */
.loadmore{
  display:block; width:100%;
  min-height:var(--tap);
  margin-top:var(--s3);
  background:var(--a08);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  color:var(--gold-300);
  font-size:var(--fs-body); font-weight:700;
  cursor:pointer;
}
.loadmore:hover{ background:var(--a14); border-color:var(--gold-500); }
/* hidden 屬性的預設 display:none 來自瀏覽器預設樣式,權重最低 ——
   手機把 tr 改成 display:block 之後就會蓋掉它,收起來的列還是看得到。 */
tr[hidden]{ display:none !important; }

/* --- 投注明細(遊戲紀錄)---
   照核可版本做:維持表格、一列一筆五欄,
   「投注時間 / 單號」併成同一格上下兩行,不拆成兩欄。
   五欄在 390px 排不下,所以外面包 .tscroll 讓表格自己水平捲(天條 34),
   不拆成一列一卡、也不藏欄位。 */
.tscroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  margin-top:var(--s3);
  /* 捲軸留著看得見 —— 不然使用者不知道右邊還有「洗碼」與「輸贏」兩欄 */
  scrollbar-width:thin;
  scrollbar-color:var(--gold-800) transparent;
}
.tscroll::-webkit-scrollbar{ height:6px; }
.tscroll::-webkit-scrollbar-track{ background:transparent; }
.tscroll::-webkit-scrollbar-thumb{ background:var(--gold-800); border-radius:999px; }
.tscroll table{ min-width:520px; margin-top:0; }
/* 欄位少、本來就排得下的表格(紅利紀錄三欄):要表格版面但不要用不到的捲軸 */
.tscroll-fit table{ min-width:0; width:100%; }
.cell-when{ white-space:nowrap; }
.cell-when .when{ color:var(--on-dark-hi); font-weight:700; }
/* 遊戲類型那格樣板包了 .red(舊淺色主題的裝飾色)。站上寫死的紅我統一導到警示紅,
   但這一欄不是警示 —— 整片紅字會讓真正該注意的輸贏數字失去意義,改回一般文字色。 */
.tscroll td[data-header="遊戲類型"] .red{ color:var(--on-dark) !important; }
.cell-when .billno{
  color:var(--mute); font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums; margin-top:2px;
}
/* 金額欄右對齊、數字等寬,上下才對得齊 */
.tscroll td:nth-child(3),
.tscroll td:nth-child(4),
.tscroll td:nth-child(5),
.tscroll th:nth-child(3),
.tscroll th:nth-child(4),
.tscroll th:nth-child(5){ text-align:right; font-variant-numeric:tabular-nums; }
.tscroll td:nth-child(5){ font-weight:700; }
/* 紅利紀錄只有三欄,金額是第 3 欄,要跟投注明細的輸贏一樣醒目 */
.tscroll-fit td:nth-child(3){ font-weight:700; }
/* 捲動容器裡不要套手機的堆疊規則 —— 那會把表格拆成一列一卡,跟核可版本不同。
   選擇器必須寫成跟堆疊規則同一個形狀再加 .tscroll,否則權重輸掉:
   堆疊那條是 table.wdn_responsive_table:has(td[data-header]) td = (0,2,3),
   只寫 .tscroll td 是 (0,1,1),會被蓋過去。
   症狀很容易誤判成「資料沒出來」——實際上 td 變成 display:block 之後寬度是
   min-width:520px 的 100%,欄名留在畫面上、數值被推到 520px 處的右端,
   在 350px 的視窗裡看不到,查原始碼卻明明有值。 */
@media (max-width:575.98px){
  .tscroll table.wdn_responsive_table:has(td[data-header]){
    display:table; width:auto; border:1px solid var(--line);
  }
  .tscroll table.wdn_responsive_table:has(td[data-header]) thead{ display:table-header-group; }
  .tscroll table.wdn_responsive_table:has(td[data-header]) tbody{ display:table-row-group; }
  .tscroll table.wdn_responsive_table:has(td[data-header]) tr{
    display:table-row;
    background:transparent; border:0; margin:0; padding:0; border-radius:0;
  }
  .tscroll table.wdn_responsive_table:has(td[data-header]) td{
    display:table-cell; width:auto;
    padding:var(--s3) var(--s4);
    border-bottom:1px solid var(--line-in);
    text-align:left;
    font-size:var(--fs-sm);
  }
  .tscroll table.wdn_responsive_table:has(td[data-header]) td::before{ content:none; }
  .tscroll table.wdn_responsive_table:has(td[data-header]) td:nth-child(3),
  .tscroll table.wdn_responsive_table:has(td[data-header]) td:nth-child(4),
  .tscroll table.wdn_responsive_table:has(td[data-header]) td:nth-child(5){ text-align:right; }
}

/* 總計／此頁小計那種摘要表(有 thead、td 沒有 data-header)不堆疊,
   但四欄照原本的內距在 360px 會是 372px 而超出 32px ——
   欄名允許折行、內距與字級收一階就排得下,不必動到捲動。 */
@media (max-width:575.98px){
  table.wdn_responsive_table:not(:has(td[data-header])){ table-layout:fixed; }
  table.wdn_responsive_table:not(:has(td[data-header])) th,
  table.wdn_responsive_table:not(:has(td[data-header])) td{
    padding:var(--s2);
    font-size:var(--fs-micro);
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

.pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s1); margin-top:var(--s5); }
.pager a,.pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap); min-height:var(--tap);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  color:var(--on-dark);
}
.pager a:hover{ background:var(--a08); border-color:var(--gold-600); color:var(--gold-300); }
.pager .on{ background:var(--gbtn); border-color:transparent; color:var(--on-gold); font-weight:700; }

/* ==========================================================================
   9. 彈出視窗 —— 佔螢幕 7.5 成(Owner 指定)
   ========================================================================== */
.modal{ z-index:1200; }
.modal-backdrop{ background:#000; }
.modal-backdrop.show{ opacity:.72; }
.modal-dialog{
  max-width:75vw;
  margin:auto;
  min-height:100%;
  display:flex; align-items:center;
}
/* 75vw 是彈窗的上限(依指示),但登入只有三個欄位 ——
   在 1440px 螢幕上 75vw 等於 1080px 寬的登入框,反而難用。
   內容型的彈窗(公告)維持 75vw,表單型的另外收窄。 */
#login .modal-dialog,
#register .modal-dialog,
#forget .modal-dialog{ max-width:min(75vw, 480px); }
.modal-content{
  width:100%;
  max-height:75vh;
  background:var(--darkcard);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:0 24px 64px rgba(0,0,0,.6),var(--sh-hi);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.modal-header{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3);
  padding:var(--s4) var(--s5);
  background:transparent;
  border-bottom:1px solid var(--a18);
}
.modal-title{
  font-size:var(--fs-h2); font-weight:700;
  background:var(--gtext);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.modal-header .close{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap); min-height:var(--tap);
  background:transparent; border:0;
  color:var(--on-dark-hi); font-size:24px; line-height:1;
  opacity:1; text-shadow:none; cursor:pointer;
}
.modal-header .close:hover{ color:var(--gold-300); }
.modal-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:var(--s5);
}
.modal-footer{
  flex:0 0 auto;
  padding:var(--s4) var(--s5);
  border-top:1px solid var(--a18);
}
/* 手機上 75vw 太窄,放寬到 92vw;高度維持 7.5 成 */
@media (max-width:767.98px){
  .modal-dialog{ max-width:92vw; }
  .modal-content{ max-height:75vh; }
  .modal-body{ padding:var(--s4); }
  .modal-header{ padding:var(--s3) var(--s4); }
}

/* ==========================================================================
   10. 底部固定選單 —— 登入前 5 項 / 登入後 5 項
   ========================================================================== */
.bnav{
  position:fixed; left:0; right:0; bottom:0;
  z-index:1000;
  display:flex;
  height:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--ink-900);
  border-top:1px solid var(--a42);
  box-shadow:0 -6px 22px -10px rgba(0,0,0,.9);
}
.bnav a{
  flex:1 1 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  min-width:var(--tap);
  padding:var(--s1) var(--s1);
  color:var(--on-dark);
  font-size:var(--fs-micro);
  line-height:1.2;
  text-align:center;
}
.bnav a img{ width:24px; height:24px; opacity:1; }
.bnav a:hover,.bnav a.on{ color:var(--gold-300); }
.bnav a:hover img,.bnav a.on img{ opacity:1; }
/* 中間那顆做成主要動作,一眼看得到 */
.bnav a.key{ color:var(--gold-300); font-weight:700; }
.bnav a.key img{ opacity:1; }
/* 電腦版不需要底部固定列,改由頁首導覽承擔 */
@media (min-width:992px){
  .bnav{ display:none; }
  body{ padding-bottom:0; }
}

/* 電腦／手機各自才需要的東西。
   「快速前往」在電腦版是冗餘的 —— 四項裡三項就在正上方的頁首導覽,
   剩下的客服則補進頁首;手機版沒有頁首導覽,所以那一區要留著。 */
.only-desktop{ display:none !important; }
@media (min-width:992px){
  .only-desktop{ display:inline-flex !important; }
  .sec-quick{ display:none; }
}

/* ==========================================================================
   11. 浮動客服
   ========================================================================== */
.cs{
  position:fixed; right:12px;
  bottom:calc(var(--bnav-h) + 16px + env(safe-area-inset-bottom,0px));
  z-index:1050;
  display:flex; flex-direction:column; gap:var(--s2);
}
.cs a{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--darkcard);
  border:1px solid var(--a42);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.8);
}
.cs a:hover{ border-color:var(--gold-600); }
.cs a img{ width:24px; height:24px; }
@media (min-width:992px){ .cs{ right:20px; bottom:20px; } }

/* ==========================================================================
   12. 相容層 —— footer.php 保留不動的那些舊 markup
   ------------------------------------------------------------------
   登入彈窗與整批關鍵 JS(登入 ajax、驗證碼、公告)都寫在 footer.php 裡,
   重寫它風險太高,所以「保留檔案、只關掉視覺頁尾」:
   頁尾與舊的底部列用 CSS 收起來,彈窗則接上新的樣式。
   還原一樣是把 include 換回 head.php,這裡的規則就不會載入。
   ========================================================================== */

/* PHP 端不需要頁尾與純 SEO 敘述文字(天條 53) */
.site-footer,
.nav-ft,
.linkTop,
.x-contact-us-v2,
.CQkerfu,
.CQkerfu2{ display:none !important; }

/* --- 舊表單元件:bootstrap 預設是淺色的,不接會整個白掉 --- */
.form-control{
  width:100%;
  height:var(--tap);
  padding:0 var(--s3);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  color:var(--on-dark-hi);
  font-size:var(--fs-body);
}
.form-control:focus{
  background:rgba(255,255,255,.06);
  border-color:var(--gold-600);
  box-shadow:0 0 0 3px var(--a14);
  color:var(--on-dark-hi);
}
.form-control::placeholder{ color:var(--mute); }

/* bootstrap 的 .input-group 預設 flex-wrap:wrap,而我的 .form-control 給了
   width:100% —— flex-basis 變成 100%,欄位就被擠到標籤下一行去。
   要同時關掉換行,並把欄位的寬度交給 flex 分配。 */
.input-group{ display:flex; flex-wrap:nowrap; width:100%; margin-top:var(--s4); }
.input-group:first-child{ margin-top:0; }
.input-group-prepend{ display:flex; flex:0 0 auto; }
.input-group-text{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:104px; height:var(--tap);
  padding:0 var(--s3);
  /* 底色刻意用中性深色而不是金色調 —— 金字配帶金調的褐底雖然亮度差夠,
     但同色系看起來會糊在一起,換成中性底金字才跳得出來 */
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-right:0;
  border-radius:var(--r-btn) 0 0 var(--r-btn);
  color:var(--gold-300);
  font-size:var(--fs-sm);
  font-weight:700;
  white-space:nowrap;
}
.input-group > .form-control{
  flex:1 1 0;
  width:auto;              /* 不能留 100%,否則 basis 撐滿整列 */
  min-width:0;
  border-radius:0 var(--r-btn) var(--r-btn) 0;
}
.input-group > .form-control:first-child{ border-radius:var(--r-btn); }
@media (max-width:399.98px){
  /* 極窄螢幕標籤收窄一點,不然欄位只剩一小截 */
  .input-group-text{ min-width:78px; padding:0 var(--s2); }
}
.valid-feedback,.invalid-feedback{ display:none; }

.form-group{ margin-top:var(--s4); }
.form-group > label{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3);
  color:var(--gold-300); font-size:var(--fs-sm); font-weight:700;
  margin-bottom:var(--s2);
}
/* 驗證碼圖後端只產 90×25,拉到 48px 高等於放大 1.9 倍會糊。
   維持接近原生的尺寸,寧可小一點也要看得清楚。圖本身是淺底深字,
   給它一個白色襯底,邊緣才不會跟深色彈窗糊在一起。 */
.form-group > label img{
  width:120px; height:auto;
  background:#fff;
  /* 上下留白補到 44px:這張圖點下去會換一張新的驗證碼,是可點的元件,
     不是純裝飾,觸控目標不能只有 37px(天條 34) */
  padding:8px 5px;
  min-height:44px;
  box-sizing:border-box;
  border-radius:var(--r-btn);
  cursor:pointer;
  image-rendering:-webkit-optimize-contrast;
}

/* --- 舊按鈕 class 一律走同一顆主要按鈕樣式(天條 55) --- */
.btn.btn-primary,.btn.btn-warning{
  background:var(--gbtn);
  border-color:transparent;
  color:var(--on-gold);
  box-shadow:0 8px 20px -10px var(--a55);
}
.btn.btn-primary:hover,.btn.btn-warning:hover{ filter:brightness(1.08); color:var(--on-gold); }
.btn.btn-danger,.btn.btn-secondary{
  background:transparent;
  border:1px solid var(--line);   /* a42 疊在深底只有 2.18:1,框看不見(同 .btn-line) */
  color:var(--gold-300);
}
.btn.btn-danger:hover,.btn.btn-secondary:hover{ background:var(--a08); border-color:var(--gold-600); color:var(--gold-100); }
.btn-sm{ min-height:36px; padding:0 var(--s4); font-size:var(--fs-sm); }
/* 彈窗裡的登入鈕吃滿寬,手指好按 */
#login .modal-body .btn{ width:100%; margin:var(--s5) 0 0; }
#login .modal-body > .text-center:last-child{ margin-top:var(--s4); }

.alert{
  margin-top:var(--s4);
  padding:var(--s3) var(--s4);
  border-radius:var(--r-btn);
  font-size:var(--fs-sm);
  text-align:center;
}
.alert-danger{ background:rgba(228,115,107,.12); border:1px solid rgba(228,115,107,.4); color:#F0A7A1; }
.alert-success{ background:rgba(127,192,138,.12); border:1px solid rgba(127,192,138,.4); color:var(--ok); }

/* 公告彈窗的清單 */
.news-lists li{ border-bottom:1px solid var(--a08); }
.news-lists li:last-child{ border-bottom:0; }
.news-lists a{ display:block; padding:var(--s4); color:var(--on-dark); }
.news-lists a:hover{ background:var(--a08); }
.news-lists h5{ color:var(--gold-300); font-size:var(--fs-body); margin-bottom:var(--s1); }
.news-lists p{ color:var(--mute); font-size:var(--fs-sm); }
.modal-footer .btn{ flex:1 1 0; }
.modal-footer{ display:flex; gap:var(--s3); }

/* --- 會員頁沿用的 bootstrap 表單列 ---
   account.php 那 5 組表單的欄位 id 與 account.js 綁死,不重寫 markup,
   只把 .form-group.row / .col-form-label 這套接進新版型。 */
#member .tab-content{ margin-top:var(--s5); }
#member .tab-pane{ padding:0; }

/* 每個 .title-blue 開一張卡,同一頁只有一種底色系統(天條 55)。
   有兩張卡(USDT、超商儲值)用的是 .title 不是 .title-blue,
   一併收進來,不然同一頁會出現金色與白色兩種卡片標題。
   標籤名原本寫死 h4 —— 頁面加了 H1 之後 H1→H4 是跳級,卡片標題已改成 h2,
   所以選擇器不再綁標籤,只認 class(字級用樣式定、層級用標籤定,天條 43)。 */
#member .title-blue,
#member .title > h2,
#member h2.title{
  display:block;
  color:var(--gold-300);
  font-size:var(--fs-h3);
  font-weight:700;
  padding-left:var(--s3);
  border-left:3px solid var(--gold-600);
  line-height:1.4;
  margin:0 0 var(--s4);
}
#member .col-12,
#member .col-md-12,
#member .col-md-6{
  background:var(--darkcard);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-hi);
  padding:var(--s5);
  margin-top:var(--s4);
}
#member .row{ margin-left:0; margin-right:0; }
#member .form-group.row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s2) var(--s4);
  margin:var(--s4) 0 0;
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--line-in);   /* a08 只有 1.10:1,等於沒有分隔線 */
}
#member .form-group.row:first-of-type{ margin-top:0; }
#member .form-group.row:last-of-type{ border-bottom:0; padding-bottom:0; }
#member .col-form-label{
  flex:0 0 200px;
  color:var(--gold-300);
  font-size:var(--fs-sm);
  font-weight:700;
  padding:0;
  margin:0;
  line-height:1.5;
}
#member .form-group.row > [class*="col-sm-"]{ flex:1 1 240px; min-width:0; padding:0; max-width:none; }
#member .form-control-plaintext{
  color:var(--on-dark-hi);
  font-size:var(--fs-body);
  font-weight:700;
  border:0; background:transparent; padding:0;
  width:100%;
}
/* 「確認變更」那顆原本靠 .pull-right 浮動,改成滿寬按鈕列 */
#member .form-group.row.pull-right{
  float:none;
  display:block;
  border-bottom:0;
  padding-bottom:0;
  margin-top:var(--s5);
}
#member .form-group.row.pull-right .btn{ width:100%; }
/* USDT、超商儲值、信用卡這幾張卡是 .col-md-6(50% 寬),但外面沒有 .row ——
   父層不是 flex,bootstrap 給的 50% 寬就變成半寬區塊上下堆疊,右半整片空。

   原本用 float 兩兩並排,那是只有兩張卡時的解法;信用卡那一區併進來之後變成三張,
   float 會排成 2 + 1,第二列留一個落單尾巴(天條 55)。
   改成 auto-fit 網格:欄數跟著容器寬與卡片數自己算,兩張時兩欄、三張時三欄,
   之後後台再開一種綁定也不必回來改 CSS。 */
#member .card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:var(--s4);
  align-items:start;
}
#member .card-grid > .col-md-6{
  width:auto; max-width:none; flex:none; float:none;
  margin-top:0;   /* 間距交給 grid 的 gap,不要跟 mt-5 疊加 */
}

#member .table{ margin-top:var(--s3); }
/* 身份驗證是一張兩欄表(說明 | 上傳),在 390px 手機上第二欄只剩 173px,
   上傳欄位會被壓成細縫。電腦版把說明欄固定窄一點,手機版直接改成上下堆疊。 */
#member .table-bordered td:first-child{ width:190px; }
@media (max-width:767.98px){
  #member .table-bordered,
  #member .table-bordered tbody,
  #member .table-bordered tr,
  #member .table-bordered td{ display:block; width:100% !important; }
  #member .table-bordered tr{
    border:1px solid var(--line);   /* 同上:堆疊後每一列是一張卡 */
    border-radius:var(--r-btn);
    margin-top:var(--s3);
    padding:var(--s3);
  }
  #member .table-bordered tr:first-child{ margin-top:0; }
  #member .table-bordered td{
    border:0 !important;
    padding:var(--s2) 0;
    text-align:left !important;
  }
  #member .table-bordered td:first-child{ padding-top:0; }
}
/* 「儲值」那顆掛的是舊的 btn-sm,在會員頁是主要動作,補到觸控下限 */
#member .btn-sm{ min-height:var(--tap); }
/* 超商查詢那排(7-11／Family／Hi-life／OK)與範本下載是外連,原本只有 21px 高。
   它們是要用手指點的連結,不是頁尾那種次要文字連結,所以補到 44px 而不是 32px。 */
#member .col-md-6 a[target]:not(.btn),
#member .col-md-12 a[target]:not(.btn){
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
  padding:0 var(--s3);
  color:var(--gold-300);
  text-decoration:underline;
  text-underline-offset:3px;
}
#member .center{ text-align:center; }
/* 頁面開頭的一句說明(紅利紀錄用來區隔「這裡不是儲值紀錄」) */
.note-lead{ color:var(--mute); font-size:var(--fs-sm); margin:0 0 var(--s4); }
.pager-wrap{ display:block; }
/* 點數轉移的上半部是一個「拿來排版用」的表格:一列六格
   錢包 | 數字 | 一鍵轉出 | 卡利: | 數字 | 一鍵轉入。
   六欄硬塞進 350px 的手機必然難看,但那六格帶著 JS 要抓的 id
   (#transferBTN1/2、.balance_div[data-makersnum]),不能改結構。
   所以用 grid 把同一列重排成兩組「名稱 / 餘額 / 按鈕」,原始碼一行不動。 */
/* 依指示拿掉「一鍵轉出」「卡利:」「一鍵轉入」三格,只留錢包餘額。
   用隱藏而不是刪原始碼:#transferBTN1/2 與 .balance_div 是 transfer.min.js 要抓的元素,
   刪掉腳本會在 querySelector 拿到 null 之後整支停掉;留在 DOM 裡最安全,
   還原也只是拿掉這一條規則(天條 13)。 */
#transferForm td:nth-child(3),
#transferForm td:nth-child(4),
#transferForm td:nth-child(5),
#transferForm td:nth-child(6){ display:none !important; }

@media (max-width:767.98px){
  #transferForm table{ display:block; border:0; background:transparent; }
  #transferForm tbody{ display:block; }
  #transferForm tr{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:var(--s2) var(--s3);
  }
  #transferForm td{ display:block; border:0 !important; padding:0; }
  /* 第 1、4 格是名稱 */
  #transferForm td:nth-child(1),
  #transferForm td:nth-child(4){ color:var(--mute); font-size:var(--fs-sm); white-space:nowrap; }
  /* 第 2、5 格是餘額 */
  #transferForm td:nth-child(2),
  #transferForm td:nth-child(5){
    text-align:right;
    color:var(--gold-300); font-size:22px; font-weight:800;
    font-variant-numeric:tabular-nums;
  }
  /* 第 3、6 格是按鈕,各自佔滿一整列 */
  #transferForm td:nth-child(3),
  #transferForm td:nth-child(6){ grid-column:1 / -1; }
  #transferForm td:nth-child(3){ margin-bottom:var(--s5); }
  #transferForm td:nth-child(3) a,
  #transferForm td:nth-child(6) a{ display:block; }
  #transferForm td:nth-child(3) .badge,
  #transferForm td:nth-child(6) .badge{ width:100%; }
}
/* 提領頁的餘額那一行(原本是 h6 + h4,已改成一般元素) */
.balance-line{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s2);
  margin:0 0 var(--s4);
}
.balance-line .lb{ color:var(--mute); font-size:var(--fs-sm); }
.balance-line .val{
  color:var(--gold-300); font-size:28px; font-weight:800;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.balance-line .unit{ color:var(--mute); font-size:var(--fs-sm); }
/* 轉點頁的「一鍵轉出／轉入」掛的是 bootstrap 的 badge-warning ——
   橘色藥丸、62×18px。它其實是這一頁的主要動作,不是狀態標籤,
   所以照按鈕規格重做:金色、觸控 44px。 */
#member a > .badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:120px;
  padding:0 var(--s4);
  background:var(--gbtn);
  border-radius:var(--r-btn);
  color:var(--on-gold);
  font-size:var(--fs-body); font-weight:800;
  white-space:nowrap;
}
#member a:hover > .badge{ filter:brightness(1.06); }
/* 站上散落著寫死的 color:red / .red,純紅在深底只有 4.84:1 —— 一律導到亮一階的紅 */
.red,
[style*="color:red"],
[style*="color: red"],
[style*="color:#f00"],
[style*="color:#FF0000"],
[style*="color:#ff0000"]{ color:var(--danger) !important; }
font[color="red"]{ color:var(--danger) !important; }
#member .label{ margin-top:var(--s4); }
#member .label label{ color:var(--gold-300); font-size:var(--fs-sm); font-weight:700; margin:0 0 var(--s2); display:block; }
#member .bs-callout{ border:0; }

/* 身份驗證用的是 bootstrap-fileinput 外掛,它自帶一套淺色介面
   (原生 input 被藏成 opacity:0,畫面上是外掛畫出來的殼)—— 一起換成深色 */
.file-input,.file-caption-main{ width:100%; min-width:0; }
/* 外掛的殼是 .input-group,不給 flex 比重的話輸入框會被壓成一條細縫、
   旁邊只剩一顆大按鈕 */
.file-input .input-group{ display:flex; width:100%; }
.file-input .file-caption{ flex:1 1 auto; min-width:0; }
.file-input .input-group-btn,
.file-input .input-group-append{ flex:0 0 auto; display:flex; }
.file-caption,
.file-caption .form-control,
.file-caption-name{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r-btn) 0 0 var(--r-btn);
  color:var(--on-dark-hi);
  height:var(--tap);
  display:flex; align-items:center;
  padding:0 var(--s3);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.file-caption-name{ border:0; background:transparent; padding:0; width:100%; }
.file-caption-name::placeholder{ color:var(--mute); }
.btn-file,.fileinput-remove,.fileinput-cancel,.fileinput-upload{
  min-height:var(--tap);
  background:var(--a14);
  border:1px solid var(--line);
  border-radius:0 var(--r-btn) var(--r-btn) 0;
  color:var(--gold-300);
  white-space:nowrap;
}
.btn-file:hover,.fileinput-remove:hover{ background:var(--a28); color:var(--gold-100); }
.file-preview{
  background:var(--ink-850);
  border:1px solid var(--a18);
  border-radius:var(--r-card);
  padding:var(--s3);
  margin-top:var(--s3);
}
.file-preview-frame,.file-footer-caption{ color:var(--on-dark); }
.file-drop-zone{ border-color:var(--line); }
/* 原生 <input type=file>。
   平常會被上傳元件的 JS 接管、藏成 opacity:0 疊在「選擇檔案」按鈕上;
   但 JS 沒跑到的時候(預覽版把 script 剝掉、線上腳本載入失敗)就會露出瀏覽器原生樣子:
   按鈕與「未選擇任何檔案」貼著左上角,底下空一截 48px 高的框。
   置中之後兩種狀態看起來都是對的。

   垂直方向用 line-height(48px 框高減上下各 1px 框線)就好。
   水平方向試過三種都不行:
     · text-align:center —— Chromium 的 UA 樣式把檔案輸入鎖成 start,加 !important 也蓋不掉
     · display:flex      —— 吃得進去,但 shadow DOM 裡的按鈕與檔名不會變成 flex 項目
     · width:fit-content —— computed 仍然是父層寬度,框沒有縮
   width:fit-content 對它也無效(實測 computed 仍是父層寬度),
   最後可行的組合是:input 變成 inline-block 讓它自己縮到內容寬,
   再靠父層儲存格的 text-align 把它推到中間。 */
input[type=file]{
  display:inline-block;
  width:auto; max-width:min(100%, 15rem);
  line-height:46px;
  cursor:pointer;
}
/* 這個儲存格裡只有上傳欄位,整格置中;
   下面 #member .table-bordered td 那條把所有格子鎖成 text-align:left !important,
   所以這裡也要 !important 才蓋得過去。 */
#member td:has(> input[type=file]){ text-align:center !important; }
.file-drop-zone-title{ color:var(--mute); }
@media (max-width:767.98px){
  #member .col-12,#member .col-md-12,#member .col-md-6{ padding:var(--s4); }
  #member .col-form-label{ flex:1 1 100%; }
  #member .form-group.row > [class*="col-sm-"]{ flex:1 1 100%; }
}

/* ==========================================================================
   13. 工具類
   ========================================================================== */
.mt1{ margin-top:var(--s1) } .mt2{ margin-top:var(--s2) }
.mt3{ margin-top:var(--s3) } .mt4{ margin-top:var(--s4) }
.mt5{ margin-top:var(--s5) } .mt6{ margin-top:var(--s6) }
.tc{ text-align:center } .tr{ text-align:right }
.mute{ color:var(--mute) } .gold{ color:var(--gold-300) }
.hide{ display:none !important }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.rule{ height:1px; background:var(--gline); margin-top:var(--s5); }

/* ==========================================================================
   14. 優惠活動
   內容從 WP 站 /promotion/ 搬過來,主視覺是 1200×360(10:3)的 WebP。
   規則文字是法遵必須留的,不套天條 53 的「拿掉敘述文字」。
   ========================================================================== */
.pcard{
  margin-top:var(--s5);
  background:var(--darkcard);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-hi);
  overflow:hidden;
}
.pcard:first-of-type{ margin-top:0; }
.pcard-img{
  aspect-ratio:10/3;
  background:var(--ink-900);
  border-bottom:1px solid var(--line-in);
}
.pcard-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcard-body{ padding:var(--s5); }
.pcard-body h2,.pcard-body h3{
  color:var(--gold-300);
  font-size:var(--fs-h2); font-weight:800; line-height:1.3;
  margin:0;
}
.pcard-lead{ color:var(--on-dark-hi); font-size:var(--fs-body); margin:var(--s2) 0 0; }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.chip{
  display:inline-flex; align-items:center;
  padding:5px var(--s3);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--gold-300);
  font-size:var(--fs-sm); font-weight:700;
  background:var(--a08);
}
.pblock{ margin-top:var(--s5); }
.pblock h3{
  color:var(--on-dark-hi);
  font-size:var(--fs-h3); font-weight:700;
  padding-left:var(--s3);
  border-left:3px solid var(--gold-600);
  margin:0 0 var(--s3);
}
.pblock p{ color:var(--on-dark); font-size:var(--fs-body); line-height:1.75; margin:var(--s2) 0 0; }
.pblock > p:first-child{ margin-top:0; }
.plist{ margin:0; padding-left:1.4em; color:var(--on-dark); font-size:var(--fs-body); line-height:1.75; }
.plist li{ margin-top:var(--s2); }
.plist li:first-child{ margin-top:0; }
.plist li::marker{ color:var(--gold-600); font-weight:700; }
/* 條件表用 dl —— 是「名稱→值」不是表格資料,語意上該是定義列表(天條 43) */
.pdl{ margin:0; }
.pdl > div{
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--line-in);
}
.pdl > div:last-child{ border-bottom:0; padding-bottom:0; }
.pdl dt{ flex:0 0 132px; color:var(--gold-300); font-size:var(--fs-sm); font-weight:700; margin:0; }
.pdl dd{ flex:1 1 200px; color:var(--on-dark); font-size:var(--fs-body); margin:0; }
.pcard .btn-row{ margin-top:var(--s6); }
.btn.is-done{ opacity:1; color:var(--mute); border-color:var(--line-in); pointer-events:none; }
.pfine{
  margin-top:var(--s5);
  color:var(--mute); font-size:var(--fs-sm); line-height:1.7;
}
@media (min-width:768px){
  .pcard-body{ padding:var(--s6); }
  .pcard-body h2{ font-size:var(--fs-h1); }
}
@media (max-width:399.98px){
  .pdl dt{ flex:1 1 100%; }   /* 窄機標籤與值改上下排,不然值只剩 60px 寬 */
}

/* ==========================================================================
   15. 儲值頁(deposit2)
   原本頁內有一整段 300 行的白底樣式(--pd-bg-soft:#fcf9f2、文字 #1a202c),
   那是給淺色版型寫的,搬到深底會整片刷白。這裡照同一組類別名改寫成深色 ——
   **類別名一個都不能改**:selectMainPayment / selectSubPayment / deposit.js
   全都靠 .payment-item / .sub-payment-item / .active 在抓元素。
   另外 JS 是用 element.style.display='flex' 開子選項,所以
   .sub-payment-group 必須是 flex 直排,寫成 grid 會被那行 inline style 蓋掉。
   ========================================================================== */
.prestige-deposit-scope{ display:block; width:100%; color:var(--on-dark); }
.prestige-deposit-scope *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.deposit-container{ width:100%; max-width:560px; margin:0 auto; }
.section-label{
  display:block;
  margin:var(--s6) 0 var(--s3);
  color:var(--gold-300);
  font-size:var(--fs-sm); font-weight:700; letter-spacing:.06em;
}
.section-label:first-child{ margin-top:0; }

/* 支付管道 */
.payment-list{ display:flex; flex-direction:column; gap:var(--s2); }
.payment-item{
  display:flex; align-items:center; gap:var(--s3);
  min-height:var(--tap);
  padding:var(--s3) var(--s4);
  background:var(--darkcard);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.payment-item:hover{ border-color:var(--gold-500); }
.payment-item.active{ border-color:var(--gold-500); background:var(--a14); }
/* 支付圖示的底板。
   原本每一種各給一個顏色(金／綠／青／藍灰／褐),五個並排像五套東西,
   而且綠與青配白字都撐不到 4.5:1。現在圖示統一成一套金色 WebP,
   底板也統一:未選是深底金框,選中換成金底、圖示反白 —— 選了哪一個一眼看得出來。 */
.icon-box{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  background:var(--a08);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  color:var(--gold-300);
  font-size:var(--fs-micro); font-weight:800; letter-spacing:.02em;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.icon-box img{ width:24px; height:24px; display:block; }
.payment-item.active .icon-box{ background:var(--gbtn); border-color:transparent; }
/* 金底上要深色圖示 —— 圖檔是金色的,用濾鏡壓成近黑,不必另外做一套反白圖 */
.payment-item.active .icon-box img{ filter:brightness(0) saturate(100%); }
/* bg-* 這幾個 class 樣板還在用,保留當識別用,不再各自帶顏色 */
.bg-atm,.bg-multi,.bg-usdt,.bg-card,.bg-epay,
.bg-linepay,.bg-jiekou,.bg-applepay,.bg-googlepay{ background:var(--a08); }
.item-info{ flex:1 1 auto; min-width:0; }
.item-name{ color:var(--on-dark-hi); font-size:var(--fs-body); font-weight:700; line-height:1.35; }
.item-desc{ color:var(--mute); font-size:var(--fs-sm); line-height:1.4; margin-top:2px; }
.item-desc:empty{ display:none; }
.select-indicator{
  flex:0 0 auto;
  width:20px; height:20px;
  border:2px solid var(--line);
  border-radius:50%;
  position:relative;
}
.payment-item.active .select-indicator{ border-color:var(--gold-500); }
.payment-item.active .select-indicator::after{
  content:''; position:absolute; inset:3px;
  background:var(--gold-500); border-radius:50%;
}

/* 子選項:JS 用 style.display='flex' 開,這裡只定義收起狀態與排列方向 */
.sub-payment-group{
  display:none; flex-direction:column; gap:var(--s2);
  margin-top:var(--s2); padding-left:var(--s5);
}
.sub-payment-item{
  display:flex; align-items:center; gap:var(--s3);
  min-height:var(--tap);
  padding:0 var(--s3);
  background:var(--a08);
  border:1px solid var(--line-in);
  border-radius:var(--r-btn);
  color:var(--on-dark); font-size:var(--fs-body);
  cursor:pointer;
}
.sub-payment-item.active{ border-color:var(--gold-500); background:var(--a14); color:var(--on-dark-hi); }
.brand-icon{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:var(--r-btn);
  color:#fff; font-size:var(--fs-micro); font-weight:800;
}

/* 金額 */
.amount-card{
  background:var(--darkcard);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s5);
}
.amount-input-group{ display:flex; align-items:center; gap:var(--s2); }
.currency-symbol{ color:var(--gold-300); font-size:28px; font-weight:800; line-height:1; }
.amount-input{
  flex:1 1 auto; min-width:0;
  height:56px; padding:0 var(--s3);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  color:var(--on-dark-hi);
  font-size:24px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.amount-input::placeholder{ color:var(--mute); font-size:var(--fs-body); font-weight:400; }
.quick-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s2);
  margin-top:var(--s4);
}
.quick-btn{
  min-height:var(--tap);
  background:var(--a08);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  color:var(--gold-300);
  font-size:var(--fs-body); font-weight:700;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}
.quick-btn:hover{ background:var(--a14); border-color:var(--gold-500); }

/* 注意事項 */
.info-box{
  margin-top:var(--s5);
  padding:var(--s4);
  background:var(--a08);
  border:1px solid var(--line);   /* 是獨立容器不是內部分隔線,框要看得見 */
  border-radius:var(--r-card);
  color:var(--on-dark); font-size:var(--fs-sm); line-height:1.9;
}

/* 送出列。
   手機上要疊在底部固定選單「上面」,不能互相蓋 ——
   bottom 從 --bnav-h 起算,電腦版底部選單不顯示就貼底。 */
.fixed-bottom-bar{
  position:sticky; bottom:0; z-index:820;
  /* 負邊距要正好等於容器的左右內距(--gutter),用 --s5(24px)會多出 4px 而超出畫面 */
  margin:var(--s6) calc(var(--gutter) * -1) 0;
  padding:var(--s4) var(--gutter);
  background:var(--ink-900);
  border-top:1px solid var(--line);
}
.submit-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:var(--tap);
  background:var(--gbtn);
  border:0; border-radius:var(--r-btn);
  color:var(--on-gold);
  font-size:var(--fs-body); font-weight:800;
  cursor:pointer;
}
.submit-btn:hover{ filter:brightness(1.06); }
.footer-bar{ display:none; }   /* 原版的第二條底列,深色版用不到 */