/* 网页外壳：桌面上显示一部手机，手机上全屏 */
html, body { margin: 0; height: 100%; background: radial-gradient(ellipse at 50% 30%, #2a2a30, #0b0b0d 70%); overflow: hidden; overscroll-behavior: none; }
body { display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
#stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#phone { position: relative; width: min(100vw, calc((100dvh - 40px) * .4613), 420px); aspect-ratio: 393 / 852; border-radius: 56px; overflow: hidden; background: #000;
  transform: translateZ(0); /* 让里面 position:fixed 的元素以手机为准 */
  box-shadow: 0 0 0 10px #121214, 0 0 0 12px #3b3b40, 0 0 0 13px #18181a, 0 40px 90px rgba(0,0,0,.8); }
body.mobile #phone { width: 100vw; height: 100dvh; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
/* 手机上用手机自己的状态栏，不画假的 */
body.mobile #sbar, body.mobile #island { display: none; }
#screen { position: absolute; inset: 0; }
#sbar { position: absolute; z-index: 9990; top: 0; left: 0; right: 0; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 4px 30px 0 46px; box-sizing: border-box; color: #fff; pointer-events: none; font-size: 17px; font-weight: 600; }
#sbar.dark { color: #000; }
#sbar svg { fill: currentColor; display: block; }
.sb-r { display: flex; gap: 6px; align-items: center; }
#island { position: absolute; z-index: 9991; top: 11px; left: 50%; width: 122px; height: 35px; margin-left: -61px; border-radius: 20px; background: #000; pointer-events: none; }
#ui { position: absolute; inset: 0; z-index: 9995; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.web-toast { background: rgba(30,30,32,.88); color: #fff; font-size: 14px; padding: 10px 18px; border-radius: 12px; backdrop-filter: blur(10px); }

/* 小程序组件的默认样式 */
.wx-page { position: absolute; inset: 0; }
.wx-view, .wx-scroll-view { display: block; box-sizing: content-box; }
.wx-text { display: inline; }
.wx-image { display: inline-block; width: 320px; height: 240px; object-fit: fill; }
.wx-image.mode-aspectFill { object-fit: cover; }
.wx-image.mode-aspectFit { object-fit: contain; }
.wx-image.mode-widthFix { height: auto; }
.wx-scroll-view.sy { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wx-scroll-view.sx { overflow-x: auto; }
.wx-scroll-view::-webkit-scrollbar { display: none; }
.wx-scroll-view { scrollbar-width: none; }

/* 制作页：顶部导航栏 + 可滚动内容 */
#topbar { position: absolute; z-index: 50; top: 0; left: 0; right: 0; height: 44px; box-sizing: content-box; display: flex; align-items: center; justify-content: center; background: #070707; color: #fff; }
#topbar .tb-back { position: absolute; left: 6px; bottom: 0; height: 44px; width: 44px; border: 0; background: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#topbar .tb-title { font-size: 17px; font-weight: 600; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#pagehost { position: absolute; left: 0; right: 0; bottom: 0; }
/* 可滚动的页面：不管页面自己的样式怎么写，都固定铺满并在内部滚动 */
.wx-page.scroll { position: absolute !important; inset: 0 !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.wx-page.scroll::-webkit-scrollbar { display: none; }
body:not([data-page="phone"]) #island { opacity: .9; }
.wx-input, .wx-textarea { border: 0; outline: 0; background: transparent; font: inherit; color: inherit; padding: 0; margin: 0; min-width: 0; -webkit-user-select: text; user-select: text; }
.wx-textarea { resize: none; display: block; width: 100%; box-sizing: border-box; overflow: hidden; }
.wx-button { border: 0; font: inherit; cursor: pointer; }
.wx-picker { cursor: pointer; }
.wx-view[data-on-tap], .wx-image[data-on-tap] { cursor: pointer; }

/* 底部弹出菜单 */
.web-sheet-mask { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; pointer-events: auto; z-index: 10; animation: wsfade .2s; }
.web-sheet { width: 100%; background: #1a1a1c; border-radius: 18px 18px 0 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); color: #fff; animation: wsup .25s cubic-bezier(.2,.8,.2,1); max-height: 70%; display: flex; flex-direction: column; }
.ws-title { text-align: center; font-size: 13px; color: #8e8e93; padding: 8px 16px 10px; }
.ws-list { overflow-y: auto; }
.ws-item { text-align: center; padding: 16px; font-size: 17px; border-bottom: 1px solid #2a2a2c; cursor: pointer; }
.ws-item:active { background: #2a2a2c; }
.ws-cancel { border-bottom: 0; margin-top: 8px; border-top: 8px solid #0e0e0f; color: #c8fa4b; font-weight: 600; }
@keyframes wsfade { from { opacity: 0 } }
@keyframes wsup { from { transform: translateY(100%) } }

/* 这些地方的上滑是"手势"，不让浏览器拿去滚动页面 */
.lk-foot, .hb, .hb-line, .pin .pad { touch-action: none; }

/* 旧地址的搬家提示 */
#movebar { position: absolute; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 18px; background: #1a1a1c; border: 1px solid #2a2a2c; box-shadow: 0 10px 30px rgba(0,0,0,.5); color: #fff; font-size: 13px; line-height: 1.45; }
#movebar .mv-t { flex: 1; }
#movebar b { color: #c8fa4b; }
#movebar span { color: #9a9a9e; font-size: 12px; }
#movebar button { flex-shrink: 0; border: 0; border-radius: 999px; background: #c8fa4b; color: #000; font-weight: 700; font-size: 14px; padding: 10px 14px; cursor: pointer; }

/* 页面内对话框 */
.web-modal-mask { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: wsfade .2s; }
.web-modal { width: 270px; background: #1f1f21; color: #fff; border-radius: 16px; overflow: hidden; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.wm-t { font-size: 17px; font-weight: 600; padding: 20px 16px 4px; }
.wm-c { font-size: 13px; color: #b0b0b4; padding: 4px 18px 18px; line-height: 1.5; white-space: pre-wrap; }
.wm-btns { display: flex; border-top: 1px solid #2f2f32; }
.wm-b { flex: 1; border: 0; background: none; color: #c8fa4b; font-size: 17px; padding: 13px 0; cursor: pointer; }
.wm-b + .wm-b { border-left: 1px solid #2f2f32; }
.wm-cancel { color: #b0b0b4; }
.wm-ok { font-weight: 600; }
/* 旧地址：给底部的搬家提示留出位置 */
body.oldhost .wx-page.scroll { padding-bottom: 96px; box-sizing: border-box; }