/* RUAYMAK99 native shell — clean robust responsive layout, tkb777 look */
/* tkb777's FIFA-ribbon display font (self-hosted); font-display:swap so it never blocks render */
@font-face{ font-family:Trujillo; src:url(/fonts/Trujillo-ExtraBold.ttf) format("truetype"); font-weight:900; font-display:swap; }
/* palette aligned to tkb777 theme-default.css: body #030a2e navy, header #141723, lime-green CTA #fd01b2 */
:root{ --bg:#01051b; --panel:#030a2e; --card:#030a2e; --card2:#12183a; --txt:#fff; --muted:#8b93a7;
  --green1:#fd01b2; --green2:#b81f8c; --purple:#8633c3; --pink:#b72dbc; --gold:#ff2bbd; --radius:14px; --col:680px;
  --pa-primary:linear-gradient(to right,#b8007f,#ff4dc8,#b8007f); --pa-primary-fg:#ffffff;
  --pa-deposit:linear-gradient(135deg,#ff4dc8 0%,#e0159e 60%,#d4009a 100%); --pa-deposit-fg:#ffffff;
  --pa-gold-bd:#c21f95; --pa-gold-fg:#ff4dc8;
  --pa-bronze-bd:#7a1f66; --pa-bronze-fg:#c21f95;
  --pa-cancel-bd:#4a4a52; --pa-cancel-fg:#9aa0ad; }
*{box-sizing:border-box}
/* English visitors: hide the static (Thai) labels until app.js translates them — prevents the
   Thai-then-English flash on refresh. app.js removes .rm-en-pending after applyI18n().
   text-shadow:none is required too — a transparent-color glyph still casts its shadow, so the
   Thai shape would otherwise ghost through on shadowed buttons (e.g. the green Register CTA).
   Placeholders use [data-i18n-ph] and need their own ::placeholder transparency (search box). */
html.rm-en-pending [data-i18n]{color:transparent!important;text-shadow:none!important}
html.rm-en-pending [data-i18n-ph]::placeholder{color:transparent!important}
html.rm-en-pending [data-i18n-ph]::-webkit-input-placeholder{color:transparent!important}
/* logged-in first paint: keep the static (logged-out) green Register CTA row invisible until
   app.js swaps it to Top Up/Withdraw — no green flash on hard refresh. visibility (not display)
   preserves the row height so nothing shifts. Set in the head script, removed by app.js boot. */
html.rm-pre-auth .rm-cta-inline{visibility:hidden}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent;
  /* clip horizontal overflow (the off-screen drawer etc.) so the page can't be dragged sideways;
     clip (not hidden) keeps the sticky topbar working. NOTE: no overscroll-behavior here — that
     would also disable pull-to-refresh, which we want to keep */
  overflow-x:clip;max-width:100%}
img{display:block;max-width:100%}
#root{min-height:100vh;display:flex;flex-direction:column}
.rm-content-max{max-width:1180px;margin:0 auto;width:100%}

/* ===== Top bar ===== */
.rm-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 22px;background:var(--panel);border-bottom:1px solid rgba(255,255,255,.04)}
.rm-topbar-left{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* tkb777: plain borderless hamburger (26x22 icon, 3 fat bars), no boxed background */
.rm-hamburger{display:flex;flex-direction:column;gap:5px;width:38px;height:38px;border-radius:10px;
  background:transparent;border:0;align-items:center;justify-content:center;cursor:pointer}
.rm-hamburger span{width:26px;height:3px;background:#fff;border-radius:2px}
.rm-brand{display:flex;align-items:center;gap:10px}
.rm-logo{width:81px;height:81px;border-radius:50%;object-fit:contain}
/* wordmark: the logo art already contains the wordmark, so it replaces logo+text as one image */
.rm-brandmark{height:66px;width:auto;object-fit:contain;display:block}
/* subtle border + shadow (tkb777 search-text-inset) so the box is visible even though its bg
   matches the topbar/panel colour — otherwise it looks like floating text */
/* tkb777 .game-search-textfield: bg #141723, 1px solid rgba(255,255,255,.3), radius 8, h 48, shadow 6/6/12 .25 */
.rm-search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid rgba(255,255,255,.3);box-shadow:6px 6px 12px rgba(0,0,0,.25);border-radius:8px;padding:0 11px;height:48px;margin:0 0 14px}
.rm-search-icon{width:12px;height:12px;object-fit:contain;opacity:.7}
.rm-search-input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:16px;font-family:inherit}
.rm-search-input::placeholder{color:var(--muted)}
.rm-topbar-right{display:flex;gap:10px;flex:0 0 auto}

/* buttons */
.rm-btn{border:0;outline:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;
  padding:11px 22px;border-radius:12px;white-space:nowrap;transition:transform .05s,filter .15s}
.rm-btn:active{transform:translateY(1px)}
.rm-btn-register{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #b8007f}
.rm-btn-login{background:#7a8bf3;color:#fff;border:0}
/* topbar Register/Login: same fixed size as each other (never resized by text); brand text is
   priority — kept full — so the buttons are sized to fit alongside it without overflowing */
.rm-topbar-right .rm-btn{width:93px;height:42px;padding:0;font-size:14px;font-weight:700;border-radius:10px;
  box-shadow:6px 6px 12px rgba(0,0,0,.4);
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;flex:0 0 auto}
/* tkb777 .btnV2-container: h 52, radius 16, 20px/700 label, 1px white/30% border, shadow 6/6/12 .25 */
.rm-cta-btn{height:52px;padding:0 11px;font-size:20px;font-weight:700;border-radius:16px;box-shadow:6px 6px 12px rgba(0,0,0,.25)}
/* inline CTA: register = tkb lime green #fd01b2 flat + white text, login = white w/ gray border (tkb777) */
.rm-cta-inline .rm-btn-register{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #b8007f}
.rm-cta-inline .rm-btn-login{background:#7a8bf3;color:#fff;border:0}

/* ===== Sidebar: drawer on mobile, persistent on desktop ===== */
.rm-body{width:auto;flex:1 0 auto}  /* grow to fill so the bottom nav is pushed to the viewport bottom even on short pages */
.rm-search-top{display:none}
.rm-sidebar{position:fixed;top:0;left:0;height:100%;width:100%;max-width:none;z-index:200;background:var(--panel);
  transform:translateX(-105%);transition:transform .28s ease;overflow-y:auto;padding:20px 19px 32px;
  display:flex;flex-direction:column;gap:20px;scrollbar-width:none}
.rm-sidebar::-webkit-scrollbar{display:none}  /* tkb drawer scrolls without a visible scrollbar */
body.rm-drawer .rm-sidebar{transform:translateX(0)}
body.rm-drawer .rm-backdrop{display:block}
/* drawer open -> lock the page behind it, so the WINDOW scrollbar disappears too
   (html has overflow-x:clip so body overflow doesn't propagate; capping body height does the job) */
body.rm-drawer{overflow:hidden;height:100vh;height:100dvh}
/* drawer header: brand on left + close X on right (full-width drawer covers the topbar) */
.rm-sidebar-head{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin-bottom:4px}
.rm-sidebar-brand{gap:10px}
/* tkb: plain bare X, no boxed background */
.rm-sidebar-close{background:transparent;border:0;color:#fff;
  width:40px;height:40px;border-radius:10px;font-size:28px;line-height:1;cursor:pointer;flex:0 0 auto;padding:0}
/* flex-shrink:0 so cards keep natural height when the drawer overflows (logged-in has many
   cards); otherwise flex would squeeze them and overflow:hidden clips the text (e.g. Language) */
/* tkb777 .side-menu-item-group: card = bg #030a2e, 1px white/30% border, radius 10, shadow;
   items h~58 (17px pad), 24px white icons inset ~60px, 16px/700 labels, icon-label gap 30 */
/* 側欄卡片對齊 register form 的 .rm-authcard(同一套設計語言;含 social 卡=.rm-menu-card.rm-social-card) */
.rm-menu-card{background:#131a2e;border:1px solid rgba(255,255,255,.08);border-radius:18px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);overflow:hidden;flex-shrink:0}
.rm-side-topbtns{flex-shrink:0}
.rm-menu-item{display:flex;align-items:center;gap:30px;padding:17px 20px 17px 56px;cursor:pointer;position:relative}
.rm-menu-item:hover{background:rgba(255,255,255,.05)}
.rm-menu-item .rm-ic{width:24px;height:24px;background:rgba(255,255,255,.62)}
.rm-menu-item:hover .rm-ic,.rm-menu-item:active .rm-ic{background:linear-gradient(to right,#b8007f,#ff4dc8,#b8007f)}

/* sidebar 社交入口(BO Contact Setting 驱动):竖向列表,每行 = 图标 + 号码/handle 文字。
   原本是一排 42px 圆形图标,只看得到图标、看不到号码。hover 才上浅色底 —— 不写死高亮某一行。 */
.rm-social-card{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px}
.rm-social{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:auto;height:auto;padding:10px 12px;border-radius:10px;border:0;background:transparent;cursor:pointer;transition:background .15s;text-decoration:none}
.rm-social:hover{background:var(--card2)}
.rm-social:active{transform:translateY(1px)}
.rm-social-ic{width:20px;height:20px;flex:0 0 auto;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;background:linear-gradient(180deg,#ff4dc8,#a81b7f)}
/* 号码可能很长(国际码+11 位),必须能省略,不能把侧栏撑破 */
.rm-social-tx{flex:1 1 auto;min-width:0;font-size:14px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-menu-item .rm-flag{width:24px;height:24px;border-radius:50%;object-fit:cover;filter:none}   /* object-fit:cover 与展开态一致,防矩形国旗图被圆角压成椭圆 */
.rm-menu-item span{font-size:16px;font-weight:700;color:#f0f3fc}
.rm-menu-sep{height:1px;background:rgba(255,255,255,.1);margin:0 20px}
.rm-arrow{margin-left:auto;width:9px;height:9px;border-top:2px solid #cfd3dc;border-right:2px solid #cfd3dc;transform:rotate(45deg)}
.rm-arrow.rm-down{transform:rotate(135deg);margin-top:-4px}
.rm-brand{cursor:pointer}
/* language accordion */
.rm-lang-head{cursor:pointer}
.rm-lang-panel{display:none;padding:0 0 8px}
.rm-lang-card.rm-lang-open .rm-lang-panel{display:block}
.rm-lang-card.rm-lang-open .rm-arrow.rm-down{transform:rotate(-45deg);margin-top:4px}
.rm-lang-opt{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 16px;cursor:pointer}  /* reduced indent so "Bahasa Indonesia" fits full */
.rm-lang-opt .rm-flag{width:26px;height:26px;flex:0 0 auto;border-radius:50%;object-fit:cover}   /* 国旗图是矩形位图,只加圆角会压成椭圆;object-fit:cover 按正方形居中裁切成正圆 */
.rm-lang-btn{flex:1 1 auto;min-width:0;text-align:center;padding:10px 12px;border-radius:10px;background:#20263a;font-weight:700;font-size:15px;white-space:nowrap;transition:background .15s}  /* flexible + nowrap so the label shows in full */
.rm-lang-opt.on .rm-lang-btn{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #b8007f}

.rm-content{max-width:1000px;margin:0 auto;width:100%;padding:14px 16px 96px}

/* marquee */
/* fixed heights so the marquee (icon loads late / track fills late) never grows and shoves
   the whole page down -> was the main CLS source once the shell paints early */
/* marquee sized to match tkb777: small 21x16 megaphone icon + 11px text (was oversized/cramped) */
/* tkb .intro-marquee-container: height auto (content-sized), margin-bottom only 4px — keep it slim */
/* font-size 原 12px -> Gerald 指定 7px(2026-07-23)。⚠️ 7px 在手机上接近不可读,
   要调回改这一个数即可;改完必须同步复核 app.js 的 MQ_PX_PER_SEC(字号变->轨道宽变
   ->一圈时间变,见那里的注释)。 */
.rm-mq-item{padding-right:60px;font-size:7px;line-height:1.35}
@keyframes rm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* banner */
/* reserve banner height at initial paint so injecting slides later doesn't shift the page (CLS) */
.rm-banner{position:relative;border-radius:0;overflow:hidden;background:#0a0c14;aspect-ratio:2/1}  /* 2:1 to match the cuanmain banners (no crop) */
/* banner: swipeable by touch (#4) but not clickable (#5 — no click handlers are attached);
   touch-action:pan-y keeps vertical page scroll working while we read horizontal swipes */
.rm-banner,.rm-slides,.rm-slide,.rm-slides img{touch-action:pan-y;user-select:none;-webkit-user-drag:none}
/* loading skeleton while the API banners load (avoids flashing a stale static image on refresh) */
.rm-banner-loading{background:linear-gradient(100deg,#0f1220 30%,#1a1f30 50%,#0f1220 70%);background-size:200% 100%;animation:rm-shimmer 1.4s linear infinite}
@keyframes rm-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.rm-slides{display:flex;transition:transform .45s ease;height:100%}
.rm-slides .rm-slide{flex:0 0 100%}
.rm-slides img{width:100%;height:100%;aspect-ratio:800/312;object-fit:cover;display:block}
.rm-dots{position:absolute;right:14px;bottom:12px;display:flex;gap:6px}
/* tkb .slide-indicator: every dot is 6x6; the active one just changes colour (not stretched to a bar) */
.rm-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.4);transition:background .2s}
.rm-dots i.on{background:#fff}

/* cta row + info row (stacked, tkb777 style) */
.rm-cta-row{display:flex;gap:16px;margin:16px 0}
.rm-cta-row .rm-btn{flex:1}
.rm-inforow-band{display:flex;align-items:center;gap:16px;margin:14px 0}
.rm-cta-inline{display:flex;gap:16px;flex:0 0 auto}
.rm-cta-inline:empty{display:none}
.rm-cta-inline .rm-btn{min-width:160px;padding:15px 26px}
/* Home 底下 stats bar:金邊淺陰影,mobile 3 欄(Min Deposit / Deposit Time / Withdraw Limit)、desktop 4 欄(多 Min Withdraw)
   顏色 = 主題金 label #ff4dc8 值 + muted #8b93a7 title,格子背景與 .rm-panel 同 #0a0e20,靠 1px 金色分隔線隔開 */
.rm-statsrow{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(253,1,178,.30);border:1px solid rgba(253,1,178,.35);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.rm-statscell{background:#0a0e20;padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-width:0}
.rm-statscell small{color:#8b93a7;font-size:10.5px;font-weight:600;line-height:1.2;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rm-statscell b{color:var(--pa-gold-fg);font-size:14px;font-weight:800;line-height:1.2;white-space:nowrap}
@media(min-width:1024px){
  .rm-statsrow{order:1}   /* desktop:stats 在左(mobile/desktop 統一 3 欄) */
  .rm-cta-inline{order:2}   /* desktop:CTA 按鈕在右 */
  .rm-statscell b{font-size:15px}
}
@media(max-width:768px){
  .rm-inforow-band{flex-direction:column;align-items:stretch;gap:10px}
  .rm-cta-inline{width:100%;gap:8px}   /* tkb mobile: 8px between Register/Login (probed 390px) */
  .rm-cta-inline .rm-btn{flex:1;min-width:0}
}

/* tabs */
/* tkb777 .game-category-container: boxed row (bg #141723, 1px white/30% border, radius 12, shadow),
   inside it fixed 57x57 tiles with 18px gap, 25px icon + 11px/700 label; active tile = white */
/* category bar — cmm4a .menu-2 look: PNG icon on top, label below, no box, active = cyan underline */
.rm-tabs{display:flex;gap:6px;justify-content:center;background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:6px 5px 5px;margin-bottom:6px;overflow-x:auto;overflow-y:hidden;touch-action:pan-y;scrollbar-width:none}
.rm-tabs::-webkit-scrollbar{display:none}
.rm-tab{position:relative;overflow:hidden;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:4px;padding:6px 13px 6px;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;cursor:pointer}
.rm-tab-ico{height:29px;width:auto;display:block;object-fit:contain}
.rm-tab span{font-size:14px;color:#fff;font-weight:700;white-space:nowrap}  /* label under icon (+10% on top of +30%) */
.rm-tab-active{border-bottom-color:#34d0e6}   /* cuanmain cyan underline */
.rm-tab-active span{color:#34d0e6}
/* tkb777 FIFA ribbon: red diagonal corner banner clipped to the tab's top-left corner */
/* .rm-tab .rm-tab-ribbon = specificity (0,2,0), beats `.rm-tab span{color:muted}` so FIFA stays white */
.rm-tab .rm-tab-ribbon{position:absolute;top:3px;left:-24px;width:70px;height:14px;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;background:#E64141;color:#fff;
  font-family:Trujillo,sans-serif;font-size:9px;font-weight:900;letter-spacing:.3px;line-height:1;z-index:2;border-radius:0}

/* provider / game grid */
.rm-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;min-height:60vh;align-content:start}
/* tkb777 .game-provider-item-container: 4:5-ish tile, 1px white/30% border, radius 10, shadow 6/6/12 .25 */
.rm-tile{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--card);cursor:pointer;transition:transform .12s;
  box-shadow:6px 6px 12px rgba(0,0,0,.25)}
.rm-tile:hover{transform:translateY(-3px)}
/* category 切換淡入:只動 opacity+transform(GPU 合成,不 reflow),180ms ease-out,
   全部同時淡入無 stagger → 有 fade 但不拖慢內容出現 */
@keyframes rm-tile-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rm-tile{animation:rm-tile-in .18s ease-out backwards}
@media(prefers-reduced-motion:reduce){.rm-tile{animation:none}}
/* lc/fish 橫圖(1.58:1):2 欄橫卡,圖 cover 鋪滿(圖=卡比例,不裁不變形) */
.rm-grid.rm-grid-wide{grid-template-columns:repeat(2,1fr)}
.rm-grid-wide .rm-tile{aspect-ratio:570/360;border-radius:6px;box-shadow:none;background:transparent}
.rm-grid-wide .rm-tile img,.rm-grid-wide .rm-tile img.rm-logo{object-fit:cover;padding:0}
.rm-tile img{width:100%;height:100%;object-fit:cover}
/* wide/square provider LOGOS (API now returns provider_logo strips e.g. 300x125) must not be
   cover-cropped into the 4:5 tile; portrait card art (hot/new 200x250) keeps full-bleed cover */
.rm-tile img.rm-logo{object-fit:contain;padding:14px 10px;border-radius:0;width:100%;height:100%}
.rm-tile.rm-game{aspect-ratio:3/4}
.rm-tile .rm-tile-name{position:absolute;left:0;right:0;bottom:0;padding:8px;font-size:12px;font-weight:600;
  background:linear-gradient(transparent,rgba(0,0,0,.85));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* game-list Back: identical to the tkb .back-nav pill (dark, bordered, bold white chevron) */
.rm-back{display:flex;align-items:center;gap:12px;background:#141723;color:#fff;font-weight:700;font-size:16px;
  border-radius:10px;padding:0 16px;height:42px;cursor:pointer;box-shadow:6px 6px 14px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.3);margin-bottom:14px;width:max-content}
.rm-back:before{content:"";width:10px;height:10px;border-left:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(45deg);flex:0 0 auto}
.rm-empty-cat{padding:48px 16px;text-align:center;color:#93a0c0;font-size:15px}
.rm-grid-msg{grid-column:1/-1;text-align:center;padding:40px;color:var(--muted)}

/* bottom nav (centered column, all widths) */
/* tkb777 .footer-container: space-evenly row, compact 52x52 items (radius 8), 27px icons, 11px/700 labels */

/* ===== lapdee mask icons (nav / category / sidebar) — single monochrome svg per icon,
   coloured via CSS background so selected state can use the lapdee gold gradient ===== */
.rm-ic{display:inline-block;flex:0 0 auto;background:rgba(255,255,255,.58);
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-home{--i:url(/assets/icons/home.svg)}
.ic-wallet{--i:url(/assets/icons/wallet.svg)}
.ic-reward{--i:url(/assets/icons/reward.svg)}
.ic-chat{--i:url(/assets/icons/chat.svg)}
.ic-slot{--i:url(/assets/icons/slot.svg)}
.ic-sport{--i:url(/assets/icons/sport.svg)}
.ic-lc{--i:url(/assets/icons/lc.svg)}
.ic-fish{--i:url(/assets/icons/fish.svg)}
.ic-sb-home{--i:url(/assets/icons/sb-home.svg)}
.ic-sb-notification{--i:url(/assets/icons/sb-notification.svg)}
.ic-sb-profile{--i:url(/assets/icons/sb-profile.svg)}
.ic-sb-bank{--i:url(/assets/icons/sb-bank.svg)}
.ic-sb-promotion{--i:url(/assets/icons/sb-promotion.svg)}
.ic-sb-referral{--i:url(/assets/icons/sb-referral.svg)}
.ic-sb-download{--i:url(/assets/icons/sb-download.svg)}
.ic-sb-translog{--i:url(/assets/icons/sb-translog.svg)}
.ic-sb-gameslog{--i:url(/assets/icons/sb-gameslog.svg)}
.ic-sb-contact{--i:url(/assets/icons/sb-contact.svg)}
.ic-sb-feedback{--i:url(/assets/icons/sb-feedback.svg)}
.ic-sb-logout{--i:url(/assets/icons/sb-logout.svg)}

#rm-cta-topup{background:var(--pa-deposit);color:var(--pa-deposit-fg);border:0}
.rm-btn-dep,.rm-side-topup,#rm-cta-topup,.rm-modal-submit.rm-green{position:relative;overflow:hidden}
.rm-btn-dep::after,.rm-side-topup::after,#rm-cta-topup::after,.rm-modal-submit.rm-green::after{content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:rm-shine 2.6s ease-in-out infinite;pointer-events:none}
@keyframes rm-shine{0%{left:-60%}55%{left:135%}100%{left:135%}}

/* iOS Safari fixed:bottom:0 在滑到底 rubber-band 時會跟著 viewport 彈 → 用 translateZ(0) 強 GPU compositing layer,重繪時位置抖動大幅減少
   (不套 html/body overscroll-behavior:none,避免傷到 Android Chrome 的 pull-to-refresh) */
.rm-bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--panel);min-height:81px;align-items:center;justify-content:space-evenly;
  padding:10px 4px calc(10px + env(safe-area-inset-bottom));transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}
body{padding-bottom:calc(81px + env(safe-area-inset-bottom))}
.rm-bn-item{flex:0 0 auto;width:54px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:#fff;font-weight:700;font-size:11px;
  padding:6px 2px;margin:0;border-radius:8px;transition:background .15s;white-space:nowrap}
.rm-bn-item .rm-ic{width:27px;height:27px}
.rm-bn-lineico{width:27px;height:27px;object-fit:contain;flex:0 0 auto}
/* active item: lapdee gold pill + dark label/icon (tkb777 footer-selected-item) */
.rm-bn-active{color:#ffffff;background:linear-gradient(to right,#b8007f,#ff4dc8,#b8007f);font-weight:700}
.rm-bn-active .rm-ic{background:#ffffff}

.rm-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:190}

/* footer */
.rm-footer{margin-top:30px;padding:26px 4px 10px;border-top:1px solid rgba(255,255,255,.06);text-align:center;color:var(--muted)}
.rm-footer-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}
.rm-footer-brand .rm-brandmark{height:40px}
.rm-footer-desc{font-size:13px;line-height:1.7;max-width:560px;margin:0 auto 14px}
.rm-footer-copy{font-size:12px;opacity:.7}

/* ===== responsive ===== */
@media(max-width:900px){
  .rm-topbar{padding:12px;gap:8px;min-height:79px}   /* match tkb header 79px exactly */
  .rm-brand{gap:8px}
  .rm-brandmark{height:54px}
  .rm-topbar-right{gap:8px}
  .rm-cta-btn{padding:14px}
}
/* grid columns follow tkb777's breakpoints: 6 / 5 / 4 / 3 at 891 / 890 / 686 / 600 */
@media(max-width:890px){ .rm-grid{grid-template-columns:repeat(5,1fr)} }
@media(max-width:686px){ .rm-grid{grid-template-columns:repeat(4,1fr);gap:10px} }
@media(max-width:600px){ .rm-grid{grid-template-columns:repeat(3,1fr);gap:8px} }
/* narrow phones: shrink the wordmark + buttons so they all fit */
@media(max-width:520px){
  .rm-topbar{padding:11px 10px;gap:6px}
  .rm-topbar-right .rm-btn{width:78px;font-size:12px}
  .rm-brand{gap:6px}
  .rm-brandmark{height:45px}
  .rm-hamburger{width:34px;height:34px}
  .rm-topbar-right{gap:6px}
}
/* tiny foldables (Galaxy Fold ~344px): buttons stay uniform; shrink the wordmark to make room */
@media(max-width:384px){
  .rm-topbar{padding:10px 8px}
  .rm-brandmark{height:39px}
  .rm-hamburger{width:32px;height:32px}
  /* tiny foldables (~344px): shrink both buttons together (still equal) for comfortable margin */
  .rm-topbar-right{gap:5px}
  .rm-topbar-right .rm-btn{width:68px;font-size:11px}
}

/* ===== desktop: sidebar pinned left (full-height bg); topbar search aligned to content frame (tkb777) ===== */
@media(min-width:1280px){
  .rm-hamburger{display:none}
  .rm-bottomnav{display:none}
  body{padding-bottom:0}   /* desktop 隱藏 nav 就不留位 */
  .rm-backdrop{display:none!important}
  /* topbar inner (search + auth) shares the same centered frame as content; logo floats over sidebar */
  /* header stays pinned on scroll like tkb (base rule is sticky; "relative" here used to override
     it and let the header scroll away). sticky is still a containing block for the absolute logo. */
  .rm-topbar{position:sticky;top:0;
    padding-left:max(300px, calc(300px + (100vw - 1400px)/2));
    padding-right:max(24px, calc((100vw - 1400px)/2))}
  .rm-topbar-left{position:absolute;left:30px;top:50%;transform:translateY(-50%)}
  .rm-search-top{display:none}   /* 桌面改用 .rm-filterrow 行內 search(靠右),不再用 header search */
  .rm-topbar-right{margin-left:auto}   /* search-top 沒了→按鈕仍靠右(topbar-left 是 absolute 不佔 flex 位) */
  /* tkb desktop sidebar (probed 1900px): total 300 wide, cards 246 @x27, first card 43px below the
     79px header; item content hugs LEFT (icon 27px from card edge, 18px, label at 55) */
  .rm-sidebar{position:fixed;left:0;top:0;bottom:0;height:100vh;width:300px;max-width:none;z-index:80;
    background:var(--panel);transform:none;overflow-y:auto;padding:122px 27px 40px;gap:32px}
  .rm-sidebar-head{display:none}  /* persistent desktop sidebar needs no close button */
  .rm-menu-item{padding:17px 26px 17px 27px;gap:10px}
  .rm-menu-item .rm-ic,.rm-menu-item .rm-flag{width:18px;height:18px}
  .rm-body{display:block;margin-left:300px}
  .rm-content{max-width:1100px;margin:0 auto;padding:16px 0 48px}
  .rm-grid{grid-template-columns:repeat(6,1fr)}
  .rm-tabs{justify-content:flex-start}
  .rm-authpage{margin:0 6% 0 auto}  /* login/register form sits right of centre like tkb777 */
  /* on an open info/auth page: hide topbar search but keep Register/Login pinned right */
  body.rm-authopen .rm-search-top{display:none}
  body.rm-authopen .rm-topbar-right{margin-left:auto}
}

/* ===== auth as full page (tkb777 style: lives inside content, topbar+nav stay) ===== */
.rm-authpage{display:none;max-width:460px;margin:0 auto;padding:8px 4px 40px}
/* inner page open: drop the home-page bottom padding reserves so a short page can't scroll
   into a big blank area under its button (Tom: deposit page must not scroll past Next) */
body.rm-authopen .rm-content{padding-bottom:20px}
/* inner pages (deposit/withdraw): tighten spacing so the whole form fits one phone screen
   (no scroll, no bottom hidden under the nav) + kill iOS rubber-band overscroll */
/* inner pages: scroll normally if needed, but hide the scrollbar bar (Tom: a little scroll is fine,
   just no visible scrollbar; button must never be cut) */
body.rm-authopen{scrollbar-width:none}
body.rm-authopen::-webkit-scrollbar{display:none}
body.rm-authopen .rm-content{padding-top:6px}
body.rm-authopen .rm-dephead{margin:0 0 10px}
body.rm-authopen .rm-chan{padding:8px 12px}
body.rm-authopen .rm-chan-row{margin-bottom:8px}
body.rm-authopen .rm-sec-label{margin:4px 0 6px}
body.rm-authopen .rm-sec-sub{margin:-2px 0 6px}
body.rm-authopen .rm-field{height:48px;margin-bottom:8px}
body.rm-authopen .rm-amt-box{height:48px;margin-bottom:10px}
body.rm-authopen .rm-amt-grid{gap:8px;margin-bottom:0}
body.rm-authopen .rm-amt{padding:9px 0}
body.rm-authopen .rm-modal-submit{height:48px;margin-top:8px}
/* stretch the inner page to fill the space between header and nav, then push the deposit button
   to the very bottom — it sits just above the nav on ANY screen height (no cut, no big blank) */

/* inner pages (deposit etc.): no visible scrollbar (Tom) — content still scrolls if it must */
body.rm-authopen{scrollbar-width:none}
body.rm-authopen::-webkit-scrollbar{display:none}
body.rm-authopen .rm-authpage{padding-bottom:10px}
.rm-authpage.on{display:block}
/* login has only 2 fields — push it down so the form sits nearer the middle (tkb777 centres it) */
.rm-authpage.rm-auth-login{padding-top:9vh;padding-top:9svh}
/* ==== deep-link auth pre-paint 骨架 =====================================================
   消除「居中小 spinner -> 整块登录卡」的内容突变(Gerald 报的「跳一下」)。骨架 = 登录卡的
   形状/位置:同一 #rm-authpage 容器、同 .rm-authcard 外框、同 9svh 顶距。app.js renderForm
   把真内容填进同一容器、openPage 移除 .rm-preskel-on -> 视觉是「骨架块->真字段」平滑填充,
   卡顶边同一 y、只往下长,不再有「小圈->大卡」的跳。 */
body.rm-preskel-on #rm-authpage{display:block;padding-top:9vh;padding-top:9svh}
.rm-skel-title,.rm-skel-field,.rm-skel-chip,.rm-skel-foot{background:rgba(255,255,255,.06);border-radius:10px}
.rm-skel-title{width:120px;height:26px;margin:0 auto 18px}
.rm-skel-field{height:48px;margin-bottom:8px}
.rm-skel-row{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 14px}
.rm-skel-chip{height:16px}
.rm-skel-chip:first-child{width:130px}.rm-skel-chip:last-child{width:96px}
.rm-skel-btn{height:48px;margin-top:8px;border-radius:10px;background:rgba(253,1,178,.16)}
.rm-skel-foot{height:16px;width:180px;margin:14px auto 0}
/* ==== 首页 <-> 登录/注册 视图切换的淡入 ==================================================
   Gerald 真机录屏证实:他从首页点 Masuk/Daftar 进入,openPage 的 display 硬切让满屏 banner
   「啪」地换成深色登录卡 = 他说的「跳一下」。给「将要显示的视图」加 160ms opacity 淡入变渐现。
   opacity animation 走合成层、不触发 layout,不引入位移、不拖慢感知。
   ⚠️ 仅「从首页/正常态进入」时挂(openPage wasOpen=false);deep-link /login 刷新 wasOpen=true
      不挂 -> 骨架无缝填充方案保持不变。反向(回首页)给 .rm-content 挂同一个淡入。 */
.rm-fadein{animation:rm-authfade .16s ease both}
@keyframes rm-authfade{from{opacity:0}to{opacity:1}}
/* #rm-marquee 加进这条既有规则 = 跑马灯只在首页出现。
   WHY 挂在 body.rm-authopen 而不是在每个 render 函数里各写一遍:openPage()/closeModal()
   是 SPA 唯一的切页出入口,它们只做一件事就是切这个 class —— 挂在这里,以后**新增页面
   自动生效**,不会像逐个 render 写那样必然漏掉。
   回首页时 class 一摘,显示权就交还给 fillMarquee() 的 inline style:BO 文案为空时它本来
   就是 display:none,所以「回首页」不会把一条空跑马灯放出来(元素在 index.html 里的初始
   状态也是 display:none,刷新直接进内页也不会闪一下)。 */
/* 内页隐藏 marquee 时,顺手把它的动画也暂停 —— display:none 理论上已不渲染,
   但加这条是双保险,确保任何情况下隐藏的 track 都不会有动画在空转。 */
body.rm-authopen .rm-marquee-track{animation-play-state:paused}
body.rm-authopen #rm-marquee,
body.rm-authopen .rm-banner,body.rm-authopen .rm-cta-row,
body.rm-authopen .rm-inforow-band,body.rm-authopen .rm-tabs,body.rm-authopen .rm-provwrap,body.rm-authopen .rm-slotfilter,body.rm-authopen .rm-filterrow,body.rm-authopen .rm-content .rm-search,
body.rm-authopen #rm-grid,body.rm-authopen .rm-back,body.rm-authopen .rm-footer,body.rm-authopen .maha-ultra-design{display:none!important}
.rm-authback{display:inline-flex;align-items:center;gap:6px;color:#8b93a7;cursor:pointer;font-size:15px;margin:6px 0 2px}
.rm-authback:before{content:"‹";font-size:24px;line-height:1}
.rm-modal-title{font-size:32px;font-weight:700;margin:2px 0 22px}
/* tkb777 .loginMobileTf-input-container: bg #141723, 1px white/30% border, radius 10, h 52,
   shadow 6/6/14 .25; 40px white line-art icon on the left; 20px/500 input text */
.rm-field{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:0 12px;height:52px;margin-bottom:14px;box-shadow:6px 6px 14px rgba(0,0,0,.25)}
.rm-field img,.rm-field-ico{width:42px;height:42px;object-fit:contain;opacity:1;flex:0 0 auto}
/* tkb error frame (--loginCommonTf-err-border: 1px solid #c7240f); focus (#0057ff) always wins so
   the box turns blue the moment you tap it, replacing the red — one glance shows where you are */
.rm-field.rm-err{border-color:#c7240f}
.rm-field:focus-within{border-color:var(--gold)}
.rm-field.rm-err:focus-within{border-color:#e0524d}
.rm-field .rm-prefix{color:#fff;font-weight:400;font-size:20px;padding-right:0}  /* tkb: no divider after +66, plain 20px */
.rm-field input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:20px;font-weight:500;font-family:inherit;min-width:0;text-overflow:ellipsis}
/* tkb bankDropDown placeholder: centred, 20px/700, light rgba(255,255,255,.5) — not solid white */
.rm-field .rm-select{flex:1;background:transparent;border:0;outline:0;color:rgba(255,255,255,.5);font-size:20px;font-weight:700;font-family:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;text-align:center;text-align-last:center}
/* bank account no: centred + same light placeholder as the select (tkb) */
.rm-field input#rm-bkno{text-align:center}
.rm-field input#rm-bkno::placeholder{color:rgba(255,255,255,.5)}
/* withdraw page: account no + amount centred (Tom) */
.rm-amt-box input#rm-wd-amt{text-align:center;padding-left:0}
/* ---- custom bank dropdown (native select can't show a logo; this can) ---- */
.rm-bankdd{position:relative;justify-content:space-between;cursor:pointer;gap:12px}
.rm-bankdd-label{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.5);font-size:20px;font-weight:700;overflow:hidden}
.rm-bankdd-label.sel{color:#fff}
.rm-bankdd-name{font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-bankdd .rm-arrow{margin-left:0;flex:0 0 auto;border-color:#8b93a7;transition:transform .15s}
.rm-bankdd.open .rm-arrow.rm-down{transform:rotate(-45deg);margin-top:4px}   /* flip chevron up when open */
/* selected/option bank badge stands in for the logo */
.rm-bankbadge{flex:0 0 auto;width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;letter-spacing:.3px}
/* popup: a real floating card (detached from the trigger), with an inner Search box + compact rows */
.rm-bankdd-pop{display:none;background:#191d2b;border:1px solid rgba(255,255,255,.22);border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.55);margin:8px 0 14px;padding:8px;max-height:300px;overflow-y:auto;scrollbar-width:none}
.rm-bankdd-pop::-webkit-scrollbar{display:none}
.rm-bankdd-pop.on{display:block}
.rm-bankdd-search{padding:2px 2px 8px;position:sticky;top:0;background:#191d2b;z-index:2}
.rm-bankdd-search input{width:100%;background:#0f1220;border:1px solid rgba(255,255,255,.18);border-radius:8px;
  padding:11px 13px;color:#fff;font-size:14px;outline:none;font-family:inherit}
.rm-bankdd-search input:focus{border-color:var(--gold)}
.rm-bankdd-search input::placeholder{color:var(--muted)}
.rm-bankdd-opt{display:flex;align-items:center;gap:12px;padding:11px 12px;cursor:pointer;border-radius:8px}
.rm-bankdd-opt:hover{background:rgba(255,255,255,.07)}
.rm-bankdd-opt span{font-size:15px;font-weight:500;color:#eef0f6}
/* 內文 span(banx bank name)拿剩餘寬,pill 是另一個 span 但走 flex:0(見 .rm-wd-pill)不搶寬 */
.rm-bankdd-opt>span:not(.rm-wd-pill):not(.rm-bankbadge){flex:1;min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-bankdd-opt .rm-cardsub{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-bankdd-opt .rm-bank-logo,.rm-bankdd-opt .rm-bankbadge{width:30px;height:30px}
.rm-bankdd-opt .rm-bankbadge{font-size:10px;border-radius:7px}
/* ---- withdraw: tkb dark rows + real bank logos (Logo_*.webp on white circle) ---- */
/* withdraw amount line reuses the deposit .rm-amt-box (same size/typography = coherent) */
.rm-wd-all{flex:0 0 auto;background:transparent;border:1.5px solid var(--pa-bronze-bd);color:var(--pa-bronze-fg);border-radius:9px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;box-shadow:4px 4px 8px rgba(0,0,0,.3)}
/* softened white (Tom: 不要死白) — off-white gradient instead of flat #fff */
button.rm-soft{background:linear-gradient(180deg,#f2f4f7,#d5d9e2);color:#111;border:1px solid rgba(255,255,255,.35)}
/* bank dropdown: logo + name all left-aligned, grey like the Enter Amount placeholder;
   logo itself = .rm-bank-logo, the same class/size the deposit page uses */
.rm-wd-bankdd .rm-bankdd-label{justify-content:center}          /* bank name centred (Tom) */
/* logo pinned to the far LEFT of the field while the name stays centred (Tom) */
.rm-wd-bankdd .rm-bankdd-label .rm-bank-logo{width:30px;height:30px;position:absolute;left:12px;top:50%;transform:translateY(-50%)}
.rm-wd-bankdd .rm-bankdd-label.sel{color:rgba(255,255,255,.5)}
.rm-wd-bankdd .rm-bankdd-label .rm-bankdd-name{color:rgba(255,255,255,.5);font-weight:500}  /* 16/500 = deposit's bank name */
/* account no: display-only (no focus/caret), left-aligned, deposit-matched 16/500, grey */
.rm-wd-static{gap:12px}  /* icon-to-text = the 12px the bank row above uses */
.rm-wd-static input#rm-wd-accno{color:rgba(255,255,255,.5);pointer-events:none;text-align:center;font-size:22px;font-weight:500}
/* min line: slightly smaller than .rm-sec-sub (double class so it outranks the 13px base rule) */
.rm-sec-sub.rm-wd-min{font-size:12px}
.rm-field .rm-select option{background:#161a23;color:#fff}
.rm-select-field{position:relative}
.rm-select-field:after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid #8b93a7;border-bottom:2px solid #8b93a7;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.rm-field input::placeholder{color:#6b7180}
.rm-field .rm-eye{cursor:pointer;opacity:1;width:42px;height:42px;object-fit:contain;flex:0 0 auto}
/* tkb auth submit (btnV2-r10): h 42 — deliberately SMALLER than the 52px input fields */
.rm-modal-submit{width:100%;height:44px;border:0;border-radius:10px;background:var(--pa-primary);color:var(--pa-primary-fg);font-weight:700;font-size:18px;cursor:pointer;margin-top:8px;font-family:inherit;box-shadow:6px 6px 12px rgba(0,0,0,.25)}
.rm-modal-submit.rm-green{background:var(--pa-deposit);color:var(--pa-deposit-fg);border:0}
.rm-modal-err{color:#ff6b6b;font-size:13px;margin:-6px 0 12px;min-height:16px}
.rm-field-err.ok{color:var(--green1)}   /* username availability: green ✓ when free */
/* inline field error (red, under the input) — for phone-length validation, tkb777 style */
.rm-field-err{color:#e0250c;font-size:13px;font-weight:500;margin:-8px 0 12px 4px;min-height:0}
.rm-field-err:empty{margin:0}
.rm-login-opts{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 18px}
.rm-remember{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--muted);font-size:14px}
/* tkb777: round green check (not a square checkbox) */
.rm-remember input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  border:2px solid #5a5c65;background:transparent;cursor:pointer;flex:0 0 auto;margin:0}
.rm-remember input:checked{background:#22c440 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8.5l3.2 3.2L13 5" stroke="white" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/13px no-repeat;border-color:#22c440}
.rm-forgot{color:#c7cbd6;font-size:14px;text-decoration:underline;cursor:pointer}
/* tkb777 redirect box: bordered container, text left + button right */
.rm-modal-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;
  min-height:58px;padding:8px 8px 8px 16px;border:1px solid rgba(255,255,255,.3);border-radius:10px}
.rm-switch-txt{color:#c7cbd6;font-size:12px;font-weight:400}
.rm-switch-btn{flex:0 0 auto;min-width:88px;height:42px;padding:0 16px;border:1.5px solid var(--pa-gold-bd);
  border-radius:10px;background:transparent;color:var(--pa-gold-fg);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap}
/* ---- C 單卡集中式 Register/Login:scoped 到 .rm-authcard,不動 deposit/withdraw 共用的 .rm-field ---- */
.rm-authcard{max-width:420px;margin:0 auto;background:#131a2e;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px 20px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.rm-authcard .rm-modal-title{font-size:22px;margin:0 0 18px;text-align:center}
/* body.rm-authopen 前綴:壓過既有 body.rm-authopen .rm-field(0,2,1) 的高度/間距 */
body.rm-authopen .rm-authcard .rm-field{height:44px;margin-bottom:10px}
body.rm-authopen .rm-authcard .rm-modal-submit{height:46px;margin-top:6px}
.rm-authcard .rm-field{gap:8px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:none}
.rm-authcard .rm-field:focus-within{border-color:rgba(122,139,243,.75);background:rgba(255,255,255,.06)}
.rm-authcard .rm-field img,.rm-authcard .rm-field-ico,.rm-authcard .rm-field .rm-eye{width:22px;height:22px}
.rm-authcard .rm-field input,.rm-authcard .rm-field .rm-prefix,.rm-authcard .rm-field-select select{font-size:15px}
.rm-form-div{height:1px;background:rgba(255,255,255,.08);margin:2px 2px 14px}
.rm-authcard .rm-modal-submit{box-shadow:none}
.rm-authcard .rm-login-opts{margin:2px 2px 14px}
.rm-authcard .rm-modal-switch{margin-top:14px;min-height:auto;padding:11px 11px 11px 16px;border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.rm-info-body{color:#c7cbd6;font-size:15px;line-height:1.7;margin:0 0 20px}

/* ---- Contact Us: LINE chat cards ---- */
.rm-line-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid rgba(253,1,178,.35);border-radius:14px;padding:15px 18px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.rm-line-name{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;color:#fff}
/* Contact 頁 LINE brand icon(綠底 SVG),用專屬 class 避開 line 846 提款頁 .rm-line-ico 白圓底樣式 */
.rm-lineico-brand{display:inline-flex;width:30px;height:30px;flex:0 0 auto}
.rm-lineico-brand svg{width:100%;height:100%;display:block}
/* 金色主題按鈕,對齊站上其他 CTA(pa-primary) */
.rm-line-btn{background:var(--pa-primary);color:var(--pa-primary-fg);font-weight:800;text-decoration:none;padding:11px 24px;border-radius:10px;white-space:nowrap;cursor:pointer;border:1px solid #b8007f;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rm-line-btn:active{filter:brightness(.9)}
/* ---- Promotion cards ---- */
/* Rewards list card:固定高 260px、圖撐滿、底部 dark overlay 壓 title(不因 title 長度變高)+ 金色 pill/button + shimmer */
.rm-rw-list{display:flex;flex-direction:column;gap:14px}
.rm-rw-card{position:relative;height:260px;border-radius:14px;overflow:hidden;background:#01051b;border:1px solid rgba(253,1,178,.35);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.rm-rw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;display:block}
.rm-rw-shade{position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,transparent 0%,rgba(10,10,13,.65) 45%,rgba(10,10,13,.96) 100%);pointer-events:none}
.rm-rw-shine{position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(246,196,83,.28),transparent);transform:skewX(-18deg);animation:rm-rw-shine 4s ease-in-out infinite;pointer-events:none}
@keyframes rm-rw-shine{0%{transform:translateX(-100%) skewX(-18deg)}100%{transform:translateX(340%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){.rm-rw-shine{display:none}}
/* Pill:小方角 chip,金字金邊 dark 底;rebate/cashback 不同 accent */
.rm-rw-pill{position:absolute;top:12px;right:12px;background:rgba(10,10,13,.75);color:var(--pa-gold-fg);border:1px solid rgba(246,196,83,.55);font-size:10px;font-weight:800;padding:5px 10px;border-radius:4px;letter-spacing:1.5px;text-transform:uppercase;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.rm-rw-pill--cashback{color:#ff4dc8;border-color:rgba(246,196,83,.7)}
/* Title:底部左側 overlay,固定寬 fit for 2 lines,不擠壓 button */
.rm-rw-title{position:absolute;left:16px;right:120px;bottom:20px;font-size:18px;font-weight:800;color:#fff;line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Learn More:金漸變小 chip button */
.rm-rw-learn{position:absolute;right:14px;bottom:14px;background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #b8007f;border-radius:6px;padding:7px 12px;font-weight:800;font-size:11px;letter-spacing:.5px;cursor:pointer;font-family:inherit;white-space:nowrap;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rm-rw-learn:active{transform:scale(.96)}
/* Rewards detail:hero(image + pill 右上 + ← →)+ premium 卡片(eyebrow / h1 金渐变 / sub / 2x2 grid / rules card / brand)+ dots + GO */
.rm-rwd-hero{position:relative;height:220px;border-radius:14px;overflow:hidden;margin-bottom:16px;background:#01051b}
.rm-rwd-img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.rm-rwd-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:8px;background:rgba(10,10,13,.65);color:var(--pa-gold-fg);border:1px solid rgba(246,196,83,.4);font-size:20px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.rm-rwd-prev{left:12px}
.rm-rwd-next{right:12px}
.rm-rwd-nav:active{transform:translateY(-50%) scale(.94)}
/* Pill 移到右上,配色跟 list card 一致 */
.rm-rwd-pill{position:absolute;top:12px;right:12px;background:rgba(10,10,13,.78);color:var(--pa-gold-fg);border:1px solid rgba(246,196,83,.55);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* Premium card:圆角深底 + 顶部液体金 4px 装饰 + 内部三段(head / grid / rules) */
.rm-rwd-card{position:relative;background:#01051b;border:1px solid #0a1020;border-radius:24px;padding:22px 18px;box-shadow:0 12px 40px rgba(0,0,0,.6),inset 0 0 20px rgba(253,1,178,.05);overflow:hidden;margin-bottom:16px}
.rm-rwd-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,#fd01b2,#ff9fe0,#fd01b2,transparent)}
.rm-rwd-head{text-align:center;margin-bottom:24px}
.rm-rwd-eyebrow{color:#888;font-size:11px;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.rm-rwd-h1{font-size:26px;font-weight:900;margin:0;background:linear-gradient(180deg,#ffd0f0 0%,#e21ba3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 16px rgba(253,1,178,.2));line-height:1.2}
.rm-rwd-sub{color:#e21ba3;font-weight:700;font-size:12px;letter-spacing:.8px;margin-top:10px}
.rm-rwd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.rm-rwd-gcell{background:linear-gradient(145deg,#111,#01051b);border:1px solid #0a1020;padding:14px 10px;border-radius:14px;text-align:center;display:flex;flex-direction:column;gap:6px}
.rm-rwd-glbl{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:1px}
.rm-rwd-gval{font-size:13px;color:#e0e0e0;font-weight:800}
.rm-rwd-gval.gold{color:#fd01b2}
.rm-rwd-rules{background:#01051b;border-radius:16px;padding:18px;border:1px solid #111}
.rm-rwd-desc{font-size:12.5px;color:#ccc;line-height:1.8;text-align:center;margin-bottom:18px}
.rm-rwd-rulesT{color:#fd01b2;font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.rm-rwd-rulesT::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#3a0f30,transparent)}
.rm-rwd-rulist{list-style:none;padding:0;margin:0}
.rm-rwd-rulist li{color:#888;font-size:12.5px;line-height:1.75;margin-bottom:10px;position:relative;padding-left:18px}
.rm-rwd-rulist li:last-child{margin-bottom:0}
.rm-rwd-rulist li::before{content:"\2726";position:absolute;left:0;top:1px;color:#e21ba3;font-size:10px}
.rm-rwd-gold{color:#e21ba3;font-weight:600}
.rm-rwd-brand{text-align:center;margin-top:20px;font-size:9px;color:#333;letter-spacing:3px}
.rm-rwd-dots{display:flex;justify-content:center;gap:6px;margin-bottom:18px}
.rm-rwd-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25)}
.rm-rwd-dot.on{background:var(--pa-gold-fg);width:20px;border-radius:100px}
.rm-rwd-go{margin-top:0}
/* ---- Affiliate tier card ---- */
.rm-aff-card{background:var(--card);border-radius:16px;padding:26px 20px;text-align:center}
.rm-aff-h1{color:var(--green1);font-size:24px;font-weight:800}
.rm-aff-h2{color:var(--muted);font-size:14px;margin-bottom:22px}
.rm-aff-you{display:inline-block;background:var(--card2);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 30px;font-weight:700;margin-bottom:4px}
.rm-aff-tiers{display:flex;flex-direction:column;gap:10px;max-width:300px;margin:14px auto 20px}
.rm-aff-tier{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--green1),var(--green2));color:#06371f;border-radius:10px;padding:12px 22px;font-weight:800;font-size:15px}
.rm-aff-unlimited{background:linear-gradient(135deg,var(--green1),var(--green2));color:#06371f;font-weight:800;border-radius:12px;padding:16px;font-size:16px}
.rm-aff-card{margin-bottom:16px}
.rm-aff-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.rm-aff-tab{background:var(--card2);color:#cfd3dc;border-radius:10px;padding:9px 18px;font-weight:700;font-size:13px;cursor:pointer}
/* .rm-aff-tab.on 舊 dead code:affiliate 已下線,樣式移除 */
.rm-aff-banner{height:130px;border-radius:12px;display:flex;align-items:flex-end;padding:16px;font-size:24px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:16px}
.rm-aff-green-title{color:var(--green1);font-size:22px;font-weight:800;text-align:center;line-height:1.25;margin:4px 0 12px}
.rm-aff-dd-desc{text-align:center;color:#c7cbd6;font-size:14px;margin:0 0 8px}
.rm-aff-calc{text-align:center;font-size:18px;font-weight:700}
.rm-aff-calc b{color:var(--green1)}
.rm-aff-how{color:var(--green1);font-size:22px;font-weight:800;text-align:center;margin-bottom:18px}
.rm-aff-step{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.rm-aff-num{flex:0 0 auto;font-size:30px;font-weight:800;font-style:italic;color:var(--green1);min-width:26px;border-left:3px solid var(--green1);padding-left:6px;line-height:1}
.rm-aff-step p{margin:0;color:#dfe2ea;font-size:14px;line-height:1.5}
.rm-aff-turnover{background:var(--card);border-radius:14px;padding:18px;text-align:center}
.rm-aff-turn-title{color:var(--green1);font-weight:800;font-size:15px;margin-bottom:6px}
.rm-aff-turnover p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
/* logged-in wallet widget */
.rm-wallet{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#350bc8,#8633c3,#b72dbc);color:#fff;font-weight:700;
  padding:9px 16px;border-radius:12px;cursor:pointer;white-space:nowrap;box-shadow:6px 6px 12px rgba(0,0,0,.4)}
.rm-wallet small{opacity:.85;font-weight:500}

/* ===== logged-in header userbar ===== */
/* logged-in: the right side MUST be shrinkable (flex:0 1 auto + min-width:0), otherwise the
   parent's flex:0 0 auto keeps it rigid and the $⊕ deposit icon gets pushed off-screen (#8) */
.rm-topbar-right.rm-logged{display:flex;align-items:center;gap:14px;flex:0 1 auto;min-width:0}
.rm-bal{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#350bc8,#8633c3);color:#fff;
  padding:8px 14px;border-radius:12px;cursor:pointer;white-space:nowrap}
.rm-bal-user{font-size:12px;opacity:.85;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.rm-bal-amt{font-size:15px;font-weight:800}
.rm-bal-ref{font-size:14px;opacity:.85;cursor:pointer;padding:0 2px}
/* wallet-page Deposit/Withdraw = tkb btnV2 pair: bright flat green + white text / white + black text */
.rm-btn-dep{background:var(--pa-deposit);color:var(--pa-deposit-fg);border:0}
.rm-btn-wd{background:transparent;color:var(--pa-bronze-fg);border:1.5px solid var(--pa-bronze-bd)}
.rm-logout{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;width:40px;height:40px;
  border-radius:10px;cursor:pointer;font-size:16px;flex:0 0 auto}
.rm-logout:active{transform:translateY(1px)}
/* logged-in-only sidebar items (hidden until authed) */
.rm-auth-only{display:none!important}
body.rm-authed .rm-menu-item.rm-auth-only{display:flex!important}
body.rm-authed .rm-menu-card.rm-auth-only{display:block!important}
body.rm-authed .rm-menu-sep.rm-auth-only{display:block!important}
.rm-logout-item span{color:#ff6b6b}
/* sidebar Top Up / Withdraw (logged-in, at top) */
body.rm-authed .rm-side-topbtns.rm-auth-only{display:flex!important}
/* tkb drawer Top Up / Withdraw: tall bordered pair */
.rm-side-topbtns{gap:16px}
.rm-side-topbtns .rm-btn{flex:1;height:52px;padding:0;font-size:20px;font-weight:700;border-radius:14px}
.rm-side-topup{background:var(--pa-deposit);color:var(--pa-deposit-fg);border:0}
.rm-side-wd{background:transparent;color:var(--pa-bronze-fg);border:1.5px solid var(--pa-bronze-bd)}
/* login welcome popup */
.rm-pop-ov{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:900;display:flex;align-items:center;justify-content:center;padding:20px}  /* above the game layer (z800) */
/* Live Chat 獨立頁:全屏 iframe 裝 assets/livechat.html(純前端 mock,零外部) */
.rm-page-chip.rm-lc-titlechip{font-size:8px;height:26px;padding:0 12px;border-radius:8px}   /* Live Chat 標題字縮 50%(16→8);複合選擇器蓋過 .rm-page-chip */
.rm-lc-page{margin-top:8px}
/* iframe 高度算在 dephead 與固定底部 nav(81px)之間,讓假聊天輸入框完整露出不被 footer 擋 */
.rm-lc-pageframe{width:100%;height:calc(100dvh - 220px);min-height:340px;border:0;display:block;background:#0e1424;border-radius:14px;overflow:hidden}
.rm-pop{position:relative;background:#171a26;border-radius:18px;max-width:400px;width:100%;padding:30px 26px 26px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.rm-pop-close{position:absolute;top:12px;right:16px;font-size:24px;color:#8b93a7;cursor:pointer;line-height:1}
.rm-pop-art{font-size:56px;margin-bottom:12px}
.rm-pop-title{font-size:22px;font-weight:800;color:var(--green1);margin-bottom:12px}
.rm-pop-body{font-size:14px;color:#c7cbd6;line-height:1.7;margin-bottom:22px}
.rm-pop-ok{width:100%;height:50px;border:0;border-radius:12px;background:linear-gradient(135deg,#8633c3,#b72dbc);color:#fff;font-weight:800;font-size:16px;cursor:pointer;font-family:inherit}
/* CMS entry popup: centered image + close X (shows when BO configures a popup) */
.rm-entrypop{position:relative;max-width:420px;width:100%}
.rm-entrypop img{width:100%;height:auto;border-radius:14px;display:block}
.rm-entrypop-close{position:absolute;top:-14px;right:-6px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:22px;line-height:1;cursor:pointer}
/* BO popup 富文本容器（getSiteConfig.popup）：深色卡片，跟 .rm-alert / .rm-promo-content 同一套视觉 */
.rm-entrypop-body{background:#20263a;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px;color:#cfd6e4;font-size:14px;line-height:1.7;max-height:70vh;overflow:auto;word-break:break-word}
.rm-entrypop-body img{width:100%;height:auto;border-radius:10px;display:block;margin:8px 0}
.rm-entrypop-body a{color:#7db4ff;word-break:break-all}
.rm-entrypop-body strong,.rm-entrypop-body b{color:#ffd66b}
.rm-entrypop-body ol,.rm-entrypop-body ul{padding-left:20px;margin:8px 0}
/* error alert popup (tkb777 style): dark rounded card + orange-gradient Ok button */
.rm-alert{background:#20263a;border:1px solid rgba(255,255,255,.14);border-radius:18px;max-width:420px;width:100%;padding:28px 24px 22px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.rm-alert-msg{font-size:19px;font-weight:700;color:#fff;line-height:1.5;margin-bottom:22px;word-break:break-word;overflow-wrap:anywhere}
.rm-alert-ok{width:100%;height:50px;border:0;border-radius:12px;background:var(--pa-primary);color:var(--pa-primary-fg);font-weight:800;font-size:17px;cursor:pointer;font-family:inherit}
/* confirm variant (tkb): blue-gradient Ok + underlined Cancel below */
.rm-confirm-ok{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #b8007f}
.rm-confirm-cancel{margin-top:16px;text-align:center;color:var(--pa-cancel-fg);font-size:15px;text-decoration:underline;cursor:pointer}
/* ---- withdraw (verified bank, tkb layout) ---- */
.rm-wd-etarow{display:flex;gap:12px;margin:2px 0 14px}
.rm-wd-eta{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:10px;padding:12px 14px;color:#ff3b30;font-weight:700;font-size:15px}
.rm-wd-etaico{font-size:18px;line-height:1}
.rm-wd-report{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #35d05f;border-radius:10px;padding:12px 10px;color:#fff;font-weight:600;font-size:14px;cursor:pointer}
.rm-wd-report img{width:24px;height:24px;object-fit:contain}
.rm-wd-carddd{height:auto;min-height:64px;padding:10px 14px}
.rm-wd-cardsel{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}
.rm-wd-cardtxt{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.rm-wd-cardtxt span{font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-wd-cardtxt b{font-size:16px;font-weight:700;color:#fff}
.rm-wd-balcard{padding:18px 20px}
.rm-wd-balrow{display:flex;gap:14px;padding:6px 0;font-size:16px}
.rm-wd-balrow span{color:#cfd3dc;min-width:170px}
.rm-wd-balrow b{font-weight:700}
.rm-wd-green{color:#35d05f}
.rm-wd-amtbox input{text-align:center;font-size:22px;font-weight:700}
.rm-wd-confirm{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #b8007f}
.rm-wd-confirm:disabled{opacity:.55;cursor:default}
/* ===== in-page game view (tkb style): fullscreen iframe + "< name ... ID" top bar ===== */
#rm-gamewrap{position:fixed;inset:0;z-index:800;background:#0b0e18;display:flex;flex-direction:column}
.rm-gametop{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;background:#141723;flex:0 0 auto}
.rm-gameback{width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.rm-gameback:before{content:"";width:11px;height:11px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg)}
.rm-gamename{flex:1;min-width:0;color:#fff;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-gameid{flex:0 0 auto;color:var(--muted);font-size:13px;font-weight:600}
.rm-gameframe{flex:1;width:100%;border:0;background:#000}
body.rm-gameopen{overflow:hidden;height:100vh;height:100dvh}
/* login/register loading spinner */
.rm-loading-ov{position:fixed;inset:0;background:rgba(8,10,18,.72);z-index:950;display:none;align-items:center;justify-content:center}  /* above game + popups */
.rm-loading-ov.on{display:flex}
@keyframes rm-spin{to{transform:rotate(360deg)}}
.rm-spinner{display:flex;gap:12px}
.rm-spinner span{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#7fe7c4,#2fd07a);animation:rm-bounce 1s infinite ease-in-out}
.rm-spinner span:nth-child(2){animation-delay:.16s;background:linear-gradient(135deg,#6ec3ff,#2d6cf6)}
.rm-spinner span:nth-child(3){animation-delay:.32s;background:linear-gradient(135deg,#c88bff,#8633c3)}
@keyframes rm-bounce{0%,80%,100%{transform:scale(.4);opacity:.5}40%{transform:scale(1);opacity:1}}
/* header wallet pill + deposit icon (logged in) — tkb .wallet-balance-container:
   white box w144 h42, radius 10, shadow 4/4/4 .75, 20px card icon, amount right-aligned 700 */
.rm-wpill{display:flex;align-items:center;gap:34px;background:var(--panel);color:#ff4dc8;border-radius:10px;padding:11px 14px;cursor:pointer;
  white-space:nowrap;font-weight:700;width:auto;min-width:96px;flex-shrink:0;height:42px;justify-content:flex-start;
  box-shadow:inset 0 0 0 1px #b8007f,4px 4px 4px rgba(0,0,0,.55);overflow:hidden}
.rm-wpill-ico{width:20px;height:20px;flex:0 0 auto;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;background:linear-gradient(180deg,#ff4dc8,#a81b7f)}
.rm-wpill .rm-bal-amt{font-size:11px;font-weight:700}   /* 原 14px -> 11px(Gerald 2026-07-23);字变小=右区更宽松=能完整显示的余额位数变多 */
.rm-hd-noti{position:relative;width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:10px;background:var(--panel);box-shadow:inset 0 0 0 1px #b8007f,4px 4px 4px rgba(0,0,0,.55)}
.rm-hd-noti-ic{width:22px;height:22px;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;background:linear-gradient(180deg,#ff4dc8,#a81b7f)}
.rm-hd-noti-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ff2d55;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.rm-noti-c{color:var(--muted);font-size:13px;margin:4px 0;line-height:1.4}
/* tkb .fund-button-container: white rounded box (r10, 5px pad) + 32px dark $⊕ icon */
.rm-depicon{width:42px;height:42px;border-radius:10px;background:var(--pa-deposit);border:0;padding:5px;
  box-shadow:4px 4px 4px rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.rm-depicon img{width:32px;height:32px;object-fit:contain}
/* logged-in CTA: Top Up / Withdraw both white (tkb777) */
.rm-cta-wbtn{background:transparent;color:var(--pa-bronze-fg);border:1.5px solid var(--pa-bronze-bd)}
.rm-depicon:active{transform:translateY(1px)}

/* ── 登入态 topbar:存款按钮在任何宽度都必须完整可见可点 ──────────────────────
   🔴 那是入金入口,被切掉等于挡住收钱。
   BUG(2026-07-23 实测):.rm-wpill 不可压缩(没有 min-width:0),而且图标与金额之间
   有 34px 的展示型 gap。余额一长,pill 就把存款按钮整个顶出屏幕 —— 320px 下余额只要
   >= 50.000 IDR 按钮就被切,>= 10.098.400 时完全在屏外(right=365 > vw=320)。
   topbar 又不横向滚,所以按钮是真的**够不着**,不是滑一下就能看到。
   修法按「先回收无用空间,再谈牺牲信息」的顺序:
     ① 存款/铃铛 flex:0 0 auto —— 永不压缩、永不被挤出(硬性要求)
     ② 只让钱包 pill 让位(flex:0 1 auto + min-width:0)
     ③ 窄屏收掉那个 34px 展示型 gap 与多余内距 —— 这一步就够正常余额完整显示
     ④ 金额省略号只作**最后保险**:极端长度(十亿级)才会截断。
        WHY 不一上来就用省略号:余额是玩家最关心的数字,能完整显示就不该截。 */
.rm-topbar-right.rm-logged{min-width:0}
.rm-topbar-right.rm-logged .rm-hd-noti,
.rm-topbar-right.rm-logged .rm-depicon{flex:0 0 auto}
.rm-topbar-right.rm-logged .rm-wpill{flex:0 1 auto;min-width:0}
.rm-wpill .rm-bal-amt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:430px){
  /* 34px 的 gap 是为宽屏的 tkb 观感留的,窄屏纯属浪费 —— 收回来就是存款按钮的活路 */
  .rm-wpill{gap:8px;padding:11px 10px}
  .rm-topbar-right.rm-logged{gap:6px}
}
/* <=360px:右区实测只有 179px,而 铃铛42 + pill + 存款38 需要 210px —— 缺 31px。
   按「先收无用空间、再缩非关键元素、最后才动金额字号」的顺序继续回收,
   目的是让常见余额(百万级)能完整显示,而不是一上来就打省略号。
   铃铛是通知入口,优先级低于余额可读性与存款可点,所以它先让。 */
@media(max-width:360px){
  .rm-topbar-right.rm-logged{gap:5px}
  .rm-topbar-right.rm-logged .rm-hd-noti{width:34px;height:34px}
  .rm-wpill{gap:6px;padding:9px 8px}
  .rm-wpill-ico{width:16px;height:16px}
  .rm-wpill .rm-bal-amt{font-size:10px}   /* 原 13px */
}
/* wallet page */
/* tkb wallet card: labels above/below the amount are plain WHITE (not muted), amount has no forced decimals */
/* A3 金屬邊+ shimmer + 品牌 logo 背景大水印(董事長 2026-07-13 選中) */
.rm-wallet-card{position:relative;overflow:hidden;padding:22px;border-radius:16px;border:2px solid transparent;background:linear-gradient(#0a0e20,#0a0e20) padding-box,linear-gradient(135deg,#ff4dc8,#b8007f,#ff4dc8) border-box;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.rm-wallet-title{font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:44px;color:var(--pa-gold-fg)}
.rm-wallet-lbl{color:var(--muted);font-size:14px}
.rm-wallet-amt{font-size:36px;font-weight:800;margin:4px 0 4px;letter-spacing:-.5px;background:linear-gradient(90deg,#ff4dc8 20%,#ffe3f6 50%,#b8007f 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rm-wallet-wd{color:var(--muted);font-size:12px}
.rm-wallet-wm{position:absolute;right:-20px;top:50%;transform:translateY(-50%) rotate(-14deg);opacity:.22;width:290px;height:auto;pointer-events:none;user-select:none}
.rm-wallet-card::after{content:"";position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:rm-wallet-shine 3.5s ease-in-out infinite;pointer-events:none}
@keyframes rm-wallet-shine{0%{transform:translateX(-100%) skewX(-18deg)}100%{transform:translateX(340%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){.rm-wallet-card::after{animation:none;display:none}}
.rm-wallet-actions{display:flex;gap:16px}
.rm-wallet-actions .rm-btn{flex:1;height:52px;padding:0;font-size:20px;font-weight:700;border-radius:16px;box-shadow:6px 6px 12px rgba(0,0,0,.25)}
.rm-noti-t{font-weight:700;font-size:14px}
.rm-noti-d{color:var(--muted);font-size:12px;margin-top:4px}
/* ===== member pages (deposit / withdraw / profile / history) ===== */
/* tkb deposit head: white "< Back" pill + dark title chip */
.rm-dephead{display:flex;gap:14px;margin:6px 0 18px}
/* tkb .back-nav-back-btn-container: dark #141723 pill, 0.4px white/30% border, shadow 6/6/14,
   h42, pad 0 16, white 700 label — NOT a white pill */
.rm-back-pill{display:flex;align-items:center;gap:12px;background:#141723;color:#fff;font-weight:700;font-size:16px;
  border-radius:10px;padding:0 16px;height:42px;cursor:pointer;box-shadow:6px 6px 14px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.3)}
/* tkb navBack: bold white chevron (dark pill) */
.rm-back-pill:before{content:"";width:10px;height:10px;border-left:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(45deg);flex:0 0 auto}
.rm-page-chip{display:flex;align-items:center;background:#20263a;color:#cfd3dc;font-weight:700;font-size:16px;border-radius:12px;padding:0 20px;height:46px}
/* tkb register-bank step indicator: done(✓) — line — current(2), both green circles */
.rm-steps{display:flex;align-items:center;justify-content:center;margin:2px 0 22px}
.rm-step{width:28px;height:28px;border-radius:50%;background:#22c440;color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rm-step-line{width:60px;height:2px;background:rgba(255,255,255,.25)}
/* tkb method tabs (Auto / Bank QR): bordered pills with a green status dot, active = white */
.rm-method-card{display:flex;gap:10px;padding:8px}
.rm-method{position:relative;height:42px;padding:0 20px;border-radius:8px;border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;font-weight:700;font-size:14px;color:#fff;cursor:pointer;background:transparent}
.rm-method.on{background:var(--pa-primary);color:var(--pa-primary-fg);border-color:#b8007f}
.rm-method:after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#3ddc5a}
.rm-field .rm-ico-sm{width:26px;height:26px}
.rm-field input[readonly]{cursor:default}
/* ---- 旧模板版式的存款页: channel buttons (Bank Transfer / PromptPay QR) with amount range ---- */
.rm-chan-row{display:flex;gap:12px;margin-bottom:16px}
.rm-chan{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer}
.rm-chan.on{background:var(--pa-primary);color:var(--pa-primary-fg);border-color:#b8007f}
.rm-chan-ic{width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.rm-chan.on .rm-chan-ic{filter:invert(1)}
.rm-chan-qr{font-size:26px;line-height:1;flex:0 0 auto;color:#fff}
.rm-chan.on .rm-chan-qr{color:#111}
.rm-chan-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.rm-chan-t b{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-chan-t small{font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap}
.rm-chan.on .rm-chan-t b{color:#111}
.rm-chan.on .rm-chan-t small{color:#555}
/* section headings + minimum-deposit hint */
.rm-sec-label{font-size:15px;font-weight:700;color:#e6e9f2;letter-spacing:.2px;margin:10px 0 10px}
.rm-sec-sub{font-size:13px;font-weight:400;color:var(--muted);margin:-4px 0 10px}
/* (THB) prefix in the amount box + 4-column quick picks */
.rm-amt-cur.rm-amt-thb{color:var(--muted);font-size:15px;font-weight:400}
.rm-amt-grid4{grid-template-columns:repeat(4,1fr)}
/* real bank logo (Transfer From) instead of a colour badge */
.rm-bank-logo{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* deposit Transfer From: logo + name LEFT-aligned (register-bank stays centred) */
#rm-dep-bkt .rm-bankdd-label{justify-content:flex-start;gap:12px}
#rm-dep-bkt .rm-bankdd-name{font-size:16px;font-weight:500;color:#fff}
/* Enter Amount preview text: sized/aligned in the base .rm-amt-box input rule below (18px, left) */
.rm-amt-box input::placeholder{font-weight:400}
.rm-dw-tabs{display:flex;gap:0;background:var(--panel);border-radius:12px;padding:5px;margin-bottom:16px}
.rm-dw-tab{flex:1;text-align:center;padding:12px;border-radius:9px;font-weight:700;font-size:15px;color:var(--muted);cursor:pointer}
.rm-dw-tab.on{background:linear-gradient(135deg,var(--green1),var(--green2));color:#06371f}
/* tkb member cards: visible 1px white/30% border + shadow */
.rm-mcard{background:var(--card);border:1px solid rgba(255,255,255,.3);border-radius:10px;box-shadow:6px 6px 12px rgba(0,0,0,.25);padding:16px;margin-bottom:14px}
.rm-mlabel{font-size:13px;color:var(--muted);margin-bottom:12px}
/* deposit amount box: ฿ on the left, big centered amount, Clear on the right (tkb777 style) */
.rm-amt-box{display:flex;align-items:center;gap:10px;background:#0f1220;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 12px;height:64px;margin-bottom:12px}
.rm-amt-cur{color:var(--green1);font-size:24px;font-weight:800;flex:0 0 auto}
.rm-amt-box input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:18px;font-weight:500;text-align:left;padding-left:8px;font-family:inherit}
.rm-amt-box input::placeholder{color:#6b7180}
.rm-amt-clear{flex:0 0 auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:9px;padding:9px 14px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.rm-amt-err{color:#ff6b6b;font-size:13px;min-height:16px;margin:-4px 0 8px;padding:0 2px;font-weight:500}
.rm-amt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.rm-amt{background:var(--card2);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:14px 0;font-weight:500;font-size:16px;cursor:pointer}
.rm-amt.on{background:linear-gradient(135deg,var(--green1),var(--green2));color:#06371f;border-color:transparent}
.rm-bankrow{display:flex;align-items:center;gap:12px}
.rm-bankicon{flex:0 0 auto;width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:13px}
.rm-bankinfo{flex:1;min-width:0}
.rm-bankname{font-weight:700;font-size:14px}
.rm-bankno{font-size:18px;font-weight:800;letter-spacing:.5px;margin:2px 0}
.rm-bankacc{font-size:12px;color:var(--muted)}
.rm-copy{background:var(--green1);color:#06371f;border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer;flex:0 0 auto}
.rm-hint{font-size:11px;color:var(--muted);margin-top:10px}
.rm-rb-hint{font-size:12.5px;color:#ff7a78;background:rgba(226,75,74,.10);border:1px solid rgba(226,75,74,.35);border-left:3px solid #e24b4a;padding:10px 14px;border-radius:0 8px 8px 0;line-height:1.5;margin:0 0 14px}
.rm-wd-avail{font-size:26px;font-weight:800;color:var(--green1)}
.rm-prow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.rm-prow:last-child{border-bottom:0}
.rm-prow span{color:var(--muted);font-size:14px}
.rm-prow b{font-size:14px}
.rm-logout-btn2{background:transparent!important;color:#ff6b6b!important;border:1px solid rgba(255,107,107,.4)!important}
.rm-hlist{display:flex;flex-direction:column;gap:10px}
.rm-hrow{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:12px;padding:14px 16px}
.rm-htype{font-weight:700;font-size:14px;flex:0 0 auto}
.rm-htype.dep{color:var(--green1)} .rm-htype.wd{color:#ff9f43}
.rm-hmid{flex:1;text-align:right}
.rm-hamt{font-weight:800;font-size:15px}
.rm-hamt.dep{color:var(--green1)} .rm-hamt.wd{color:#ff9f43}
.rm-hdate{font-size:11px;color:var(--muted)}
.rm-hstat{flex:0 0 auto;font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px;margin-left:8px}
.rm-hstat.success{background:rgba(47,208,122,.15);color:var(--green1)}
.rm-hstat.pending{background:rgba(246,196,83,.15);color:var(--gold)}
.rm-hstat.cancel{background:rgba(224,37,12,.15);color:#e0603c}
.rm-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);z-index:400;background:#222838;color:#fff;
  padding:12px 22px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center}
.rm-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){
  .rm-topbar-right.rm-logged{gap:10px}
  .rm-wpill{min-width:80px}   /* pill keeps the tkb 144px look, shrinks only when the row is tight */
  .rm-depicon{width:38px;height:38px;padding:4px}
  .rm-depicon img{width:28px;height:28px}
}

/* history: continue-pay link on pending deposits (pgRedirectUrl) */
.rm-hpay{display:inline-block;margin-left:6px;padding:2px 10px;border-radius:10px;background:var(--green1);color:#fff;font-size:11px;font-weight:700;text-decoration:none}
/* withdraw: card status pill (10 verified / -5 rejected / else verifying) */
.rm-wd-pill{margin-left:auto;padding:2px 8px;border-radius:9px;font-size:10px;font-weight:700;flex:0 0 auto}
.rm-wd-pill.ok{background:rgba(253,1,178,.18);color:#ff6dd0}
.rm-wd-pill.bad{background:rgba(220,60,60,.18);color:#ff7b7b}
.rm-wd-pill.wait{background:rgba(246,196,83,.15);color:#ff2bbd}
.rm-wd-cardsel .rm-wd-pill{margin-left:8px}

/* iOS: 100vh is the LARGE viewport (toolbars collapsed) — on inner pages that forced ~190px of
   blank under the last button. svh = the real visible height, so the page ends at the button. */
body.rm-authopen #root{min-height:100vh;min-height:100svh}

/* desktop = tkb: the info strip is visible (card style, left) with Register/Login beside it on the
   right — mobile keeps it removed (Tom asked to drop it on mobile only) */
@media(min-width:1280px){
  .rm-cta-inline .rm-btn{min-width:250px}
}
/* inline (non-overlay) spinner for the bank-verifying page */
.rm-spin-inline{display:flex;justify-content:center;gap:6px}
.rm-spin-inline span{width:10px;height:10px;border-radius:50%;background:var(--green1);animation:rmBounce 1s infinite ease-in-out}
.rm-spin-inline span:nth-child(2){animation-delay:.15s}
.rm-spin-inline span:nth-child(3){animation-delay:.3s}
@keyframes rmBounce{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* v173: tkb desktop sidebar entrance — slides in from the left on every page load
   (tkb .side-menu-container: left 0.5s ease-in-out + opacity fade; ours uses transform) */
@media(min-width:1280px){
  .rm-sidebar{animation:rmSideIn .5s ease-in-out both}
}
@keyframes rmSideIn{from{transform:translateX(-105%);opacity:.3}to{transform:translateX(0);opacity:1}}
/* getVerifyingBank page gate banner */
.rm-vgate{background:rgba(246,196,83,.12);border:1px solid rgba(246,196,83,.4);color:#ff2bbd;
  border-radius:10px;padding:10px 14px;font-size:13px;font-weight:700;margin:10px 0}
/* human-verify (captcha-style) box */
.rm-cap-box{display:flex;align-items:center;gap:12px;background:#fff;color:#111;border-radius:10px;
  padding:14px 18px;cursor:pointer;font-weight:700;font-size:15px;user-select:none}
.rm-cap-check{width:24px;height:24px;border:2px solid #9aa0ae;border-radius:5px;flex:0 0 auto;position:relative;background:#fff}
.rm-cap-check.spin{border-color:transparent;border-radius:50%;border:3px solid #d5d9e2;border-top-color:#fd01b2;animation:rmSpin .7s linear infinite}
.rm-cap-check.ok{border-color:#fd01b2;background:#fd01b2}
.rm-cap-check.ok:after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
@keyframes rmSpin{to{transform:rotate(360deg)}}

/* v178 profile — tkb /profile 版面:頭像卡 + 3 顆漸層選單按鈕(取色自 tkb 截圖) */
.rm-pcard{background:var(--card);border:1px solid rgba(255,255,255,.3);border-radius:24px;padding:30px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:34px}
.rm-pavatar{width:150px;height:150px;object-fit:contain}
.rm-pphone{font-size:20px;font-weight:700;color:#f0f3fc}
.rm-pbtns{display:flex;flex-direction:column;gap:24px}
.rm-gbtn{height:52px;border:none;border-radius:14px;font-size:20px;font-weight:700;color:#fff;cursor:pointer;box-shadow:6px 6px 12px rgba(0,0,0,.25)}
.rm-gbtn-bank{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #b8007f}
.rm-gbtn-pass{background:transparent;color:var(--pa-gold-fg);border:1.5px solid var(--pa-gold-bd)}

/* v180 add-bank form — tkb /registerBank 同款:內嵌 I am human + 紅字提示 + 灰色 Continue */
.rm-cap-inline{width:min(300px,100%);margin:4px 0 6px;padding:14px 16px}
.rm-cap-hint{color:#ff4d4f;font-size:13px;margin:0 0 16px}
.rm-continue:disabled{background:#c6c9d0;color:#fff;opacity:1;box-shadow:none;cursor:default}

/* v181 帳號欄照tkb:icon縮小靠左、placeholder字縮小且置中 */
.rm-accfield{position:relative}
.rm-accfield .rm-ico-sm{width:20px;height:20px;position:absolute;left:14px;top:50%;transform:translateY(-50%)}
.rm-accfield input{text-align:center;font-size:16px;padding:0 34px}

/* v182 Tom: 帳號字大一點(16→18)、整塊表單往下移(離 Back/Bank 標題遠一點,tkb 約26px) */
.rm-accfield input{font-size:18px}
#rm-rb-bkt{margin-top:26px}

/* v183 deposit入口綁卡頁:tkb 渠道 tabs(Auto/Bank QR,右上綠點,active=白底黑字) */
/* flex-wrap 不是装饰:三个 tab(QRIS / E-Wallet / Transfer Bank)原本 nowrap 且无 scroll,
   窄屏放不下就直接**溢出圆角边框外**(Gerald 截图里 Transfer Bank 连粉点都在框外)。
   WHY 换行而不是横向滚动:付款方式是主选项,藏进一个玩家不知道能滑的区域会掉转化 ——
   与 Buy Bonus 那次同一个判断。row-gap 让换行后两行之间有呼吸,不会糊在一起。 */
.rm-chantabs{background:var(--card);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:10px;display:flex;flex-wrap:wrap;gap:12px;row-gap:8px;margin-top:26px;box-shadow:6px 6px 14px rgba(0,0,0,.25)}
.rm-chantab{position:relative;padding:12px 22px;border-radius:10px;font-weight:700;font-size:16px;color:#fff;border:1px solid rgba(255,255,255,.35);cursor:pointer}
.rm-chantab.on{background:var(--pa-primary);color:var(--pa-primary-fg);border-color:#b8007f}
.rm-chandot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:#e21ba3}
.rm-chantabs+#rm-rb-bkt{margin-top:22px}
/* 钱包页「最近交易」区块 */
.rm-wtxn{margin-top:18px}
.rm-wtxn-hd{font-size:14px;font-weight:800;color:#fff;margin:0 0 8px 2px}
.rm-wtxn .rm-hlist{min-height:44px}
.rm-wtxn-all{width:100%;margin-top:10px}

/* v184 withdraw(tkb):%快選一排4顆(蓋掉後面的3欄基礎規則)、選中卡圓形銀行logo */
.rm-amt-grid.rm-amt-grid4{grid-template-columns:repeat(4,1fr)}
.rm-cardlogo{width:34px;height:34px;border-radius:50%;background:#fff;object-fit:contain;padding:3px;flex:0 0 auto}

/* v185 withdraw卡片列照tkb靠左對齊(logo貼左+文字左對齊);LINE icon加白色圓底(原PNG深色glyph在深底上看不見) */
.rm-wd-cardsel{justify-content:flex-start}
.rm-wd-cardtxt{align-items:flex-start}
.rm-line-ico{background:#fff;border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.rm-line-ico img{width:18px;height:18px;filter:brightness(0)}   /* 原PNG是白色glyph:墊白圓+轉黑=tkb樣式 */

/* v189 deposit有卡頁照tkb:channel=小方框tabs(共用.rm-chantabs)+資訊列(Min Deposit|Speed紅|Deposit Support紅框) */
.rm-dep-inforow{display:flex;align-items:stretch;gap:12px;margin:14px 0 4px}
.rm-dep-infobox{flex:1;display:flex;background:var(--card);border-radius:10px;overflow:hidden}
.rm-dep-infocell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 6px;gap:2px}
.rm-dep-infocell+.rm-dep-infocell{border-left:1px solid rgba(255,255,255,.15)}
.rm-dep-infocell small{color:#8b93a7;font-size:12px}
.rm-dep-infocell b{font-size:14px;color:#fff}
.rm-dep-infocell b.rm-red{color:#ff4d4f}
.rm-dep-support{display:flex;align-items:center;gap:8px;border:1px solid #ff4d4f;border-radius:10px;padding:9px 14px;color:#fff;font-weight:600;font-size:14px;cursor:pointer;flex:0 0 auto}

/* v190 Tom: channel tab 縮小(tkb Auto大小)、bank select/清單 logo 統一 28px 白圓底 contain(不裁切不爆框) */
.rm-chantabs{padding:8px}
.rm-chantab{padding:9px 16px;font-size:14px}
.rm-bankdd-label .rm-bank-logo,.rm-bankdd-opt .rm-bank-logo{width:28px;height:28px;object-fit:contain;background:#fff;border-radius:50%;padding:2px;flex:0 0 auto}
/* deposit: per-bank payment-method chips (methodName _QR / _BTF) */
.rm-paymethods{display:flex;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.rm-pm{border:1px solid rgba(255,255,255,.3);background:var(--card);color:var(--muted);border-radius:10px;
  padding:9px 18px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.rm-pm.on{background:var(--green1);border-color:var(--green1);color:#fff}
/* deposit method tabs (Bank Transfer / Bank QR): tkb-style compact pills, left-aligned */
.rm-chantabs.rm-even .rm-chantab{flex:0 0 auto;min-width:110px;text-align:center;white-space:nowrap}

/* v191 遊戲頁右上 ID 白色圓角框(tkb) */
.rm-gameid{background:#fff;color:#111;font-weight:700;font-size:13px;padding:7px 12px;border-radius:9px;margin-left:auto;flex:0 0 auto}

/* v192 Speed 寫死 <1 Min 綠色(Tom) */
.rm-dep-infocell b.rm-green-txt{color:#e21ba3}

/* v195 ETA列黑底拿掉(Tom):純紅字無框 */
.rm-wd-eta{background:transparent;border-radius:0;padding:2px 0}

/* v196 手機版首頁 Register/Login 文字垂直置中(iOS padding按鈕baseline偏下 → flex幾何置中) */
@media(max-width:768px){
  .rm-cta-inline .rm-btn{display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;height:52px;line-height:1}
}

/* v197 綁卡驗證中頁重設計:圓環spinner+銀行icon+標題+滑動進度條+說明(Tom:原版醜) */
.rm-verify-hero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:44px 20px 36px;background:var(--card);border:1px solid rgba(255,255,255,.15);border-radius:16px;margin-top:26px;text-align:center}
.rm-verify-ring{width:88px;height:88px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.rm-verify-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:#fd01b2;animation:rmSpin 1s linear infinite}
.rm-verify-ring img{width:38px;height:38px}
.rm-verify-title{font-size:19px;font-weight:700;color:#fff}
.rm-verify-bar{width:72%;height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.rm-verify-bar::after{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;border-radius:4px;background:linear-gradient(90deg,#fd01b2,#e21ba3);animation:rmBarSlide 1.4s ease-in-out infinite}
@keyframes rmBarSlide{0%{left:-40%}100%{left:100%}}
.rm-verify-sub{font-size:14px;color:var(--muted)}
.rm-verify-note{font-size:12px;color:var(--muted);opacity:.75}
/* deposit: in-page PG payment iframe (tkb777-style embed, keeps site chrome) */
.rm-payframe-wrap{position:relative;border:1px solid rgba(255,255,255,.15);border-radius:12px;overflow:hidden;background:#fff;margin-bottom:14px}
.rm-payframe{width:100%;height:1180px;border:0;display:block;background:#fff}  /* 跨域無法自動量高:給足夠高度讓整頁單一捲軸,不切內容/不出現 iframe 內部捲軸 */
.rm-payframe-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;z-index:1}

/* v199 付款iframe拉高到內容放得下(Paynex頁約1000-1100px)→iframe不內捲,醜滾輪消失;整頁滾動(頁面滾輪本來就隱藏) */
.rm-payframe{height:1150px;min-height:1150px}

/* v200 QR付款模板裁掉Paynex自帶banner+「Payment Gateway」標題(iframe負邊距;銀行轉帳模板無banner不裁) */
/* v131(Tom 2026-07-09 回報):-112px 裁切量吃到收據本體(單號+金額被切)。QR 收據頁頁首本來就短,
   固定 px 裁跨域頁面本質脆弱→改不裁,給足高度讓收據+PromptPay+QR 完整顯示,整頁單一捲軸。 */
.rm-payframe-qr .rm-payframe{margin-top:0;height:940px;min-height:940px}/* QR page centres in 100vh; 940 fits populated page (DOWNLOAD btn visible 320-430), was 1460 = huge gap */

/* v201 首頁 Bonus 小方磚(同分類磚樣式,獨立class避開.rm-tab全域wiring) */
.rm-bonusrow{margin-bottom:14px}
.rm-bonus-tile{position:relative;flex:0 0 auto;width:57px;height:57px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,.3);cursor:pointer}
.rm-bonus-tile img{width:26px;height:26px;object-fit:contain}
.rm-bonus-tile span{font-size:11px;color:#fff;font-weight:700;white-space:nowrap}

/* v205 Bonus 頁:Welcome 卡 + Login Bonus 金框(3天freespin,今天亮/其他鎖) */
.rm-bonus-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:16px;margin:22px 0 18px}
.rm-bonus-wico{font-size:34px;line-height:1}
.rm-bonus-winfo{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.rm-bonus-winfo>b{font-size:17px;color:#fff}
.rm-bonus-winfo>span{font-size:13px;color:var(--muted)}
.rm-bonus-amt{color:#e21ba3;font-size:15px}
.rm-bonus-claim{background:var(--pa-primary);color:var(--pa-primary-fg);border:none;height:42px;padding:0 20px;border-radius:10px;font-size:15px;font-weight:700;flex:0 0 auto}
.rm-bonus-gold{border:2px solid #fd01b2;border-radius:16px;padding:14px 12px 16px;background:linear-gradient(180deg,rgba(232,182,76,.10),rgba(232,182,76,.02));box-shadow:0 0 16px rgba(232,182,76,.18)}
.rm-bonus-gtitle{font-size:15px;font-weight:700;color:#fd01b2;margin-bottom:12px;text-align:center}
.rm-bonus-days{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rm-bonus-day{background:var(--card);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.rm-bonus-day img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}
.rm-bonus-day.on{border-color:#fd01b2;cursor:pointer;box-shadow:0 0 10px rgba(232,182,76,.35)}
.rm-bonus-day:not(.on){opacity:.45}
.rm-bonus-dayno{font-size:12px;font-weight:700;color:#fd01b2}
.rm-bonus-gname{font-size:11px;color:#fff;font-weight:600;line-height:1.2}
.rm-bonus-go{background:#fd01b2;color:#141723;font-size:11px;font-weight:800;border-radius:8px;padding:5px 6px;width:100%}
.rm-bonus-lock{font-size:11px;color:var(--muted)}

/* v206 freespin介紹層(Tom線框:< 遊戲名+ID / Bonus Name / 內容框 / Play·Cancel) */
.rm-bfs-top{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:12px;padding:12px 14px;margin:4px 0 16px}
.rm-bfs-back{font-size:26px;font-weight:700;color:#fff;cursor:pointer;line-height:1;padding:0 4px}
.rm-bfs-name{font-size:17px;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-bfs-bonusname{font-size:14px;font-weight:700;color:#fd01b2;margin:0 0 12px}
.rm-bfs-box{border:1px solid rgba(255,255,255,.3);border-radius:14px;background:var(--card);padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:18px}
.rm-bfs-thumb{width:130px;height:130px;object-fit:cover;border-radius:14px}
.rm-bfs-title{font-size:18px;font-weight:700;color:#fff}
.rm-bfs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rm-bfs-list li{font-size:13px;color:var(--muted)}
.rm-bfs-list li::before{content:"✓ ";color:#e21ba3;font-weight:700}
.rm-bfs-btns{display:flex;gap:14px}
.rm-bfs-play{flex:1;height:50px;border:none;border-radius:12px;background:var(--pa-primary);color:var(--pa-primary-fg);font-size:17px;font-weight:700;cursor:pointer}
.rm-bfs-cancel{flex:1;height:50px;border:1.5px solid var(--pa-cancel-bd);border-radius:12px;background:transparent;color:var(--pa-cancel-fg);font-size:17px;font-weight:700;cursor:pointer}

/* v207 freespin介紹層改遊戲頁同款全螢幕(Tom:跟截圖一樣,不要另外做) */
#rm-bfswrap{position:fixed;inset:0;z-index:800;background:#0b0e18;display:flex;flex-direction:column}
.rm-bfs-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:18px 16px 24px}
#rm-bfswrap .rm-bfs-box{flex:1;justify-content:center;margin-bottom:22px}

/* v208 首頁Bonus列:Welcome磚+金框Login 3天磚(小圖,label上/圖44px) */
.rm-bonusrow{gap:10px;align-items:stretch}
.rm-fs-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;flex:0 0 auto}
.rm-fs-tile img{width:44px;height:44px;object-fit:cover;border-radius:8px;display:block}
.rm-fs-dayno{font-size:10px;font-weight:700;color:#fff;white-space:nowrap}
.rm-fs-gold{display:flex;gap:8px;border:2px solid #fd01b2;border-radius:12px;padding:5px 7px;background:linear-gradient(180deg,rgba(232,182,76,.10),rgba(232,182,76,.02))}
.rm-fs-gold .rm-fs-dayno{color:#fd01b2}
.rm-fs-gold .rm-fs-tile{border-color:rgba(232,182,76,.45)}
.rm-fs-tile.lock{opacity:.45;cursor:default}
.rm-fs-lock{position:absolute;bottom:10px;right:8px;font-size:12px;line-height:1}

/* v210 deposit金額框加大+文字置中(Tom;inner頁48px的縮小規則一併蓋掉) */
body.rm-authopen .rm-amt-box{height:60px}
.rm-amt-box input#rm-dep-amt{text-align:center;padding-left:0;font-size:19px}

/* v211 My Bank照tkb:右上紫+鈕/頭像卡/白色銀行卡(圓logo+分組帳號) */
.rm-mb-addrow{display:flex;justify-content:flex-end;margin:2px 0 10px}
.rm-mb-add{width:42px;height:42px;border-radius:10px;background:var(--pa-primary);border:none;color:var(--pa-primary-fg);font-size:26px;font-weight:700;cursor:pointer;line-height:1}
.rm-mb-avatar{margin-bottom:16px}
.rm-mb-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid rgba(253,1,178,.22);border-radius:14px;padding:16px 14px;margin-bottom:12px}
.rm-mb-logo{width:42px;height:42px;border-radius:50%;object-fit:contain;flex:0 0 auto}
.rm-mb-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.rm-mb-bank{font-size:13px;color:var(--muted);font-weight:600}
.rm-mb-acc{font-size:17px;color:#f0f3fc;font-weight:700;letter-spacing:.5px}

/* v214 鎖頭加強(Tom:不明顯):鎖日磚圖片壓暗+置中大鎖頭,整磚不再半透明 */
.rm-fs-tile.lock{opacity:1}
.rm-fs-tile.lock .rm-fs-dayno{opacity:.6}
.rm-fs-tile.lock img{filter:brightness(.3)}
.rm-fs-lock{position:absolute;left:50%;top:calc(50% + 8px);transform:translate(-50%,-50%);font-size:22px;bottom:auto;right:auto;text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* v215 Bonus磚圖片塞滿(Tom):磚固定寬66px,圖flex:1撐滿剩餘高度(Welcome與金框等高時不再留白) */
.rm-fs-tile{width:66px}
.rm-fs-tile img{width:100%;height:auto;flex:1;min-height:44px;object-fit:cover}

/* v216 freespin介紹層滿版設計(Tom:小圖飄在大框很怪):遊戲圖撐滿框上半部,標題+說明收下方 */
#rm-bfswrap .rm-bfs-box{padding:0 0 18px;overflow:hidden;gap:0;justify-content:flex-start}
#rm-bfswrap .rm-bfs-thumb{width:100%;height:auto;flex:1;min-height:0;object-fit:cover;border-radius:0}
#rm-bfswrap .rm-bfs-title{margin:16px 12px 8px;font-size:20px}
#rm-bfswrap .rm-bfs-list{padding:0 14px;gap:7px}

/* v217 freespin圖要整張完整(Tom:cover裁切太大)——改自然比例不裁切,內容垂直置中 */
#rm-bfswrap .rm-bfs-thumb{flex:0 0 auto;width:100%;height:auto;object-fit:contain}
#rm-bfswrap .rm-bfs-box{justify-content:center}

/* 宽屏:列表版只需略缩行高/字号。原本的 justify-content:space-between + 固定 36px 是给
   横排圆点用的,列表化后必须拿掉,否则行会被撑开、图标和文字分到两端。 */
@media(min-width:1280px){
  .rm-social-card{gap:3px;padding:6px}
  .rm-social{padding:8px 10px}
  .rm-social-ic{width:18px;height:18px}
  .rm-social-tx{font-size:13px}
}

/* ===== Slot browser: provider strip + ALL/HOT/NEW + 3-col game grid + pager ===== */
.rm-provwrap{display:flex;align-items:center;gap:4px;margin-bottom:6px}
/* Gap between thumbnails halved: it is the chip's excess width + this gap. Was (66-60)/2*2 + 4 =
   10px; now (72-70)/2*2 + 3 = 5px. Both halves have to move — shrinking `gap` alone leaves the
   chip's dead space and only gets to 8px. */
.rm-provstrip{display:flex;gap:3px;overflow-x:auto;overflow-y:hidden;padding:6px 2px 8px;scrollbar-width:none;flex:1 1 auto;min-width:0}
/* bank dropdown (Daftar) styled like a .rm-field */
.rm-field-select{position:relative}
.rm-field-select select{flex:1 1 auto;min-width:0;width:100%;background:transparent;border:0;color:#fff;font-family:inherit;font-size:14px;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:18px}
.rm-field-select select option{background:#0f1220;color:#fff}
.rm-field-select:after{content:"\25be";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#8b93a7;pointer-events:none;font-size:12px}
.rm-provstrip::-webkit-scrollbar{display:none}
/* provider chip = cmm4a .slot-prov mobile: 90x66 black tile, logo(contain) on top, name below, active inset ring */
/* perfect-square chip (77x77, -15%): 1:1 cover logo fills it, name overlaid at the bottom */
/* 圓形 provider chip:圓形圖在上、名字在下(旧版圆形样式);active 洋红环套在圆上 */
/* Provider artwork is WIDE, not square: the small-provider set is 300x125 (2.4:1) and the
   /common fallback tiles are 450x237 (1.9:1). A square box with object-fit:cover cropped both to
   their middle third ("KA Ga", "RIUM GA"), so the box is square and the fit is `contain` — the
   whole logo is letterboxed on black, never cropped. Do NOT switch this back to cover.
   padding insets the art off the rounded edge (global *{box-sizing:border-box} keeps the box at
   its declared size). At 70x70 the art lands ~58x24. */
.rm-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;width:72px;cursor:pointer;box-sizing:border-box}
.rm-chip-logo{width:70px;height:70px;border-radius:8px;object-fit:contain;display:block;background:#000;padding:6px}
.rm-chip-all{width:70px;height:70px;border-radius:8px;background:#000;display:flex;align-items:center;justify-content:center;color:#ffd34d;font-size:19px;font-weight:800}
/* ALL chip 用金色線條老虎機圖標(slot-all.svg,跟分類欄彩色 777 不同):黑底居中 */
.rm-chip-allico{object-fit:contain;padding:10px}   /* ~15% of the 70px box, matching the icon's original 9/60 weight */
.rm-chip-name{width:100%;font-size:10px;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;text-align:center}
.rm-chip-on .rm-chip-logo,.rm-chip-on .rm-chip-all{box-shadow:0 0 0 2px #fd01b2}
.rm-slotfilter{display:flex;gap:8px;margin-bottom:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
/* 多了 Buy Bonus 后 320px 下 4 个按钮 + search 会挤:让筛选组自己横向滚(不换行、不撑破页面),
   并给 search 留一个可用下限。按钮固定 height:40px 且不换行 -> 增减按钮时行高恒定,下面格子不跳。 */
.rm-slotfilter::-webkit-scrollbar{display:none}
/* ALL/HOT/NEW + Search 同排:filter 左固定, search flex:1 占剩余(320 不溢出靠 min-width:0 收缩) */
.rm-filterrow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rm-filterrow .rm-search{flex:1 1 auto;min-width:96px;height:40px;margin:0}
/* 窄屏:4 个按钮自然总宽 239px,跟 search 挤同一行就会把 Buy Bonus 推出可视区 ——
   而 Buy Bonus(473 款)正是这次要暴露的重点,印尼主力又是移动流量,不能藏在
   一个玩家不知道能横滚的区域里。所以 <=420px 让筛选栏换行:按钮独占一行(239<320,
   四个全露出),search 独占下一行。
   高度按断点固定(移动 88px / 桌面 40px),切 provider 增减按钮时不变 -> 下面格子不跳。 */
@media(max-width:420px){
  .rm-filterrow{flex-wrap:wrap}
  .rm-filterrow .rm-slotfilter{flex:1 1 100%;min-width:0}
  .rm-filterrow .rm-search{flex:1 1 100%}
}
/* 桌面:ALL/HOT/NEW 靠左成組, search 固定寬推到最右(margin-left:auto);手機維持 flex:1 佔滿 */
@media(min-width:1280px){ .rm-filterrow .rm-search{flex:0 0 auto;width:300px;margin-left:auto} }
/* ALL/HOT/NEW chip 高度=旁邊 search(40px),頂底對齊(box-sizing:border-box 全局) */
.rm-fbtn{flex:0 0 auto;height:40px;display:inline-flex;align-items:center;padding:0 13px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#c7cbd6;font-weight:700;font-size:9px;cursor:pointer;font-family:inherit}   /* padding/font ×0.7 + 等高 search */
.rm-fbtn-on{background:#7a8bf3;color:#fff;border-color:#7a8bf3}
.rm-grid-slot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}   /* 手機:3 列(不變) */
/* 寬屏(平板橫向/桌面)slot game grid 改 6 列→縮略圖約縮一半;.rm-grid.rm-grid-slot(0,2,0)壓過單類規則 */
@media(min-width:820px){ .rm-grid.rm-grid-slot{grid-template-columns:repeat(6,1fr)} }
.rm-slotcard{background:#0f1220;border-radius:10px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.06)}
.rm-slotcard__img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0a1020}
/* Semua 视图的 provider 标注:压在缩图左上角,不占布局高度 */
.rm-slotcard__prov{position:absolute;left:4px;top:4px;max-width:calc(100% - 8px);padding:2px 6px;border-radius:6px;background:rgba(3,10,46,.82);color:#f0f3fc;font-size:9.5px;font-weight:700;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.rm-slotcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.rm-slotcard__rtp{display:flex;align-items:center;gap:5px;padding:5px 6px 3px}
.rm-rtpbar{flex:1;height:6px;border-radius:3px;background:#2a2f3f;overflow:hidden}
.rm-rtpbar>i{display:block;height:100%;background:#22c55e}
.rm-slotcard__rtp b{font-size:10px;color:#22c55e;font-weight:800;white-space:nowrap}
.rm-slotcard__name{padding:4px 6px 5px;font-size:10px;font-weight:800;color:#3a2600;background:linear-gradient(180deg,#f4c40c,#e0a800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
/* (pagination removed — infinite scroll via #rm-sentinel + IntersectionObserver) */

/* ---------- Deposit: QRIS + Transfer Bank (mock flows) ---------- */
/* QRIS tab icon, sits inline before the label */
.rm-chantab-ico{width:16px;height:16px;vertical-align:-3px;margin-right:5px;display:inline-block}

/* Transfer Bank: receiving-account detail panel, revealed once a bank is picked */
.rm-recv{display:none;margin:8px 0 2px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(255,255,255,.03);padding:4px 10px}
.rm-recv.on{display:block}
.rm-recv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.rm-recv-row:last-child{border-bottom:0}
.rm-recv-row small{color:#8fa0c8;font-size:11px;flex:0 0 auto}
.rm-recv-val{display:flex;align-items:center;gap:6px;min-width:0}
.rm-recv-val b{font-size:13px;color:#fff;word-break:break-all;text-align:right}
.rm-recv-badge{flex:0 0 auto}
/* copy button: 32px hit area on a 16px glyph — thumb-sized without bloating the row */
.rm-copy{flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:8px;background:rgba(255,255,255,.07);color:#fd01b2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rm-copy:active{background:rgba(253,1,178,.22)}
/* the glyph is a flex item inside .rm-copy — without flex:none it gets shrunk to 4x16 */
.rm-copy svg{flex:none;width:16px;height:16px;display:block}

/* Transfer Bank: slip upload (label drives the hidden file input) */
.rm-slip{display:flex;align-items:center;gap:10px;cursor:pointer}
.rm-slip-btn{flex:0 0 auto;background:rgba(255,255,255,.10);border-radius:7px;padding:5px 10px;font-size:12px;font-weight:700;color:#fff}
.rm-slip-name{flex:1 1 auto;min-width:0;font-size:12px;color:#8fa0c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-slip-prev{display:none;max-width:100%;max-height:160px;border-radius:10px;margin:8px 0 2px;object-fit:contain;background:#000}
.rm-slip-prev.on{display:block}

/* QRIS: the mock QR panel, revealed after pressing Deposit */
.rm-qris{display:none;margin-top:14px}
.rm-qris.on{display:block}
.rm-qris-frame{width:100%;height:330px;border:0;border-radius:12px;background:#0b1030;display:block;margin-bottom:10px}

/* 2G register Bank/E-wallet tabs */
.rm-regtabs{display:flex;gap:8px;margin:4px 0 10px}
.rm-regtab{flex:1;text-align:center;padding:9px 0;border-radius:8px;background:var(--panel-2,#1b2436);color:var(--muted,#9fb0c9);font-weight:600;font-size:14px;cursor:pointer;border:1px solid rgba(255,255,255,.08)}
.rm-regtab.on{background:var(--pa-primary);color:var(--pa-primary-fg);border-color:transparent}

/* --- 联系/社群徽章 (BO getSiteConfig) --- */
.rm-soc-ico{display:inline-flex;width:26px;height:26px;margin-right:9px;vertical-align:middle;flex:0 0 26px}
.rm-soc-ico svg{width:26px;height:26px;display:block;border-radius:8px}
.rm-soc-letter{align-items:center;justify-content:center;border-radius:8px;color:#fff;font-weight:800;font-size:14px;line-height:1}
/* --- 促销 BO HTML 正文 --- */
.rm-promo-content{color:#cfd6e4;font-size:14px;line-height:1.75;word-break:break-word}
.rm-promo-content ol,.rm-promo-content ul{padding-left:20px;margin:8px 0}
.rm-promo-content li{margin:6px 0}
.rm-promo-content p{margin:8px 0}
.rm-promo-content a{color:#7db4ff;word-break:break-all}
.rm-promo-content strong,.rm-promo-content b{color:#ffd66b}
.rm-promo-content img{max-width:100%;height:auto;border-radius:8px}

/* --- 跑马灯 Running text (BO getSiteConfig.runningText) --- */
/* 2026-07-23 缩小约 50%:字 16->12px、容器高 36->~22px、图标 15->11px、内距与 gap 等比缩。
   滚动观感靠 app.js 里的 MQ_PX_PER_SEC 一起降(见那里的注释),一圈时间保持不变。 */
.rm-marquee{display:flex;align-items:center;gap:6px;margin:8px 0 0;padding:3px 10px;
  background:linear-gradient(90deg,rgba(224,33,138,.14),rgba(20,26,50,.5));
  border:1px solid rgba(224,33,138,.28);border-radius:10px;overflow:hidden;}
.rm-mq-ico{flex:0 0 auto;display:inline-flex;align-items:center;color:#f24aa7}
.rm-mq-ico svg,.rm-mq-ico img{width:11px;height:11px}
/* display:flex 不是装饰:viewport 原本是块级容器装 inline-flex 的轨道,行盒会多出约 3px
   的基线下沉空间(实测 viewport 19px vs track 16px),整条因此比预期高 3px。改成 flex
   让轨道成为 flex item,高度就等于内容本身。 */
.rm-mq-viewport{flex:1 1 auto;display:flex;align-items:center;overflow:hidden;position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  mask:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);}
.rm-marquee-track{display:inline-flex;white-space:nowrap;animation:rm-mq-scroll 20s linear infinite;will-change:transform;}   /* 🔴 duration 必须写(20s 是安全默认)。缺省=0s,配 infinite + transform keyframe + will-change 的 GPU 合成层 = 每帧重启动画 = 画面震动 + CPU 空转。fillMarquee() 会在 rAF 里用按轨道宽算出的精确值(~21s)覆盖它;但 JS 跑到之前的那一瞬间、以及内页 marquee 被隐藏时,inline 值不存在,就靠这个 20s 兜底,任何时刻都不再有 0s。 */
.rm-marquee:hover .rm-marquee-track{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){ .rm-marquee-track{animation:none} }
@keyframes rm-mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* BO Web Setting.dupPhone=false 时手机号栏位下的说明(不是错误,灰字) */
.rm-field-hint{color:var(--muted,#9aa1ac);font-size:12.5px;line-height:1.35;margin:-8px 0 12px 4px}
.rm-field-hint:empty{margin:0}