/* =====================================================================
   會員中心電腦版外觀（2026-10-03 採樣模板 pc/user*.html、pc/finance.html）
   只作用在 body.sh-desktop；手機版完全不受影響。功能與 DOM 掛鉤不變，
   由 js/member-pc.js 補上模板才有的區塊（側欄狀態列／VIP 小卡、VIP 等級頁籤與福利、金流頁首）。
   版面：側欄 300 + 間距 10 + 內容 880；白底扁平、細分隔線、青藍漸層按鈕。
   ===================================================================== */
body.sh-desktop {
  --mpc-primary: #32c5ff; --mpc-deep: #1b91ff; --mpc-grad: linear-gradient(to left, #25e1fe, #1b91ff);
  --mpc-btn-shadow: 0 2px 8px 0 rgba(60, 160, 255, .47); --mpc-shadow: 0 20px 30px 0 rgba(204, 204, 204, .2);
  --mpc-line: #d8d8d8; --mpc-grey: #f4f5f8; --mpc-t1: #333; --mpc-t2: #666; --mpc-t3: #999;
  background: #f7fbff;
}
body.sh-desktop .member-shell { display: grid; grid-template-columns: 300px minmax(0, 880px); gap: 10px; justify-content: center; align-items: start; max-width: 1200px; margin: 0 auto; padding: 30px 0 50px; }

