* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { position: fixed; inset: 0; overflow: hidden; background: #101010; font-family: "HarmonyOS Sans SC", "HarmonyOS Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#phoneScaler { transform-origin: center; }
#phone { position: relative; width: 1088px; height: 2400px; overflow: hidden; background: #fff; box-shadow: 0 0 80px rgba(0,0,0,.6); }
#screen { position: absolute; inset: 0; overflow: hidden; }

/* ---------- 通用 ---------- */
.scr { position: absolute; inset: 0; background: #ededed; display: flex; flex-direction: column; }
.scr.slide-in { animation: inR .32s cubic-bezier(.2,.7,.3,1); }
.scr.slide-back { animation: inL .32s cubic-bezier(.2,.7,.3,1); }
@keyframes inR { from { transform: translateX(90%); } to { transform: translateX(0); } }
@keyframes inL { from { transform: translateX(-24%); } to { transform: translateX(0); } }
.hide { display: none !important; }
.sc { overflow: hidden; }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nav-hdr { height: 96px; display: flex; align-items: center; padding: 0 22px; background: #fff; border-bottom: 1px solid #e5e5e5; gap: 12px; }
.nav-hdr .back { width: 44px; height: 44px; font-size: 42px; line-height: 40px; color: #111; display: flex; align-items: center; cursor: pointer; }
.nav-hdr .nav-title { flex: 1; text-align: center; font-size: 34px; font-weight: 600; margin-right: 44px; }

/* ---------- 状态栏 ---------- */
.statusbar { position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; color: #000; pointer-events: none; }
.statusbar .sb-left { display: flex; align-items: center; gap: 10px; }
.statusbar .sb-time { font-size: 31px; font-weight: 700; letter-spacing: 0; }
.statusbar .sb-right { display: flex; align-items: center; gap: 10px; }
.statusbar .sb-bat { display: flex; align-items: center; gap: 6px; font-size: 27px; font-weight: 600; }
.statusbar .sb-bat b { position: relative; width: 30px; height: 14px; border: 2px solid rgba(0,0,0,.4); border-radius: 4px; }
.statusbar .sb-bat b i { position: absolute; left: 2px; top: 2px; bottom: 2px; background: #000; border-radius: 2px; }
.statusbar .sb-bat b::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 6px; background: rgba(0,0,0,.4); border-radius: 0 2px 2px 0; }
.has-status .screen-body { padding-top: 64px; }
.has-status .nav-hdr { padding-top: 64px; }

/* ---------- 桌面 Home ---------- */
.home { background: radial-gradient(120% 90% at 50% 0%, #2e4a6b 0%, #16283e 55%, #0b1522 100%); }
.home .home-wall { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,45,.15), rgba(8,12,20,.55)); }
.home .statusbar { color: #fff; }
.home .home-grid { position: absolute; left: 0; right: 0; top: 130px; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 52px; padding: 20px 34px; }
.app-ico { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; }
.app-ico .ico { width: 104px; height: 104px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 52px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.app-ico .nm { font-size: 24px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.home .dock { position: absolute; left: 24px; right: 24px; bottom: 60px; height: 170px; background: rgba(15,25,38,.45); border-radius: 30px; display: flex; align-items: center; justify-content: space-around; backdrop-filter: blur(10px); }

/* ---------- 应用商店 ---------- */
.appstore { background: #f5f6f7; }
.appstore .as-search { margin: 84px 26px 0; height: 72px; background: #e9ebee; border-radius: 16px; display: flex; align-items: center; padding: 0 22px; gap: 12px; }
.appstore .as-search input { flex: 1; border: 0; outline: none; background: transparent; font-size: 30px; }
.appstore .as-res { flex: 1; overflow-y: auto; padding: 20px 26px; }
.appstore .as-row { display: flex; align-items: center; gap: 22px; background: #fff; border-radius: 18px; padding: 22px; margin-bottom: 18px; }
.appstore .as-row .ico { width: 92px; height: 92px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 46px; }
.appstore .as-row .nm { font-size: 32px; font-weight: 600; }
.appstore .as-row .dm { font-size: 24px; color: #999; margin-top: 6px; }
.as-open { margin-left: auto; background: #07c160; color: #fff; border: 0; border-radius: 12px; padding: 14px 30px; font-size: 28px; }
.as-open.installed { background: #f2f2f2; color: #666; }

/* ---------- 微信底部 Tab ---------- */
.wechat-tab { position: absolute; left: 0; right: 0; bottom: 0; height: 132px; background: #f7f7f7; border-top: 1px solid #e0e0e0; display: flex; z-index: 50; }
.wechat-tab .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 22px; color: #7f7f7f; cursor: pointer; }
.wechat-tab .tab .ti { font-size: 40px; }
.wechat-tab .tab.on { color: #07c160; }

/* ---------- 消息列表 ---------- */
.chatlist { flex: 1; overflow-y: auto; background: #fff; padding-top: 64px; }
.chatlist .cl-row { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-bottom: 1px solid #ececec; cursor: pointer; }
.chatlist .av { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; flex: none; background: #e2e2e2; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; }
.chatlist .cl-main { flex: 1; min-width: 0; }
.chatlist .cl-top { display: flex; justify-content: space-between; align-items: center; }
.chatlist .cl-name { font-size: 33px; font-weight: 500; color: #111; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chatlist .cl-time { font-size: 25px; color: #b2b2b2; flex: none; margin-left: 12px; }
.chatlist .cl-msg { font-size: 28px; color: #999; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cl-badge { min-width: 34px; height: 34px; padding: 0 8px; background: #fa5151; color: #fff; border-radius: 17px; font-size: 22px; line-height: 34px; text-align: center; }

/* ---------- 聊天页 ---------- */
.chat { background: #ededed; }
.chat .chat-body { flex: 1; overflow-y: auto; padding: 24px 22px 30px; }
.chat .msg { display: flex; gap: 16px; margin-bottom: 34px; align-items: flex-start; }
.chat .msg .av { width: 84px; height: 84px; border-radius: 10px; flex: none; object-fit: cover; }
.chat .msg.in .av { order: 0; }
.chat .msg.out { flex-direction: row-reverse; }
.chat .msg .bubble { max-width: 620px; padding: 20px 24px; border-radius: 12px; font-size: 31px; line-height: 1.45; word-break: break-word; }
.chat .msg.in .bubble { background: #fff; }
.chat .msg.out .bubble { background: #95ec69; }
.chat .chat-input { height: 104px; background: #f7f7f7; border-top: 1px solid #e0e0e0; display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.chat .chat-input input { flex: 1; height: 66px; border: 0; border-radius: 10px; background: #fff; font-size: 30px; padding: 0 18px; }
.chat .chat-input .send { border: 0; background: #07c160; color: #fff; border-radius: 10px; height: 66px; padding: 0 26px; font-size: 29px; }

/* ---------- 资料/加好友通用行 ---------- */
.pro-card { background: #fff; margin-top: 18px; }
.pro-row { display: flex; align-items: center; padding: 24px 28px; border-bottom: 1px solid #f0f0f0; font-size: 30px; }
.pro-row .lb { width: 170px; color: #7f7f7f; flex: none; }
.pro-row .vl { flex: 1; color: #191919; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pro-row .vl.link { color: #576b95; }
.ph-head { display: flex; align-items: center; gap: 26px; padding: 34px 28px; background: #fff; }
.ph-head .av { width: 138px; height: 138px; border-radius: 12px; object-fit: cover; }
.ph-head .nm { font-size: 40px; font-weight: 700; }
.ph-head .rg { font-size: 28px; color: #737373; margin-top: 10px; }
.btn-green { background: #07c160; color: #fff; border: 0; border-radius: 10px; font-size: 32px; padding: 18px 0; text-align: center; cursor: pointer; }

/* ---------- 通讯录 ---------- */
.contacts { flex: 1; overflow-y: auto; background: #fff; padding-top: 64px; }
.contacts .ct-row { display: flex; align-items: center; gap: 20px; padding: 20px 24px; border-bottom: 1px solid #f2f2f2; }
.contacts .ct-row .sec { width: 90px; margin-left: 24px; font-size: 30px; color: #666; }

/* ---------- 新的朋友 ---------- */
.nf-row { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-bottom: 1px solid #f0f0f0; background: #fff; }
.nf-row .av { width: 96px; height: 96px; border-radius: 10px; flex: none; }
.nf-row .inf { flex: 1; min-width: 0; }
.nf-row .nm { font-size: 33px; font-weight: 500; }
.nf-row .ms { font-size: 27px; color: #999; margin-top: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nf-btn { flex: none; border: 0; border-radius: 10px; padding: 14px 26px; font-size: 27px; }
.nf-btn.ok { background: #f2f2f2; color: #8a8a8a; }
.nf-btn.add { background: #07c160; color: #fff; }

/* ---------- 发现页 ---------- */
.discover { position: absolute; inset: 0; }
.discover img { width: 100%; height: 100%; object-fit: cover; }
.discover .hot { position: absolute; left: 0; right: 0; height: 108px; cursor: pointer; }

/* ---------- 视频号 ---------- */
.channels { position: absolute; inset: 0; background: #000; }
.channels .vwrap { position: absolute; inset: 0; transition: transform .36s cubic-bezier(.2,.7,.3,1); }
.channels .vitem { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.channels video { width: 100%; height: 100%; object-fit: cover; }
.channels .v-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 180px 30px 46px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); }
.channels .v-author { display: flex; align-items: center; gap: 16px; }
.channels .v-author .av { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; }
.channels .v-author .nm { color: #fff; font-size: 30px; font-weight: 600; }
.channels .v-desc { color: #fff; font-size: 29px; margin-top: 16px; line-height: 1.4; }
.channels .v-meta { color: rgba(255,255,255,.85); font-size: 25px; margin-top: 14px; }
.channels .v-tab { position: absolute; top: 96px; left: 0; right: 0; display: flex; justify-content: center; gap: 60px; z-index: 5; }
.channels .v-tab span { color: rgba(255,255,255,.55); font-size: 30px; }
.channels .v-tab span.on { color: #fff; font-weight: 600; }
.channels .v-side { position: absolute; right: 20px; bottom: 260px; display: flex; flex-direction: column; align-items: center; gap: 34px; z-index: 5; }
.channels .v-side .sd { text-align: center; color: #fff; font-size: 33px; }
.channels .v-side .sd b { display: block; font-size: 25px; font-weight: 400; margin-top: 4px; }

/* ---------- 转账（仅展示入口） ---------- */
.transfer { background: #ededed; }
.transfer .t-card { background: #fff; border-radius: 16px; margin: 100px 30px 0; padding: 36px; }
.transfer .t-to { display: flex; align-items: center; gap: 20px; }
.transfer .t-to .av { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; }
.transfer .t-to .nm { font-size: 32px; font-weight: 600; }
.transfer .t-amt-wrap { margin-top: 40px; text-align: center; color: #191919; }
.transfer .t-amt { font-size: 76px; font-weight: 700; }
.transfer .t-note { margin-top: 40px; width: 100%; padding: 20px; border: 1px solid #eee; border-radius: 10px; font-size: 28px; }
.transfer .t-btn { margin-top: 28px; background: #07c160; color: #fff; border: 0; border-radius: 10px; padding: 20px 0; font-size: 32px; width: 100%; }

/* ---------- 调试栏 & toast ---------- */
#devBar { position: fixed; left: 0; right: 0; top: 0; z-index: 9999; display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; }
#devBar button { border: 0; border-radius: 8px; padding: 6px 10px; background: #07c160; color: #fff; cursor: pointer; }
#devBar label { display: flex; align-items: center; gap: 4px; }
body.rec #devBar { display: none; }
#toast { position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 10000; background: rgba(0,0,0,.78); color: #fff; padding: 14px 24px; border-radius: 12px; font-size: 16px; opacity: 0; pointer-events: none; transition: opacity .2s; }
#toast.show { opacity: 1; }