/* ==========================================================================
   舊功能頁（member.html / lottery.html）的新版外殼：
   手機 → 藍色頂欄 + 底部 TabBar（自足 px 樣式，不依賴 theme.css）；電腦 → pc chrome（desktop.css）
   由 js/shell-new.js 注入。
   ========================================================================== */
/* 手機頂欄 */
.sh-top { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px calc(0px + 0px); padding-top: env(safe-area-inset-top, 0px); background: linear-gradient(180deg, #4aa3f7 0%, #63b4fb 55%, #8fcbff 100%); color: #fff; box-shadow: 0 2px 10px rgba(23, 58, 122, .18); font-family: "PingFang SC", "PingFang TC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "Microsoft JhengHei", sans-serif; }
.sh-top__brand { display: flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.sh-top__brand img { width: 26px; height: 26px; border-radius: 50%; }
.sh-top__brand em { font-style: normal; color: #ffe08a; }
.sh-top__acts { display: flex; align-items: center; gap: 14px; }
.sh-top__btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: none; color: #fff; padding: 0; cursor: pointer; }
.sh-top__btn svg { width: 22px; height: 22px; }
/* 舊頁樣式的寬度斷點改成容器查詢（見 tools/recolor_blue.py），以 body 寬為準：手機殼固定 375px、電腦殼＝視窗寬 */
body.sh-desktop { container-type: inline-size; }
body.sh-mobile .sh-zoom { container-type: inline-size; }   /* 手機：以 375px 畫布為準，不是視窗寬 */
body.sh-mobile { margin: 0 !important; padding: 0 !important; }
.sh-zoom { padding-top: calc(50px + env(safe-area-inset-top, 0px)); max-width: 375px; margin: 0 auto; min-height: 100vh; position: relative; box-shadow: 0 0 0 1px rgba(23, 58, 122, .05), 0 24px 60px -12px rgba(23, 58, 122, .22); }
html:has(body.sh-mobile) { background: #e7eaf1; }
/* 固定列跟著 375px 畫布置中（zoom 後 100vw 會超過畫布） */
.sh-top, .sh-tab, .sh-zoom .betbar { left: 50% !important; right: auto !important; width: 100%; max-width: 375px; transform: translateX(-50%); }
body.sh-mobile.sh-hastab .sh-zoom { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
/* 手機底部 TabBar */
.sh-tab { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; display: flex; height: calc(66px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -3px 20px rgba(0, 0, 0, .12); font-family: "PingFang SC", "PingFang TC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "Microsoft JhengHei", sans-serif; }
.sh-tab a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #97a4b0; text-decoration: none; font-size: 11px; }
.sh-tab a svg { width: 24px; height: 24px; }
.sh-tab a.on { color: #3590ec; }
/* 舊頁自己的手機底部導覽（.bnav）與浮動簽到鈕：改由新 TabBar 取代 */
body.sh-mobile .bnav, body.sh-mobile .floating { display: none !important; }
/* 電腦：pc chrome 包在 .pcw-shell 裡（token 由 .pc-body 提供），主內容讓出固定頁首的 110px */
.pcw-shell { background: none !important; min-width: 0 !important; margin: 0 !important; }
body.sh-desktop { padding-top: 110px !important; }
body.sh-desktop .bnav, body.sh-desktop .floating { display: none !important; }
/* 手機殼下的全螢幕浮層（動態建立、position:fixed）：反向縮放回 1 倍，否則會跟著 body zoom 放大而超出畫面 */
/* 浮層都在 body 直屬（1 倍、不在 .sh-zoom 裡），不需要反向縮放 */
body.sh-mobile > .modal, body.sh-mobile > .win-dlg-mask, body.sh-mobile > #manualPayMask { zoom: 1; }

/* 反向圓角（內凹圓角，2026-10-06）：手機藍色頂欄下緣左右各一個（彩票投注頁等用外殼頂欄的頁面）；顏色＝頂欄漸層最後一個色 */
body.sh-mobile .sh-top::before, body.sh-mobile .sh-top::after { content: ""; position: absolute; top: 100%; width: 20px; height: 21px; margin-top: -1px; pointer-events: none; }
body.sh-mobile .sh-top::before { left: 0; background: radial-gradient(circle at 100% 100%, transparent 19.5px, #8fcbff 20px); }
body.sh-mobile .sh-top::after { right: 0; background: radial-gradient(circle at 0 100%, transparent 19.5px, #8fcbff 20px); }