/* sa272 改版品牌樣式(2026-08-25 起)
規則:只加不改 —— 舊 CSS 一律不動;本檔只描 .sab- 前綴的新結構,
需要覆蓋舊元件時用 body 前綴提權,不用 !important。
還原方式:拿掉 head.php 對本檔的引用即可,原站零風險。 */
:root{
--sab-g:#e8c25a; --sab-g-hi:#efcb66; --sab-g-lo:#c99a1e; --sab-g-ink:#221a04;
--sab-bg:#0b1a14; --sab-foot:#1c1f2a;
--sab-l1:#1e3a2d;
--sab-t1:#f4f7f5; --sab-t2:#dde3df; --sab-t3:#b3c2ae;
--sab-c1:#17372a; --sab-c2:#0c2419;
}
/* ── 版面基底:只在掛了 .sab-page 的頁面生效,舊頁零影響 ── */
body.sab-page{
margin:0;background:var(--sab-bg);color:var(--sab-t1);
font-size:16px;line-height:1.65;
font-family:-apple-system,"Segoe UI","Noto Sans TC","微軟正黑體",sans-serif;
padding-bottom:calc(64px + env(safe-area-inset-bottom));
max-width:100%;overflow-x:clip;
}
body.sab-page a{text-decoration:none;color:inherit}
body.sab-page img{max-width:100%}
/* ── 頁首 ── */
.sab-hd{position:sticky;top:0;z-index:50;height:72px;background:rgba(10,21,15,.96);
border-bottom:1px solid var(--sab-l1);display:flex;align-items:center;gap:10px;padding:0 14px}
.sab-hd .sab-logo{height:42px;width:auto;display:block}
.sab-hd nav{display:none}
.sab-hd .sab-sp{flex:1}
.sab-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;white-space:nowrap;cursor:pointer}
.sab-btn.ghost{height:42px;padding:0 13px;border:1px solid var(--sab-g);color:var(--sab-g);font-size:14px;border-radius:999px}
.sab-btn.gold{height:42px;padding:0 15px;background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink);font-size:14.5px;border-radius:999px;
box-shadow:0 4px 14px rgba(201,154,30,.3),inset 0 1px 0 rgba(255,255,255,.35)}
/* ── banner(包住既有 bootstrap carousel):各裝置鎖定比例,
後台圖高度不一時用 cover 裁切,不留黑條 ── */
.sab-ban{position:relative;background:#08130e;overflow:hidden}
.sab-ban .carousel-item{aspect-ratio:16/5;overflow:hidden}
.sab-ban .carousel-item img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media (max-width:767px){
.sab-ban .carousel-item{aspect-ratio:2/1;min-height:160px}
.sab-ban .carousel-item img{object-position:56% center}
}
.sab-ban .carousel-indicators li{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);border:0}
.sab-ban .carousel-indicators li.active{background:var(--sab-g);width:24px}
/* ── 跑馬燈殼 ── */
.sab-mq{height:44px;display:flex;align-items:center;gap:9px;padding:0 14px;background:#0f231b;border-bottom:1px solid var(--sab-l1);overflow:hidden}
.sab-mq .sab-ic{width:24px;height:24px;border-radius:50%;flex:none;border:1px solid var(--sab-g);color:var(--sab-g);font-size:12px;display:flex;align-items:center;justify-content:center}
.sab-mq ul{margin:0;padding:0;list-style:none;min-width:0;flex:1;white-space:nowrap;overflow:hidden}
.sab-mq li{display:none}
.sab-mq li.sab-on{display:block;overflow:hidden;text-overflow:ellipsis}
.sab-mq li a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sab-mq li a{font-size:14px;color:var(--sab-t2)}
/* ── 大廳 ── */
.sab-lobby{display:flex;align-items:stretch}
.sab-rail{width:84px;flex:none;background:#0d201a;border-right:1px solid var(--sab-l1);display:flex;flex-direction:column;gap:6px;padding:10px 7px}
.sab-rail a{min-height:68px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:500;color:var(--sab-t3);background:#12271f;text-align:center;cursor:pointer}
.sab-rail a.sab-on{background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink);font-weight:700}
.sab-rail em{font-style:normal;line-height:0}
.sab-rail em svg{width:22px;height:22px;display:block}
.sab-cats{flex:1;min-width:0;padding:12px}
.sab-cat{display:none}
.sab-cat.sab-on{display:block}
.sab-cath{display:flex;align-items:baseline;gap:9px;margin:0 0 11px}
.sab-cath h2{font-size:17px;font-weight:700;margin:0;color:var(--sab-t1)}
.sab-cath span{font-size:12px;color:var(--sab-t3);letter-spacing:.1em;text-transform:uppercase}
.sab-cards{display:flex;flex-direction:column;gap:11px}
/* 真人照片卡 */
.sab-card{position:relative;display:block;border-radius:14px;overflow:hidden;
border:1px solid rgba(232,194,90,.30);
background:
radial-gradient(95% 130% at 78% 18%,rgba(232,194,90,.14),transparent 52%),
linear-gradient(to top,rgba(0,0,0,.28),transparent 42%),
linear-gradient(135deg,var(--sab-c1) 0%,#113023 52%,var(--sab-c2) 100%);
box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
min-height:138px;padding:15px 16px;cursor:pointer}
.sab-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(to right,rgba(11,32,24,.55) 0%,rgba(11,32,24,.25) 40%,rgba(11,32,24,0) 60%)}
.sab-card .sab-art{position:absolute;right:0;top:0;bottom:0;height:100%;width:52%;z-index:1;object-fit:cover;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
.sab-card .sab-tx{position:relative;display:block;z-index:3;width:62%}
.sab-card i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--sab-g);text-transform:uppercase;margin-bottom:3px}
.sab-card b{display:block;font-size:18px;font-weight:700;color:var(--sab-t1);letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.sab-card small{display:block;font-size:13px;color:#e6ece5;margin-top:4px;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.sab-card .sab-go{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;height:42px;padding:0 20px;border-radius:999px;font-size:13.5px;font-weight:700;
background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink);
box-shadow:0 4px 14px rgba(201,154,30,.32),inset 0 1px 0 rgba(255,255,255,.35)}
/* 廠商照片卡 */
.sab-vcard{position:relative;display:flex;align-items:center;gap:14px;border-radius:14px;overflow:hidden;
border:1px solid rgba(232,194,90,.30);padding:0 16px;min-height:96px;cursor:pointer;
background:
radial-gradient(80% 150% at 88% 20%,rgba(232,194,90,.16),transparent 55%),
linear-gradient(135deg,var(--sab-c1) 0%,#113023 52%,var(--sab-c2) 100%);
box-shadow:0 10px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07)}
.sab-vcard .sab-vpic{position:absolute;right:0;top:0;bottom:0;height:100%;width:48%;object-fit:cover;z-index:0;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%);mask-image:linear-gradient(to right,transparent 0,#000 34%)}
.sab-vcard .sab-vt{position:relative;z-index:2;flex:1;min-width:0}
.sab-vcard i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--sab-g);text-transform:uppercase;margin-bottom:2px}
.sab-vcard b{display:block;font-size:17px;font-weight:700;color:var(--sab-t1);white-space:nowrap}
.sab-vcard small{display:block;font-size:12.5px;color:#dfe6de;margin-top:2px}
.sab-vcard::after{content:"›";font-size:26px;line-height:1;color:var(--sab-g);flex:none;margin:0 2px 4px 0;position:relative;z-index:2}
/* ── 底部導覽(手機) ── */
.sab-tab{position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(64px + env(safe-area-inset-bottom));
padding-bottom:env(safe-area-inset-bottom);
background:rgba(10,21,15,.97);border-top:1px solid var(--sab-g);display:flex}
.sab-tab a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;color:var(--sab-t3)}
.sab-tab a.sab-on{color:var(--sab-g)}
.sab-tab em{font-style:normal;font-size:19px;line-height:1}
/* ── 頁尾(桌機單行) ── */
.sab-ft{display:none;background:var(--sab-foot);border-top:1px solid var(--sab-l1);padding:24px 40px;
align-items:center;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--sab-t3)}
.sab-ft .sab-fl{display:flex;gap:22px;flex:1;flex-wrap:wrap}
.sab-ft .sab-cp{font-size:12.5px}
/* ── 平板 768–1023(天條 36) ── */
@media (min-width:768px){
.sab-cards{display:grid;grid-template-columns:repeat(2,1fr)}
.sab-cards.sab-one{grid-template-columns:1fr}
.sab-rail{width:120px}
}
/* ── 桌機 ≥1024 ── */
@media (min-width:1024px){
body.sab-page{padding-bottom:0}
.sab-hd{height:112px;padding:0 36px;gap:26px}
.sab-hd .sab-logo{height:72px}
.sab-hd nav{display:flex;gap:26px;font-size:16.5px;color:var(--sab-t2)}
.sab-hd nav a.sab-on{color:var(--sab-g);font-weight:700}
.sab-tab{display:none}
.sab-ft{display:flex}
.sab-mq{padding:0 36px}
.sab-lobby{max-width:1200px;margin:0 auto;width:100%;padding:26px 24px 48px;gap:26px}
.sab-rail{width:200px;background:none;border:0;padding:0;gap:10px}
.sab-rail a{min-height:58px;flex-direction:row;justify-content:flex-start;gap:13px;padding:0 18px;font-size:16.5px;border:1px solid var(--sab-l1)}
.sab-cats{padding:0}
.sab-cath h2{font-size:24px}
.sab-cards{grid-template-columns:repeat(3,1fr)}
.sab-cards.sab-two{grid-template-columns:repeat(2,1fr)}
.sab-cards.sab-one{grid-template-columns:1fr}
.sab-card{min-height:210px;padding:22px 24px}
.sab-card b{font-size:21px}
.sab-vcard{min-height:112px;padding:0 20px}
}
/* ── 舊登入 modal 在新頁面上的配色補正(提權蓋 bootstrap) ── */
body.sab-page .modal-content{background:#12281f;border:1px solid rgba(232,194,90,.3);color:var(--sab-t1)}
body.sab-page .modal-header{border-bottom:1px solid var(--sab-l1)}
body.sab-page .modal-title{color:var(--sab-t1)}
body.sab-page .modal .input-group-text{background:#0d201a;border-color:#3c4c42;color:var(--sab-t3)}
body.sab-page .modal .form-control{background:rgba(0,0,0,.25);border-color:#3c4c42;color:var(--sab-t1)}
body.sab-page .modal .res_button{background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink);
border:0;border-radius:999px;height:46px;width:100%;font-weight:700;cursor:pointer}
body.sab-page .modal a{color:var(--sab-g)}
/* ── 新頁沿用 footer.php 的功能腳本,但藏掉它的舊視覺 ── */
body.sab-page footer.footer{display:none}
body.sab-page nav.nav-ft{display:none}
body.sab-page .hamburger_bar{display:none}
body.sab-page .menu.trans_800{display:none}
/* ── 內頁標題帶 ── */
.sab-ptt{padding:18px 16px 2px}
.sab-ptt h1{margin:0;font-size:22px;font-weight:700;color:var(--sab-t1)}
.sab-ptt h1::after{content:"";display:block;width:34px;height:3px;border-radius:2px;margin-top:8px;background:linear-gradient(90deg,var(--sab-g-hi),var(--sab-g-lo))}
.sab-ptt p{margin:8px 0 0;font-size:13.5px;color:var(--sab-t3)}
@media (min-width:1024px){
.sab-ptt{max-width:1200px;margin:0 auto;padding:34px 24px 0}
.sab-ptt h1{font-size:28px}
}
/* 換殼頁:舊內容容器在深底上的基本可讀性 */
body.sab-page2{margin:0;background:var(--sab-bg);color:var(--sab-t2);
font-family:-apple-system,"Segoe UI","Noto Sans TC","微軟正黑體",sans-serif;
padding-bottom:calc(64px + env(safe-area-inset-bottom));max-width:100%;overflow-x:clip}
@media (min-width:1024px){ body.sab-page2{padding-bottom:0} }
body.sab-page2 a{text-decoration:none}
body.sab-page2 footer.footer{display:none}
body.sab-page2 nav.nav-ft{display:none}
body.sab-page2 .hamburger_bar{display:none}
body.sab-page2 .menu.trans_800{display:none}
/* ── 優惠活動卡(沿用 .subNav/.navContent 的展開 JS,只換視覺) ── */
.sab-plist{padding:12px;display:flex;flex-direction:column;gap:12px;max-width:900px;margin:0 auto;width:100%}
@media (min-width:1024px){ .sab-plist{max-width:1200px;padding:18px 24px 48px} }
.sab-promo{border-radius:14px;overflow:hidden;border:1px solid rgba(232,194,90,.30);
background:linear-gradient(135deg,var(--sab-c1) 0%,#113023 52%,var(--sab-c2) 100%);
box-shadow:0 10px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07)}
.sab-promo .subNav{cursor:pointer}
.sab-promo .subNav img{display:block;width:100%;border-bottom:1px solid rgba(232,194,90,.22)}
.sab-promo .subNav h4{margin:0;padding:13px 16px;font-size:17px;font-weight:700;color:var(--sab-t1)}
.sab-promo .navContent{background:rgba(0,0,0,.22);color:var(--sab-t2);font-size:14.5px;line-height:1.75}
.sab-promo .navContent p{color:var(--sab-t2)}
.sab-promo .navContent table{color:var(--sab-t2)}
.sab-promo .btnlogin,.sab-promo .btn-primary{display:inline-flex;align-items:center;justify-content:center;
height:42px;padding:0 22px;border-radius:999px;font-size:14px;font-weight:700;border:0;
background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink)}
/* 舊 style.min.css 對 #index_carousel::after 放了 7rem 的裝飾偽元素,新版首頁不需要 */
body.sab-page #index_carousel::after{display:none;content:none;height:0}
/* ═══════════ 以下為 sa999(www-white)專屬段 ═══════════ */
/* 跑馬燈沿用原 include(marquee.css/RunTopic.js),只調色 */
body.sab-page .mq-section{background:#0f231b;border-bottom:1px solid var(--sab-l1);margin:0}
body.sab-page .mq-section .top-bar{background:transparent}
body.sab-page .mq-section .marquee li a{color:var(--sab-t2)}
/* 深底表單卡(登入/快速註冊) */
.sab-formwrap{display:flex;align-items:flex-start;justify-content:center;padding:20px 14px}
.sab-form{width:100%;max-width:460px;border-radius:16px;padding:24px 20px;
border:1px solid rgba(232,194,90,.28);
background:radial-gradient(120% 90% at 50% 0%,rgba(232,194,90,.10),transparent 55%),linear-gradient(160deg,#152f24,#0e2a1f);
box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)}
.sab-form h2{margin:0 0 4px;font-size:22px;font-weight:700;color:var(--sab-t1);text-align:center}
.sab-form .sab-sub{margin:0 0 14px;font-size:13px;color:var(--sab-t3);text-align:center}
body.sab-page .sab-form label{color:var(--sab-t2);font-size:13.5px;font-weight:700}
body.sab-page .sab-form .form-control{background:rgba(0,0,0,.25);border:1px solid #3c4c42;color:var(--sab-t1);
height:48px;border-radius:10px}
body.sab-page .sab-form .form-control::placeholder{color:var(--sab-t3)}
body.sab-page .sab-form .input-group-text{background:#0d201a;border-color:#3c4c42;color:var(--sab-t3)}
body.sab-page .sab-form .btn-primary,body.sab-page .sab-form .btn-warning{
background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink);border:0;
border-radius:999px;height:46px;padding:0 26px;font-weight:700;
box-shadow:0 4px 14px rgba(201,154,30,.32),inset 0 1px 0 rgba(255,255,255,.35)}
body.sab-page .sab-form .btn-danger{background:transparent;border:1px solid var(--sab-g);color:var(--sab-g);
border-radius:999px;height:46px;padding:0 22px;font-weight:700;display:inline-flex;align-items:center}
body.sab-page .sab-form .btn-danger.btn-small{height:42px;margin-top:8px}
body.sab-page .sab-form a{color:var(--sab-g)}
body.sab-page .sab-form .form-check-label{color:var(--sab-t2);font-weight:400}
body.sab-page .sab-form .alert{border-radius:10px}
/* 優惠卡:沿用 bootstrap collapse(data-toggle=collapse) */
.sab-promo .sab-phead{display:block;cursor:pointer}
.sab-promo .sab-phead img{display:block;width:100%;border-bottom:1px solid rgba(232,194,90,.22)}
.sab-promo .sab-phead h3{margin:0;padding:13px 16px;font-size:17px;font-weight:700;color:var(--sab-t1)}
.sab-promo .sab-pbody{background:rgba(0,0,0,.22);color:var(--sab-t2);font-size:14.5px;line-height:1.75;padding:0}
.sab-promo .sab-pbody .sab-pin{padding:14px 16px}
.sab-promo .sab-pbody p{color:var(--sab-t2)}
.sab-promo .sab-pbody table{color:var(--sab-t2)}
/* 換殼頁(account/deposit2 等會員區):整區改深綠金,與首頁同一套 */
body.sab-page2 main#main{background:transparent;max-width:1200px;margin:0 auto;padding:16px 12px 40px;width:100%}
@media (min-width:1024px){ body.sab-page2 main#main{padding:24px 24px 56px} }
/* sa999 舊頁尾/舊底欄在新頁上隱藏(footer.php 檔尾腳本仍沿用) */
body.sab-page nav.ft-navbar{display:none !important}
body.sab-page footer#footer{display:none !important}
body.sab-page2 nav.ft-navbar{display:none !important}
body.sab-page2 footer#footer{display:none !important}
/* 首頁 banner(swiper 輪播 include)在新殼上的收整 */
body.sab-page .testimonials{background:#08130e;padding:0}
body.sab-page .testimonials .testimonial-item{margin:0}
body.sab-page .testimonials .testimonial-img{width:100%;display:block}
body.sab-page .testimonials .testimonial-title{display:none}
body.sab-page .sab-ptt h1::after{content:"";display:block;width:34px;height:3px;border-radius:2px;margin-top:8px;background:linear-gradient(90deg,var(--sab-g-hi),var(--sab-g-lo))}
/* 換殼頁的舊行銷標題帶在深底上的可讀性 */
body.sab-page2 .section-title .title{color:#222}
/* ═══════ 會員區(account / deposit2 / 各會員子頁)深綠金 ═══════ */
body.sab-page2 section.member{background:transparent;padding:0}
body.sab-page2 .member .container{max-width:1200px}
/* 左側選單 */
body.sab-page2 .member-menu_web{
background:linear-gradient(160deg,#152f24,#0e2a1f);
border:1px solid rgba(232,194,90,.24);border-radius:14px;
box-shadow:0 10px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06)}
body.sab-page2 .member-menu_web a,body.sab-page2 .member-menu_web li{color:var(--sab-t2)}
body.sab-page2 .member-menu_web a:hover{color:var(--sab-g)}
body.sab-page2 .member-menu_web .active,body.sab-page2 .member-menu_web .current{color:var(--sab-g)}
/* 內容主區 */
body.sab-page2 .member-page{
background:linear-gradient(160deg,#152f24,#0e2a1f);
border:1px solid rgba(232,194,90,.24);border-radius:14px;
box-shadow:0 10px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
color:var(--sab-t2)}
body.sab-page2 .member-top{color:var(--sab-t1);border-bottom:1px solid rgba(232,194,90,.22)}
body.sab-page2 .member-top a{color:var(--sab-g)}
body.sab-page2 .user-info>p{color:var(--sab-t3)}
/* 區塊卡與標題 */
body.sab-page2 .box{background:rgba(0,0,0,.18);border:1px solid rgba(232,194,90,.16);
border-radius:12px;padding:16px;margin-bottom:16px}
body.sab-page2 .box h4,body.sab-page2 .title{color:var(--sab-t1);border-left:3px solid var(--sab-g);
padding-left:10px;font-weight:700}
body.sab-page2 .box label,body.sab-page2 .form-group label{color:var(--sab-t2)}
body.sab-page2 .box label span{color:var(--sab-t3)}
body.sab-page2 .content,body.sab-page2 .content span{color:var(--sab-t1)}
/* 表單元件 */
body.sab-page2 .form-control,body.sab-page2 select.form-control,body.sab-page2 input.form-control{
background:rgba(0,0,0,.28);border:1px solid #3c4c42;color:var(--sab-t1);border-radius:10px}
body.sab-page2 .form-control::placeholder{color:var(--sab-t3)}
body.sab-page2 .form-control:focus{border-color:var(--sab-g);box-shadow:none;background:rgba(0,0,0,.34)}
body.sab-page2 .custom-file-label,body.sab-page2 .input-group-text{
background:#0d201a;border-color:#3c4c42;color:var(--sab-t3)}
/* 按鈕統一金色 */
body.sab-page2 .btn-warning,body.sab-page2 .btn-primary,body.sab-page2 .submit-btn{
background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink);border:0;
border-radius:999px;font-weight:700;
box-shadow:0 4px 14px rgba(201,154,30,.3),inset 0 1px 0 rgba(255,255,255,.35)}
body.sab-page2 .btn-warning:hover,body.sab-page2 .btn-primary:hover,body.sab-page2 .submit-btn:hover{
filter:brightness(1.06);color:var(--sab-g-ink)}
/* ── 儲值頁專屬(蓋過頁內 style,故用 body 前綴提權)── */
body.sab-page2 .deposit-container{background:transparent}
body.sab-page2 .section-label{color:var(--sab-t3);letter-spacing:.06em}
body.sab-page2 .payment-item,body.sab-page2 .sub-payment-item{
background:rgba(0,0,0,.22);border:1px solid rgba(232,194,90,.18);color:var(--sab-t2);border-radius:12px}
body.sab-page2 .payment-item.current,body.sab-page2 .sub-payment-item.current{
border-color:var(--sab-g);background:rgba(232,194,90,.10)}
body.sab-page2 .item-name{color:var(--sab-t1)}
body.sab-page2 .item-desc{color:var(--sab-t3)}
body.sab-page2 .amount-card{background:rgba(0,0,0,.22);border:1px solid rgba(232,194,90,.18);border-radius:12px}
body.sab-page2 .amount-input,body.sab-page2 .amount-input-group{color:var(--sab-t1);background:transparent}
body.sab-page2 .currency-symbol{color:var(--sab-g)}
body.sab-page2 .quick-btn{background:rgba(0,0,0,.28);border:1px solid #3c4c42;color:var(--sab-t2);border-radius:10px}
body.sab-page2 .quick-btn:hover,body.sab-page2 .quick-btn.current{border-color:var(--sab-g);color:var(--sab-g);background:rgba(232,194,90,.10)}
body.sab-page2 .info-box{background:rgba(232,194,90,.08);border:1px solid rgba(232,194,90,.28);
color:var(--sab-t2);border-radius:10px}
body.sab-page2 .fixed-bottom-bar{background:rgba(10,21,15,.97);border-top:1px solid rgba(232,194,90,.3)}
body.sab-page2 .select-indicator{border-color:#3c4c42}
body.sab-page2 table{color:var(--sab-t2)}
body.sab-page2 table th{color:var(--sab-t1);border-color:rgba(232,194,90,.18)}
body.sab-page2 table td{border-color:rgba(255,255,255,.08)}
/* 會員區左側:圓形快捷鈕與使用者資訊的對比修正 */
body.sab-page2 .memberMenu .icon-link li{background:transparent}
body.sab-page2 .memberMenu .icon-link li a{color:var(--sab-t2)}
body.sab-page2 .memberMenu .icon-link li a div{color:var(--sab-t2);font-weight:500}
body.sab-page2 .memberMenu .icon-link li a:hover div,
body.sab-page2 .memberMenu .icon-link li.current a div{color:var(--sab-g)}
body.sab-page2 .memberMenu .user-lv .user-text{color:var(--sab-t2)}
body.sab-page2 .memberMenu .user-lv .box-info span{color:var(--sab-t3)}
/* 內文連結(範本、CHROME瀏覽器 等)在深底上要看得見 */
body.sab-page2 .member-page a{color:var(--sab-g)}
body.sab-page2 .member-page a:hover{color:var(--sab-g-hi)}
body.sab-page2 .info-box a{color:var(--sab-g);text-decoration:underline}
/* 底部送出列融入深底,不留黑方塊 */
body.sab-page2 .fixed-bottom-bar{background:linear-gradient(to top,rgba(10,21,15,.98),rgba(10,21,15,.86));
border-top:1px solid rgba(232,194,90,.28);box-shadow:none}
/* 金額輸入的提示字 */
body.sab-page2 .amount-input::placeholder,body.sab-page2 .amount-input{color:var(--sab-t2)}
/* ═══════ 客服中心 ═══════ */
.sab-cslist{display:flex;flex-direction:column;gap:14px;padding:12px;max-width:900px;margin:0 auto;width:100%}
@media (min-width:768px){ .sab-cslist{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:18px 24px 48px;max-width:1000px} }
.sab-cs{position:relative;display:flex;align-items:center;gap:16px;padding:22px 18px;border-radius:16px;
border:1px solid rgba(232,194,90,.30);cursor:pointer;
background:
radial-gradient(90% 140% at 88% 12%,rgba(232,194,90,.14),transparent 55%),
linear-gradient(135deg,var(--sab-c1) 0%,#113023 52%,var(--sab-c2) 100%);
box-shadow:0 10px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07);
transition:transform .18s,box-shadow .18s}
.sab-cs:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1)}
.sab-cs-ic{width:60px;height:60px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center}
.sab-cs-ic svg{width:32px;height:32px;display:block}
.sab-cs-line .sab-cs-ic{background:linear-gradient(160deg,#06c755,#04a445);color:#fff;
box-shadow:0 4px 14px rgba(6,199,85,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.sab-cs-web .sab-cs-ic{background:linear-gradient(160deg,var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink);
box-shadow:0 4px 14px rgba(201,154,30,.34),inset 0 1px 0 rgba(255,255,255,.45)}
.sab-cs-tx{flex:1;min-width:0}
.sab-cs-tx i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.22em;
color:var(--sab-g);text-transform:uppercase;margin-bottom:3px}
.sab-cs-tx b{display:block;font-size:19px;font-weight:700;color:var(--sab-t1)}
.sab-cs-tx small{display:block;font-size:13px;color:#dfe6de;margin-top:3px;line-height:1.5}
.sab-cs-go{flex:none;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;
border-radius:999px;font-size:13.5px;font-weight:700;
background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink);
box-shadow:0 4px 12px rgba(201,154,30,.3),inset 0 1px 0 rgba(255,255,255,.35)}
@media (max-width:400px){ .sab-cs{padding:18px 14px;gap:12px} .sab-cs-go{padding:0 14px} }
/* ═══ 會員區對比修正(量測 WCAG 後補) ═══ */
/* 1. 按鈕文字:先前 .member-page a 的連結金色權重相同又在後面,把按鈕文字也染成金色
→ 金字配金底只有 1.5:1。這裡用更高權重把按鈕文字釘回深色。 */
body.sab-page2 .member-page a.btn,
body.sab-page2 .member-page button.btn,
body.sab-page2 a.btn.btn-warning,
body.sab-page2 a.btn.btn-primary,
body.sab-page2 button.btn.btn-warning,
body.sab-page2 button.btn.btn-primary,
body.sab-page2 .member-page .btn.submit-btn,
body.sab-page2 .member-page input[type=submit].btn{color:var(--sab-g-ink)}
/* 2. 說明文字:原站 #666 是配白底寫的,深底上只有 3.1:1 */
body.sab-page2 .member-page li,
body.sab-page2 .member-page .note,
body.sab-page2 .member-page dd,
body.sab-page2 .member-page dt{color:var(--sab-t2)}
/* 3. 警語紅字是 inline style="color:red",權重最高,只能用 !important 提亮;
#ff0000 在深綠底上 4.5:1 不足,改亮紅約 5.7:1。還原只要移除本區塊。 */
body.sab-page2 .member-page [style*="color:red"],
body.sab-page2 .member-page [style*="color: red"]{color:#ff7b7b !important}
/* 4. 原站 www-white/css/style.css 的 .btn-primary 寫死 color:#fff !important,
白字配金底只有 2.6:1。這是唯一能對抗的方式;不動原檔,還原=移除本行。 */
body.sab-page2 .member-page .btn-primary,
body.sab-page .sab-form .btn-primary,
body.sab-page2 .btn-primary{color:var(--sab-g-ink) !important}
/* 5. 左側選單的說明小字(.info,手機版顯示)原為 #777,深底上 3.4:1 */
body.sab-page2 .memberMenu .info,
body.sab-page2 .memberMenu .menu-link,
body.sab-page2 .memberMenu small{color:var(--sab-t2)}
/* ═══════ 會員中心首頁(Manger/index):摘要在上、帳戶管理在下 ═══════ */
/* member.css 把容器做成左右分欄(20% / 79%),這裡改成上下堆疊,
只在 .sab-mchome 底下生效,Manger/Account 那頁的分欄不受影響。 */
body.sab-page2 .sab-mchome section.member .container{
display:flex;flex-direction:column;align-items:stretch}
body.sab-page2 .sab-mchome .member-menu_web,
body.sab-page2 .sab-mchome .member-page{
width:100%;min-height:0;max-height:none}
body.sab-page2 .sab-mchome .member-page{margin-top:20px}
@media (min-width:1024px){
body.sab-page2 .sab-mchome .member-page{margin-top:24px}
}
/* 上方摘要帶:桌機排成一列(頭像資訊 | 快捷 | 選單) */
body.sab-page2 .sab-mchome .memberMenu{margin-bottom:0;padding:16px}
@media (min-width:768px){
body.sab-page2 .sab-mchome .memberMenu{
display:grid;grid-template-columns:minmax(220px,1fr) 1.4fr 1.6fr;
gap:20px;align-items:center;padding:20px 24px}
body.sab-page2 .sab-mchome .memberMenu .user-lv{
display:flex;align-items:center;gap:14px;margin:0}
body.sab-page2 .sab-mchome .memberMenu .user-lv .box-img{flex:0 0 56px}
body.sab-page2 .sab-mchome .memberMenu .user-lv img{max-width:56px}
body.sab-page2 .sab-mchome .memberMenu .user-lv .box-info{
display:flex;flex-direction:column;min-width:0}
body.sab-page2 .sab-mchome .memberMenu .icon-link ul,
body.sab-page2 .sab-mchome .memberMenu ul.menu-link{
display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
body.sab-page2 .sab-mchome .memberMenu ul.menu-link{margin-top:0}
body.sab-page2 .sab-mchome .memberMenu .icon-link li,
body.sab-page2 .sab-mchome .memberMenu ul.menu-link li{
width:auto;flex:0 0 auto;margin:0;border:0}
body.sab-page2 .sab-mchome .memberMenu .icon-link li a,
body.sab-page2 .sab-mchome .memberMenu ul.menu-link li a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
min-width:72px;min-height:56px;padding:8px 10px;border-radius:12px;
background:rgba(0,0,0,.24);border:1px solid rgba(232,194,90,.16);font-size:13px}
body.sab-page2 .sab-mchome .memberMenu .icon-link li a:hover,
body.sab-page2 .sab-mchome .memberMenu ul.menu-link li a:hover{
border-color:var(--sab-g);background:rgba(232,194,90,.10)}
body.sab-page2 .sab-mchome .memberMenu .icon-link img,
body.sab-page2 .sab-mchome .memberMenu ul.menu-link img{max-width:24px;margin:0}
body.sab-page2 .sab-mchome .memberMenu .icon-link{padding:0;border:0;box-shadow:none}
}
@media (min-width:768px) and (max-width:1023px){
body.sab-page2 .sab-mchome .memberMenu{grid-template-columns:1fr;gap:14px}
}
/* ═══════ 帳戶管理內容(index 與 Account 共用) ═══════ */
body.sab-page2 .sab-acc .sab-acc-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1024px){
body.sab-page2 .sab-acc .sab-acc-grid{grid-template-columns:1fr 1fr;gap:20px}
body.sab-page2 .sab-acc .sab-acc-wide{grid-column:1 / -1}
}
body.sab-page2 .sab-acc .box{margin-bottom:0;border-bottom:1px solid rgba(232,194,90,.16)}
body.sab-page2 .sab-acc .box h4{margin:0 0 14px;font-size:17px}
/* 一行一欄位:左標籤右內容 */
body.sab-page2 .sab-acc .sab-acc-row{
display:flex;align-items:center;gap:12px;margin-bottom:0;
padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
body.sab-page2 .sab-acc .sab-acc-row:last-child{border-bottom:0}
body.sab-page2 .sab-acc .sab-acc-row>label{
width:118px;flex:0 0 118px;margin:0;font-size:14px;line-height:1.35}
body.sab-page2 .sab-acc .sab-acc-row>label span{display:block;font-size:11px;opacity:.7}
body.sab-page2 .sab-acc .sab-acc-row .content{
flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;
gap:10px;flex-wrap:wrap}
body.sab-page2 .sab-acc .sab-acc-row .content>span{word-break:break-all}
body.sab-page2 .sab-acc .sab-acc-pt{
font-size:20px;font-weight:700;color:var(--sab-g);font-variant-numeric:tabular-nums}
/* 上下排的欄位(USDT、超商、實名認證) */
body.sab-page2 .sab-acc .form-group:not(.sab-acc-row){
display:block;margin-bottom:14px}
body.sab-page2 .sab-acc .form-group:not(.sab-acc-row)>label{
display:block;width:auto;margin:0 0 6px;font-size:14px}
body.sab-page2 .sab-acc .form-group:not(.sab-acc-row)>label a{
margin-left:8px;font-size:12px;text-decoration:underline}
body.sab-page2 .sab-acc .twzipcode{display:flex;gap:8px;flex-wrap:wrap}
body.sab-page2 .sab-acc .twzipcode select{flex:1 1 140px;min-width:0}
body.sab-page2 .sab-acc .twzipcode input{
flex:0 0 88px;background:rgba(0,0,0,.28);border:1px solid #3c4c42;
color:var(--sab-t1);border-radius:10px;padding:6px 10px}
/* 實名認證的四格上傳 */
body.sab-page2 .sab-acc .sab-acc-up{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:768px){
body.sab-page2 .sab-acc .sab-acc-up{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
body.sab-page2 .sab-acc .sab-acc-up{grid-template-columns:repeat(4,1fr)}
}
body.sab-page2 .sab-acc .custom-file{
border:1px dashed rgba(232,194,90,.34);border-radius:10px;padding:10px;background:rgba(0,0,0,.2)}
body.sab-page2 .sab-acc .custom-file-input{color:var(--sab-t2);width:100%;font-size:13px}
body.sab-page2 .sab-acc ul.note{
margin:14px 0 0;padding-left:18px;color:var(--sab-t3);font-size:13px;line-height:1.7}
/* 提示與狀態 */
body.sab-page2 .sab-acc .sab-acc-hint{margin:-6px 0 12px;color:var(--sab-t3);font-size:13px}
body.sab-page2 .sab-acc .sab-acc-lock{margin:12px 0 0;color:var(--sab-t3);font-size:13px}
body.sab-page2 .sab-acc .sab-acc-warn{
margin:0 0 16px;padding:12px 14px;border-radius:12px;font-size:14px;
background:rgba(232,194,90,.10);border:1px solid rgba(232,194,90,.38);color:var(--sab-t1)}
body.sab-page2 .sab-acc .sab-acc-warn a{
margin-left:8px;color:var(--sab-g);text-decoration:underline;white-space:nowrap}
body.sab-page2 .sab-acc .sab-acc-done{
padding:14px;border-radius:12px;font-size:14px;
background:rgba(90,200,140,.12);border:1px solid rgba(90,200,140,.42);color:#d9f5e6}
body.sab-page2 .sab-acc .sab-acc-mono{
word-break:break-all;font-size:13px;padding:8px 10px;border-radius:8px;
background:rgba(0,0,0,.26);border:1px solid #3c4c42}
/* 動作列與外部查詢連結 */
body.sab-page2 .sab-acc .sab-acc-act{
display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
body.sab-page2 .sab-acc .sab-acc-act .btn{min-height:44px;font-size:14px;padding:0 22px}
body.sab-page2 .sab-acc .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
body.sab-page2 .sab-acc .sab-acc-row .btn{min-height:40px;font-size:13px;padding:0 16px}
body.sab-page2 .sab-acc .sab-acc-shops{
display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px;font-size:13px}
body.sab-page2 .sab-acc .sab-acc-shops span{color:var(--sab-t3)}
body.sab-page2 .sab-acc .sab-acc-shops a{
min-height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;
border:1px solid rgba(232,194,90,.34);color:var(--sab-g)}
body.sab-page2 .sab-acc .sab-acc-shops a:hover{background:rgba(232,194,90,.10)}
/* 手機:標籤縮窄,避免值被擠掉 */
@media (max-width:480px){
body.sab-page2 .sab-acc .sab-acc-row>label{width:96px;flex:0 0 96px;font-size:13px}
body.sab-page2 .sab-acc .box{padding:14px}
}
/* ── 量測後的修正(卡片內距、對比、觸控目標) ── */
/* member.css 的 .member-page .user-info .box 權重比 body.sab-page2 .box 高,
會把卡片內距壓成 10px 0(左右貼邊)。這裡提到同級以上蓋回來。 */
body.sab-page2 .sab-acc .box{padding:18px;border-radius:12px}
@media (max-width:480px){
body.sab-page2 .sab-acc .box{padding:15px}
body.sab-page2 .member-page.sab-acc{padding:16px 14px}
body.sab-page2 .sab-acc .user-info{padding:0}
}
/* 帳號膠囊在 member.css 是米色底(#e8e3d3),配深底頁的淺字等於看不見(1.01:1) */
body.sab-page2 .memberMenu .user-lv p.user-text{
background:rgba(232,194,90,.14);border:1px solid rgba(232,194,90,.36);
color:var(--sab-g);padding:5px 14px;max-width:none;font-weight:700}
/* 檔案選擇框本體只有 26px,外框有 padding 但點得到的是 input 本身 */
body.sab-page2 .sab-acc .custom-file-input{min-height:44px;padding:11px 0}
/* 觸控目標:表單與主要按鈕一律 44px 起跳,次要文字連結 32px */
body.sab-page2 .sab-acc .sab-acc-row .btn{min-height:44px}
body.sab-page2 .sab-acc .form-control,
body.sab-page2 .sab-acc select.form-control,
body.sab-page2 .sab-acc input.form-control{min-height:44px;padding:9px 12px}
body.sab-page2 .sab-acc .twzipcode input{min-height:44px}
body.sab-page2 .sab-acc .sab-acc-warn a,
body.sab-page2 .sab-acc .form-group>label a{
display:inline-block;min-height:32px;line-height:32px;padding:0 6px}
body.sab-page2 .sab-mchome .memberMenu a{
min-height:44px;display:flex;align-items:center}
body.sab-page2 .sab-mchome .memberMenu .menu-link li{align-items:center}
/* ── 驗證部隊第二輪:字級底線與標題層級 ── */
/* member.css 與本檔前段把字壓得太小(內文 14、label 13、英文附註 11、提示 13),
天條 34 內文底線 16px、天條 42 要求標題與內文拉開層級。 */
body.sab-page2 .sab-acc .user-info>p{font-size:16px;line-height:1.7}
body.sab-page2 .sab-acc .content,
body.sab-page2 .sab-acc .content span,
body.sab-page2 .sab-acc .form-control,
body.sab-page2 .sab-acc input.form-control,
body.sab-page2 .sab-acc select.form-control{font-size:16px;line-height:1.6}
/* label:兩種列型的選擇器都要蓋,只寫 .sab-acc label 會被前段壓過去 */
body.sab-page2 .sab-acc .sab-acc-row>label,
body.sab-page2 .sab-acc .form-group:not(.sab-acc-row)>label{
font-size:15px;line-height:1.5;font-weight:600}
@media (max-width:480px){
body.sab-page2 .sab-acc .sab-acc-row>label{font-size:15px}
}
@media (min-width:768px){
body.sab-page2 .sab-acc .sab-acc-row>label{width:104px;flex:0 0 104px;font-size:15px}
}
body.sab-page2 .sab-acc .sab-acc-row>label span{font-size:13px;font-weight:400;opacity:.72}
/* 提示、鎖定說明、上傳鍵:次要文字,不必到 16 但 13 太小 */
body.sab-page2 .sab-acc .sab-acc-hint,
body.sab-page2 .sab-acc .sab-acc-lock{font-size:14px;line-height:1.6}
body.sab-page2 .sab-acc .custom-file-input{font-size:15px}
body.sab-page2 .sab-acc .sab-acc-act .btn{font-size:15px}
body.sab-page2 .sab-acc .sab-acc-row .btn{font-size:14px}
/* 標題層級:區塊標題 > 卡片標題 > 內文,不要三級全擠在 14~17px */
body.sab-page2 .sab-acc .member-top .col-8{font-size:21px;font-weight:700;line-height:1.4}
body.sab-page2 .sab-acc .box h4{font-size:20px;font-weight:700;line-height:1.4}
@media (min-width:1024px){
body.sab-page2 .sab-acc .member-top .col-8{font-size:22px}
body.sab-page2 .sab-acc .box h4{font-size:21px}
}
/* 手機的「返回」列量到只有 19px 高,是主要導覽動作,拉到 44 */
body.sab-page2 .sab-acc .m-taggle-bar a{
display:inline-flex;align-items:center;gap:6px;
min-height:44px;padding:0 4px;font-size:15px}
/* ── 頁首對齊 WP 首頁(2026-08-26 實測) ── */
.sab-hd{
background:rgba(9,20,15,.88);
-webkit-backdrop-filter:blur(18px) saturate(1.4);
backdrop-filter:blur(18px) saturate(1.4);
border-bottom:0;z-index:60}
/* 背景仍然滿版(天條 39),只把內容收在 1600 內(天條 55 限寬置中) */
/* 頁首字體與首頁同一組宣告。註:首頁宣告了 Noto Sans TC 但沒有載入任何字型檔
(實測下載 0 個 woff),所以兩邊都是落到系統字 —— 真正看得出差別的是
字級與字重:首頁 16px/400,這邊原本 15px/700(偏胖)。 */
.sab-hd,.sab-hd .sab-btn{
font-family:"Noto Sans TC",-apple-system,"Segoe UI","微軟正黑體",sans-serif}
.sab-hd .sab-btn{height:44px;font-size:16px;font-weight:400;padding:0 22px}
@media (min-width:400px){
.sab-hd .sab-btn{padding:0 28px}
}
.sab-hd .sab-btn.ghost{border-color:#5c6c60;color:#d6dbe0}
.sab-hd .sab-btn.gold{
color:#1c1508;
background:linear-gradient(#f0d488,#c9a84e);
box-shadow:0 8px 20px -12px rgba(201,168,78,.9),inset 0 1px 0 rgba(255,255,255,.35)}
/* LOGO 與導覽是 flex 項目,窄桌機時會被擠到寬度 0(1024 量到 LOGO 0x72) */
.sab-hd>a,.sab-hd nav,.sab-hd .sab-logo{flex:none}
/* LOGO 連結手機只有 42 高,不動圖片尺寸把點擊區墊到 44(天條 34) */
.sab-hd>a:first-child{display:flex;align-items:center;min-height:44px}
@media (min-width:1024px){
.sab-hd{
padding-inline:max(clamp(36px,5.2vw,75px),calc((100% - 1600px) / 2 + 10px));
gap:22px}
.sab-hd nav{
gap:22px;font-size:15px;letter-spacing:.8px;color:#d6dbe0;
font-family:"Noto Sans TC",-apple-system,"Segoe UI","微軟正黑體",sans-serif}
/* 導覽連結原本只有 27px 高,點擊區太小(天條 34);對齊 WP 的 48 */
.sab-hd nav a{
display:inline-flex;align-items:center;height:48px;padding:0 8px;border-radius:10px}
.sab-hd nav a.sab-on{color:#e9c979;font-weight:400}
.sab-hd nav a:hover{background:rgba(233,201,121,.10);color:#e9c979}
/* 1024~1279 空間不夠塞 35px 內距(已登入時「會員中心」字多),先收窄 */
.sab-hd .sab-btn{padding:0 22px}
}
@media (min-width:1280px){
.sab-hd{gap:30px}
.sab-hd nav{gap:30px}
.sab-hd .sab-btn{padding:0 35px}
}
/* ── 大廳改版(2026-08-26):主視覺 + 遊戲項目 ── */
/* 只有一款遊戲(SA 真人),所以大廳不做分類切換,
結構是:一句話講清楚是什麼 → 兩顆 CTA → 桌型一覽,點哪一張都進同一個牌桌。 */
.sab-hero{background:
radial-gradient(120% 90% at 50% 0%, rgba(232,194,90,.14) 0%, rgba(232,194,90,0) 62%),
linear-gradient(180deg,#0d211a 0%, var(--sab-bg) 100%);
border-bottom:1px solid rgba(232,194,90,.16)}
.sab-hero-in{max-width:1180px;margin:0 auto;padding:34px 18px 38px}
.sab-kicker{margin:0 0 8px;font-size:12px;letter-spacing:.22em;font-weight:700;color:var(--sab-g)}
.sab-hero h1{margin:0;font-size:30px;line-height:1.25;font-weight:800;color:var(--sab-t1);
letter-spacing:-.01em}
.sab-lead{margin:14px 0 0;font-size:16px;line-height:1.75;color:var(--sab-t2);max-width:34em}
.sab-hero-act{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.sab-hero-act .sab-btn{height:52px;padding:0 30px;font-size:16px;border-radius:999px}
.sab-hero-act .sab-btn.ghost{border:1px solid var(--sab-g);color:var(--sab-g)}
.sab-games{margin-top:0}
.sab-games-in{max-width:1180px;margin:0 auto;padding:30px 18px 44px}
.sab-games h2{margin:0 0 18px;font-size:21px;font-weight:700;color:var(--sab-t1);
display:flex;align-items:center;gap:10px}
.sab-games h2::before{content:"";width:4px;height:20px;border-radius:2px;
background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo))}
.sab-glist{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sab-gcard{display:block;border:1px solid var(--sab-l1);border-radius:14px;overflow:hidden;
background:var(--sab-c2);color:inherit;transition:border-color .18s,transform .18s}
.sab-gcard:hover,.sab-gcard:focus-visible{border-color:var(--sab-g);transform:translateY(-2px)}
.sab-gpic{display:block;position:relative;aspect-ratio:16/10;background:#08130e;overflow:hidden}
.sab-gpic img{width:100%;height:100%;object-fit:cover;display:block}
.sab-gpic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
background:linear-gradient(90deg,var(--sab-g-lo),var(--sab-g-hi))}
.sab-gtx{display:flex;flex-direction:column;gap:2px;padding:11px 13px 13px;min-height:44px}
.sab-gtx b{font-size:16px;font-weight:700;color:var(--sab-t1);line-height:1.4}
.sab-gtx small{font-size:13px;color:var(--sab-t3);line-height:1.5}
@media (min-width:768px){
.sab-hero-in{padding:52px 24px 56px}
.sab-hero h1{font-size:40px}
.sab-lead{font-size:17px}
.sab-games-in{padding:38px 24px 60px}
.sab-glist{grid-template-columns:repeat(3,1fr);gap:18px}
.sab-games h2{font-size:23px}
}
@media (min-width:1024px){
.sab-hero-in{padding:68px 24px 72px}
.sab-hero h1{font-size:48px}
.sab-hero-act{margin-top:28px}
.sab-gtx b{font-size:17px}
}
/* ── 遊戲圖卡改成金框方形(2026-08-26) ── */
/* 新圖本身就有金框與圓角(透明底),卡片外框會變成雙層,所以外框拿掉,
讓圖自己當卡片,文字掛在下面。 */
body.sab-page .sab-gcard{border:0;background:transparent;border-radius:0;overflow:visible;
text-align:center}
body.sab-page .sab-gcard:hover,
body.sab-page .sab-gcard:focus-visible{border:0;transform:translateY(-3px)}
body.sab-page .sab-gpic{aspect-ratio:1/1;background:transparent;border-radius:0;
display:flex;align-items:center;justify-content:center;
filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));transition:filter .18s}
body.sab-page .sab-gcard:hover .sab-gpic{filter:drop-shadow(0 12px 26px rgba(232,194,90,.34))}
body.sab-page .sab-gpic img{width:100%;height:100%;object-fit:contain}
body.sab-page .sab-gpic::after{display:none}
body.sab-page .sab-gtx{align-items:center;gap:1px;padding:8px 4px 0;min-height:0}
body.sab-page .sab-gtx b{font-size:16px}
body.sab-page .sab-gtx small{font-size:13px}
@media (min-width:768px){
body.sab-page .sab-gtx b{font-size:17px}
}
/* ── 窄機(<390)頁首收窄,避免按鈕被切掉 ── */
/* 已登入時「會員中心 + 登出」加 LOGO,320 寬超出 46px、360 寬超出 6px,
最後一顆會被 body 的 overflow-x:clip 直接切掉(連捲軸都看不到)。 */
@media (max-width:389px){
.sab-hd{padding-inline:10px;gap:8px}
.sab-hd .sab-logo{height:36px}
.sab-hd>a:first-child{min-height:44px}
.sab-hd .sab-btn{padding:0 12px;font-size:15px}
}
/* ── 會員摘要與快捷重做(2026-08-26) ── */
/* 舊版是紫色頭像 + 一堆深色小圖示,壓在深綠底上幾乎看不見,
而且手機與電腦各一套 d-md-none 標記。這裡整個換掉:
先給看得懂的三件事(我是誰、剩多少點、要去哪),圖示改用文字符號,不再依賴深色 PNG。 */
body.sab-page2 .sab-mc{
background:linear-gradient(180deg,rgba(23,55,42,.92),rgba(12,36,25,.92));
border:1px solid rgba(232,194,90,.28);border-radius:16px;
padding:16px;color:var(--sab-t1)}
/* 上排:帳號與點數 */
body.sab-page2 .sab-mc-top{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(232,194,90,.20)}
body.sab-page2 .sab-mc-id{min-width:0}
body.sab-page2 .sab-mc-acc{
margin:0;font-size:19px;font-weight:800;letter-spacing:.02em;color:var(--sab-g);
word-break:break-all;line-height:1.35}
body.sab-page2 .sab-mc-time{margin:3px 0 0;font-size:13px;color:var(--sab-t3);line-height:1.5}
body.sab-page2 .sab-mc-bal{
display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none}
body.sab-page2 .sab-mc-bal span{font-size:13px;color:var(--sab-t3)}
body.sab-page2 .sab-mc-bal b{
font-size:26px;font-weight:800;line-height:1.2;color:var(--sab-t1);
font-variant-numeric:tabular-nums}
/* 快捷格線:手機三欄,寬一點就自動排開 */
/* 用 flex 不用 grid:快捷數量會變(出售只有實名認證過才有),
固定欄數一定會留空格;flex 讓最後一列自己撐滿,不留落單的洞(天條 55)。 */
body.sab-page2 .sab-mc-grid{
display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
body.sab-page2 .sab-mc-grid a{flex:1 1 88px}
body.sab-page2 .sab-mc-grid a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
min-height:76px;padding:10px 6px;border-radius:12px;
background:rgba(255,255,255,.035);border:1px solid rgba(232,194,90,.16);
color:var(--sab-t2);font-size:14px;line-height:1.3;text-align:center;
transition:border-color .16s,background .16s,color .16s}
body.sab-page2 .sab-mc-grid a:hover,
body.sab-page2 .sab-mc-grid a:focus-visible{
border-color:var(--sab-g);background:rgba(232,194,90,.10);color:var(--sab-t1)}
body.sab-page2 .sab-mc-grid a.sab-on{
border-color:var(--sab-g);background:rgba(232,194,90,.14);color:var(--sab-g)}
body.sab-page2 .sab-mc-grid em{
font-style:normal;font-size:22px;line-height:1;color:var(--sab-g)}
body.sab-page2 .sab-mc-grid span{display:block}
@media (min-width:768px){
body.sab-page2 .sab-mc{padding:20px 22px}
body.sab-page2 .sab-mc-acc{font-size:22px}
body.sab-page2 .sab-mc-bal b{font-size:30px}
body.sab-page2 .sab-mc-grid{gap:12px}
body.sab-page2 .sab-mc-grid a{flex:1 1 130px}
}
@media (min-width:1024px){
body.sab-page2 .sab-mc-grid a{min-height:84px;font-size:15px}
body.sab-page2 .sab-mc-grid em{font-size:24px}
}
/* ── 會員區內頁重做(2026-08-26):紀錄表、儲值、出售 ── */
/* 表格:原本 12px 字、沒有水平捲動容器,窄機上欄位擠成一團 */
body.sab-page2 main .sab-tw{
overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid rgba(232,194,90,.20);border-radius:12px;background:var(--sab-c2)}
body.sab-page2 main table.table{
width:100%;min-width:440px;margin:0;border-collapse:collapse;
font-size:15px;line-height:1.65;color:var(--sab-t2)}
body.sab-page2 main table.table th,
body.sab-page2 main table.table td{
border:0;border-bottom:1px solid rgba(232,194,90,.14);
padding:12px 14px;vertical-align:middle}
body.sab-page2 main table.table thead th,
body.sab-page2 main table.table th.green-bg{
background:rgba(232,194,90,.12);color:var(--sab-g);
font-size:14px;font-weight:700;white-space:nowrap;
border-bottom:1px solid rgba(232,194,90,.30)}
body.sab-page2 main table.table tbody tr:nth-child(even) td{background:rgba(255,255,255,.022)}
body.sab-page2 main table.table tbody tr:last-child td{border-bottom:0}
body.sab-page2 main table.table td p{margin:0 0 4px;font-size:15px}
body.sab-page2 main table.table td p:last-child{margin-bottom:0}
body.sab-page2 main .Stored-value{font-size:15px;color:var(--sab-t1);font-weight:600}
/* 分頁:原本連結只有 19px 高 */
body.sab-page2 main .pagination{
display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
margin:18px 0 0;padding:0;list-style:none}
body.sab-page2 main .pagination li{margin:0}
body.sab-page2 main .pagination li a,
body.sab-page2 main .pagination li span{
display:inline-flex;align-items:center;justify-content:center;
min-width:44px;min-height:44px;padding:0 12px;border-radius:10px;
border:1px solid rgba(232,194,90,.24);color:var(--sab-t2);font-size:15px;
background:rgba(255,255,255,.03)}
body.sab-page2 main .pagination li.active a,
body.sab-page2 main .pagination li.active span{
background:rgba(232,194,90,.16);border-color:var(--sab-g);color:var(--sab-g);font-weight:700}
/* 表單控制項:輸入框 31px、按鈕 30px,字級 12~14px */
body.sab-page2 main .form-control,
body.sab-page2 main input.form-control,
body.sab-page2 main select.form-control,
body.sab-page2 main input[type="text"],
body.sab-page2 main input[type="tel"],
body.sab-page2 main input[type="number"]{
min-height:44px;font-size:16px;padding:9px 12px;line-height:1.5}
body.sab-page2 main .btn,
body.sab-page2 main button.btn{
display:inline-flex;align-items:center;justify-content:center;
min-height:44px;font-size:15px;padding:0 20px;line-height:1.2}
body.sab-page2 main .quick-btn{min-height:44px;font-size:15px}
/* 儲值頁:支付方式 */
/* 圖示原本是白字壓在金底(rgb(184,151,84))上,只有 2.5:1。
統一成深底金字,同一頁的圖示才是同一套底色系統(天條 55)。 */
body.sab-page2 main .icon-box{
background:rgba(8,19,14,.78);color:var(--sab-g);
font-size:14px;font-weight:700;border:1px solid rgba(232,194,90,.34)}
body.sab-page2 main .item-name{font-size:16px}
body.sab-page2 main .item-desc{font-size:14px;color:var(--sab-t3)}
body.sab-page2 main .section-label{font-size:14px;letter-spacing:.06em;color:var(--sab-t3)}
body.sab-page2 main .cash-add{font-size:14px}
body.sab-page2 main .payment-item{min-height:64px}
/* 出售頁:卡片用照片當底,文字直接壓上去會吃色,補一層暗化 */
body.sab-page2 main .box-user{position:relative;isolation:isolate}
body.sab-page2 main .box-user::before{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background:linear-gradient(rgba(8,19,14,.72),rgba(8,19,14,.86))}
body.sab-page2 main .box-user,
body.sab-page2 main .box-user *{color:var(--sab-t1)}
body.sab-page2 main .box h4{font-size:20px;font-weight:700;margin:0 0 14px}
/* 點數數字原本是 #936F1A,壓在照片上只有 3.3:1 */
body.sab-page2 main .box-user .num{color:var(--sab-g);font-size:20px;font-weight:700}
/* bootstrap 的 .text-danger 是紅字,壓在深綠底上不到 4.5 */
body.sab-page2 main .text-danger{color:#ff9d8f}
body.sab-page2 main .text-muted{color:var(--sab-t3)}
/* 「返回」列在非帳戶管理的頁面沒有 .sab-acc 這層,原本那條規則吃不到 */
body.sab-page2 .member-page .m-taggle-bar a,
body.sab-page2 .member-page .member-top a{
display:inline-flex;align-items:center;gap:6px;
min-height:44px;padding:0 4px;font-size:15px}
/* 320 寬時儲值頁的選取圓點會突出 1px */
body.sab-page2 main .payment-item{overflow:hidden}
/* 說明區塊裡的連結原本只有 16px 高;本檔第 347 行那條沒設高度,這裡提權補上 */
body.sab-page2 main .info-box a{
display:inline-flex;align-items:center;min-height:32px;padding:0 2px}
/* ── 實名認證的選擇檔案框展開(2026-08-26) ── */
/* 舊樣式把 .custom-file 鎖成 140px,只有容器的 45%,
iOS 上「尚未選擇檔案」被截成「尚..」。放成滿寬。 */
body.sab-page2 .sab-acc .custom-file{
display:flex;align-items:center;
width:100%;max-width:none;
padding:14px 12px;min-height:76px}
body.sab-page2 .sab-acc .custom-file-input{
width:100%;max-width:none;min-height:44px}
/* 電腦版原本排四欄,每格只剩 199px,檔名一樣會被截。改兩欄,四格排成 2x2。 */
@media (min-width:1024px){
body.sab-page2 .sab-acc .sab-acc-up{grid-template-columns:repeat(2,1fr);gap:16px}
}
/* ── 會員區彈窗補樣式(2026-08-26) ── */
/* 第 152 行那組 modal 配色只掛在 body.sab-page,會員區是 sab-page2,吃不到。
結果「更改密碼」是米色底配淺色標籤,字幾乎看不見,按鈕還是紅的。 */
body.sab-page2 .modal-content{
background:#12281f;border:1px solid rgba(232,194,90,.32);border-radius:14px;
color:var(--sab-t1);overflow:hidden}
body.sab-page2 .modal-header{
background:rgba(0,0,0,.22);border-bottom:1px solid rgba(232,194,90,.22);
padding:16px 18px;align-items:center}
body.sab-page2 .modal-title{color:var(--sab-t1);font-size:19px;font-weight:700}
body.sab-page2 .modal-header .close{
color:var(--sab-g);opacity:1;text-shadow:none;font-size:28px;line-height:1;
min-width:44px;min-height:44px;padding:0}
body.sab-page2 .modal-body{padding:18px}
body.sab-page2 .modal .form-group{margin-bottom:16px}
body.sab-page2 .modal label{
display:block;margin:0 0 6px;color:var(--sab-t1);
font-size:15px;font-weight:600;line-height:1.45}
body.sab-page2 .modal label span{
display:block;font-size:12.5px;font-weight:400;color:var(--sab-t3);letter-spacing:.04em}
body.sab-page2 .modal label br{display:none}
body.sab-page2 .modal .form-control{
background:rgba(0,0,0,.30);border:1px solid rgba(232,194,90,.28);
color:var(--sab-t1);min-height:48px;font-size:16px;padding:10px 13px;border-radius:10px}
body.sab-page2 .modal .form-control::placeholder{color:var(--sab-t3);opacity:1}
body.sab-page2 .modal .form-control:focus{
border-color:var(--sab-g);box-shadow:0 0 0 3px rgba(232,194,90,.16);background:rgba(0,0,0,.36)}
body.sab-page2 .modal .alert-danger{
background:rgba(255,110,90,.12);border:1px solid rgba(255,110,90,.4);color:#ff9d8f;
border-radius:10px;font-size:14.5px}
/* 取消 / 確認提交:紅色不是這個站的色 */
body.sab-page2 .modal .text-center .btn{min-width:120px;margin:0 5px}
body.sab-page2 .modal .btn-outline-danger{
background:transparent;border:1px solid #5c6c60;color:var(--sab-t2)}
body.sab-page2 .modal .btn-outline-danger:hover{border-color:var(--sab-g);color:var(--sab-g)}
body.sab-page2 .modal .btn-danger,
body.sab-page2 .modal .accountBTN{
background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));border:0;color:var(--sab-g-ink);
font-weight:700;
box-shadow:0 8px 20px -12px rgba(201,168,78,.9),inset 0 1px 0 rgba(255,255,255,.35)}
/* 第 434 行那條是舊版三段式摘要帶留下來的:768 以上把 .memberMenu 變成
三欄 grid。新卡片只有兩個子元素,結果被塞進前兩欄、擠成 259 與 363px,
第三欄空著。新卡片一律走區塊排法。 */
body.sab-page2 .sab-mchome .memberMenu.sab-mc,
body.sab-page2 .memberMenu.sab-mc{display:block}
body.sab-page2 .sab-mc-grid{width:100%}
/* ── 登入 / 註冊頁的按鈕間距(2026-08-26) ── */
/* 「登入」與「加入會員」原本只靠 inline-block 中間那個空白隔開,實測只有 4px,
兩顆幾乎黏在一起;「忘記密碼」離按鈕 2px、本身只有 21px 高,手指容易誤觸。 */
body.sab-page .sab-form .form-group.text-center{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:14px;margin-top:24px}
/* 用
當換行點:給它整列寬度,強制「忘記密碼」自己一行 */
body.sab-page .sab-form .form-group.text-center br{flex:0 0 100%;height:0}
body.sab-page .sab-form .form-group.text-center>.btn{
margin:0;min-height:48px;min-width:132px;padding:0 22px;font-size:16px}
body.sab-page .sab-form .form-group.text-center>a:not(.btn){
display:inline-flex;align-items:center;justify-content:center;
min-height:36px;margin-top:6px;padding:0 8px;font-size:15px}
/* ── 出售 / 帳號認證 / 轉點:盒子拉平(2026-08-26) ── */
/* 原本 .box-1 > .box-user > .box-user > .box-2 四層各自一圈白框,
一個表單被三圈框住,卡片底色還是灰的。外層全部拉平,只留真正的卡片。 */
body.sab-page2 .user-info .box.box-1,
body.sab-page2 .user-info .box-user{
background:transparent;border:0;box-shadow:none;padding:0;margin:0}
/* 餘額卡 */
body.sab-page2 .wallet-box{
margin:0;padding:16px 18px;border-radius:14px;
background:linear-gradient(180deg,rgba(23,55,42,.92),rgba(12,36,25,.92));
border:1px solid rgba(232,194,90,.28)}
body.sab-page2 .wallet-box .cash-add{
font-size:14px;color:var(--sab-t3);letter-spacing:.02em}
/* 本檔前面那條 main .box-user .num 是 0,0,4,1,比 .wallet-box .num 強,
會把字級壓回 20px,所以這裡要寫到同級以上 */
body.sab-page2 main .box-user .wallet-box .num,
body.sab-page2 .wallet-box .num{
margin-top:2px;font-size:30px;font-weight:800;line-height:1.2;
color:var(--sab-g);font-variant-numeric:tabular-nums}
/* 表單卡:跟餘額卡同一套底色系統(天條 55) */
body.sab-page2 .user-info .box.box-2{
margin:14px 0 0;padding:16px 18px;border-radius:14px;
background:linear-gradient(180deg,rgba(23,55,42,.92),rgba(12,36,25,.92));
border:1px solid rgba(232,194,90,.28);box-shadow:none}
body.sab-page2 .user-info .box.box-2 h4{
margin:0 0 12px;padding-left:11px;border-left:4px solid var(--sab-g);
font-size:19px;font-weight:700;line-height:1.3}
body.sab-page2 .user-info .box.box-2 .form-control{
width:100%;margin:0 0 12px;min-height:48px;font-size:17px;
background:rgba(0,0,0,.30);border:1px solid rgba(232,194,90,.26);
color:var(--sab-t1);border-radius:10px;padding:10px 13px}
body.sab-page2 .user-info .box.box-2 .btn{
width:100%;margin:0;min-height:50px;font-size:16px;font-weight:700;
background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));
border:0;color:var(--sab-g-ink);border-radius:999px;
box-shadow:0 8px 20px -12px rgba(201,168,78,.9),inset 0 1px 0 rgba(255,255,255,.35)}
/* 注意事項:紅框紅字換成金色資訊框 */
body.sab-page2 .user-info .border-danger{
margin-top:14px !important;padding:15px 18px !important;
border:1px solid rgba(232,194,90,.30) !important;border-radius:14px;
background:rgba(232,194,90,.06)}
/* bootstrap 的 .text-danger 是 color:#dc3545 !important,只能用 !important 蓋 */
body.sab-page2 .user-info .border-danger .text-danger{
display:block;margin-bottom:8px;color:var(--sab-g) !important;font-size:15px;font-weight:700}
body.sab-page2 .user-info .border-danger ol{
margin:0;padding-left:20px;color:var(--sab-t2);font-size:15px;line-height:1.75}
body.sab-page2 .user-info .border-danger li{margin-bottom:4px}
body.sab-page2 .user-info .border-danger li:last-child{margin-bottom:0}
@media (min-width:768px){
body.sab-page2 .wallet-box,
body.sab-page2 .user-info .box.box-2{padding:20px 24px}
body.sab-page2 main .box-user .wallet-box .num,
body.sab-page2 .wallet-box .num{font-size:34px}
body.sab-page2 .user-info .box.box-2 .btn{width:auto;min-width:200px;padding:0 32px}
}
/* ── 320 窄機:把上傳框的空間擠出來(2026-08-26) ── */
/* 320 機型上卡片只有 242px,上傳框 210、輸入框 184,檔名會短一截。
把外層三層內距收窄、字級降一級,輸入框可用寬度多出約 30px。 */
@media (max-width:360px){
body.sab-page2 .member-page.sab-acc{padding:12px 8px}
body.sab-page2 .sab-acc .box{padding:12px 10px}
body.sab-page2 .sab-acc .custom-file{padding:12px 8px;min-height:70px}
body.sab-page2 .sab-acc .custom-file-input{font-size:14px}
}
/* ── 註冊頁的同意列(2026-08-26) ── */
/* 「會員條款」那個連結繼承到 #333,壓在深底上等於看不見(實測 rgb(51,51,51))。 */
/* 註冊頁的 body 是 sab-page2,不是 sab-page —— 第一次寫錯範圍沒生效 */
body.sab-page2 .form-check-label a,
body.sab-page2 .form-check a,
body.sab-page .sab-form label a{
display:inline-flex;align-items:center;min-height:32px;
color:var(--sab-g);border-bottom:1px solid rgba(232,194,90,.55);padding:0 2px}
body.sab-page2 .form-check-label a:hover,
body.sab-page .sab-form label a:hover{color:var(--sab-g-hi)}
/* ── 註冊頁換殼後的收尾(2026-08-26) ── */
/* 「獲取手機驗證碼」量到 42px,差一點點才到 44 */
body.sab-page .sab-form .btn{min-height:44px;min-width:132px}
/* 整列的按鈕(獲取手機驗證碼)不吃 min-width */
body.sab-page .sab-form .btn-block{min-width:0}
body.sab-page .sab-form .btn-block{width:100%}
/* 同意欄的勾選框只有 14px,手指按不到 */
body.sab-page .sab-form .form-check{padding-left:0}
body.sab-page .sab-form .form-check-label{
display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
min-height:44px;padding:6px 0;font-size:15px;line-height:1.7;cursor:pointer}
body.sab-page .sab-form .form-check-input[type="checkbox"]{
position:static;margin:2px 0 0;flex:none;
width:22px;height:22px;accent-color:var(--sab-g)}
body.sab-page .sab-form .form-check .invalid-feedback,
body.sab-page .sab-form .form-check .valid-feedback{flex:0 0 100%}
/* 驗證碼圖:原本只有 width="120" 配 img-fluid 的 height:auto,
高度隨圖片跑,比例不固定;圖還沒載到時又會塌掉。
改成固定 150x48 的框(跟輸入框同高),圖片用 object-fit:contain
放進去不變形。這樣不管圖片多大、載不載得到,框都是同一個比例。 */
body.sab-page .sab-form label img[src*="Vcode"],
body.sab-page .sab-form img[src*="Vcode"]{
display:inline-block;vertical-align:middle;margin:0 0 0 10px;
width:150px;height:48px;max-width:100%;
border-radius:8px;border:1px solid rgba(232,194,90,.26);
background:#fff;object-fit:contain}
/* 標籤自己一行,圖片跟在文字後面,輸入框在下一行 */
body.sab-page .sab-form label[for="checknum"],
body.sab-page .sab-form label[for="chknum2"]{
display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:8px}
/* ── 舊殼頁面改用新頁首之後的收尾(2026-08-27) ── */
/* 會員條款原本用舊頁首,舊頁尾自己帶一條手機底部固定列 nav.nav-ft;
header2 又帶一條 .sab-tab,兩條會疊在一起。關掉舊的那條,
並把內容底部墊開,不然最後一段會被浮動的底部列蓋住。 */
body.sab-alt nav.nav-ft{display:none}
body.sab-alt{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
@media (min-width:1024px){ body.sab-alt{padding-bottom:0} }
/* ── 下拉選單補回箭頭(2026-08-27) ── */
/* 銀行名稱、儲值區域的縣市與鄉鎮三個 select 都是 appearance:none 又沒有箭頭,
看起來跟一般輸入框一模一樣,使用者不知道那是下拉。
用純 CSS 漸層畫箭頭,不另外放圖檔。 */
body.sab-page2 .sab-acc select.form-control,
body.sab-page2 main select.form-control{
padding-right:38px;
background-image:
linear-gradient(45deg, transparent 50%, var(--sab-g) 50%),
linear-gradient(135deg, var(--sab-g) 50%, transparent 50%);
background-position:
calc(100% - 19px) calc(50% - 2px),
calc(100% - 13px) calc(50% - 2px);
background-size:6px 6px, 6px 6px;
background-repeat:no-repeat;
cursor:pointer}
body.sab-page2 .sab-acc select.form-control:focus,
body.sab-page2 main select.form-control:focus{
background-image:
linear-gradient(45deg, var(--sab-g) 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, var(--sab-g) 50%);
background-position:
calc(100% - 13px) calc(50% - 2px),
calc(100% - 19px) calc(50% - 2px)}
/* 下拉展開時的選項清單(桌機瀏覽器會用系統色,這裡至少把底色定住) */
body.sab-page2 select.form-control option{background:#12281f;color:var(--sab-t1)}
/* 儲值區域三格:縣市整列,鄉鎮與郵遞區號並排 */
body.sab-page2 .sab-acc .twzipcode{
display:flex;flex-wrap:wrap;gap:10px}
body.sab-page2 .sab-acc .twzipcode>[data-role="county"]{flex:1 1 100%}
body.sab-page2 .sab-acc .twzipcode>[data-role="district"]{flex:2 1 150px}
body.sab-page2 .sab-acc .twzipcode>[data-role="zipcode"]{flex:1 1 84px;text-align:center}
/* ── 連結顏色吃到 style.css 的 a{color:#333}(2026-08-27) ── */
/* sab-page 第 22 行早就把 a 的顏色改成 inherit,但 sab-page2 只寫了 text-decoration,
漏掉顏色 —— 結果會員中心與 sab-alt 那批頁面的頁首導覽是 #333 壓在深綠上,
對比只有 1.42,幾乎看不見。補上同一條,讓連結跟著父層的顏色走。 */
body.sab-page2 a,
body.sab-alt a{color:inherit}
/* ── 帳戶管理三處收尾(2026-08-27) ── */
/* 1. 卡片不要為了對齊而拉高。
USDT 錢包內容只有 313px,被同一列的超商卡(610px)拉到 629px,
下面空了 316px。改成各自照內容高;第一列兩張只差 9px,看不出來。 */
body.sab-page2 .sab-acc .sab-acc-grid{align-items:start}
/* 2. 選擇檔案的原生按鈕是白底英文,在深底上很跳。
::file-selector-button 兩種前綴都寫,舊 WebKit 吃 -webkit- 那支。
只改外觀,不動 input 本身,上傳行為完全不變。 */
body.sab-page2 .sab-acc input[type="file"]::file-selector-button,
body.sab-page2 .sab-acc input[type="file"]::-webkit-file-upload-button{
margin-right:12px;padding:0 16px;height:36px;
border:1px solid #6b7d70;border-radius:9px;
background:#12281f;color:var(--sab-t1);
font-family:inherit;font-size:14px;cursor:pointer}
body.sab-page2 .sab-acc input[type="file"]:hover::file-selector-button,
body.sab-page2 .sab-acc input[type="file"]:hover::-webkit-file-upload-button{
border-color:var(--sab-g);color:var(--sab-g)}
/* 3. 郵遞區號欄補了 placeholder(改在 account_body.php),
置中的字配上 placeholder 會偏,改成靠左與其他欄一致。 */
body.sab-page2 .sab-acc .twzipcode>[data-role="zipcode"]{text-align:left}
/* ── 店名店號查詢那排的落單尾巴(2026-08-27) ── */
/* 手機上「店名店號查詢」這個標籤跟四顆鈕擠同一列,OK 會自己掉到第二行(天條 55)。
標籤自己佔一列,四顆鈕平分下一列。 */
@media (max-width:520px){
body.sab-page2 .sab-acc .sab-acc-shops span{flex:1 1 100%;margin-bottom:2px}
body.sab-page2 .sab-acc .sab-acc-shops{gap:8px}
body.sab-page2 .sab-acc .sab-acc-shops a{
flex:1 1 0;min-width:0;padding:0 4px;justify-content:center;
white-space:nowrap;font-size:12.5px}
}
/* ══ 會員中心 v2:左側欄、橫向頁籤、設定進度(2026-09-07) ══
Owner 指示比照 dg66 的會員中心做法。結構抄過來,配色維持 sa999 自己的深綠金
—— 兩站不共用視覺識別(天條 27)。舊的 member_link 摘要卡照舊,只是在兩欄版
把它那排快捷藏起來,改由側欄與頁籤接手,其他十幾支頁面不受影響。 */
/* ── 兩欄骨架 ── */
body.sab-page2 .sab-mlayout{display:block}
body.sab-page2 .sab-mnav-side{display:none}
body.sab-page2 .sab-mmain{min-width:0}
/* 兩欄版的快捷改由側欄/頁籤負責,摘要卡只留帳號與點數 */
body.sab-page2 .sab-mlayout .sab-mc-grid{display:none}
@media (min-width:992px){
/* 權重要壓過本檔第 421 行的 .sab-mchome section.member .container{display:flex},
不然 display 會被它接走、兩欄變成上下疊(自己跟自己撞,老問題)。
account.php 沒有 .sab-mchome,所以兩個選擇器都要寫。 */
body.sab-page2 .sab-mchome section.member .container.sab-mlayout,
body.sab-page2 section.member .container.sab-mlayout{
display:grid;grid-template-columns:250px minmax(0,1fr);
gap:26px;align-items:start}
/* 不用 sticky:祖先 section.member 是 overflow:hidden、body 又是 overflow-x:clip,
sticky 會改成貼那個裁切容器,結果是靜止時就先被往下推 96px(實測 136→232)。
那兩個 overflow 是既有規則,擋橫向捲動用的,不動它們。 */
body.sab-page2 .sab-mnav-side{display:block}
}
/* ── 側欄卡片 ── */
body.sab-page2 .sab-mnav-card{
background:var(--sab-c1);border:1px solid rgba(232,194,90,.16);
border-radius:16px;padding:22px 16px;text-align:center}
body.sab-page2 .sab-mnav-avatar{
width:72px;height:72px;border-radius:50%;margin:0 auto 10px;
background:linear-gradient(180deg,var(--sab-g-hi),var(--sab-g-lo));
color:var(--sab-g-ink);font-weight:900;font-size:27px;
display:flex;align-items:center;justify-content:center}
body.sab-page2 .sab-mnav-name{
margin:0;font-size:18px;font-weight:800;line-height:1.2;color:var(--sab-t1);
word-break:break-all}
body.sab-page2 .sab-mnav-id{margin:3px 0 0;font-size:12.5px;color:var(--sab-t3)}
body.sab-page2 .sab-mnav-quick{display:flex;justify-content:center;gap:10px;margin:14px 0 16px}
body.sab-page2 .sab-mnav-quick a{
width:68px;min-height:60px;border-radius:12px;
border:1px solid rgba(232,194,90,.22);background:var(--sab-c2);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
font-size:12.5px;font-weight:700;color:var(--sab-t2)}
body.sab-page2 .sab-mnav-quick a em{font-style:normal;font-size:17px;color:var(--sab-g);line-height:1}
body.sab-page2 .sab-mnav-quick a:hover{border-color:var(--sab-g);color:var(--sab-g)}
body.sab-page2 .sab-mnav-quick a.is-locked{color:var(--sab-t3)}
body.sab-page2 .sab-mnav-quick a.is-locked em{color:var(--sab-t3);font-size:14px}
body.sab-page2 .sab-mnav-menu{display:flex;flex-direction:column;gap:2px;text-align:left}
body.sab-page2 .sab-mnav-menu a{
display:flex;align-items:center;gap:10px;
min-height:44px;padding:0 12px;border-radius:10px;
font-size:15px;font-weight:700;color:var(--sab-t2)}
body.sab-page2 .sab-mnav-menu a em{
font-style:normal;width:20px;text-align:center;font-size:15px;color:var(--sab-g);flex:none}
body.sab-page2 .sab-mnav-menu a:hover{background:rgba(232,194,90,.08);color:var(--sab-g)}
body.sab-page2 .sab-mnav-menu a.is-active{background:rgba(232,194,90,.13);color:var(--sab-g)}
body.sab-page2 .sab-mnav-menu a.is-locked{color:var(--sab-t3)}
body.sab-page2 .sab-mnav-menu a.is-locked em{color:var(--sab-t3);font-size:13px}
body.sab-page2 .sab-mnav-menu a.is-locked:hover{background:transparent;color:var(--sab-t3)}
/* ── 手機橫向頁籤 ── */
body.sab-page2 .sab-mtabs{
display:flex;gap:2px;margin:12px 0 14px;
background:var(--sab-c2);
border-top:1px solid rgba(232,194,90,.14);border-bottom:1px solid rgba(232,194,90,.14);
overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none}
body.sab-page2 .sab-mtabs::-webkit-scrollbar{display:none;width:0;height:0}
body.sab-page2 .sab-mtabs a{
display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
min-height:46px;padding:10px 14px;
font-size:14px;font-weight:700;color:var(--sab-t2);
border-bottom:3px solid transparent}
body.sab-page2 .sab-mtabs a em{font-style:normal;font-size:14px;color:var(--sab-g)}
body.sab-page2 .sab-mtabs a.is-active{color:var(--sab-g);border-bottom-color:var(--sab-g)}
body.sab-page2 .sab-mtabs a.is-locked{color:var(--sab-t3)}
body.sab-page2 .sab-mtabs a.is-locked em{color:var(--sab-t3);font-size:12px}
/* ── 設定進度卡 ── */
body.sab-page2 .sab-todo{
margin:0 0 16px;padding:16px 18px;border-radius:14px;
background:linear-gradient(180deg,rgba(232,194,90,.10),rgba(232,194,90,.04));
border:1px solid rgba(232,194,90,.30)}
body.sab-page2 .sab-todo-head{
display:flex;align-items:baseline;justify-content:space-between;gap:12px}
body.sab-page2 .sab-todo-head b{font-size:17px;color:var(--sab-g)}
body.sab-page2 .sab-todo-head span{
font-size:14px;font-weight:700;color:var(--sab-t2);font-variant-numeric:tabular-nums}
body.sab-page2 .sab-todo-steps{
list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
@media (min-width:768px){
body.sab-page2 .sab-todo-steps{grid-template-columns:repeat(3,1fr)}
}
body.sab-page2 .sab-todo-steps li{
display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;
gap:2px 10px;align-items:center;
padding:10px 12px;border-radius:10px;
background:var(--sab-c2);border:1px solid rgba(232,194,90,.14)}
body.sab-page2 .sab-todo-steps li i{
grid-row:1 / span 2;font-style:normal;
width:24px;height:24px;border-radius:50%;
border:1px solid rgba(232,194,90,.34);color:var(--sab-g);
display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900}
body.sab-page2 .sab-todo-steps li.done i{background:var(--sab-g);border-color:var(--sab-g);color:var(--sab-g-ink)}
body.sab-page2 .sab-todo-steps li .t{font-size:15px;font-weight:700;color:var(--sab-t1)}
body.sab-page2 .sab-todo-steps li .n{font-size:12.5px;color:var(--sab-t3);line-height:1.5}
body.sab-page2 .sab-todo-note{margin:12px 0 0;font-size:13.5px;line-height:1.7;color:var(--sab-t3)}
body.sab-page2 .sab-todo.is-review{
background:linear-gradient(180deg,rgba(120,200,160,.10),rgba(120,200,160,.04));
border-color:rgba(120,200,160,.34)}
body.sab-page2 .sab-todo.is-review .sab-todo-head b{color:#8fd8b0}
/* ── 已完成的設定 ── */
body.sab-page2 .sab-done-card{margin:0 0 16px}
body.sab-page2 .sab-done-list{display:grid;gap:2px}
body.sab-page2 .sab-done-row{
display:grid;grid-template-columns:96px minmax(0,1fr) 22px;
gap:10px;align-items:center;
padding:11px 0;border-bottom:1px solid rgba(232,194,90,.10)}
body.sab-page2 .sab-done-row:last-child{border-bottom:0}
body.sab-page2 .sab-done-row .k{font-size:13.5px;color:var(--sab-t3)}
body.sab-page2 .sab-done-row .v{font-size:15px;color:var(--sab-t1);word-break:break-all}
body.sab-page2 .sab-done-row em{
font-style:normal;justify-self:end;
width:22px;height:22px;border-radius:50%;background:var(--sab-g);color:var(--sab-g-ink);
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
body.sab-page2 .sab-done-note{margin:12px 0 0;font-size:13px;color:var(--sab-t3)}
/* ── 上鎖提示視窗 ── */
body.sab-page2 .sab-lockdlg{
position:fixed;inset:0;z-index:300;
display:flex;align-items:center;justify-content:center;padding:20px;
background:rgba(4,10,7,.62);opacity:0;transition:opacity .18s ease}
body.sab-page2 .sab-lockdlg.is-show{opacity:1}
body.sab-page2 .sab-lockdlg[hidden]{display:none}
body.sab-page2 .sab-lockdlg-box{
width:100%;max-width:360px;
background:var(--sab-c1);border:1px solid rgba(232,194,90,.22);border-radius:18px;
padding:26px 22px 20px;text-align:center;
box-shadow:0 18px 50px rgba(0,0,0,.5);
transform:translateY(8px) scale(.97);transition:transform .18s ease}
body.sab-page2 .sab-lockdlg.is-show .sab-lockdlg-box{transform:none}
body.sab-page2 .sab-lockdlg-icon{
width:56px;height:56px;margin:0 auto 12px;border-radius:50%;font-size:22px;
background:rgba(232,194,90,.12);border:1px solid rgba(232,194,90,.40);
display:flex;align-items:center;justify-content:center}
body.sab-page2 .sab-lockdlg-title{margin:0;font-size:18px;font-weight:900;color:var(--sab-t1)}
body.sab-page2 .sab-lockdlg-text{margin:6px 0 0;font-size:14px;line-height:1.7;color:var(--sab-t3)}
body.sab-page2 .sab-lockdlg-missing{
display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
body.sab-page2 .sab-lockdlg-missing:empty{display:none}
body.sab-page2 .sab-lockdlg-missing span{
display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;
background:rgba(232,194,90,.10);border:1px solid rgba(232,194,90,.34);
color:var(--sab-g);font-size:13px;font-weight:700}
body.sab-page2 .sab-lockdlg-actions{display:flex;flex-direction:column;gap:4px;margin-top:18px}
body.sab-page2 .sab-lockdlg-go{
display:inline-flex;align-items:center;justify-content:center;
min-height:46px;border-radius:12px;
background:linear-gradient(180deg,var(--sab-g-hi),var(--sab-g-lo));
color:var(--sab-g-ink);font-size:15px;font-weight:800}
body.sab-page2 .sab-lockdlg-later{
border:0;background:none;min-height:44px;
color:var(--sab-t3);font-size:14px;font-weight:700;cursor:pointer}
body.sab-page2 .sab-lockdlg-later:hover{color:var(--sab-g)}
@media (prefers-reduced-motion:reduce){
body.sab-page2 .sab-lockdlg,body.sab-page2 .sab-lockdlg-box{transition:none}
}
/* 桌機把手機頁籤收掉。這條一定要放在 .sab-mtabs{display:flex} 後面 ——
權重一樣時比的是先後,寫在前面會被後面那條蓋回去。 */
@media (min-width:992px){
body.sab-page2 .sab-mtabs{display:none}
}
/* ── 「會員中心｜帳戶管理」標題折行(2026-09-07) ──
bootstrap 的 .col-8 把標題鎖在整列的 66.7%,九個字在 320~390 塞不下,
「理」會單獨掉到第二行。改成:標題吃滿剩下的寬度、「返回」縮到自己的內容寬,
窄螢幕再把字級收一級 —— 只動這一列,不動文字也不動其他 .col-8。 */
body.sab-page2 .sab-acc .member-top .col-8{
flex:1 1 auto;max-width:none;min-width:0;white-space:nowrap}
body.sab-page2 .sab-acc .member-top .col-4{
flex:0 0 auto;width:auto;max-width:none;margin-left:auto}
@media (max-width:414px){
body.sab-page2 .sab-acc .member-top .col-8{font-size:18px}
}
/* ══ 紅利紀錄(History/bonus,2026-09-07 新增)══
類型編號跟後台報表同一串 (6,7,8,13),說明在 History::bonus()。 */
/* 累計那一條。標成「累計」是因為它是整段期間的總和,不是這一頁的小計。 */
body.sab-page2 .sab-bonus .sab-bonus-sum{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
margin-top:14px;padding:12px 16px;
border:1px solid rgba(232,194,90,.3);border-radius:12px;
background:rgba(232,194,90,.07)}
body.sab-page2 .sab-bonus .sab-bonus-sum span{
color:var(--sab-t2);font-size:15px}
body.sab-page2 .sab-bonus .sab-bonus-sum strong{
color:var(--sab-g);font-size:24px;font-weight:700;
font-variant-numeric:tabular-nums;letter-spacing:.02em}
body.sab-page2 .sab-bonus .sab-tw{margin-top:14px}
body.sab-page2 main .sab-bonus table.table td:last-child{text-align:right}
/* 金額的顏色用自己的 class:bootstrap 的 .text-success 帶 !important,
而它在深綠底上只有 3.4,壓不過也不該沿用。 */
body.sab-page2 main .sab-bonus table.table td .sab-bn-up{color:#8ce0b0}
body.sab-page2 main .sab-bonus table.table td .sab-bn-down{color:#ff9d8f}
body.sab-page2 .sab-bonus table td:last-child p{margin:0;
font-variant-numeric:tabular-nums;font-weight:600}
body.sab-page2 .sab-bonus .w1{margin:4px 0 0;font-size:13px;color:var(--sab-t3)}
body.sab-page2 main .sab-bonus table.table td.sab-bonus-empty{
text-align:center;color:var(--sab-t3);padding:34px 12px}
/* 這一頁只有一張表,內容短,不要被共用的 min-height 撐出一大塊空白(天條 55)。 */
body.sab-page2 .sab-bonus.member-page{min-height:0}
/* 窄螢幕:三欄照比例塞進畫面,不靠水平捲動才看得到金額。
日期與時間中間本來就有半形空白,寬度不夠時自己會折成兩行。 */
@media (max-width:560px){
body.sab-page2 main .sab-bonus table.table{
table-layout:fixed;width:100%;min-width:0}
body.sab-page2 main .sab-bonus table.table th,
body.sab-page2 main .sab-bonus table.table td{padding:10px 6px;font-size:13.5px}
body.sab-page2 main .sab-bonus table.table th:nth-child(1),
body.sab-page2 main .sab-bonus table.table td:nth-child(1){width:42%}
body.sab-page2 main .sab-bonus table.table th:nth-child(2),
body.sab-page2 main .sab-bonus table.table td:nth-child(2){width:34%}
body.sab-page2 main .sab-bonus table.table th:nth-child(3),
body.sab-page2 main .sab-bonus table.table td:nth-child(3){width:24%}
body.sab-page2 .sab-bonus .sab-bonus-sum strong{font-size:21px}
}
/* ══════════ 會員中心 v3(2026-09-09)══════════
照《單一娛樂城 會員中心做法手冊》做:頁標 + 副標、電腦兩欄、手機迷你列 + 頁籤。
色票沿用本站原本的深綠金,一個都沒換。
舊的 v2 選擇器(.sab-mnav-card / .sab-mnav-menu …)留著沒刪,新樣板不再用到它們。 */
/* ── 頁標:每一頁都是「會員中心」+ 這一頁的名字 ── */
body.sab-page2 .sab-page-head{padding-top:18px;padding-bottom:2px}
body.sab-page2 .sab-page-head h1{
margin:0;font-size:22px;font-weight:700;color:var(--sab-t1);letter-spacing:.02em}
body.sab-page2 .sab-page-sub{
margin-top:6px;padding-left:10px;font-size:15px;color:var(--sab-g);
border-left:3px solid var(--sab-g)}
@media (min-width:992px){
body.sab-page2 .sab-page-head{padding-top:26px}
body.sab-page2 .sab-page-head h1{font-size:26px}
body.sab-page2 .sab-page-sub{font-size:16px}
}
/* ── 兩欄。手機單欄,>=992 才切左側欄 ── */
body.sab-page2 .sab-member-app .sab-mlayout{display:block}
body.sab-page2 .sab-member-app .sab-mmain{min-width:0}
@media (min-width:992px){
body.sab-page2 .sab-member-app .sab-mlayout{
display:grid;grid-template-columns:250px minmax(0,1fr);
gap:28px;align-items:start}
}
/* ── 電腦版左側欄 ──
不用 position:sticky:祖先若是 overflow:hidden/clip 會變成 sticky 的捲動容器,
靜止時就先被推下去(v2 踩過)。 */
body.sab-page2 .sab-member-app .sab-mnav-side{display:none}
@media (min-width:992px){
body.sab-page2 .sab-member-app .sab-mnav-side{display:block}
}
body.sab-page2 .sab-side-card{
background:linear-gradient(160deg,#152f24,#0e2a1f);
border:1px solid rgba(232,194,90,.24);border-radius:14px;
padding:20px 16px;text-align:center}
body.sab-page2 .sab-side-avatar{
width:56px;height:56px;margin:0 auto 10px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,var(--sab-g),var(--sab-g-lo));
color:var(--sab-g-ink);font-size:24px;font-weight:700;line-height:1}
body.sab-page2 .sab-side-name{
margin:0;font-size:17px;font-weight:700;color:var(--sab-t1);word-break:break-all}
body.sab-page2 .sab-side-id{
margin:2px 0 0;font-size:13px;color:var(--sab-t3);word-break:break-all}
body.sab-page2 .sab-side-bal{
margin-top:14px;padding:10px 12px;border-radius:10px;
background:rgba(232,194,90,.08);border:1px solid rgba(232,194,90,.22)}
body.sab-page2 .sab-side-bal span{display:block;font-size:13px;color:var(--sab-t3)}
body.sab-page2 .sab-side-bal b{
display:block;margin-top:2px;font-size:22px;font-weight:700;color:var(--sab-g);
font-variant-numeric:tabular-nums}
body.sab-page2 .sab-side-quick{display:flex;gap:10px;margin-top:14px}
body.sab-page2 .sab-side-quick a{
flex:1 1 0;min-width:0;min-height:56px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
border:1px solid rgba(232,194,90,.3);border-radius:10px;
background:rgba(232,194,90,.06);color:var(--sab-t1);font-size:14px}
body.sab-page2 .sab-side-quick a em{font-style:normal;font-size:17px;color:var(--sab-g)}
body.sab-page2 .sab-side-quick a:hover{background:rgba(232,194,90,.13)}
body.sab-page2 .sab-side-quick a.is-locked{color:var(--sab-t3);border-color:#4a5b50}
body.sab-page2 .sab-side-quick a.is-locked em{font-size:15px}
body.sab-page2 .sab-side-menu{
display:flex;flex-direction:column;gap:4px;margin-top:16px;
padding-top:14px;border-top:1px solid rgba(232,194,90,.18)}
body.sab-page2 .sab-side-menu a{
display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;
border-radius:9px;color:var(--sab-t2);font-size:15px;text-align:left}
body.sab-page2 .sab-side-menu a em{
font-style:normal;width:20px;flex:0 0 20px;text-align:center;
font-size:16px;color:var(--sab-g)}
body.sab-page2 .sab-side-menu a:hover{background:rgba(232,194,90,.09);color:var(--sab-t1)}
body.sab-page2 .sab-side-menu a.is-active{
background:rgba(232,194,90,.14);color:var(--sab-t1);font-weight:700}
/* 上鎖用鎖頭區分,不用變淡 —— 淡灰在深底上對比不夠(手冊第 2 節) */
body.sab-page2 .sab-side-menu a.is-locked{color:var(--sab-t3)}
body.sab-page2 .sab-side-menu a.is-locked em{color:var(--sab-t3);font-size:14px}
/* ── 手機迷你資料列(帳戶管理頁不帶)── */
body.sab-page2 .sab-mini{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin-top:14px;padding:12px 14px;border-radius:12px;
background:linear-gradient(160deg,#152f24,#0e2a1f);
border:1px solid rgba(232,194,90,.24)}
body.sab-page2 .sab-mini-who{display:flex;align-items:center;gap:8px;min-width:0}
body.sab-page2 .sab-mini-avatar{
width:34px;height:34px;flex:0 0 34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,var(--sab-g),var(--sab-g-lo));
color:var(--sab-g-ink);font-size:16px;font-weight:700}
body.sab-page2 .sab-mini-id{
font-size:14px;color:var(--sab-t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.sab-page2 .sab-mini-bal{margin-left:auto;text-align:right}
body.sab-page2 .sab-mini-bal span{display:block;font-size:12px;color:var(--sab-t3)}
body.sab-page2 .sab-mini-bal b{
font-size:19px;font-weight:700;color:var(--sab-g);font-variant-numeric:tabular-nums}
body.sab-page2 .sab-mini-quick{display:flex;gap:8px;flex:1 1 100%}
body.sab-page2 .sab-mini-quick a{
flex:1 1 0;min-height:44px;display:flex;align-items:center;justify-content:center;
border-radius:9px;font-size:15px;font-weight:700;
background:linear-gradient(160deg,var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink)}
body.sab-page2 .sab-mini-quick a.is-locked{
background:none;border:1px solid #6b7d70;color:var(--sab-t2);font-weight:400}
@media (min-width:992px){
body.sab-page2 .sab-mini{display:none}
}
/* ── 卡片外框:舊頁沿用自己的 .member-page,新做的用 .sab-panel ── */
body.sab-page2 .sab-panel{
background:linear-gradient(160deg,#152f24,#0e2a1f);
border:1px solid rgba(232,194,90,.24);border-radius:14px;
padding:18px 16px;margin-top:16px}
body.sab-page2 .sab-panel-title{
margin:0 0 12px;font-size:17px;font-weight:700;color:var(--sab-t1)}
@media (min-width:992px){
body.sab-page2 .sab-panel{padding:22px 24px}
}
/* 「去完成」在帳戶管理頁是 button、其他頁是連結,兩種都要長一樣 */
body.sab-page2 button.sab-lockdlg-go{
font-family:inherit;font-size:15px;border:0;cursor:pointer}
/* 捲到沒填的表單之後閃一下,不然使用者不知道停在哪 */
body.sab-page2 .is-flash{
animation:sabFlash 1.4s ease-out 1}
@keyframes sabFlash{
0%,100%{box-shadow:0 0 0 0 rgba(232,194,90,0)}
25%,60%{box-shadow:0 0 0 3px rgba(232,194,90,.55)}
}
@media (prefers-reduced-motion:reduce){
body.sab-page2 .is-flash{animation:none;outline:2px solid var(--sab-g)}
}
/* ── 帳戶管理:改成單欄堆疊 ──
卡片會依狀態一張一張收起來,兩欄很容易剩一張落單、右邊空一大塊(天條 55)。
間距只給上方,不給下方(天條 38)。 */
body.sab-page2 .sab-acc .user-info>.box,
body.sab-page2 .sab-acc .user-info>section.sab-todo{margin-top:16px}
body.sab-page2 .sab-acc .user-info>.box:first-child,
body.sab-page2 .sab-acc .user-info>section.sab-todo:first-child{margin-top:0}
@media (min-width:992px){
body.sab-page2 .sab-acc .user-info>.box,
body.sab-page2 .sab-acc .user-info>section.sab-todo{margin-top:20px}
}
/* ── 個人資料卡(帳戶管理頁,頁籤上方)── */
body.sab-page2 .sab-profile{
margin-top:14px;padding:16px;border-radius:14px;
background:linear-gradient(160deg,#152f24,#0e2a1f);
border:1px solid rgba(232,194,90,.24)}
body.sab-page2 .sab-profile-top{display:flex;align-items:center;gap:12px}
body.sab-page2 .sab-profile-avatar{
width:52px;height:52px;flex:0 0 52px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,var(--sab-g),var(--sab-g-lo));
color:var(--sab-g-ink);font-size:23px;font-weight:700}
body.sab-page2 .sab-profile-who{min-width:0}
body.sab-page2 .sab-profile-name{
margin:0;font-size:18px;font-weight:700;color:var(--sab-t1);word-break:break-all}
body.sab-page2 .sab-profile-id{margin:1px 0 0;font-size:13px;color:var(--sab-t3);word-break:break-all}
body.sab-page2 .sab-profile-badge{
display:inline-block;margin:6px 0 0;padding:2px 9px;border-radius:999px;
font-size:12px;background:rgba(255,157,143,.14);color:#ff9d8f;
border:1px solid rgba(255,157,143,.4)}
body.sab-page2 .sab-profile-badge.is-ok{
background:rgba(140,224,176,.14);color:#8ce0b0;border-color:rgba(140,224,176,.45)}
body.sab-page2 .sab-profile-bal{
margin-top:14px;padding:12px 14px;border-radius:10px;
background:rgba(232,194,90,.08);border:1px solid rgba(232,194,90,.22);
display:flex;align-items:baseline;justify-content:space-between;gap:12px}
body.sab-page2 .sab-profile-bal span{font-size:14px;color:var(--sab-t3)}
body.sab-page2 .sab-profile-bal b{
font-size:26px;font-weight:700;color:var(--sab-g);font-variant-numeric:tabular-nums}
body.sab-page2 .sab-profile-act{display:flex;gap:10px;margin-top:12px}
body.sab-page2 .sab-profile-btn{
flex:1 1 0;min-height:46px;display:flex;align-items:center;justify-content:center;gap:6px;
border-radius:10px;font-size:16px;font-weight:700;
border:1px solid rgba(232,194,90,.35);color:var(--sab-t1);background:rgba(232,194,90,.06)}
body.sab-page2 .sab-profile-btn.is-main{
background:linear-gradient(160deg,var(--sab-g-hi),var(--sab-g-lo));
color:var(--sab-g-ink);border-color:transparent}
body.sab-page2 .sab-profile-btn.is-locked{
color:var(--sab-t2);border-color:#6b7d70;background:none;font-weight:400}
body.sab-page2 .sab-profile-btn em{font-style:normal}
@media (min-width:992px){
body.sab-page2 .sab-profile{padding:20px 22px}
}
/* ── 卡片標題上的「必填」／「選填」小籤 ── */
body.sab-page2 .sab-acc h4 .sab-req,
body.sab-page2 .sab-acc h4 .sab-opt-tag{
margin-left:8px;padding:2px 8px;border-radius:999px;
font-size:12px;font-weight:400;vertical-align:middle}
body.sab-page2 .sab-acc h4 .sab-req{
background:rgba(255,157,143,.14);color:#ff9d8f;border:1px solid rgba(255,157,143,.4)}
body.sab-page2 .sab-acc h4 .sab-opt-tag{
background:rgba(179,194,174,.12);color:var(--sab-t3);border:1px solid #4a5b50}
/* 表單自己的錯誤訊息(身分證那張卡在用) */
body.sab-page2 .sab-acc .sab-acc-err{
margin:10px 0 0;padding:9px 12px;border-radius:9px;font-size:14px;
background:rgba(255,157,143,.12);border:1px solid rgba(255,157,143,.4);color:#ff9d8f}
body.sab-page2 .sab-acc .sab-acc-err[hidden]{display:none}
/* ── 選填項目:沒設定時收成一列,點了才展開 ── */
body.sab-page2 .sab-acc .sab-fold{
margin-top:12px;border:1px solid rgba(232,194,90,.2);border-radius:11px;
background:rgba(12,36,25,.5)}
body.sab-page2 .sab-acc .sab-fold summary{
display:flex;align-items:center;justify-content:space-between;gap:12px;
min-height:52px;padding:0 14px;cursor:pointer;list-style:none;
font-size:16px;color:var(--sab-t1)}
body.sab-page2 .sab-acc .sab-fold summary::-webkit-details-marker{display:none}
body.sab-page2 .sab-acc .sab-fold summary span{font-size:14px;color:var(--sab-g)}
body.sab-page2 .sab-acc .sab-fold summary:hover{background:rgba(232,194,90,.06)}
body.sab-page2 .sab-acc .sab-fold[open] summary{
border-bottom:1px solid rgba(232,194,90,.16)}
body.sab-page2 .sab-acc .sab-fold-body{padding:14px}
/* ── 登入密碼 ── */
body.sab-page2 .sab-acc .sab-pw-row{
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
body.sab-page2 .sab-acc .sab-pw-row span{font-size:18px;letter-spacing:.14em;color:var(--sab-t2)}
/* 「已完成」那一列的綠籤:v2 的 em 是 22px 圓形只放得下一個勾,
現在要放「✓ 已完成」四個字,改成自動寬的膠囊(手冊第 5 節:完成的列綠籤)。 */
body.sab-page2 .sab-done-card .sab-done-row{grid-template-columns:88px minmax(0,1fr) auto}
body.sab-page2 .sab-done-card .sab-done-row em{
width:auto;height:auto;padding:3px 10px;border-radius:999px;
background:rgba(140,224,176,.14);color:#8ce0b0;border:1px solid rgba(140,224,176,.45);
font-size:12px;font-weight:400;white-space:nowrap}
@media (max-width:480px){
body.sab-page2 .sab-done-card .sab-done-row{
grid-template-columns:1fr auto;row-gap:2px}
body.sab-page2 .sab-done-card .sab-done-row .k{grid-column:1 / -1}
}
/* 電腦版已經有左側欄印同一組資料,個人資料卡就不再重複一次(天條 55)。 */
@media (min-width:992px){
body.sab-page2 .sab-profile{display:none}
}
/* bootstrap 的 .text-success(#28a745)在這站的深綠底上只有 3.6,沒過 AA。
會員中心範圍內統一換掉;那支工具類自己帶 !important,只能對上。
還原=刪掉這兩條,顏色回到 bootstrap 預設。 */
body.sab-page2 .sab-member-app .text-success{color:#8ce0b0 !important}
body.sab-page2 .sab-member-app .text-danger{color:#ff9d8f !important}
/* 紀錄表的空狀態與「看全部」(共用檔 record_deposit / record_sell 在用) */
body.sab-page2 main table.table td.sab-rec-empty{
text-align:center;color:var(--sab-t3);padding:30px 12px}
body.sab-page2 .sab-rec-more{margin:12px 0 0;text-align:right}
body.sab-page2 .sab-rec-more a{
display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
color:var(--sab-g);font-size:15px}
/* ══════════ 會員中心版面統一(2026-09-09)══════════
量到的問題:卡片兩套底色、標題 4 種字級、按鈕 7 種樣式、輸入框 3 種高度,
而且 .member-page 的 min-height:calc(80vh-12px) 讓十頁底部各空 130~540px。
這一節把它們收成同一套 —— 色票沿用本檔第 987 行那組餘額卡/表單卡,沒有新顏色。 */
/* ── 1. 外框:.member-page 在會員中心只當容器,卡片是它裡面的區塊 ──
原本它自己也畫一圈框,裡面再放卡,變成卡中卡;min-height 又撐出一大片空白。 */
body.sab-page2 .sab-member-app .member-page{
background:none;border:0;box-shadow:none;border-radius:0;
padding:0;margin:0;width:auto;min-height:0}
/* ── 2. 卡片:一套底色、一套邊框、一套圓角、一套內距 ──
間距只給上方(天條 38)。 */
body.sab-page2 .sab-member-app .sab-panel,
body.sab-page2 .sab-member-app .sab-profile,
body.sab-page2 .sab-member-app .sab-mini,
body.sab-page2 .sab-member-app .sab-todo,
body.sab-page2 .sab-member-app .user-info>.box,
body.sab-page2 .sab-member-app .user-info .box.box-2,
body.sab-page2 .sab-member-app .wallet-box,
body.sab-page2 .sab-mnav-side .sab-side-card{
margin:16px 0 0;padding:16px 18px;border-radius:14px;
background:linear-gradient(180deg,rgba(23,55,42,.92),rgba(12,36,25,.92));
border:1px solid rgba(232,194,90,.28);box-shadow:none}
body.sab-page2 .sab-member-app .sab-mmain>*:first-child,
body.sab-page2 .sab-member-app .user-info>.box:first-child,
body.sab-page2 .sab-mnav-side .sab-side-card{margin-top:0}
@media (min-width:992px){
body.sab-page2 .sab-member-app .sab-panel,
body.sab-page2 .sab-member-app .sab-todo,
body.sab-page2 .sab-member-app .user-info>.box,
body.sab-page2 .sab-member-app .user-info .box.box-2,
body.sab-page2 .sab-member-app .wallet-box{padding:20px 22px}
}
/* 卡片裡再包一層盒子的,不要再畫框(卡中卡) */
body.sab-page2 .sab-member-app .box .box:not(.box-2),
body.sab-page2 .sab-member-app .box-user{
background:none;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
/* ── 3. 卡片標題:金色直線 + 同一個字級 ── */
body.sab-page2 .sab-member-app .sab-panel-title,
body.sab-page2 .sab-member-app .user-info>.box>h4,
body.sab-page2 .sab-member-app .user-info .box.box-2 h4,
body.sab-page2 .sab-member-app .sab-acc .box>h4{
margin:0 0 14px;padding-left:11px;border-left:4px solid var(--sab-g);
font-size:19px;font-weight:700;line-height:1.3;color:var(--sab-t1)}
/* ── 4. 按鈕:主要動作全站同一顆(天條 55)──
實心金色膠囊、高 50、手機滿版、電腦限寬置中。.close 是彈窗的叉叉,排除。 */
body.sab-page2 .sab-member-app .btn:not(.close),
body.sab-page2 .sab-member-app button.submit-btn,
body.sab-page2 .sab-member-app a.button_1{
display:inline-flex;align-items:center;justify-content:center;
width:100%;margin:0;min-height:50px;padding:0 24px;
font-size:16px;font-weight:700;font-family:inherit;
border:0;border-radius:999px;
background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink);
box-shadow:0 8px 20px -12px rgba(201,168,78,.9),inset 0 1px 0 rgba(255,255,255,.35)}
@media (min-width:768px){
body.sab-page2 .sab-member-app .btn:not(.close),
body.sab-page2 .sab-member-app button.submit-btn,
body.sab-page2 .sab-member-app a.button_1{
width:auto;min-width:240px}
body.sab-page2 .sab-member-app .sab-acc-act,
body.sab-page2 .sab-member-app .submitdiv,
body.sab-page2 .sab-member-app .text-center.mt-3{text-align:right}
}
/* 次要動作(取消、線框):同尺寸,底色換成線框,一張卡只留一顆實心 */
body.sab-page2 .sab-member-app .btn-outline-danger,
body.sab-page2 .sab-member-app .btn-secondary{
background:none;color:var(--sab-t1);border:1px solid #6b7d70;box-shadow:none}
/* 按鈕列:兩顆並排時等寬,不要一大一小 */
body.sab-page2 .sab-member-app .sab-acc-act{
display:flex;gap:10px;margin-top:16px}
body.sab-page2 .sab-member-app .sab-acc-act .btn{flex:1 1 0}
@media (min-width:768px){
body.sab-page2 .sab-member-app .sab-acc-act{justify-content:flex-end}
body.sab-page2 .sab-member-app .sab-acc-act .btn{flex:0 0 auto}
}
/* ── 5. 輸入框:同一個高度、同一個圓角 ── */
body.sab-page2 .sab-member-app .form-control,
body.sab-page2 .sab-member-app input[type="text"],
body.sab-page2 .sab-member-app input[type="number"],
body.sab-page2 .sab-member-app input[type="password"],
body.sab-page2 .sab-member-app select{
min-height:48px;border-radius:10px;font-size:16px;padding:10px 13px;
background:rgba(0,0,0,.30);border:1px solid rgba(232,194,90,.26);
color:var(--sab-t1);box-shadow:none}
/* input-group 的前置標籤:寬度對齊,不然每一列的輸入框起點都不一樣 */
body.sab-page2 .sab-member-app .input-group{
display:flex;flex-wrap:nowrap;align-items:stretch;margin-bottom:12px}
body.sab-page2 .sab-member-app .input-group-prepend{display:flex}
body.sab-page2 .sab-member-app .input-group-text{
display:flex;align-items:center;justify-content:flex-start;
min-width:132px;padding:0 12px;font-size:14px;line-height:1.3;
border:1px solid rgba(232,194,90,.26);border-right:0;
border-radius:10px 0 0 10px;background:rgba(232,194,90,.07);color:var(--sab-t2)}
body.sab-page2 .sab-member-app .input-group>.form-control{
flex:1 1 0;min-width:0;border-radius:0 10px 10px 0}
@media (max-width:520px){
body.sab-page2 .sab-member-app .input-group{flex-wrap:wrap}
body.sab-page2 .sab-member-app .input-group-text{
min-width:0;width:100%;border-right:1px solid rgba(232,194,90,.26);
border-radius:10px 10px 0 0;min-height:40px}
body.sab-page2 .sab-member-app .input-group>.form-control{
flex:1 1 100%;border-radius:0 0 10px 10px}
}
/* ── 6. 儲值頁那條固定在畫面底的送出列 ──
手機留著(拇指構得到),電腦版改成一般排版,不然它會浮在卡片外面。 */
@media (min-width:992px){
body.sab-page2 .sab-member-app .fixed-bottom-bar{
position:static;padding:0;margin-top:18px;background:none;box-shadow:none;
text-align:right}
}
/* ── 7. 說明框:資訊與注意事項用同一種樣子 ── */
body.sab-page2 .sab-member-app .info-box,
body.sab-page2 .sab-member-app .border-danger{
margin:16px 0 0;padding:14px 16px;border-radius:12px;
background:rgba(232,194,90,.06);border:1px solid rgba(232,194,90,.22);
color:var(--sab-t2);font-size:15px;line-height:1.7}
body.sab-page2 .sab-member-app .border-danger ol{margin:8px 0 0;padding-left:20px}
/* 收尾:巡檢還抓到三處沒對齊的 */
/* (a) 本檔第 574 行 .sab-acc input.form-control{min-height:44px} 是 (0,3,2),
比上面那組統一規則強,所以帳戶頁的輸入框還是 44/46。重複一次 class 提權。 */
body.sab-page2 .sab-member-app .form-control.form-control,
body.sab-page2 .sab-member-app select.form-control,
body.sab-page2 .sab-member-app .sab-acc input.form-control,
body.sab-page2 .sab-member-app .sab-acc select.form-control{
min-height:48px;border-radius:10px;padding:10px 13px}
body.sab-page2 .sab-member-app .input-group>.form-control.form-control{
border-radius:0 10px 10px 0}
@media (max-width:520px){
body.sab-page2 .sab-member-app .input-group>.form-control.form-control{
border-radius:0 0 10px 10px}
}
/* (b) 儲值頁的金額快捷鈕是一排籌碼,不該套主要按鈕那顆膠囊,
但高度與圓角要跟輸入框對齊,一排看起來才整齊。 */
body.sab-page2 .sab-member-app .quick-btn{
min-height:48px;border-radius:10px;font-size:16px;font-family:inherit}
/* (c) .btn2 是幾頁在用的次要鈕(返回、顯示條碼),原本只有 27px 高。
給它跟主要鈕一樣的尺寸、線框樣式,一張卡只留一顆實心(天條 55)。 */
body.sab-page2 .sab-member-app .btn2{
display:inline-flex;align-items:center;justify-content:center;
min-height:50px;padding:0 24px;margin:0;
font-size:16px;font-weight:700;font-family:inherit;
border:1px solid #6b7d70;border-radius:999px;
background:none;color:var(--sab-t1);box-shadow:none}
body.sab-page2 .sab-member-app a.btn2.button_1{
border:0;background:linear-gradient(var(--sab-g-hi),var(--sab-g-lo));color:var(--sab-g-ink);
box-shadow:0 8px 20px -12px rgba(201,168,78,.9),inset 0 1px 0 rgba(255,255,255,.35)}
@media (max-width:767px){
body.sab-page2 .sab-member-app .btn2{width:100%;margin-top:10px}
}
@media (min-width:768px){
body.sab-page2 .sab-member-app .btn2{min-width:240px}
}
/* 卡片裡的主要動作:手機滿版、電腦靠右下 —— 全站同一個位置(天條 55) */
body.sab-page2 .sab-member-app .box.box-2 form{
display:flex;flex-direction:column;align-items:stretch;gap:0}
@media (min-width:768px){
body.sab-page2 .sab-member-app .box.box-2 form>.btn,
body.sab-page2 .sab-member-app .box.box-2 form>button{align-self:flex-end;margin-top:4px}
}
/* 卡片上方那句單獨的說明(「出售點數」這種)跟頁面副標重複,收掉;
帳戶管理那句真的有資訊,留著。 */
body.sab-page2 .sab-member-app .member-transfer>.user-info>p:first-child{display:none}
/* .box-1 在不同頁扮演不同角色:出售/轉點頁它只是包裝(裡面還有一張 .box-2 才是卡),
身分證頁它自己就是那張卡。用 :has 分辨 —— 不支援 :has 的舊瀏覽器只會多一圈框,
不會壞掉。 */
body.sab-page2 .sab-member-app .user-info>.box.box-1:has(.box-2){
background:none;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
/* input-group 的前置標籤:兩列的字數不一樣,只給 min-width 還是會對不齊,要鎖同一個寬 */
body.sab-page2 .sab-member-app .input-group-text{
flex:0 0 156px;min-width:156px;max-width:156px}
@media (max-width:520px){
body.sab-page2 .sab-member-app .input-group-text{
flex:1 1 100%;min-width:0;max-width:none}
}
/* bootstrap 的 .text-center 帶 !important,送出鍵會被釘在正中間,
跟其他頁的右下角對不上,只能同樣用 !important 對上。 */
@media (min-width:768px){
body.sab-page2 .sab-member-app .submitdiv.text-center,
body.sab-page2 .sab-member-app .sab-acc-act.text-center{text-align:right !important}
}
/* 紀錄表:電腦版讓時間欄不要折成兩行 —— 同一批表格,有的折有的不折看起來就是不齊。
手機不套(那邊要靠折行才塞得下)。 */
@media (min-width:768px){
body.sab-page2 .sab-member-app .sab-tw table.table td:first-child,
body.sab-page2 .sab-member-app .sab-tw table.table th:first-child{white-space:nowrap}
}
/* ── 證件上傳:原生檔案欄位換成中文 ──
的「Choose File / No file chosen」是瀏覽器給的字,CSS 改不到,
所以把原生控制項收起來(不是 display:none —— 那樣鍵盤就 focus 不到了),
用 label 當按鈕。檔名由 account_js 填。 */
/* 本檔第 907 行把 .sab-acc .custom-file 設成 flex 容器,label 變成 flex 項目就縮成內容寬;
外框改由 label 自己畫,這一層只當定位用的殼(權重要 4 個 class 才壓得過)。 */
body.sab-page2 .sab-acc .custom-file.sab-file,
body.sab-page2 .sab-member-app .custom-file.sab-file{
display:block;position:relative;width:100%;max-width:none;
padding:0;min-height:0;border:0;background:none;margin-bottom:12px}
body.sab-page2 .sab-member-app .sab-file .custom-file-input{
position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap}
body.sab-page2 .sab-member-app .sab-file-label{
display:flex;align-items:center;gap:12px;margin:0;cursor:pointer;
width:100%;box-sizing:border-box;
min-height:48px;padding:6px 12px 6px 6px;border-radius:10px;
background:rgba(0,0,0,.30);border:1px solid rgba(232,194,90,.26)}
body.sab-page2 .sab-member-app .sab-file-btn{
flex:0 0 auto;display:inline-flex;align-items:center;
min-height:36px;padding:0 16px;border-radius:8px;
background:rgba(232,194,90,.14);border:1px solid rgba(232,194,90,.4);
color:var(--sab-g);font-size:15px;white-space:nowrap}
body.sab-page2 .sab-member-app .sab-file-name{
min-width:0;flex:1 1 auto;font-size:14px;color:var(--sab-t3);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.sab-page2 .sab-member-app .sab-file.is-picked .sab-file-name{color:var(--sab-t1)}
body.sab-page2 .sab-member-app .sab-file .custom-file-input:focus-visible+.sab-file-label{
outline:2px solid var(--sab-g);outline-offset:2px}
body.sab-page2 .sab-member-app .sab-file-label:hover{border-color:rgba(232,194,90,.45)}
/* ── 登入頁的按鈕列(2026-09-09 Owner:加入會員沒置中)──
原本兩顆 inline-block 靠 text-center 排,寬度不一樣、中間又夾著空白字元,
看起來整組偏一邊。改成 flex 置中、兩顆等寬;「忘記密碼」自己一行。 */
body.sab-page .sab-form .form-group.text-center{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
body.sab-page .sab-form .form-group.text-center .btn{
flex:1 1 0;min-width:0;margin:0;display:inline-flex;align-items:center;justify-content:center}
body.sab-page .sab-form .form-group.text-center br{display:none}
body.sab-page .sab-form .form-group.text-center>a:not(.btn){
flex:1 1 100%;text-align:center;margin-top:8px;min-height:32px;line-height:32px}
/* ── 儲值頁的空白(2026-09-09 Owner 手機截圖)──
deposit2 自己的 .deposit-container 寫死 min-height:100vh + padding-bottom:120px
(給底部固定的「取得代碼」留位)。紀錄卡接在它後面之後,那 360px 就露在兩張卡中間。
容器不再撐高、不留底;留白改給整頁最底(手機才有固定列)。 */
body.sab-page2 .sab-member-app .prestige-deposit-scope,
body.sab-page2 .sab-member-app .deposit-container{min-height:0;padding-bottom:0}
@media (max-width:991px){
body.sab-page2 .sab-has-fixedbar .sab-mmain{
padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* ── 會員中心紀錄表(手機):四欄照比例塞進畫面,金額欄不再被截在右邊 ──
本檔第 818 行的 table.table{min-width:440px} 在 390 寬會把表撐出容器,只能靠水平捲,
Owner 手機截圖上「$ 3,000元」就是被切掉一半。紅利頁先前同一招,這裡推到所有紀錄表。 */
@media (max-width:560px){
body.sab-page2 .sab-member-app .sab-tw table.table{
table-layout:fixed;width:100%;min-width:0}
body.sab-page2 .sab-member-app .sab-tw table.table th,
body.sab-page2 .sab-member-app .sab-tw table.table td{
padding:9px 6px;font-size:13.5px;word-break:break-all;width:auto}
body.sab-page2 .sab-member-app .sab-tw table.table td p{margin:0 0 2px;font-size:13px}
}
/* ══ 遊戲紀錄(History/game_history,2026-09-09 新頁)══
照手冊的遊戲紀錄頁:總計摘要 → 明細(手機一筆一張卡、電腦表格)→ 本頁小計。色票沿用本站。 */
body.sab-page2 .sab-gh-filter{
display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
body.sab-page2 .sab-gh-filter label{
flex:1 1 140px;display:flex;flex-direction:column;gap:4px;margin:0;
font-size:13px;color:var(--sab-t3)}
body.sab-page2 .sab-gh-filter .form-control{margin:0}
body.sab-page2 .sab-member-app .sab-gh-filter .btn{flex:1 1 100%;min-width:0}
@media (min-width:768px){
body.sab-page2 .sab-gh-filter label{flex:0 1 220px}
body.sab-page2 .sab-member-app .sab-gh-filter .btn{flex:0 0 auto;min-width:140px;width:auto}
}
/* 總計摘要:標籤左、數字右,位數再多也不跑版 */
body.sab-page2 .sab-sum{
border:1px solid rgba(232,194,90,.24);border-radius:12px;overflow:hidden;
background:rgba(0,0,0,.18);margin-bottom:16px}
body.sab-page2 .sab-sum-item{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;
padding:12px 16px;border-bottom:1px solid rgba(232,194,90,.12)}
body.sab-page2 .sab-sum-item:last-child{border-bottom:0}
body.sab-page2 .sab-sum-item span{font-size:14px;color:var(--sab-t3);white-space:nowrap}
body.sab-page2 .sab-sum-item b{
font-size:17px;color:var(--sab-t1);font-variant-numeric:tabular-nums;white-space:nowrap}
body.sab-page2 .sab-sum-item.is-total{background:rgba(232,194,90,.08)}
body.sab-page2 .sab-sum-item.is-total span{color:var(--sab-g)}
body.sab-page2 .sab-sum-item.is-total b{font-size:20px;color:var(--sab-g)}
body.sab-page2 .sab-sum .is-up{color:#8ce0b0}
body.sab-page2 .sab-sum .is-down{color:#ff9d8f}
body.sab-page2 .sab-sum-page{margin:16px 0 0}
/* 明細:手機一筆一張卡 */
body.sab-page2 .sab-rec-list{display:flex;flex-direction:column;gap:10px}
body.sab-page2 .sab-rec-head{display:none}
body.sab-page2 .sab-rec-item{
border:1px solid rgba(232,194,90,.2);border-radius:12px;padding:12px 14px;
background:rgba(0,0,0,.18)}
body.sab-page2 .sab-rec-top{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
body.sab-page2 .sab-rec-game{font-size:15px;font-weight:700;color:var(--sab-t1)}
body.sab-page2 .sab-rec-game em{font-style:normal;font-size:12px;margin-left:6px}
body.sab-page2 .sab-rec-win{
font-size:17px;font-weight:700;color:var(--sab-t1);
font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
body.sab-page2 .sab-rec-win.is-up{color:#8ce0b0}
body.sab-page2 .sab-rec-win.is-down{color:#ff9d8f}
body.sab-page2 .sab-rec-game .is-down{color:#ff9d8f}
body.sab-page2 .sab-rec-meta{
display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--sab-t3)}
body.sab-page2 .sab-rec-meta b{color:var(--sab-t2);font-weight:600;font-variant-numeric:tabular-nums}
body.sab-page2 .sab-rec-empty{text-align:center;color:var(--sab-t3);padding:30px 12px}
/* 電腦版改回表格。孫層要各自宣告 table-cell,不然相鄰格會併成一格 */
@media (min-width:768px){
body.sab-page2 .sab-sum{max-width:560px;margin-left:auto;margin-right:auto}
body.sab-page2 .sab-sum-page{margin-left:auto;margin-right:auto}
body.sab-page2 .sab-rec-list{display:table;width:100%;border-collapse:collapse;gap:0}
body.sab-page2 .sab-rec-head{display:table-row}
body.sab-page2 .sab-rec-head>div{
display:table-cell;padding:12px 12px;font-size:13px;color:var(--sab-g);font-weight:700;
border-bottom:1px solid rgba(232,194,90,.3);white-space:nowrap;background:rgba(232,194,90,.06)}
body.sab-page2 .sab-rec-item{display:table-row;border:0;background:none;padding:0;border-radius:0}
body.sab-page2 .sab-rec-top,body.sab-page2 .sab-rec-meta{display:contents}
body.sab-page2 .sab-rec-top>div,
body.sab-page2 .sab-rec-meta>div{
display:table-cell;padding:12px;border-bottom:1px solid rgba(232,194,90,.12);
vertical-align:middle;font-size:14px;white-space:nowrap;color:var(--sab-t2)}
body.sab-page2 .sab-rec-game{white-space:normal;font-size:14px}
body.sab-page2 .sab-rec-win{font-size:15px;text-align:center}
body.sab-page2 .sab-rec-meta .k{display:none}
body.sab-page2 .sab-rec-meta>div:nth-child(3),
body.sab-page2 .sab-rec-meta>div:nth-child(4),
body.sab-page2 .sab-rec-head>div:nth-child(2),
body.sab-page2 .sab-rec-head>div:nth-child(5),
body.sab-page2 .sab-rec-head>div:nth-child(6){text-align:center}
}