.wx-app{--wx-bg:#111;--wx-cell:#191919;--wx-line:#262626;--wx-muted:#858585;display:flex;flex-direction:column;flex:1;min-height:0;position:relative;background:var(--wx-bg);color:#dedede;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;isolation:isolate;text-align:left}.wx-app *{box-sizing:border-box}.wx-app button,.wx-app input,.wx-app select,.wx-app textarea{font:inherit;color:inherit}.wx-app button{border:0;background:none;cursor:pointer}.wx-app svg{width:24px;height:24px;flex:none;vertical-align:middle}.wx-app input,.wx-app textarea,.wx-app select{background:none;border:0;outline:none;min-width:0}.wx-app button:disabled{opacity:.4;cursor:default}.wx-nav{height:56px;display:grid;grid-template-columns:52px 1fr 72px;align-items:center;text-align:center;background:#111;flex:none;z-index:2}.wx-nav strong{font-size:18px;font-weight:600}.wx-nav>button{padding:12px}.wx-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:20px}.wx-group{background:var(--wx-cell);margin-bottom:9px}.wx-row{min-height:55px;width:100%;display:flex;align-items:center;gap:17px;padding:10px 18px;border-bottom:1px solid var(--wx-line)!important;text-align:left;background:var(--wx-cell)!important}.wx-row>svg:last-child{margin-left:auto;width:16px;color:#737373}.wx-row>input,.wx-row>select,.wx-row>span:not(.wx-avatar):not(.wx-tile){margin-left:auto;text-align:right;max-width:65%;color:#888}.wx-row input[type=file]{font-size:11px;width:145px}.wx-row.wx-center{justify-content:center;text-align:center}.wx-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#1b1b1b;border-top:1px solid #292929;padding:8px 0 max(12px,env(safe-area-inset-bottom));flex:none}.wx-tabs button{display:flex;flex-direction:column;gap:2px;align-items:center;font-size:11px}.wx-tabs svg{width:27px;height:27px}.wx-tabs .active{color:#07c160}.wx-search{margin:6px 8px 10px;display:flex;justify-content:center;align-items:center;gap:8px;border-radius:7px;background:#1b1b1b;height:36px;color:#6d6d6d}.wx-search input{width:75%;text-align:left}.wx-search svg{width:19px}.wx-tile,.wx-avatar{width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;background:#343434;overflow:hidden}.wx-tile{color:white}.wx-avatar img,img.wx-avatar{width:100%;height:100%;object-fit:cover}.wx-row>img.wx-avatar{width:40px;height:40px}.wx-empty{text-align:center;color:var(--wx-muted);padding:65px 20px}.wx-empty>svg{width:45px;height:45px;color:#454545}.wx-empty p{margin:12px 0 4px}.wx-empty small,.wx-note{font-size:12px;color:#6f6f6f}.wx-note{text-align:center;padding:14px}.wx-scroll h4{margin:12px 18px 6px;font-weight:400;font-size:12px;color:#777}.wx-profile{display:flex;align-items:center;width:100%;gap:20px;background:#191919!important;padding:36px 24px 42px;text-align:left;margin-bottom:9px}.wx-profile .wx-avatar{height:60px;width:60px;border-radius:7px}.wx-profile h2{font-size:22px;margin:0 0 5px}.wx-profile p{font-size:14px;color:#888;margin:0 0 7px;word-break:break-all}.wx-profile small{border:1px solid #333;border-radius:20px;color:#888;padding:2px 10px}.wx-profile>svg{margin-left:auto;color:#777}.wx-chat-row{display:flex;width:100%;gap:13px;padding:14px;background:#191919!important;border-bottom:1px solid #252525!important;text-align:left}.wx-chat-row small,.wx-account-card small{display:block;color:#777;font-size:13px}.wx-chat-row .wx-avatar{width:45px;height:45px}.wx-auth{margin:auto;width:100%;max-width:400px;padding:15px 28px 40px}.wx-auth h1{font-size:25px;text-align:center;margin:18px 0 8px}.wx-auth>p{text-align:center;color:#888;font-size:12px}.wx-logo{color:#07c160;text-align:center}.wx-logo svg{height:60px;width:60px}.wx-auth label{display:flex;align-items:center;gap:20px;border-bottom:1px solid #333;padding:15px 0}.wx-auth input{width:70%;font-size:16px}.wx-auth small{display:block;color:#777;font-size:11px;margin:22px 0}.wx-app .wx-green{background:#07c160;color:#fff;border-radius:5px;padding:10px 22px;font-weight:600}.wx-auth>.wx-green{display:block;width:180px;margin:24px auto}.wx-link{color:#8c9cba!important}.wx-auth>.wx-link{display:block;margin:auto;font-size:13px}.wx-error{color:#ed6868!important;font-size:13px;padding:0 18px;white-space:pre-wrap}.wx-app .wx-small{font-size:13px;padding:6px 10px;margin-right:10px}.wx-account-title{font-size:24px;text-align:center;margin:50px 0 45px}.wx-account-card{width:calc(100% - 40px);margin:10px 20px;background:#191919!important;padding:16px;display:flex;align-items:center;gap:12px;border-radius:7px;text-align:left}.wx-account-card img{height:44px;width:44px;object-fit:cover;border-radius:4px}.wx-account-card em{margin-left:auto;color:#07c160;font-size:11px;font-style:normal}.wx-add{padding:18px}.wx-add input{display:block;width:100%;padding:14px 0;border-bottom:1px solid #333}.wx-add .wx-green{margin-top:18px}.wx-compose{display:block;width:100%;height:220px;padding:24px;resize:vertical;caret-color:#07c160}.wx-moments{background:#191919}.wx-cover{height:290px;position:relative;background:linear-gradient(150deg,#202723,#101412 65%,#252a29);background-size:cover;background-position:center;margin-bottom:55px}.wx-cover-user{position:absolute;bottom:-23px;right:16px;display:flex;align-items:center;gap:16px}.wx-cover-user>b{text-shadow:0 1px 5px #000}.wx-cover-user .wx-avatar{height:68px;width:68px;border-radius:6px}.wx-cover-edit{position:absolute;left:18px;bottom:18px;font-size:11px;color:#8b9390;cursor:pointer}.wx-cover-edit input,.wx-sheet input{display:none}.wx-post{display:flex;gap:12px;padding:18px 22px 22px;border-bottom:1px solid #252525}.wx-post>div{min-width:0;flex:1}.wx-post b{color:#8b9ab6}.wx-post p{margin:2px 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}.wx-post small{color:#666;font-size:11px}.wx-image-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0 18px 12px}.wx-post .wx-image-grid{margin-left:0;margin-right:0}.wx-image-grid img{width:100%;aspect-ratio:1;object-fit:cover}.wx-sheet-mask{position:absolute;inset:0;background:#0009;display:flex;align-items:flex-end;z-index:10}.wx-sheet{width:100%;border-radius:14px 14px 0 0;background:#2a2a2a;padding-bottom:env(safe-area-inset-bottom)}.wx-sheet label,.wx-sheet button{display:block;width:100%;padding:18px;text-align:center;border-bottom:1px solid #333;cursor:pointer}.wx-sheet small{display:block;color:#888;font-size:12px}.wx-sheet button{border-top:6px solid #202020}.wx-over-cover{background:#101412}.wx-nav button[aria-label^="相机"]{touch-action:none;-webkit-user-select:none;user-select:none}
.app-screen[data-current-app="wechat"]{background:#111;color:#dedede}.app-screen[data-current-app="wechat"]>.status-bar{background:#111;color:#eee}
/* Only Moments lets its cover run beneath the existing status/navigation UI. */
.preview-phone:has(.wx-moments-page){position:relative;--wx-status-space:40px}
.preview-phone:has(.wx-moments-page)>.preview-status{position:absolute;inset:0 0 auto;z-index:5;background:transparent}
.app-screen[data-current-app="wechat"]:has(.wx-moments-page){--wx-status-space:calc(var(--status-height,54px) + var(--safe-top,0px))}
.app-screen[data-current-app="wechat"]:has(.wx-moments-page)>.status-bar{position:absolute;inset:0 0 auto;z-index:5;height:var(--wx-status-space);background:transparent;color:#fff}
.app-screen[data-current-app="wechat"].status-hidden:has(.wx-moments-page){--wx-status-space:0px}
.wx-moments-page>.wx-nav{position:absolute;inset:0 0 auto;height:calc(56px + var(--wx-status-space,0px));padding-top:var(--wx-status-space,0px);background:transparent;color:#fff;pointer-events:none}
.wx-moments-page>.wx-nav>button{pointer-events:auto;filter:drop-shadow(0 1px 3px #0006)}
.wx-moments-page .wx-cover{height:auto;aspect-ratio:1.1;min-height:300px;background-color:#161b18}
.wx-moments-page .wx-cover-user{bottom:-22px;right:16px}
.wx-moments-page .wx-cover-user .wx-avatar{width:68px;height:68px}
.wx-tabs svg{width:27px;height:27px}
.wx-tabs button{gap:3px;font-size:12px}
.wx-cover-hit{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.wx-cover-file{display:none}
.wx-cover-full-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.wx-cover-change{position:absolute;right:16px;bottom:20px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff!important;font-size:12px!important;padding:8px;text-shadow:0 1px 3px #0007}
.wx-cover-change svg{width:26px;height:26px}
.wx-cover-open>.wx-nav{visibility:hidden}

/* The chat scrolls beneath the frosted navigation and status areas. */
.preview-phone:has(.wx-chat-page){position:relative;--wx-status-space:40px}
.preview-phone:has(.wx-chat-page)>.preview-status{position:absolute;inset:0 0 auto;z-index:5;background:transparent}
.app-screen[data-current-app="wechat"]:has(.wx-chat-page){--wx-status-space:calc(var(--status-height,54px) + var(--safe-top,0px))}
.app-screen[data-current-app="wechat"]:has(.wx-chat-page)>.status-bar{position:absolute;inset:0 0 auto;z-index:5;height:var(--wx-status-space);background:transparent;color:#fff}
.app-screen[data-current-app="wechat"].status-hidden:has(.wx-chat-page){--wx-status-space:0px}
.wx-chat-page>.wx-nav{position:absolute;inset:0 0 auto;height:calc(56px + var(--wx-status-space,0px));padding-top:var(--wx-status-space,0px);background:rgba(24,24,24,.82);-webkit-backdrop-filter:blur(22px) saturate(135%);backdrop-filter:blur(22px) saturate(135%)}
.wx-chat-page .wx-chat-feed{padding-top:calc(66px + var(--wx-status-space,0px));scroll-padding-top:calc(66px + var(--wx-status-space,0px))}
.wx-chat-page .wx-spark-bar{margin-top:calc(56px + var(--wx-status-space,0px))}
.wx-chat-page .wx-spark-bar+.wx-chat-feed{padding-top:10px}
.wx-chat-page.wx-light>.wx-nav{background:rgba(247,247,247,.8)}
.preview-phone:has(.wx-chat-page.wx-light)>.preview-status,.app-screen[data-current-app="wechat"]:has(.wx-chat-page.wx-light)>.status-bar{color:#171717}
.wx-cover-open .wx-cover{height:min(80dvh,720px);min-height:380px;aspect-ratio:auto;margin-bottom:0;background-image:linear-gradient(#4b4b4b,#282828)!important}
.wx-cover-open .wx-cover-user{display:none}
.wx-cover-open .wx-post,.wx-cover-open .wx-empty{opacity:.35}
.wx-scroll{scrollbar-width:thin;scrollbar-color:#393939 #191919}.wx-scroll::-webkit-scrollbar{width:4px}.wx-scroll::-webkit-scrollbar-thumb{background:#393939;border-radius:4px}.wx-scroll::-webkit-scrollbar-track{background:#191919}
.wx-plus-mask{position:absolute;inset:56px 0 0;z-index:9}.wx-plus-menu{position:absolute;top:4px;right:8px;width:170px;background:#404040;border-radius:5px;box-shadow:0 5px 18px #0003}.wx-plus-menu:before{content:"";position:absolute;right:19px;top:-7px;width:14px;height:14px;background:#404040;transform:rotate(45deg);border-radius:2px}.wx-plus-menu button{position:relative;display:flex;align-items:center;gap:13px;width:100%;height:55px;padding:0 17px;color:#fff;text-align:left;white-space:nowrap}.wx-plus-menu button+button:after{content:"";position:absolute;top:0;left:53px;right:0;border-top:1px solid #4b4b4b}.wx-plus-menu button:hover{background:#ffffff09}.wx-plus-menu svg{width:25px;height:25px}.wx-group-choice>input[type=checkbox]{appearance:none;margin:0;width:23px;height:23px;border:1.5px solid #777;border-radius:50%;flex:none}.wx-group-choice>input:checked{background:#07c160;border-color:#07c160;box-shadow:inset 0 0 0 5px #191919}
.wx-app .wx-group-choice>input:checked{background:#07c160;border-color:#07c160;box-shadow:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:100%}
.wx-light .wx-group-choice>input:not(:checked){background:transparent;border-color:#ccc}
.wx-group-members{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px 8px;padding:20px 14px}.wx-group-members>div{text-align:center;min-width:0}.wx-group-members small{display:block;color:#888;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wx-group-sender{font-size:12px;color:#aaa;margin:0 0 3px;line-height:18px}.wx-light .wx-group-sender{color:#888}
/* Only the value consumes free space; a second auto margin separates it from the chevron. */
.wx-app .wx-row>.wx-row-value{margin-left:auto;min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.wx-app .wx-row>.wx-row-value+svg:last-child{margin-left:0;flex:none}
/* Pin full-bleed surfaces to the real app viewport, not the remaining flex area. */
.app-screen[data-current-app="wechat"]{position:relative}
.app-screen[data-current-app="wechat"]>.wx-moments-page,.app-screen[data-current-app="wechat"]>.wx-chat-page{position:absolute;inset:0}
.app-screen[data-current-app="wechat"].status-hidden:has(.wx-moments-page,.wx-chat-page){--wx-status-space:var(--safe-top,0px)}
.wx-moments-signature{margin:-18px 16px 28px;padding-top:0;text-align:right;color:var(--wx-muted);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.wx-me-page .wx-profile{padding:48px 24px 36px;gap:20px}
.wx-me-page .wx-profile>div{flex:1;min-width:0}
.wx-profile-tools{display:flex;flex-direction:column;gap:13px;color:#7f8b9b}
.wx-profile-tools svg:last-child{width:16px;height:16px;align-self:end}
.app-screen[data-current-app="wechat"]:has(.wx-me-page)>.status-bar{background:var(--wx-me-surface,#191919)}
.app-screen[data-current-app="wechat"]:has(.wx-me-page.wx-light){--wx-me-surface:#fff}
.wx-me-page .wx-scroll>.wx-group:nth-last-child(2) .wx-row{border-bottom:0!important;position:relative}
.wx-me-page .wx-scroll>.wx-group:nth-last-child(2) .wx-row:not(:last-child):after{content:"";position:absolute;left:59px;right:0;bottom:0;height:1px;background:var(--wx-line)}
/* Center action icons together with their labels; these are not trailing chevrons. */
.wx-row.wx-center>svg:last-child{margin-left:0;width:24px;color:inherit}
/* The idle magnifier and short placeholder form one centered unit. */
.wx-search-short.wx-search-empty:not(:focus-within) input{width:2em;padding:0;text-align:center}
.wx-search-short input::placeholder{color:inherit;opacity:1}
.wx-search-short:focus-within input{width:75%;text-align:left}
/* Explicit surface state: the production transition frame owns the full viewport.
   Do not infer shell positioning through :has(), or count the status space twice. */
.app-screen[data-current-app="wechat"][data-wechat-surface^="chat:"],
.app-screen[data-current-app="wechat"][data-wechat-surface^="moments:"]{--wx-status-space:calc(var(--status-height,54px) + var(--safe-top,0px));padding-top:0}
.app-screen[data-current-app="wechat"][data-wechat-surface^="chat:"]>.page-motion-frame,
.app-screen[data-current-app="wechat"][data-wechat-surface^="moments:"]>.page-motion-frame{position:absolute;inset:0;min-height:0}
.app-screen[data-current-app="wechat"][data-wechat-surface^="chat:"]>.status-bar,
.app-screen[data-current-app="wechat"][data-wechat-surface^="moments:"]>.status-bar{position:absolute;inset:0 0 auto;height:var(--wx-status-space);background:transparent;color:white;z-index:5}
.app-screen[data-current-app="wechat"][data-wechat-surface^="chat:"].status-hidden,
.app-screen[data-current-app="wechat"][data-wechat-surface^="moments:"].status-hidden{--wx-status-space:var(--safe-top,0px)}
.app-screen[data-current-app="wechat"][data-wechat-surface="chat:light"]>.status-bar{color:#171717}
.app-screen[data-current-app="wechat"][data-wechat-surface="me:dark"]>.status-bar{background:#191919}
.app-screen[data-current-app="wechat"][data-wechat-surface="me:light"]>.status-bar{background:#fff;color:#171717}