/* ---------- 側欄 ---------- */
body.sh-desktop #overview { position: static; display: block; padding: 30px 0 20px; background: #fff; box-shadow: var(--mpc-shadow); border-radius: 0; color: #000; }
body.sh-desktop .pcard { margin: 0 10px 20px !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #000 !important; text-align: center !important; }
body.sh-desktop .pcard::before, body.sh-desktop .pcard::after { content: none; }
body.sh-desktop .pcard__top { display: block !important; margin: 0 !important; }
body.sh-desktop .pcard__av { width: 70px !important; height: 70px !important; margin: 0 auto !important; padding: 3px !important; border: 0 !important; border-radius: 50% !important; background: var(--mpc-grad) !important; box-shadow: none !important; }
body.sh-desktop .pcard__av img { display: block !important; width: 64px !important; height: 64px !important; border-radius: 50% !important; object-fit: cover !important; background: #fff !important; }
body.sh-desktop .pcard__meta { display: block !important; }
body.sh-desktop .pcard__name { padding: 10px 0 0 !important; color: #000 !important; font-size: 18px !important; font-weight: 700 !important; text-shadow: none !important; }
body.sh-desktop .pcard__id { color: var(--mpc-t2) !important; font-size: 13px !important; opacity: 1 !important; }
.mpc-days { color: var(--mpc-t2); font-size: 13px; }
.mpc-auth { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px auto 14px; font-size: 13px; }
.mpc-tag { padding: 2px 6px; border-radius: 2px; background: #e8e8e8; color: var(--mpc-t2); line-height: 1.4; }
.mpc-tag.on { background: var(--mpc-primary); color: #fff; }
.mpc-auth a { display: inline-flex; align-items: center; color: var(--mpc-deep); text-decoration: none; }
.mpc-acc { display: flex; justify-content: center; margin: 0 0 18px; padding: 0 8px; }
.mpc-acc a { flex: 1 1 0; min-width: 0; color: #000; font-size: 12px; text-align: center; text-decoration: none; }
.mpc-acc i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #dfe3ea; color: #fff; transition: background-color .2s; }
.mpc-acc a.on i { background: var(--mpc-primary); }
.mpc-acc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mpc-acc span { display: block; margin-top: 4px; white-space: nowrap; }

/* VIP 卡（側欄小卡＋VIP 頁大卡共用；各級文字色與進度條色由 JS 以行內變數帶入） */
.vipx { position: relative; display: block; overflow: hidden; border-radius: 8px; color: var(--vx-r, #4c2700); text-decoration: none; }
.vipx__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.vipx__tag { position: absolute; top: 0; left: 0; z-index: 1; min-width: 58px; height: 20px; padding: 0 8px; border-radius: 8px 0 8px 0; background: linear-gradient(90deg, #fff1e4, #ffd9bd); box-shadow: inset 0 0 0 .5px rgba(199, 90, 34, .18); color: #c75a22; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
.vipx__tag--reached { background: rgba(255, 255, 255, .4); box-shadow: none; color: rgba(0, 0, 0, .55); }
.vipx__tag--todo { background: rgba(0, 0, 0, .18); box-shadow: none; color: #fff; }
.vipx__in { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; }
.vipx__left { color: var(--vx-l, #806242); letter-spacing: 1px; }
.vipx__lv { font-style: italic; font-weight: 800; line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, .65), 0 1.5px 3px rgba(0, 0, 0, .12); }
.vipx__nm { font-weight: 600; white-space: nowrap; }
.vipx__right { min-width: 0; }
.vipx__bar { position: relative; overflow: hidden; background: #fff; }
.vipx__bar i { position: absolute; top: 0; left: 0; height: 100%; border-radius: inherit; background: var(--vx-f, linear-gradient(to left, #f1b964, #fad760)); transition: width .3s; }
.vipx__txt { white-space: nowrap; }
.vipx__state { font-weight: 700; }
.vipx__foot { opacity: .85; white-space: nowrap; }
.vipx__foot b { font-weight: 700; }
/* 側欄小卡 */
.vipx--side { height: 84px; margin: 0 10px 18px; }
.vipx--side .vipx__in { padding: 18px 10px 6px 12px; }
.vipx--side .vipx__lv { font-size: 24px; }
.vipx--side .vipx__nm { margin-top: 3px; font-size: 12px; }
.vipx--side .vipx__right { flex: 0 1 152px; margin-left: 8px; }
.vipx--side .vipx__bar { height: 5px; border-radius: 5px; }
.vipx--side .vipx__txt { display: block; margin: 2px 0 3px; font-size: 10px; line-height: 13px; }
.vipx--side .vipx__state { font-size: 13px; }
.vipx--side .vipx__foot { font-size: 10px; }

body.sh-desktop .pcard__carry { margin: 0 10px 6px !important; padding: 10px 12px !important; border: 0 !important; border-radius: 6px !important; background: var(--mpc-grey) !important; color: var(--mpc-t1) !important; text-align: left !important; }
body.sh-desktop .pcard__carry-h { color: var(--mpc-t2) !important; font-size: 13px !important; }
body.sh-desktop .pcard__carry-h .l { color: var(--mpc-t2) !important; opacity: 1 !important; }
body.sh-desktop .pcard__carry-h .n { color: var(--mpc-deep) !important; font-weight: 700 !important; }
body.sh-desktop .pcard__carry .bar { height: 5px !important; margin-top: 6px !important; border-radius: 5px !important; background: #dfe6f0 !important; }
body.sh-desktop .pcard__carry .bar i { border-radius: 5px !important; background: var(--mpc-grad) !important; }
body.sh-desktop .pcard__wallet { margin: 0 10px !important; padding: 6px 0 26px !important; border: 0 !important; border-bottom: 1px solid var(--mpc-line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body.sh-desktop .pcard__wh { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 20px !important; padding: 10px 0 !important; }
body.sh-desktop .pcard__wh .h { display: inline-flex !important; align-items: center !important; color: #000 !important; font-size: 15px !important; font-weight: 700 !important; opacity: 1 !important; }
body.sh-desktop .pcard__wh .h::before { content: ""; width: 15px; height: 15px; margin-right: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332c5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E") center/contain no-repeat; }
body.sh-desktop .pcard__wbtn { width: 26px !important; height: 26px !important; border: 0 !important; border-radius: 50% !important; background: none !important; color: var(--mpc-t3) !important; }
body.sh-desktop .pcard__wbtn:hover { background: var(--mpc-grey) !important; color: var(--mpc-deep) !important; }
body.sh-desktop .pcard__wbtn svg { width: 16px !important; height: 16px !important; }
body.sh-desktop .pcard__wallet > .v { margin: 4px 0 18px !important; color: var(--mpc-deep) !important; font-size: 20px !important; font-weight: 700 !important; text-align: center !important; text-shadow: none !important; }
body.sh-desktop .pcard__wallet > .v::before { content: attr(data-label); margin-right: 6px !important; color: var(--mpc-primary) !important; font-size: 14px !important; font-weight: 400 !important; }
body.sh-desktop .pcard__game { display: none !important; }   /* 遊戲分數會自動收回，電腦版不顯示「游戏中／一键回收」 */
body.sh-desktop .pcard__acts { display: flex !important; justify-content: center !important; gap: 12px !important; margin: 0 !important; }
body.sh-desktop .pcard__acts button { flex: 0 0 96px !important; height: 34px !important; padding: 0 !important; border: 0 !important; border-radius: 4px !important; background: var(--mpc-grad) !important; box-shadow: var(--mpc-btn-shadow) !important; color: #fff !important; font-size: 14px !important; font-weight: 500 !important; }
body.sh-desktop .pcard__acts button:hover { filter: brightness(1.06) !important; }

body.sh-desktop .mgroup { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.sh-desktop .mgroup__t { display: flex; align-items: center; margin: 0 30px; padding: 14px 0 8px; color: #000; font-size: 15px !important; font-weight: 700; letter-spacing: 0; text-transform: none; }
body.sh-desktop .mgroup__t::before { content: ""; width: 14px; height: 14px; margin-right: 8px; background: var(--mpc-ic, none) center/contain no-repeat; }
body.sh-desktop .mgroup:nth-of-type(2) .mgroup__t { --mpc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332c5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
body.sh-desktop .mgroup:nth-of-type(3) .mgroup__t { --mpc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332c5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 4 9h10l4-9-5 4-4-6-4 6z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E"); }
body.sh-desktop .mgroup:nth-of-type(4) .mgroup__t { --mpc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332c5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0M16 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-6-6.9'/%3E%3C/svg%3E"); }
body.sh-desktop .mgroup:nth-of-type(5) .mgroup__t { --mpc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332c5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
body.sh-desktop .mgroup::after { content: ""; display: block; margin: 0 20px; border-bottom: 1px solid var(--mpc-line); }
body.sh-desktop .mgroup:last-of-type::after { content: none; }
body.sh-desktop .mgrid { display: block; margin: 0 20px 0 0; padding: 0 0 10px; gap: 0; }
body.sh-desktop .mgrid button { position: relative; display: block; width: 100%; min-height: 0; margin: 0; padding: 10px 0 10px 56px !important; border: 0; border-left: 4px solid transparent !important; border-radius: 0; background: none; box-shadow: none; color: #000; font-size: 15px !important; font-weight: 400 !important; line-height: 1.5; text-align: left; transition: color .2s, background-color .2s; }
body.sh-desktop .mgrid button > span { font-size: inherit !important; font-weight: inherit !important; }
body.sh-desktop .mgrid button .ic, body.sh-desktop .mgrid button::after, body.sh-desktop .mgrid button::before { display: none; content: none; }
body.sh-desktop .mgrid button:hover { background: none; color: var(--mpc-deep); transform: none; }
body.sh-desktop .mgrid button.is-active { border-left-color: var(--mpc-primary); background: var(--mpc-grey); color: var(--mpc-deep); }
body.sh-desktop #overview .logout { display: block; width: auto; margin: 14px 30px 0; padding: 9px 0; border: 1px solid var(--mpc-line); border-radius: 4px; background: #fff; box-shadow: none; color: var(--mpc-t2); font-size: 14px; font-weight: 400; letter-spacing: 0; }
body.sh-desktop #overview .logout:hover { border-color: var(--mpc-primary); color: var(--mpc-deep); }

/* ---------- 內容欄：一個白框＝標題列（底線）＋面板 ---------- */
body.sh-desktop #detail { display: block !important; min-height: 640px; padding: 20px 40px 40px; background: #fff; box-shadow: var(--mpc-shadow); }
body.sh-desktop .pc-paneltitle { margin: 0 0 30px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--mpc-line); border-radius: 0; background: none; box-shadow: none; color: var(--mpc-t1); font-size: 24px; font-weight: 700; line-height: 36px; }
body.sh-desktop #detail .mpanel { position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.sh-desktop #detail .mpanel > .panel-actions { position: absolute; top: -89px; right: 0; margin: 0; }
body.sh-desktop .panel-actions .ghost-link { display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--mpc-grad); box-shadow: var(--mpc-btn-shadow); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
body.sh-desktop .panel-actions .ghost-link:hover { filter: brightness(1.06); }
body.sh-desktop #detail .mpanel__sub { margin: 26px 0 14px; color: var(--mpc-t1); font-size: 18px; font-weight: 800; }
body.sh-desktop #detail .mpanel > .mpanel__sub:first-child, body.sh-desktop #detail .info-grid .mpanel__sub { margin-top: 0; }
body.sh-desktop #detail .btn-primary { width: auto; min-width: 180px; height: 44px; padding: 0 36px; border: 0; border-radius: 4px; background: var(--mpc-grad); box-shadow: var(--mpc-btn-shadow); color: #fff; font-size: 15px; font-weight: 500; }
body.sh-desktop #detail .btn-primary:disabled { background: hsla(0, 0%, 80%, .5); box-shadow: none; color: rgba(0, 0, 0, .4); }
body.sh-desktop #detail .field label { color: var(--mpc-t2); font-size: 15px; font-weight: 700; }
body.sh-desktop #detail .field input, body.sh-desktop #detail .field select { height: 44px; border: 1px solid #dcdfe6; border-radius: 4px; background: #fff; box-shadow: none; font-size: 15px; }
body.sh-desktop #detail .field input:focus, body.sh-desktop #detail .field select:focus { border-color: var(--mpc-primary); box-shadow: 0 0 0 2px rgba(50, 197, 255, .18); outline: 0; }

/* 帳號與資料：標籤靠右、值在右邊 */
body.sh-desktop #panel-account .info-grid { display: block; }
body.sh-desktop #panel-account .info-grid > div + div { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--mpc-line); }
body.sh-desktop #panel-account .pref-block { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--mpc-line); }
body.sh-desktop #panel-account .info-row { display: flex; align-items: center; justify-content: flex-start; min-height: 44px; margin: 0 0 6px; padding: 0; border: 0; background: none; }
body.sh-desktop #panel-account .info-row .k { flex: 0 0 150px; padding-right: 14px; color: #000; font-size: 15px; font-weight: 400; text-align: right; }
body.sh-desktop #panel-account .info-row .k::after { content: "："; }
body.sh-desktop #panel-account .info-row .v { color: #000; font-size: 15px; font-weight: 400; text-align: left; }
body.sh-desktop #panel-account .info-row .v.link { color: var(--mpc-deep); cursor: pointer; }

/* 訊息中心：分段頁籤＋鈴鐺列 */
body.sh-desktop .msg-tabs { display: flex; width: auto; height: 40px; margin: 0 0 30px; padding: 0; overflow: visible; border: 0; border-radius: 4px; background: none; }
body.sh-desktop .msg-tabs button { flex: 0 0 150px; min-height: 0; height: 40px; border: 1px solid rgba(153, 153, 153, .4); border-left: 0; border-radius: 0; background: #fff; color: #000; font-size: 15px; font-weight: 400; }
body.sh-desktop .msg-tabs button:first-child { border-left: 1px solid rgba(153, 153, 153, .4); border-radius: 4px 0 0 4px; }
body.sh-desktop .msg-tabs button:last-child { border-radius: 0 4px 4px 0; }
body.sh-desktop .msg-tabs button span { margin-left: 4px; color: var(--mpc-t3); font-size: 14px; }
body.sh-desktop .msg-tabs button span::before { content: "("; } body.sh-desktop .msg-tabs button span::after { content: ")"; }
body.sh-desktop .msg-tabs button.is-active { border-color: var(--mpc-primary); background: var(--mpc-primary); color: #fff; }
body.sh-desktop .msg-tabs button.is-active span { color: #fff; }
body.sh-desktop .msg-tabs button.is-active + button { border-left-color: transparent; }
body.sh-desktop .msg-item { position: relative; display: flex; align-items: center; margin: 0; padding: 15px; border: 0; border-bottom: 1px solid var(--mpc-line); border-radius: 0; background: none; box-shadow: none; cursor: pointer; transition: background-color .2s; }
body.sh-desktop .msg-item:hover { background: #f7fbff; transform: none; }
body.sh-desktop .msg-item::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; margin-right: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332c5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E") center/contain no-repeat; }
body.sh-desktop .msg-item:not(.is-read)::after { content: ""; position: absolute; top: 50%; left: 28px; width: 7px; height: 7px; margin-top: -11px; border-radius: 50%; background: #f56c6c; }
body.sh-desktop .msg-item__body { display: grid; flex: 1 1 0; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; min-width: 0; }
body.sh-desktop .msg-item__head { display: flex; grid-column: 1; align-items: center; gap: 8px; min-width: 0; }
body.sh-desktop .msg-item__head h4 { margin: 0; overflow: hidden; color: var(--mpc-t1); font-size: 15px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
body.sh-desktop .msg-item:not(.is-read) .msg-item__head h4 { font-weight: 700; }
body.sh-desktop .msg-item__body p { grid-column: 1; margin: 5px 0 0; overflow: hidden; color: #000; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
body.sh-desktop .msg-item__body time { grid-column: 2; grid-row: 1 / span 2; color: var(--mpc-t2); font-size: 13px; white-space: nowrap; }
body.sh-desktop .msg-item__arw { display: none; }
body.sh-desktop .msg-tag { border-radius: 2px; }

/* ---------- 我的 VIP ---------- */
body.sh-desktop .vipsys { padding: 0; border: 0; background: none; }
body.sh-desktop .vip-carousel { position: relative; margin: -10px -16px 0; padding: 0; }
body.sh-desktop .vip-cards { display: flex; gap: 20px; margin: 0; padding: 14px 0 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; user-select: none; -webkit-mask-image: none; mask-image: none; }
body.sh-desktop .vip-cards::-webkit-scrollbar { display: none; }
body.sh-desktop .vip-cards::before, body.sh-desktop .vip-cards::after { content: ""; flex: 0 0 calc(50% - 280px); }
body.sh-desktop .vip-cards.drag { scroll-snap-type: none; cursor: grabbing; }
body.sh-desktop .vip-card.vipx { flex: 0 0 520px; width: 520px; min-width: 0; height: 160px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 16px; background: none; box-shadow: none; opacity: .55; text-align: left; transform: scale(.9); scroll-snap-align: center; transition: opacity .3s, transform .3s; cursor: pointer; }
body.sh-desktop .vip-card.vipx::before, body.sh-desktop .vip-card.vipx::after { content: none; }
body.sh-desktop .vip-card.vipx.is-picked { opacity: 1; transform: none; box-shadow: 0 10px 24px rgba(var(--vx-g, 241, 185, 100), .35); }
.vipx--hero .vipx__tag { min-width: 76px; height: 26px; border-radius: 16px 0 16px 0; font-size: 12px; line-height: 26px; }
.vipx--hero .vipx__in { padding: 12px 32px 0 36px; }
.vipx--hero .vipx__lv { font-size: 56px; }
.vipx--hero .vipx__nm { margin-top: 8px; font-size: 18px; }
.vipx--hero .vipx__right { flex: 0 1 290px; margin-left: 16px; }
.vipx--hero .vipx__row + .vipx__row { margin-top: 8px; }
.vipx--hero .vipx__bar { height: 8px; border-radius: 8px; }
.vipx--hero .vipx__txt { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; }
.vipx--hero .vipx__state { font-size: 20px; line-height: 28px; }
.vipx--hero .vipx__foot { margin-top: 8px; font-size: 13px; line-height: 20px; }
body.sh-desktop .vip-nav { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: -20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(19, 70, 118, .18); color: var(--mpc-t2); opacity: 1; transform: none; transition: opacity .2s, color .2s; }
body.sh-desktop .vip-nav:hover { color: var(--mpc-deep); }
body.sh-desktop .vip-nav--prev { left: 16px; right: auto; } body.sh-desktop .vip-nav--next { right: 16px; left: auto; }
body.sh-desktop .vip-nav svg { width: 20px; height: 20px; }
body.sh-desktop .vip-nav.is-off { opacity: 0; pointer-events: none; }
.vipx-tabs { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 14px; }
.vipx-tabs button { display: inline-block; margin-right: 13px; padding: 3px 10.5px; border: 0; border-radius: 3px; background: #edeff4; color: rgba(0, 0, 0, .4); font-size: 16px; line-height: 1.5; cursor: pointer; transition: background-color .2s, color .2s; }
.vipx-tabs button:hover { color: var(--mpc-deep); }
.vipx-tabs button.is-active { background: var(--mpc-primary); color: #fff; }
.vipx-welfare h3 { margin: 26px 0 0; color: var(--mpc-t1); font-size: 18px; font-weight: 800; }
.vipx-welfare__tip { margin: 16px 0 17px; color: rgba(0, 0, 0, .4); font-size: 14px; }
.vipx-welfare__tip b { color: var(--mpc-deep); font-weight: 400; }
.vipx-medals { display: flex; flex-wrap: wrap; }
.vipx-medal { position: relative; width: 190px; height: 160px; margin: 0 13px 8px 0; color: #fff; font-size: 14px; text-align: center; }
.vipx-medal:nth-child(4n) { margin-right: 0; }
.vipx-medal__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.vipx-medal__top { position: relative; z-index: 1; width: 124px; height: 42px; margin: 0 auto; padding: 3px 4px 0; }
.vipx-medal__top span { display: block; overflow: hidden; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.vipx-medal__ic { position: absolute; top: 51px; left: 50%; z-index: 1; width: 80px; height: 80px; margin-left: -40px; }
.vipx-medal:not(.on) .vipx-medal__bg { filter: grayscale(1); opacity: .7; }
.vipx-medal:not(.on) .vipx-medal__ic { filter: grayscale(1); opacity: .45; }
body.sh-desktop .vip-prog { margin-top: 22px; border: 0; border-radius: 6px; background: var(--mpc-grey); box-shadow: none; }
body.sh-desktop .rebate-note { border: 0; border-radius: 6px; background: #f1f8ff; color: var(--mpc-t1); }
body.sh-desktop .rwd-tabs { display: flex; width: auto; height: 40px; margin-bottom: 20px; padding: 0; border: 0; border-radius: 4px; background: none; gap: 0; }
body.sh-desktop .rwd-tabs button { flex: 0 0 150px; height: 40px; border: 1px solid rgba(153, 153, 153, .4); border-left: 0; border-radius: 0; background: #fff; box-shadow: none; color: #000; font-size: 15px; font-weight: 400; }
body.sh-desktop .rwd-tabs button:first-child { border-left: 1px solid rgba(153, 153, 153, .4); border-radius: 4px 0 0 4px; }
body.sh-desktop .rwd-tabs button:last-child { border-radius: 0 4px 4px 0; }
body.sh-desktop .rwd-tabs button.is-active { border-color: var(--mpc-primary); background: var(--mpc-primary); color: #fff; }
body.sh-desktop .giftrow { border: 0; border-bottom: 1px solid var(--mpc-line); border-radius: 0; background: none; box-shadow: none; }
body.sh-desktop .giftrow.me { background: #f1f8ff; }
body.sh-desktop .giftrow .rwd-claim { border: 0; border-radius: 4px; background: var(--mpc-grad); box-shadow: var(--mpc-btn-shadow); color: #fff; }

/* ---------- 充值／提款：模板金流頁（藍色頁首＋分頁、白色方式卡、快選金額） ---------- */
.mpc-fin { margin: 0 0 22px; }
.mpc-fin__top { display: flex; align-items: center; height: 70px; padding: 0 32px; border-radius: 8px 8px 0 0; background: linear-gradient(120deg, #1b91ff, #25c8fe 70%, #32c5ff); color: #fff; font-size: 15px; }
.mpc-fin__top b { margin-left: 8px; font-size: 18px; font-weight: 700; }
.mpc-fin__top a { margin-left: auto; padding: 5px 14px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px; color: #fff; font-size: 13px; text-decoration: none; cursor: pointer; }
.mpc-fin__tabs { display: flex; gap: 8px; margin-top: -1px; padding: 8px; border-radius: 0 0 8px 8px; background: #fff; box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .08); }
.mpc-fin__tabs button { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 0; border-radius: 4px; background: none; color: #000; font-size: 15px; cursor: pointer; }
.mpc-fin__tabs button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mpc-fin__tabs button.is-active { background: var(--mpc-grad); box-shadow: var(--mpc-btn-shadow); color: #fff; }
body.sh-desktop #panel-deposit > .panel-actions, body.sh-desktop #panel-consign > .panel-actions { display: none; }   /* 記錄連結移到金流頁首右側 */
body.sh-desktop .pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; }
body.sh-desktop .pay-method { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 92px; padding: 12px 10px; border: 2px solid transparent; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .08); text-align: center; cursor: pointer; transition: border-color .2s; }
body.sh-desktop .pay-method:hover { transform: none; }
body.sh-desktop .pay-method.is-active { border-color: var(--mpc-primary); background: #fff; }
body.sh-desktop .pay-method.is-active::after { content: ""; position: absolute; top: -2px; right: -2px; width: 22px; height: 20px; border-radius: 0 8px 0 18px; background: var(--mpc-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") 6px 3px/11px no-repeat; }
body.sh-desktop .pay-method .pm-n { color: #000; font-size: 15px; font-weight: 500; }
body.sh-desktop .pay-method .pm-l { color: rgba(0, 0, 0, .4); font-size: 13px; }
body.sh-desktop .amt-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
body.sh-desktop .amt-chips button { min-width: 92px; height: 38px; padding: 0 14px; border: 1px solid #dcdfe6; border-radius: 4px; background: #fff; color: var(--mpc-t1); font-size: 15px; }
body.sh-desktop .amt-chips button.is-active, body.sh-desktop .amt-chips button:hover { border-color: var(--mpc-primary); background: #f1faff; color: var(--mpc-deep); }
body.sh-desktop #panel-consign .wbal { display: none; }   /* 餘額已在金流頁首 */
body.sh-desktop .addr-card, body.sh-desktop .addr-empty { border-radius: 8px; box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .08); }
body.sh-desktop .addr-card { border: 2px solid transparent; background: #fff; }
body.sh-desktop .addr-card.is-active { border-color: var(--mpc-primary); background: #fff; }
body.sh-desktop #detail .hint { color: var(--mpc-t2); font-size: 13px; }
body.sh-desktop .giftlist { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.sh-desktop .addr-card .info b { display: block; font-size: 15px; }
body.sh-desktop .addr-card .info span { display: block; margin-top: 2px; color: var(--mpc-t2); font-size: 13px; }

/* =====================================================================
   簽到／反水／流水詳情（含充值、提現記錄）／優惠 —— 電腦版（2026-10-03）
   模板有的照模板（紀錄頁的分段頁籤＋表格列、優惠橫式卡、VIP 福利領取卡）；
   模板沒有簽到與反水頁，這兩頁套模板的獎勵卡樣式（白卡、金色金額、漸層按鈕）。
   ===================================================================== */
/* 分段頁籤：分類／日期區間／優惠分類 */
body.sh-desktop .rec-cats, body.sh-desktop .rec-ranges, body.sh-desktop .promo-tabs, body.sh-desktop .rec-filter { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 20px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.sh-desktop .rec-cats button, body.sh-desktop .rec-ranges button, body.sh-desktop .promo-tabs button, body.sh-desktop .rec-filter button { flex: 0 0 auto; min-width: 96px; height: 40px; margin: 0; padding: 0 18px; border: 1px solid rgba(153, 153, 153, .4); border-left: 0; border-radius: 0; background: #fff; box-shadow: none; color: #000; font-size: 15px; font-weight: 400; white-space: nowrap; cursor: pointer; }
body.sh-desktop .rec-cats button:first-child, body.sh-desktop .rec-ranges button:first-child, body.sh-desktop .promo-tabs button:first-child, body.sh-desktop .rec-filter button:first-child { border-left: 1px solid rgba(153, 153, 153, .4); border-radius: 4px 0 0 4px; }
body.sh-desktop .rec-cats button:last-child, body.sh-desktop .rec-ranges button:last-child, body.sh-desktop .promo-tabs button:last-child, body.sh-desktop .rec-filter button:last-child { border-radius: 0 4px 4px 0; }
body.sh-desktop .rec-cats button.on, body.sh-desktop .rec-ranges button.on, body.sh-desktop .promo-tabs button.is-active, body.sh-desktop .rec-filter button.is-active { border-color: var(--mpc-primary); background: var(--mpc-primary); color: #fff; }
body.sh-desktop .rec-cats button.on + button, body.sh-desktop .rec-ranges button.on + button, body.sh-desktop .promo-tabs button.is-active + button, body.sh-desktop .rec-filter button.is-active + button { border-left-color: transparent; }
/* 區間總計：灰底一列 */
body.sh-desktop .rec-sum__bar { display: flex; margin: 0 0 16px; padding: 14px 0; border: 0; border-radius: 6px; background: var(--mpc-grey); box-shadow: none; }
body.sh-desktop .rec-sum__it { flex: 1 1 0; padding: 0 10px; border-left: 1px solid #e0e4ea; text-align: center; }
body.sh-desktop .rec-sum__it:first-child { border-left: 0; }
body.sh-desktop .rec-sum__it span { display: block; color: var(--mpc-t2); font-size: 13px; }
body.sh-desktop .rec-sum__it b { display: block; margin-top: 4px; color: var(--mpc-t1); font-size: 18px; font-weight: 700; font-style: normal; }
body.sh-desktop .rec-sum__it b.gold { color: #c08a3e; }
body.sh-desktop .rec-summary .card { border: 0; border-radius: 6px; background: var(--mpc-grey); }
body.sh-desktop .rec-summary .card .v { color: var(--mpc-deep); font-style: normal; }
/* 紀錄列：表格式扁平列 */
body.sh-desktop .rec-list { border-top: 1px solid var(--mpc-line); }
body.sh-desktop .bet-row, body.sh-desktop .rec-row { margin: 0; padding: 14px 12px; border: 0; border-bottom: 1px solid var(--mpc-line); border-radius: 0; background: none; box-shadow: none; transition: background-color .2s; }
body.sh-desktop .bet-row:hover, body.sh-desktop .rec-row:hover { background: #f7fbff; }
body.sh-desktop .bet-row__h { gap: 6px; font-size: 15px; }
body.sh-desktop .bet-row .bet-g { color: var(--mpc-t1); font-weight: 700; }
body.sh-desktop .bet-row__meta { color: var(--mpc-t3); font-size: 13px; }
body.sh-desktop .bet-row__r { flex-direction: row; align-items: center; gap: 0; }
body.sh-desktop .bet-row__amt { flex-direction: column; align-items: flex-end; gap: 3px; min-width: 104px; font-size: 16px; font-weight: 700; color: var(--mpc-t1); }
body.sh-desktop .bet-row__amt > span { color: var(--mpc-t2); font-size: 13px; font-weight: 400; }
body.sh-desktop .bet-tag { border-radius: 2px; }
body.sh-desktop .rec-end { padding: 18px 0 0; color: var(--mpc-t3); font-size: 13px; text-align: center; }

/* 優惠：橫式卡（左圖右文） */
body.sh-desktop .promo-card { display: flex; margin: 0 0 20px; overflow: hidden; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .08); transition: transform .2s, box-shadow .2s; }
body.sh-desktop .promo-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(19, 70, 118, .16); }
body.sh-desktop .promo-card__banner { flex: 0 0 226px; width: 226px; height: 170px; background: linear-gradient(120deg, #1b91ff, #25c8fe); }
body.sh-desktop .promo-card__banner img { object-position: 50% 22%; }
body.sh-desktop .promo-card__tag { top: 0; left: 0; padding: 4px 12px; border-radius: 0 0 8px 0; background: var(--mpc-grad); color: #fff; font-size: 13px; font-weight: 500; }
body.sh-desktop .promo-card__body { display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; min-width: 0; padding: 20px 28px; }
body.sh-desktop .promo-card__body h4 { margin: 0 0 8px; color: var(--mpc-t1); font-size: 20px; font-weight: 700; }
body.sh-desktop .promo-card__body p { color: var(--mpc-t2); font-size: 14px; line-height: 1.6; }
body.sh-desktop .promo-card__date { margin-top: 12px; color: var(--mpc-t3); font-size: 13px; }
body.sh-desktop .promo-cta { border: 0; border-radius: 4px; background: var(--mpc-grad); box-shadow: var(--mpc-btn-shadow); color: #fff; }

/* 簽到：七格獎勵卡（藍色日期帶＋金色金額） */
body.sh-desktop .signin-hero { border-radius: 8px; }
body.sh-desktop .signin-head .t { color: var(--mpc-t1); font-size: 18px; }
body.sh-desktop .signin-head .t b { color: var(--mpc-deep); font-size: 22px; }
body.sh-desktop .signin-head .ghost-link { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border: 1px solid var(--mpc-primary); border-radius: 4px; background: #fff; color: var(--mpc-deep); font-size: 14px; }
body.sh-desktop .signin-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 22px; }
body.sh-desktop .si-day { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 0 14px; overflow: hidden; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 6px 10px rgba(19, 70, 118, .1); opacity: 1; }
body.sh-desktop .si-day .d { width: 100%; padding: 8px 0; background: #b9c2d0; color: #fff; font-size: 14px; font-weight: 500; text-align: center; }
body.sh-desktop .si-day .r { margin: 16px 0 12px; color: #c08a3e; font-size: 24px; font-weight: 600; font-style: normal; }
body.sh-desktop .si-day .st { margin: 0; padding: 3px 10px; border-radius: 3px; background: #edeff4; color: rgba(0, 0, 0, .4); font-size: 12px; font-weight: 400; }
body.sh-desktop .si-day.today { background: #fff; box-shadow: 0 0 0 2px var(--mpc-primary), 0 8px 16px rgba(50, 197, 255, .25); }
body.sh-desktop .si-day.today .d { background: var(--mpc-grad); }
body.sh-desktop .si-day.today .st { background: var(--mpc-grad); color: #fff; }
body.sh-desktop .si-day.done .d { background: linear-gradient(to left, #7ed6a5, #2cbc7a); }
body.sh-desktop .si-day.done .r { color: var(--mpc-t3); }
body.sh-desktop .si-day.done .st { background: #e3f6ea; color: #1f8f4d; }
body.sh-desktop .signin-prog { padding: 18px 20px; border: 0; border-radius: 6px; background: var(--mpc-grey); }
body.sh-desktop .signin-prog .row { font-size: 14px; }
body.sh-desktop .signin-prog .row b { color: var(--mpc-deep); }
body.sh-desktop .signin-prog .pbar { background: #dfe6f0; }
body.sh-desktop .signin-prog .pbar i { background: var(--mpc-grad); }
body.sh-desktop #panel-signin .promo-rules { margin-top: 24px; padding: 18px 22px; border: 0; border-radius: 6px; background: #f7fbff; }

/* 反水：藍色總額列＋兩欄獎勵卡 */
body.sh-desktop .rebate-top { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 20px; margin-bottom: 26px; padding: 22px 32px; border: 0; border-radius: 8px; background: linear-gradient(120deg, #1b91ff, #25c8fe 70%, #32c5ff); box-shadow: none; text-align: left; }
body.sh-desktop .rebate-top::before, body.sh-desktop .rebate-top::after { display: none; }
body.sh-desktop .rebate-top .l { grid-column: 1; font-size: 15px; opacity: 1; }
body.sh-desktop .rebate-top .v { grid-column: 1; margin: 4px 0 0; font-size: 34px; font-style: normal; font-weight: 700; text-shadow: none; }
body.sh-desktop .rebate-top button { grid-column: 2; grid-row: 1 / span 2; min-width: 130px; height: 42px; padding: 0 24px; border: 0; border-radius: 4px; background: #fff; box-shadow: none; color: var(--mpc-deep); font-size: 15px; font-weight: 700; }
body.sh-desktop .rebate-top.is-empty { background: linear-gradient(120deg, #9aa3b2, #b7bfcc); }
body.sh-desktop .rebate-top.is-empty button { background: rgba(255, 255, 255, .5); color: #7b8494; }
body.sh-desktop #rbCats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
body.sh-desktop .rebate-cat { margin: 0; padding: 18px 20px; border: 0; border-radius: 5px; background: #fff; box-shadow: 0 6px 10px rgba(19, 70, 118, .1); }
body.sh-desktop .rebate-cat.is-empty { background: #fff; }
body.sh-desktop .rebate-cat:hover { transform: none; box-shadow: 0 6px 10px rgba(19, 70, 118, .1); }
body.sh-desktop .rebate-cat .info b { color: var(--mpc-t1); font-size: 16px; }
body.sh-desktop .rebate-cat .info span { color: rgba(0, 0, 0, .4); font-size: 13px; }
body.sh-desktop .rebate-cat .amt .n { color: #c08a3e; font-size: 22px; font-style: normal; font-weight: 600; }
body.sh-desktop .rebate-cat.is-empty .amt .n { color: var(--mpc-t3); }
body.sh-desktop .rebate-cat .amt button { min-width: 96px; height: 32px; margin-top: 8px; padding: 0 14px; border: 0; border-radius: 4px; background: var(--mpc-grad); box-shadow: var(--mpc-btn-shadow); color: #fff; font-size: 14px; font-weight: 500; }
body.sh-desktop .rebate-cat .amt button:disabled { background: hsla(0, 0%, 80%, .5); box-shadow: none; color: rgba(0, 0, 0, .4); }
body.sh-desktop .rec-sum__it { border-right: 0; }

/* =====================================================================
   彩金中心／代理計劃／在線客服 —— 電腦版（2026-10-03）
   彩金照模板「我的優惠券」（上緣藍線的券卡）；客服照模板幫助中心（列表列＋手風琴）；
   模板沒有代理頁，套模板的橫幅、灰底數據格、獎勵列樣式。
   ===================================================================== */
/* 彩金：待完成碼量橫幅＋券卡 */
body.sh-desktop .bonus-top { margin-bottom: 26px; padding: 22px 32px 26px; border: 0; border-radius: 8px; background: linear-gradient(120deg, #1b91ff, #25c8fe 70%, #32c5ff); box-shadow: none; color: #fff; text-align: left; }
body.sh-desktop .bonus-top::before, body.sh-desktop .bonus-top::after { display: none; }
body.sh-desktop .bonus-top .l { color: #fff; font-size: 15px; opacity: 1; }
body.sh-desktop .bonus-top .v { margin: 4px 0; font-size: 34px; font-weight: 700; text-shadow: none; }
body.sh-desktop .bonus-top .s { color: #fff; font-size: 13px; opacity: .9; }
body.sh-desktop .bonus-task__chip { position: absolute; top: 20px; right: 28px; margin: 0; padding: 3px 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 12px; background: none; color: #fff; }
body.sh-desktop .bonus-task__chip .dot { background: #fff; }
body.sh-desktop .bonus-task__track { background: rgba(255, 255, 255, .28); }
body.sh-desktop .bonus-task__track i { background: #fff; }
body.sh-desktop .bonus-task.is-clear { background: linear-gradient(120deg, #2cbc7a, #7ed6a5); box-shadow: none; }
body.sh-desktop .bonus-task.is-clear .l, body.sh-desktop .bonus-task.is-clear .s { color: #fff; opacity: 1; }
body.sh-desktop #bnGrants { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
body.sh-desktop #bnGrants > .empty { grid-column: 1 / -1; }
body.sh-desktop .bonus-card { display: flex; align-items: center; gap: 16px; margin: 0; padding: 18px 20px; border: 0; border-top: 3px solid var(--mpc-primary); border-radius: 5px; background: #fff; box-shadow: 0 6px 10px rgba(19, 70, 118, .1); }
body.sh-desktop .bonus-card .info { flex: 1 1 0; min-width: 0; }
body.sh-desktop .bonus-card .info b { display: block; color: var(--mpc-t1); font-size: 17px; font-weight: 700; }
body.sh-desktop .bonus-card .info span { display: block; margin-top: 6px; color: rgba(0, 0, 0, .4); font-size: 13px; }
body.sh-desktop .bonus-card .amt { flex: 0 0 auto; text-align: right; }
body.sh-desktop .bonus-card .amt .n { color: #c08a3e; font-size: 22px; font-style: normal; font-weight: 600; }
body.sh-desktop .bonus-card .usdt-eq { color: var(--mpc-t3); font-size: 12px; }
body.sh-desktop .bonus-card .amt button { min-width: 96px; height: 32px; margin-top: 8px; padding: 0 14px; border: 0; border-radius: 4px; background: var(--mpc-grad); box-shadow: var(--mpc-btn-shadow); color: #fff; font-size: 14px; font-weight: 500; }

/* 代理：橫幅、邀請碼框、四格數據、獎勵列 */
body.sh-desktop .agent-hero { margin-bottom: 22px; padding: 26px 32px; border: 0; border-radius: 8px; background: linear-gradient(120deg, #1b91ff, #25c8fe 70%, #32c5ff); box-shadow: none; }
body.sh-desktop .agent-hero__t { font-size: 28px; font-weight: 700; }
body.sh-desktop .agent-hero__s { font-size: 15px; opacity: .95; }
body.sh-desktop .agent-hero__badge { border: 1px solid rgba(255, 255, 255, .7); border-radius: 14px; background: rgba(255, 255, 255, .16); color: #fff; }
body.sh-desktop .agent-code { margin-bottom: 20px; padding: 20px 24px; border: 0; border-radius: 6px; background: var(--mpc-grey); box-shadow: none; }
body.sh-desktop .agent-code .l { color: var(--mpc-t2); font-size: 14px; }
body.sh-desktop .agent-code__v { color: var(--mpc-deep); font-style: normal; font-weight: 700; }
body.sh-desktop .agent-code__btns { max-width: 420px; }
body.sh-desktop .agent-code__btns button { height: 40px; padding: 0 16px; border: 1px solid var(--mpc-primary); border-radius: 4px; background: #fff; color: var(--mpc-deep); font-size: 14px; font-weight: 500; }
body.sh-desktop .agent-code__btns button.gold { border: 0; background: var(--mpc-grad); box-shadow: var(--mpc-btn-shadow); color: #fff; }
body.sh-desktop .agent-code input { height: 40px; border: 1px solid #dcdfe6; border-radius: 4px; background: #fff; color: var(--mpc-t2); font-size: 13px; }
body.sh-desktop .agent-stats { grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 16px; padding: 16px 0; border-radius: 6px; background: var(--mpc-grey); }
body.sh-desktop .agent-stats .card { padding: 0 10px; border: 0; border-left: 1px solid #e0e4ea; border-radius: 0; background: none; }
body.sh-desktop .agent-stats .card:first-child { border-left: 0; }
body.sh-desktop .agent-stats .card .l { color: var(--mpc-t2); font-size: 13px; }
body.sh-desktop .agent-stats .card .v { color: var(--mpc-deep); font-size: 22px; font-style: normal; font-weight: 700; }
body.sh-desktop .agent-est { padding: 14px 18px; border-radius: 6px; background: #f1f8ff; color: var(--mpc-t1); font-size: 14px; }
body.sh-desktop .giftrow .lv { color: var(--mpc-deep); }
body.sh-desktop .giftrow .amt { color: #c08a3e; font-size: 18px; font-style: normal; font-weight: 600; }
body.sh-desktop .giftrow button.st { min-width: 84px; height: 32px; padding: 0 14px; border-radius: 4px !important; background: var(--mpc-grad) !important; box-shadow: var(--mpc-btn-shadow); color: #fff !important; font-size: 14px; font-weight: 500; }
body.sh-desktop .giftrow .st--lock { border-radius: 3px; background: #edeff4; color: rgba(0, 0, 0, .4); font-weight: 400; }

/* 客服：在線客服橫幅＋列表列、常見問題手風琴、意見反饋表單 */
body.sh-desktop .contact-row, body.sh-desktop .contact-card { border: 0; box-shadow: none; transform: none; }
body.sh-desktop #csOnline { margin-bottom: 8px; padding: 22px 28px; border-radius: 8px; background: linear-gradient(120deg, #1b91ff, #25c8fe 70%, #32c5ff); }
body.sh-desktop #csOnline .ic { background: rgba(255, 255, 255, .2); }
body.sh-desktop #csOnline .ic svg { fill: #fff; }
body.sh-desktop #csOnline .info b { color: #fff; font-size: 20px; }
body.sh-desktop #csOnline .info span { color: #fff; font-size: 14px; opacity: .95; }
body.sh-desktop #csOnline .arr { color: #fff; }
body.sh-desktop #csTg, body.sh-desktop .contact-card { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 12px; border-bottom: 1px solid var(--mpc-line); border-radius: 0; background: none; text-align: left; transition: background-color .2s; }
body.sh-desktop #csTg:hover, body.sh-desktop .contact-card:hover { background: #f7fbff; }
body.sh-desktop .contact-row .ic, body.sh-desktop .contact-card .ic { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #eaf6ff; font-size: 0; }
body.sh-desktop #csTg .ic svg, body.sh-desktop .contact-card .ic svg { width: 20px; height: 20px; fill: var(--mpc-deep); }
body.sh-desktop .contact-row .info b, body.sh-desktop .contact-card b { margin: 0; color: var(--mpc-t1); font-size: 16px; font-weight: 700; }
body.sh-desktop .contact-row .info span, body.sh-desktop .contact-card span:not(.ic) { color: var(--mpc-t2); font-size: 13px; }
body.sh-desktop .contact-grid { display: block; margin-bottom: 10px; }
body.sh-desktop .contact-card b { flex: 0 0 auto; }
body.sh-desktop .contact-card span:not(.ic) { flex: 1 1 0; }
body.sh-desktop .contact-card::after, body.sh-desktop #csTg .arr { content: "›"; color: var(--mpc-t3); font-size: 20px; }
body.sh-desktop .feedback-box { margin-top: 22px; padding: 22px 24px; border: 0; border-radius: 6px; background: var(--mpc-grey); box-shadow: none; }
body.sh-desktop .feedback-box textarea { border: 1px solid #dcdfe6; border-radius: 4px; background: #fff; font-size: 15px; }
body.sh-desktop .feedback-box textarea:focus { border-color: var(--mpc-primary); box-shadow: 0 0 0 2px rgba(50, 197, 255, .18); }
body.sh-desktop .faq__q { padding: 16px 12px; border-bottom: 1px solid var(--mpc-line); color: var(--mpc-t1); font-size: 16px; font-weight: 500; }
body.sh-desktop .faq__q:hover { background: #f7fbff; }
body.sh-desktop .faq.open .faq__q { color: var(--mpc-deep); }
body.sh-desktop .faq__a { padding: 14px 12px 18px; border-bottom: 1px solid var(--mpc-line); background: #f7fbff; color: var(--mpc-t2); font-size: 14px; }

/* =====================================================================
   充值／提現／彩金記錄列（模板「帳戶明細」表格列）、放不下可左右拖曳的頁籤列、大數字不擠出格子 —— 電腦版（2026-10-03）
   ===================================================================== */
/* 頁籤列一排放不下時不換行，改成可左右拖曳／滾輪捲動（js/h5.js dragScroll），右側淡出提示 */
body.sh-desktop .rec-cats, body.sh-desktop .rec-ranges, body.sh-desktop .promo-tabs, body.sh-desktop .rec-filter, body.sh-desktop .msg-tabs, body.sh-desktop .rwd-tabs, body.sh-desktop .vipx-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
body.sh-desktop .rec-cats::-webkit-scrollbar, body.sh-desktop .rec-ranges::-webkit-scrollbar, body.sh-desktop .promo-tabs::-webkit-scrollbar, body.sh-desktop .msg-tabs::-webkit-scrollbar, body.sh-desktop .rwd-tabs::-webkit-scrollbar, body.sh-desktop .vipx-tabs::-webkit-scrollbar { display: none; }
body.sh-desktop .rec-cats.h5-scrollable:not(.at-end), body.sh-desktop .promo-tabs.h5-scrollable:not(.at-end), body.sh-desktop .vipx-tabs.h5-scrollable:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
body.sh-desktop .vipx-tabs button { flex: 0 0 auto; }
body.sh-desktop .h5-scrollable { user-select: none; }
/* 記錄列：名稱／時間／單號在左，金額與狀態在右 */
body.sh-desktop .rec-row { display: flex; align-items: center; gap: 20px; }
body.sh-desktop .rec-row__i { display: flex; flex: 1 1 0; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
body.sh-desktop .rec-row__i b { flex: 0 0 100%; color: var(--mpc-t1); font-size: 16px; font-weight: 700; }
body.sh-desktop .rec-row__i time, body.sh-desktop .rec-row .rec-no { color: var(--mpc-t3); font-size: 13px; }
body.sh-desktop .rec-row__r { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; }
body.sh-desktop .rec-row .rec-amt { font-size: 20px; font-style: normal; font-weight: 600; white-space: nowrap; }
body.sh-desktop .rec-row .rec-st { min-width: 64px; padding: 2px 10px; border: 1px solid currentColor; border-radius: 3px; font-size: 13px; text-align: center; }
body.sh-desktop .rec-row .rec-view { color: var(--mpc-deep); font-size: 14px; white-space: nowrap; cursor: pointer; }
/* 大數字：格子寬度固定，放不下由 MPC.fit 縮字 */
body.sh-desktop .rec-sum__it { min-width: 0; }
body.sh-desktop .rec-sum__it b { overflow: hidden; white-space: nowrap; }
body.sh-desktop .agent-stats .card { min-width: 0; }
body.sh-desktop .agent-stats .card .v { overflow: hidden; white-space: nowrap; }
body.sh-desktop .pcard__wallet > .v { overflow: hidden !important; white-space: nowrap !important; }
body.sh-desktop .vipx__txt { max-width: 100%; overflow: hidden; }
body.sh-desktop .vipx--side .vipx__right { min-width: 0; }
body.sh-desktop .rec-row__r { flex-direction: row; }

/* =====================================================================
   個人資料／帳號安全／偏好設定＋編輯彈窗 —— 電腦版（2026-10-03 採樣模板 pc/user.html、user-security.html、user-settings.html）
   帳號資訊＝標籤靠右的表單列；帳號安全＝一項一張描邊卡（圓形圖示＋標題說明＋右側按鈕）；偏好＝圖示列；最下方登出鈕。
   ===================================================================== */
body.sh-desktop #panel-account .info-row.mpc-sec { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 18px; min-height: 0; margin: 0 0 16px; padding: 20px 24px; border: 1px solid #e3e6ea; border-radius: 4px; background: #fff; transition: border-color .2s, box-shadow .2s; }
body.sh-desktop #panel-account .info-row.mpc-sec:hover { border-color: var(--mpc-primary); box-shadow: 0 4px 12px rgba(50, 197, 255, .12); }
.mpc-sec__ic { display: grid; grid-row: 1 / span 2; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mpc-primary, #32c5ff); color: #fff; }
.mpc-sec__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.sh-desktop #panel-account .info-row.mpc-sec .k { flex: none; grid-column: 2; padding: 0; color: var(--mpc-t1); font-size: 17px; font-weight: 700; text-align: left; }
body.sh-desktop #panel-account .info-row.mpc-sec .k::after { content: none; }
.mpc-sec__d { grid-column: 2; color: #666; font-size: 13px; line-height: 1.5; }
body.sh-desktop #panel-account .info-row.mpc-sec .v { grid-column: 3; grid-row: 1 / span 2; }
body.sh-desktop #panel-account .info-row.mpc-sec .v.link { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; height: 36px; padding: 0 16px; border: 1px solid var(--mpc-primary); border-radius: 4px; background: #fff; color: var(--mpc-deep); font-size: 14px; white-space: nowrap; transition: background .2s, color .2s; }
body.sh-desktop #panel-account .info-row.mpc-sec .v.link:hover { border-color: transparent; background: var(--mpc-grad); box-shadow: var(--mpc-btn-shadow); color: #fff; }
body.sh-desktop #panel-account .pref-block .info-row.mpc-sec { margin-bottom: 0; border: 0; border-bottom: 1px solid var(--mpc-line); border-radius: 0; padding: 18px 12px; }
body.sh-desktop #panel-account .pref-block .info-row.mpc-sec:hover { border-color: var(--mpc-line); box-shadow: none; }
body.sh-desktop #panel-account .pref-block .mpc-sec__ic { background: none; color: var(--mpc-primary); }
body.sh-desktop .lang-pick { display: inline-flex; gap: 0; }
body.sh-desktop .lang-pick button { min-width: 78px; height: 36px; padding: 0 14px; border: 1px solid rgba(153, 153, 153, .4); border-left: 0; border-radius: 0; background: #fff; box-shadow: none; color: #000; font-size: 14px; font-weight: 400; }
body.sh-desktop .lang-pick button:first-child { border-left: 1px solid rgba(153, 153, 153, .4); border-radius: 4px 0 0 4px; }
body.sh-desktop .lang-pick button:last-child { border-radius: 0 4px 4px 0; }
body.sh-desktop .lang-pick button.is-active, body.sh-desktop .lang-pick button.on { border-color: var(--mpc-primary); background: var(--mpc-primary); color: #fff; }
body.sh-desktop .mpc-logout { display: block; width: 250px; height: 44px; margin: 34px auto 8px; border: 1px solid #f56c6c; border-radius: 4px; background: #fff; color: #f56c6c; font-size: 15px; letter-spacing: 2px; cursor: pointer; transition: background .2s, color .2s; }
body.sh-desktop .mpc-logout:hover { background: #f56c6c; color: #fff; }
/* 編輯彈窗（修改暱稱／手機／密碼）：白框、欄位描邊、取消描邊鈕＋確認漸層鈕 */
body.sh-desktop .ac-mask { background: rgba(0, 0, 0, .45); backdrop-filter: none; }
body.sh-desktop .ac-modal { width: 440px; max-width: calc(100vw - 40px); padding: 30px 36px 28px; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); }
body.sh-desktop .ac-modal h3 { margin: 0 0 22px; color: #333; font-size: 20px; font-weight: 700; text-align: center; }
body.sh-desktop .ac-field { display: block; margin-bottom: 16px; }
body.sh-desktop .ac-field > span { display: block; margin-bottom: 8px; color: #666; font-size: 14px; font-weight: 700; }
body.sh-desktop .ac-field input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #dcdfe6; border-radius: 4px; background: #fff; box-shadow: none; color: #000; font-size: 15px; }
body.sh-desktop .ac-field input:focus { border-color: #32c5ff; box-shadow: 0 0 0 2px rgba(50, 197, 255, .18); outline: 0; }
body.sh-desktop .ac-acts { display: flex; gap: 14px; margin-top: 24px; }
body.sh-desktop .ac-acts button { flex: 1 1 0; height: 44px; border-radius: 4px; font-size: 15px; font-weight: 500; cursor: pointer; }
body.sh-desktop .ac-cancel { border: 1px solid #dcdfe6; background: #fff; color: #666; }
body.sh-desktop .ac-ok { border: 0; background: linear-gradient(to left, #25e1fe, #1b91ff); box-shadow: 0 2px 8px 0 rgba(60, 160, 255, .47); color: #fff; }
#panel-account .info-row.mpc-sec .lang-pick { grid-column: 3; grid-row: 1 / span 2; }
body.sh-desktop #panel-account .pref-block { max-width: none; width: auto; }

/* =====================================================================
   其餘畫面收尾 —— 電腦版（2026-10-03）
   訊息內文、彈窗、優惠詳情、空狀態（模板插圖）、提款頁小元件。
   ===================================================================== */
/* 訊息內文（模板 pc-user-ndetail：標題、時間、內文、返回） */
body.sh-desktop .msg-read { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.sh-desktop .msg-read__head { margin-bottom: 10px; }
body.sh-desktop .msg-read__head time { color: var(--mpc-t2); font-size: 13px; }
body.sh-desktop .msg-read__title { margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--mpc-line); color: var(--mpc-t1); font-size: 20px; font-weight: 700; }
body.sh-desktop .msg-read__body { color: #333; font-size: 15px; line-height: 1.9; }
body.sh-desktop #msgBack { min-width: 120px; }
/* 通用彈窗（簽到記錄等） */
body.sh-desktop .app-modal { background: rgba(0, 0, 0, .45); backdrop-filter: none; }
body.sh-desktop .app-modal__box { max-width: 440px; padding: 30px 36px 28px; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); }
body.sh-desktop .app-modal__t { margin-bottom: 18px; color: #333; font-size: 20px; font-weight: 700; }
body.sh-desktop .app-modal__b { color: #666; font-size: 14px; }
body.sh-desktop .app-modal__b .rec-line { padding: 11px 0; border-bottom: 1px solid #ebeef3; }
body.sh-desktop .app-modal__b .rec-line b { color: #c08a3e; }
body.sh-desktop .app-modal__ok { height: 44px; margin-top: 22px; padding: 0; border-radius: 4px; background: linear-gradient(to left, #25e1fe, #1b91ff); box-shadow: 0 2px 8px 0 rgba(60, 160, 255, .47); color: #fff; font-size: 15px; font-weight: 500; }
/* 優惠詳情 */
body.sh-desktop .promo-hero { border-radius: 8px; }
body.sh-desktop .promo-hero__tag { border-radius: 3px; background: var(--mpc-grad); color: #fff; }
body.sh-desktop .promo-sec { margin-top: 20px; padding: 20px 24px; border: 1px solid #e3e6ea; border-radius: 4px; background: #fff; }
body.sh-desktop .promo-sec__h { color: var(--mpc-t1); font-size: 17px; }
body.sh-desktop .promo-sec__h svg { stroke: var(--mpc-primary); }
body.sh-desktop .promo-cta { width: 280px; height: 46px; margin: 24px auto 0; padding: 0; font-size: 16px; }
body.sh-desktop .promo-cta.is-done { background: hsla(0, 0%, 80%, .5); box-shadow: none; color: rgba(0, 0, 0, .4); }
body.sh-desktop .promo-date-chip { border-radius: 3px; background: var(--mpc-grey); color: var(--mpc-t2); }
/* 空狀態：模板插圖 */
body.sh-desktop #detail .empty { padding: 40px 20px 50px; color: var(--mpc-t3); font-size: 14px; }
body.sh-desktop #detail .empty::before { content: ""; display: block; width: 180px; height: 120px; margin: 0 auto 12px; background: url(../assets/img/pc/user-empty-trade.svg) center/contain no-repeat; }
body.sh-desktop #panel-messages .empty::before { background-image: url(../assets/img/pc/user-empty-msg.svg); }
body.sh-desktop #panel-bets .empty::before { background-image: url(../assets/img/pc/user-empty-game.svg); }
body.sh-desktop #panel-bonus .empty::before, body.sh-desktop #panel-promo .empty::before { background-image: url(../assets/img/pc/user-empty-coupon.svg); }
body.sh-desktop #detail .empty .ico { display: none; }
/* 提款頁小元件 */
body.sh-desktop .pwd-banner { border: 0; border-radius: 6px; background: var(--mpc-grey); }
body.sh-desktop .addr-empty { border: 1px dashed #c3ccd8; border-radius: 8px; box-shadow: none; }
body.sh-desktop .addr-empty .plus { color: var(--mpc-primary); }
body.sh-desktop #msgBack { display: inline-block; width: auto !important; }

/* ===== VIP 福利領取（模板 pc-user-reward）：兩欄獎勵卡——插圖＋名稱＋金色金額＋領取鈕；取代原本十級的長列表 ===== */
.vipx-claims__h small { margin-left: 15px; color: rgba(0, 0, 0, .4); font-size: 13px; font-weight: 400; }
body.sh-desktop .vipx-claims { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 18px 0 6px; }
body.sh-desktop .vipx-claim { display: flex; align-items: center; width: 388px; margin-bottom: 20px; padding: 20px 36px; border-radius: 5px; background: #fff; box-shadow: 0 6px 6px 0 rgba(19, 70, 118, .1); }
.vipx-claim__ic { flex: 0 0 150px; width: 150px; height: 100px; }
body.sh-desktop .vipx-claim__r { display: flex; flex-direction: column; justify-content: space-between; min-height: 100px; margin-left: 19px; }
body.sh-desktop .vipx-claim__t { color: rgba(0, 0, 0, .4); font-size: 14px; }
.vipx-claim__t small { margin-left: 8px; font-size: 12px; }
body.sh-desktop .vipx-claim__m { margin: 6px 0 10px; color: #c08a3e; font-size: 26px; font-weight: 600; }
body.sh-desktop .vipx-claim__btn, body.sh-desktop .vipx-claim__st { display: inline-flex; align-items: center; justify-content: center; width: 127px; height: 36px; border: 0; border-radius: 4px; font-size: 14px; }
body.sh-desktop .vipx-claim__btn { background: linear-gradient(to left, #25e1fe, #1b91ff); box-shadow: 0 2px 8px 0 rgba(60, 160, 255, .47); color: #fff; cursor: pointer; }
body.sh-desktop .vipx-claim__btn:hover { filter: brightness(1.06); }
.vipx-claim__btn:disabled { opacity: .6; cursor: default; }
body.sh-desktop .vipx-claim__st { background: hsla(0, 0%, 80%, .5); color: rgba(0, 0, 0, .4); }
.vipx-claim.is-off .vipx-claim__ic { filter: grayscale(1); opacity: .55; }
body.sh-desktop .vipx-claim.is-off .vipx-claim__m { color: #999; }

/* =====================================================================
   充值／提款 再次採樣（2026-10-04，模板 pc/finance.html；手機版在 member-m.css）
   版面由 js/member-pc.js 的 MPC.finX() 重排（面板帶 .mpc-fx-on）：
   方式卡（角標＋名稱＋說明）→ 左欄「为您推荐」＋右欄（方式／說明、金額卡、送出）→ 注意事項。
   ===================================================================== */
.mpc-gone { display: none !important; }
/* ---- 共用骨架 ---- */
.mpc-fx { display: flex; align-items: flex-start; gap: 15px; }
.mpc-fx__main { flex: 1 1 0; min-width: 0; }
.mpc-fx__head { display: flex; align-items: center; gap: 10px; min-height: 25px; margin: 0 0 15px; }
.mpc-fx__head b { flex: 0 0 auto; color: #000; font-size: 15px; font-weight: 500; }
.mpc-fx__pill { flex: 0 1 auto; overflow: hidden; min-width: 0; padding: 0 12px; border-radius: 14px; background: #f5f7fa; color: #666; font-size: 12px; line-height: 25px; text-overflow: ellipsis; white-space: nowrap; }
.mpc-lead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; color: #000; font-size: 15px; font-weight: 500; }
.mpc-lead small { color: #666; font-size: 13px; font-weight: 400; }
.mpc-lead small b { color: var(--mpc-primary, #1b91ff); font-weight: 700; }
.mpc-lead small button { margin-left: 8px; padding: 2px 12px; border: 0; border-radius: 12px; background: #eaf8ff; color: #1b91ff; font-size: 12px; cursor: pointer; font-family: inherit; }
.mpc-lead--sep { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6e6e6; }
.pay-method { --tag: #32c5ff; }
.pay-method--hot { --tag: #ff296e; }
.pay-method--easy { --tag: #a23ce8; }
.pay-method--rec { --tag: #ff8a1f; }
.pay-method--classic { --tag: #00ab37; }
.mpc-fx-on .pay-method .pm-tag { position: absolute; top: -2px; right: auto; bottom: auto; left: -2px; width: auto; height: 20px; padding: 1px 9px 1px 7px; border-radius: 8px 0 8px 0; background: var(--tag); color: #fff; font-size: 12px; font-style: italic; font-weight: 700; letter-spacing: .5px; line-height: 18px; white-space: nowrap; }
.mpc-fx-on .pay-method .pm-tag:empty { display: none; }
/* 目前選中的方式（模板的管道磚：圖示框＋右上角勾） */
.mpc-chan { display: inline-block; width: 100px; text-align: center; vertical-align: top; }
.mpc-chan__ic { position: relative; display: flex; align-items: center; justify-content: center; width: 75px; height: 60px; margin: 0 auto; border-radius: 5px; background: #fff; outline: 2px solid #32c5ff; box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .08); font-size: 26px; }
.mpc-chan__ic img { width: 40px; height: 40px; object-fit: contain; }
.mpc-chan__ic::after { content: ""; position: absolute; top: -2px; right: -2px; width: 20px; height: 18px; border-radius: 0 5px 0 18px; background: #32c5ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='m8 6.5 2.6 2.6L15.5 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.mpc-chan__n { display: block; margin-top: 7px; color: #000; font-size: 13px; line-height: 1.3; }
.mpc-way__none { margin: 0; padding: 14px 0; color: #999; font-size: 14px; text-align: center; }
.mpc-hints { margin: 0 0 15px; padding: 0; list-style: none; color: #000; font-size: 13px; line-height: 1.7; }
.mpc-hints li { display: flex; }
.mpc-hints li::before { content: "•"; flex: 0 0 auto; margin-right: 6px; color: #1b91ff; font-weight: 700; }
/* 金額輸入（前綴 ¥＋清除鈕） */
.mpc-amt { position: relative; display: flex; align-items: center; height: 44px; border: 2px solid #32c5ff; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(50, 197, 255, .4); }
.mpc-amt__pre { display: flex; flex: 0 0 42px; align-items: center; justify-content: center; height: 100%; border-right: 1px solid #dcdfe6; border-radius: 2px 0 0 2px; background: #f5f7fa; color: #909399; font-size: 17px; font-style: normal; font-weight: 700; }
.mpc-amt input { flex: 1 1 auto; width: 100% !important; min-width: 0; height: 100% !important; margin: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: #000; font-size: 17px; font-weight: 600; -moz-appearance: textfield; }
.mpc-amt input::-webkit-outer-spin-button, .mpc-amt input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.mpc-amt input::placeholder { color: #c0c4cc; font-size: 14px; font-weight: 400; }
.mpc-amt__x { display: flex; flex: 0 0 36px; align-items: center; justify-content: center; height: 100%; padding: 0; border: 0; background: none; color: #c0c4cc; cursor: pointer; }
.mpc-amt__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mpc-amt__x:hover { color: #909399; }
.mpc-range { margin: 8px 0 4px; color: #000; font-size: 13px; }
.mpc-range:empty { display: none; }
.mpc-kv { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: #000; font-size: 14px; font-weight: 500; }
.mpc-kv em { font-style: normal; }
.mpc-kv b { margin-left: 7px; font-weight: 400; opacity: .7; }
.mpc-submit { margin: 15px 0 10px; text-align: center; }
.mpc-link { display: inline-block; margin-top: 8px; color: #1b91ff; font-size: 13px; text-decoration: none; }
.mpc-link:hover { text-decoration: underline; }
/* 注意事項（燈泡＋條列，第一條紅字） */
.mpc-note { display: flex; gap: 30px; margin-top: 15px; padding: 20px; border: 1px solid rgba(27, 145, 255, .3); border-radius: 5px; background: rgba(27, 145, 255, .05); box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .04); }
.mpc-note > svg { flex: 0 0 48px; width: 48px; height: 48px; fill: none; stroke: #1b91ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mpc-note__t { display: none; }
.mpc-note ul { margin: 0; padding: 0; list-style: none; color: #000; font-size: 13px; line-height: 1.7; }
.mpc-note li { padding-left: 12px; text-indent: -12px; }
.mpc-note li::before { content: "• "; }
.mpc-note li.is-red { color: #fe356a; }
/* 提款說明（淡青底資訊框） */
.mpc-quota { padding: 16px 15px; border-radius: 5px; background: #f3f9fb; }
.mpc-quota__row { display: flex; gap: 20px; }
.mpc-quota__row + .mpc-quota__row { margin-top: 14px; }
.mpc-quota__row > div { flex: 1 1 0; min-width: 0; }
.mpc-quota__row span { display: block; color: #666; font-size: 13px; }
.mpc-quota__row b { display: block; margin-top: 2px; color: #000; font-size: 15px; font-weight: 600; }
.mpc-quota__row b.is-warn { color: #fe356a; }
.mpc-quota__tip { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #e6e6e6; color: #000; font-size: 13px; text-align: center; }
.mpc-quota__tip.is-warn { color: #fe356a; }
.mpc-quota__tip:empty { display: none; }
/* 推薦活動卡（圖＋底部漸層標題） */
.mpc-rec__t { margin: 0 0 15px; color: #000; font-size: 15px; font-weight: 500; line-height: 25px; }
.mpc-rec__card { position: relative; display: block; overflow: hidden; height: 75px; border-radius: 12px; background: linear-gradient(120deg, #1b91ff, #32c5ff); text-decoration: none; }
.mpc-rec__card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.mpc-rec__card span { position: absolute; right: 0; bottom: 0; left: 0; overflow: hidden; max-height: 55px; padding: 16px 12px 4px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font-size: 12px; line-height: 1.3; }
/* 出款帳戶卡（模板銀行卡：藍底卡面、圓形圖示、卡號、戶名） */
.mpc-fx-on .addr-card { position: relative; display: flex; align-items: flex-start; gap: 10px; overflow: hidden; box-sizing: border-box; min-height: 118px; margin: 0; padding: 14px 16px; border: 0 !important; border-radius: 10px; background: #708cd4 url(../assets/img/finance/card-bank-1.svg) center/cover no-repeat !important; box-shadow: none; color: #fff; cursor: pointer; filter: grayscale(.85); opacity: .62; transition: filter .2s, opacity .2s; }
.mpc-fx-on .addr-card--usdt { background-image: url(../assets/img/finance/card-trc.svg) !important; }
.mpc-fx-on .addr-card.is-active { filter: none; opacity: 1; box-shadow: 0 4px 12px rgba(72, 88, 168, .35); }
.mpc-fx-on .addr-card.is-active::after { content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 24px; border-radius: 0 10px 0 22px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='m10 9.5 3.2 3.2L19 6.5' fill='none' stroke='%231b91ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.mpc-fx-on .addr-card .ic { display: flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #4858a8; }
.mpc-fx-on .addr-card .ic svg { width: 20px; height: 20px; }
.mpc-fx-on .addr-card .info { flex: 1 1 0; min-width: 0; }
.mpc-fx-on .addr-card .info b { display: block; overflow: hidden; padding-right: 20px; color: #fff; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mpc-fx-on .addr-card .info .no { display: block; margin-top: 6px; color: #fff; font-family: var(--pc-font-num, inherit); font-size: 16px; font-weight: 700; letter-spacing: 1px; line-height: 1.25; word-break: break-all; }
.mpc-fx-on .addr-card--usdt .info .no { font-size: 13px; letter-spacing: .3px; }
.mpc-fx-on .addr-card .info .own { display: block; margin-top: 6px; color: #fff; font-size: 12px; opacity: .85; }
.mpc-fx-on .addr-card .addr-del { position: absolute; right: 12px; bottom: 10px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .25); color: #fff; font-size: 11px; line-height: 1; }
.mpc-fx-on .addr-card .addr-del:hover { background: rgba(255, 255, 255, .45); }
.mpc-fx-on .addr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; min-height: 118px; margin: 0; padding: 12px; border: 0 !important; border-radius: 10px; background: #f3f9fb !important; box-shadow: none !important; color: #000; font-size: 15px; font-weight: 500; cursor: pointer; }
.mpc-fx-on .addr-empty .plus { color: #1b91ff; font-size: 30px; font-weight: 300; line-height: 1; }
.mpc-fx-on #wdPwdArea { margin-top: 14px; }
.mpc-fx-on #wdPwdArea .pwd-banner { margin: 0; }

/* ---- 電腦版 ---- */
body.sh-desktop .mpc-fx-on .mpc-fin { margin-bottom: 15px; }
body.sh-desktop .mpc-fx-on .pay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 20px; }
body.sh-desktop .mpc-fx-on .mpc-wtypes { grid-template-columns: repeat(3, 1fr); }
body.sh-desktop .mpc-fx-on .pay-method { position: relative; display: block; min-height: 0; padding: 12px 10px; border: 2px solid transparent; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .08); text-align: center; cursor: pointer; transition: border-color .2s; }
body.sh-desktop .mpc-fx-on .pay-method:hover { border-color: rgba(50, 197, 255, .45); }
body.sh-desktop .mpc-fx-on .pay-method.is-active { border-color: var(--tag); background: #fff; }
body.sh-desktop .mpc-fx-on .pay-method.is-active::after { content: none; }
body.sh-desktop .mpc-fx-on .pay-method .pm-ic, body.sh-desktop .mpc-fx-on .pay-method .pm-l { display: none; }
body.sh-desktop .mpc-fx-on .pay-method .pm-n { margin: 0; color: #000; font-size: 15px; font-weight: 500; line-height: 1.4; }
body.sh-desktop .mpc-fx-on .pay-method .pm-d { overflow: hidden; margin-top: 2px; color: rgba(0, 0, 0, .4); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
body.sh-desktop .mpc-rec { flex: 0 0 180px; width: 180px; }
body.sh-desktop .mpc-rec__list { display: flex; flex-direction: column; gap: 10px; padding: 15px; border-radius: 5px; background: #fff; box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .08); }
body.sh-desktop .mpc-rec__card { transition: transform .2s; }
body.sh-desktop .mpc-rec__card:hover { transform: translateY(-2px); }
body.sh-desktop .mpc-box { margin: 0 0 15px; padding: 15px; border-radius: 5px; background: #fff; box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .08); }
body.sh-desktop .mpc-way { min-height: 60px; padding: 22px 16px 16px; }
body.sh-desktop .mpc-amtbox { padding: 12px 15px 20px; }
body.sh-desktop .mpc-fx-on .amt-chips, body.sh-desktop .mpc-pct { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 0; }
body.sh-desktop .mpc-fx-on .amt-chips button, body.sh-desktop .mpc-pct button { position: relative; min-width: 0; height: 58px; padding: 0; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #000; font-family: var(--pc-font-num, inherit); font-size: 20px; font-weight: 700; cursor: pointer; transition: border-color .2s, background-color .2s; }
body.sh-desktop .mpc-fx-on .amt-chips button:hover, body.sh-desktop .mpc-pct button:hover { border-color: #32c5ff; background: #fff; color: #000; }
body.sh-desktop .mpc-fx-on .amt-chips button.is-active, body.sh-desktop .mpc-pct button.is-active { border: 2px solid #32c5ff; background: rgba(50, 197, 255, .05); color: #000; }
body.sh-desktop .mpc-fx-on .amt-chips button.is-active::after, body.sh-desktop .mpc-pct button.is-active::after { content: ""; position: absolute; top: -2px; right: -2px; width: 20px; height: 18px; border-radius: 0 4px 0 18px; background: #32c5ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='m8 6.5 2.6 2.6L15.5 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
body.sh-desktop .mpc-fx-on .amt-chips button:disabled { border-color: #e4e7ed; background: #fafafa; color: #c0c4cc; cursor: not-allowed; }
body.sh-desktop .mpc-pct button { height: 46px; font-size: 16px; }
body.sh-desktop .mpc-fx-on #usdtHint { color: #c08a3e !important; }
body.sh-desktop .mpc-submit .btn-primary { display: block; width: 100% !important; min-width: 0; height: 48px !important; margin: 0 !important; padding: 0 !important; border-radius: 8px !important; font-size: 16px !important; }
body.sh-desktop .mpc-submit .btn-primary:disabled { background: hsla(0, 0%, 80%, .5); box-shadow: none; color: rgba(0, 0, 0, .4); cursor: not-allowed; }
body.sh-desktop .mpc-fx-on #wdAccList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
body.sh-desktop .mpc-fx-on .mpc-kv { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e6e6e6; }
body.sh-desktop #panel-deposit.mpc-fx-on .mpc-kv { padding-top: 0; border-top: 0; }