/* ========================================================================= 春恋 · 同城交友 APP —— 统一设计令牌（Design Tokens） 依据《三合一整合方案》5.2 / 5.3 / 5.4，取三款 App 最佳值 ========================================================================= */ :root{ --brand:#FF4C81; /* 品牌主色（粉红） */ --brand-2:#FF4362; /* 品牌红（次） */ --brand-deep:#FF3355; /* 品牌红（深） */ --brand-orange:#FF8E61; /* 品牌橙（渐变尾） */ --brand-grad:linear-gradient(135deg,#FF4C81 0%,#FF8E61 100%); --grad-pink:linear-gradient(135deg,#FF4C81 0%,#FF4362 100%); /* 纯粉渐变：主播条 / 选中态 */ --grad-hero:linear-gradient(160deg,#FF4C81 0%,#9E4CFF 45%,#6A3BFF 100%); /* 冷启动/登录：粉紫渐变 */ --brand-soft:#FFF1F6; /* 浅粉底 */ --brand-soft2:#FFF7FA; --soft-bg:#F5F6F9; /* 统一浅灰底：列表 / 页面底 */ --shadow-soft:0 4px 12px rgba(255,76,129,.12); /* 卡片 / 按钮柔投影 */ --stroke-brand:1px solid rgba(255,76,129,.25); /* 描边胶囊 */ --selected-bg:#FF9E8CB3; /* Tab / 标签选中态（真实选中紫） */ --live-bg:#1B1B2E; /* 直播/语音房/通话 深色场景 */ --live-bg2:#0E1116; --gold:#FFC700; /* 金色：钻石/礼物/收益 */ --gold-2:#FFF27C; --gold-ink:#C98200; /* 金色·文字用（白底 3.2:1，与 --ok-ink 同规矩）——价格 / 钻石数 */ --fab-yellow:#FFE600; /* 动态页发布 FAB 的纯黄底（量自真机帧 f_142：色相 53.7° / 饱和 .92） */ --danger:#FF3B30; /* 警示红 */ --ok-ink:#12A150; /* 成功绿·文字用（白底 3.37:1） */ --t1:#181818; --t2:#666666; --t3:#8A8A94; --t4:#8E8E99; --line:#E5E5E5; --line-2:#F0F0F0; --line-3:#F5F6F9; --chat-light:#147AFF; --chat-lively:#FF8E82; --chat-serious:#0052FF; /* 间距 5dp 网格 */ --s1:5px; --s2:8px; --s3:10px; --s4:15px; --s5:20px; --s6:30px; --s7:40px; --r-cap:30px; /* 胶囊 */ --r-card:16px; /* 卡片 */ --r-sm:8px; --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px; --fs-17:17px; --fs-18:18px; --fs-20:20px; --fw:375px; /* 手机宽 */ --fh:812px; /* 手机高 */ /* 系统状态栏 / 手势条的真实高度（APP 模式下 .sysbar / .tabbar 用它留白）： 安卓壳会先读 WindowInsets 覆盖这两个值；手机浏览器退回 env()；桌面为 0。 */ --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} .ico{display:inline-flex;flex:none;width:20px;height:20px;align-items:center;justify-content:center} .ico svg{width:100%;height:100%;display:block} html,body{margin:0;padding:0} body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; background:#0d0d12;color:#eee;min-height:100vh; } img{display:block} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:#2c2c36;border-radius:8px} ::-webkit-scrollbar-track{background:transparent} /* ---------------------------------------------------------------- 顶部工具条 */ .topbar{ position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:14px 22px;background:rgba(13,13,18,.92);backdrop-filter:blur(12px);border-bottom:1px solid #232330; } .brand{display:flex;align-items:center;gap:12px} .brand-logo{ width:40px;height:40px;border-radius:12px;background:var(--brand-grad);color:#fff;font-weight:700; display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 6px 18px rgba(255,76,129,.35) } .topbar h1{margin:0;font-size:16px;font-weight:700;letter-spacing:.3px;color:#fff} .topbar p{margin:2px 0 0;font-size:11.5px;color:#8b8b98} .top-actions{display:flex;gap:8px} .tabbtn{padding:8px 16px;border-radius:20px;background:#1c1c26;color:#9a9aa8;font-size:13px;transition:.18s} .tabbtn:hover{background:#25252f;color:#dcdce6} .tabbtn.active{background:var(--brand-grad);color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(255,76,129,.35)} .tab-sep{width:1px;align-self:stretch;margin:6px 2px;background:#2a2a35} .tabbtn.ref{background:transparent;color:#6f6f7d;border:1px dashed #33333f} .tabbtn.ref:hover{background:#1c1c26;color:#a8a8b6} .tabbtn.ref.active{background:#22222c;color:#c9c9d4;font-weight:500;box-shadow:none;border-style:solid} .view{display:none;padding:26px 22px 80px} .view.active{display:block} /* ---------------------------------------------------------------- 全部页面板 */ .board-grid{display:flex;flex-wrap:wrap;gap:34px 26px;justify-content:flex-start} .board-item{width:397px} .board-cap{display:flex;align-items:baseline;gap:8px;margin:0 0 10px} .board-cap b{font-size:14px;color:#fff;font-weight:600} .board-cap span{font-size:11px;color:#7c7c8a} /* ---------------------------------------------------------------- 手机外框 */ .phone{ width:calc(var(--fw) + 22px);height:calc(var(--fh) + 22px);border-radius:44px;background:#08080c;padding:11px; box-shadow:0 0 0 2px #2a2a35, 0 26px 60px rgba(0,0,0,.6);position:relative;flex:none } .phone::after{ /* 侧键 */ content:"";position:absolute;right:-2px;top:190px;width:3px;height:64px;border-radius:3px;background:#2a2a35 } .phone::before{content:"";position:absolute;left:-2px;top:150px;width:3px;height:44px;border-radius:3px;background:#2a2a35} .screen{ width:100%;height:100%;border-radius:34px;overflow:hidden;position:relative;background:#fff;color:var(--t1); display:flex;flex-direction:column; } .notch{ position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:26px; background:#08080c;border-radius:0 0 18px 18px;z-index:40 } /* 系统状态栏占位：只占真实高度，不画图标、不写时间 —— 页面不再画假状态栏。 真机上顶上那条是系统的；设计稿的手机壳（.phone / 单屏预览）没有系统栏， 给一个和真机等高的 44px 留白，免得页面内容顶到假刘海里。 */ .sysbar{flex:none;height:var(--safe-top,0px)} .phone,#onlyScreen{--safe-top:44px} /* ---------------------------------------------------------------- 通用组件 */ .scroll{position:absolute;inset:0;overflow:hidden} .page{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff} .body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative; scrollbar-width:none;-webkit-overflow-scrolling:touch} .body::-webkit-scrollbar{width:0;height:0} .pad{padding:0 var(--s4)} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .navbar{ height:44px;display:flex;align-items:center;padding:0 var(--s3);position:relative;flex:none;z-index:20 } .navbar .nb-back{width:30px;height:30px;display:flex;align-items:center;justify-content:center;margin-left:-4px} .navbar .nb-title{position:absolute;left:0;right:0;text-align:center;font-size:var(--fs-17);font-weight:600;pointer-events:none} .navbar .nb-right{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:var(--fs-13);color:var(--t2)} .appbar{padding:0 var(--s4) 6px;flex:none;display:flex;align-items:center;gap:var(--s3)} .appbar .main-title{font-size:var(--fs-20);font-weight:700;letter-spacing:.5px} .chip{ height:26px;padding:0 12px;border-radius:13px;background:var(--line-3);color:var(--t2); font-size:var(--fs-12);display:inline-flex;align-items:center;gap:4px } .chip.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:600} .chip-solid{height:26px;padding:0 12px;border-radius:13px;background:var(--brand-grad);color:#fff;font-size:var(--fs-12);display:inline-flex;align-items:center} .tagline{font-size:var(--fs-12);color:var(--t3)} .btn{ height:44px;border-radius:var(--r-cap);display:flex;align-items:center;justify-content:center; font-size:var(--fs-16);font-weight:600;color:#fff;background:var(--brand-grad);box-shadow:0 8px 20px rgba(255,76,129,.28) } .btn.ghost{background:#fff;color:var(--brand);box-shadow:inset 0 0 0 1px #FFD3E2} .btn.solid{background:var(--grad-pink);box-shadow:0 10px 24px rgba(168,18,74,.42), inset 0 0 0 1px rgba(255,255,255,.22)} .btn.grey{background:var(--line-3);color:var(--t2);box-shadow:none} .btn.sm{height:30px;font-size:var(--fs-13);padding:0 16px;box-shadow:none;width:auto} .btn.block{width:100%} .divider{height:1px;background:var(--line-2)} .card{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-soft)} /* --------------------------------------------------------------------------- 皮肤层（对齐真实 AnsenShape）：圆角 / 渐变 / 描边四件套。 规则：按钮与胶囊一律 30px 圆角；卡片 16px；描边用 --stroke-brand；柔投影用 --shadow-soft。 --------------------------------------------------------------------------- */ .pill-btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:40px;padding:0 22px;border:0;border-radius:var(--r-cap); background:var(--brand-grad);color:#fff;font-size:var(--fs-14);font-weight:600; box-shadow:var(--shadow-soft);cursor:pointer } .pill-btn.ghost{background:#fff;color:var(--brand);border:var(--stroke-brand);box-shadow:none} .pill-btn.block{display:flex;width:100%} .pill-chip{ display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 13px; border-radius:var(--r-cap);background:#fff;border:var(--stroke-brand); color:var(--t2);font-size:var(--fs-12);cursor:pointer } .pill-chip.on{background:var(--selected-bg);border-color:transparent;color:#fff;font-weight:600} .soft-bg{background:var(--soft-bg)} .avatar{border-radius:50%;object-fit:cover;background:var(--line-3)} .cover{border-radius:var(--r-card);object-fit:cover;background:var(--line-3)} /* 底部 Tab 栏 */ .tabbar{ /* 真机 60347fd1 f_0044/f_0045/f_0047/f_0060 逐帧量：5 格等分（中心 36/108/180/252/324）， 图标墨迹 y688 起、文字墨迹到 y727、系统手势条 y741..745 —— 内容贴顶排，不居中 */ flex:none;height:calc(75px + var(--safe-bottom,0px));display:flex;align-items:flex-start;background:rgba(255,255,255,.98); border-top:1px solid var(--line-2);padding:5px 0 0;position:relative;z-index:25 } .tabbar .tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:#8E8E99;font-size:11px} .tabbar .tb.on{color:var(--brand);font-weight:600} /* 底部栏图标是原版素材（选中/未选中两张），不再是内联 SVG；中间那格是「我」的头像 + 未读角标 */ .tabbar .tb .tbic{width:23px;height:23px;object-fit:contain} .tabbar .tb-me .tbav{position:relative;display:block;width:28px;height:28px;border-radius:50%;background:var(--line-3)} .tabbar .tb-me .tbav-img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.06)} .tabbar .tb-me .tbbadge{ position:absolute;top:-4px;right:-7px;min-width:16px;height:16px;padding:0 4px;border-radius:8px; background:#FF3B30;color:#fff;font-size:9px;font-style:normal;font-weight:600; display:flex;align-items:center;justify-content:center;border:1.5px solid #fff } .tabbar .tb-me .tbbadge[hidden]{display:none} .tabbar .tb-me>span:last-child{font-size:var(--fs-10);line-height:1} /* 中间那格的两种形态（真机量得的规则见 screens.js 注释）： noav = 账号没有头像 → 「消息」气泡 23px + 「消息」文字；有头像时只放 28px 圆头像、不显文字。 */ .tabbar .tb-me .tbav-fb{display:none;width:23px;height:23px;object-fit:contain} .tabbar .tb-me .tbav-lb{display:none;font-size:11px;line-height:1} .tabbar .tb-me.noav .tbav{width:23px;height:23px;border-radius:0;background:none} .tabbar .tb-me.noav .tbav-img{display:none} .tabbar .tb-me.noav .tbav-fb{display:block} .tabbar .tb-me.noav .tbav-lb{display:block} .tabbar .tb-me.noav .tbbadge{top:-5px;right:-8px} /* 动态列表就地评论：键盘已经把可见区域收矮，底部 Tab 若继续参与布局就会被顶到键盘上方。 评论期间隐藏它，关闭评论后恢复；评论输入栏单独贴在可见区域底部。 */ .screen.qc-open .tabbar{display:none} .screen.qc-open .feedlist{padding-bottom:68px} /* ---------------------------------------------------------------- 首页「同城」列表（真机录像 f_0001） */ .body.homebody{display:flex;flex-direction:column;overflow:hidden;background:#F5F6F9} .hr-live{position:absolute;left:4px;top:4px;background:rgba(255,59,92,.92);color:#fff;border-radius:6px;padding:1px 5px;font-size:9px;line-height:14px;z-index:2;cursor:pointer}.hr-live i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#fff;margin-right:3px;vertical-align:1px} .home-tools{flex:none;display:flex;gap:14px;overflow-x:auto;padding:10px 12px 0;background:#fff;scrollbar-width:none}.home-tools::-webkit-scrollbar{display:none}.home-tools>span{flex:none;width:48px;display:flex;flex-direction:column;align-items:center;gap:3px;color:#FF5E90;cursor:pointer}.home-tools .ico{width:27px;height:27px;padding:5px;border-radius:10px;background:#FFF0F5}.home-tools i{font-size:10px;font-style:normal;color:#5A5660;white-space:nowrap}.home-tools>span:nth-child(2n) .ico{color:#845BE8;background:#F1ECFF}.home-tools>span:nth-child(3n) .ico{color:#F29A38;background:#FFF2E1} .home-top{flex:none; /* 页面底色按新录像 88b906b5 逐点取色（左边缘 x=3.75css 一列）： y12.5 #F6DEFE → y42 #F9E4FC → y87 #FFEDFE → y117 #FEF4FE → y140 #FFF9FF → y150 起全白。 老录像 f_0001 同样是 y146 附近就已经淡成 #FFF5FF。 所以这一条是「薰衣草 → 粉 → 白」**纵向收白**，不是原来那种越往下越粉的横扫渐变； 横向再压一层右侧粉（顶部左 #FADEFF / 右 #FFDBE4）。 */ background: linear-gradient(90deg, rgba(255,215,230,0) 38%, rgba(255,211,226,.5) 100%), linear-gradient(180deg,#F8DCFF 0%,#FCE6FD 26%,#FEF1FE 56%,#FFF9FE 78%,#FFFFFF 100%)} .home-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:7.5px;padding:28px 12px 0} .home-promo{position:relative;width:auto;min-width:0;height:83.5px;box-sizing:border-box;border-radius:16px;background:#fff;padding:42px 4px 0;display:flex;flex-direction:column;align-items:center;gap:3px;overflow:visible;cursor:pointer;box-shadow:0 3px 10px rgba(206,160,240,.18)} .home-promo-art{position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:62px;height:62px;background-position:center;background-repeat:no-repeat;background-size:contain;pointer-events:none} .home-promo b{font-size:15px;line-height:20px;color:#3E3C44;font-weight:700;white-space:nowrap} .home-promo small{font-size:11px;line-height:15px;color:#A3A1A9;white-space:nowrap} /* 红包条（礼物播报）：卡 css x15~345（左右各 15）、y157.5~207.5（高 50）—— 与真机录像 88b906b5 逐点量的一致。 老注释里的「左右 12 / 高 52 / 头像 28 / 字号 14 / 胶囊右 8 下 4」都是上一轮肉眼估的，按帧实测对不上，已改（见文档 §16.6）。 */ /* 花瓣形状：三种朝向（-28° / 20° / 6°）各一张内联 SVG，fill 是淡粉渐变、fill-opacity .6 —— 比真机略淡是故意的 （真机那片粉是图片素材，录到我们手里已经过一遍缩放/色度抽样；宁可淡一点，也不要糊成一块）。 */ .home-marquee{--petal-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE4EC'/%3E%3Cstop offset='1' stop-color='%23FFB4C8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='20' cy='20' rx='8.5' ry='15' transform='rotate(-28 20 20)' fill='url(%23p)' fill-opacity='.62'/%3E%3C/svg%3E"); --petal-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE4EC'/%3E%3Cstop offset='1' stop-color='%23FFB4C8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='20' cy='20' rx='8.5' ry='15' transform='rotate(20 20 20)' fill='url(%23p)' fill-opacity='.62'/%3E%3C/svg%3E"); --petal-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE4EC'/%3E%3Cstop offset='1' stop-color='%23FFB4C8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='20' cy='20' rx='8.5' ry='15' transform='rotate(6 20 20)' fill='url(%23p)' fill-opacity='.62'/%3E%3C/svg%3E"); position:relative;height:50px;box-sizing:border-box;margin:12px 15px 0;border-radius:5px; /* 圆角按 f_0000 的左上/右上角逐行量：边框从 (x32,y251) 弯到 (x24,y260)，横向 8px、纵向 9px， 即半径 ≈ 8.5 帧px = 5.3css。上一版写 14 是肉眼估的，并排看四角明显比真机圆一圈。 左内边距写 0：两种版式的头像左沿不同（方框 24 / 圆 30.6），统一 padding 会把其中一个顶偏， 所以头像自带左内缩（见 .hm-av）。右内边距仍 10 —— 真机 f_0000 第一行墨迹右沿 335， 卡右 344.4 - 描边 1 - 10 = 333.4 ≈ 335，留着。 */ padding:0 10px 0 0;display:flex;align-items:center;overflow:hidden;border:1px solid #E4D0D0; /* 卡面底色：对新录像 88b906b5 的**卡内大色块**取中位数（f_0090，避开文字/头像，x 每 24css 一段）： x16-40 #FFFBFE / x40-160 #FFF6F9 / x232-256 #FFF5F5 / x280-304 #FFECEC / x304-344 #FFE8E6。 关键结论：真机卡面**整张都是淡粉**、从左到右逐渐加粉，而不是「白底 + 右下角一块粉」—— 上一版写成近白底，和真机并排看就是「白得像张纸」，所以这里改成横向粉渐变（暖粉，G≈B）， 右下角再叠一层极淡的径向粉做体积感。描边同步调暖（真机外沿取到 #D7B5B4，是暖粉不是洋红）。 */ background: /* 花瓣：真机卡面上散着 5~6 片淡粉花瓣（f_0090 逐点量位置/大小，见文档 §16.9）。 我们没有这个图片素材，用一段同形的内联 SVG（旋转椭圆 + 淡粉渐变）重画 —— 纯装饰、不含数据。 位置用百分比（跟着卡宽走），大小按帧量：20/14/24/22/26/22css。 */ var(--petal-a) 14% -9px/20px 20px no-repeat, var(--petal-b) 24% 2px/16px 16px no-repeat, var(--petal-c) 40% 6px/22px 22px no-repeat, var(--petal-b) 58% 12px/20px 20px no-repeat, var(--petal-c) 74% 25px/24px 24px no-repeat, var(--petal-a) 93% 33px/20px 20px no-repeat, radial-gradient(150px 74px at 104% 108%, rgba(255,206,200,.42), rgba(255,206,200,0) 72%), linear-gradient(90deg,#FFFBFE 0%,#FFF6F9 14%,#FFF6F9 46%,#FFF4F4 66%,#FFEEED 80%,#FFE8E6 100%); box-shadow:0 2px 8px rgba(226,180,178,.16)} .home-marquee-copy{position:relative;flex:1;min-width:0;height:38px} /* 换条动画：对录像 88b906b5 逐帧看（f_177→f_182，30fps）——上一条向上滑出、下一条从下面滑进来， 整段位移只有约 5 帧 ≈ 0.17s。旧实现写 0.42s，和录像并排播就是「慢半拍」。取 0.2s。 */ .home-marquee-msg{position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:center;gap:6px; opacity:0;transform:translateY(100%);transition:opacity .2s ease,transform .2s ease} .home-marquee-msg.on{opacity:1;transform:none} .home-marquee-msg.out{opacity:0;transform:translateY(-100%)} /* 播报条有**两套版式**，对照录像 88b906b5 的两条真实播报逐帧量（卡 = css x15~344.4 / y156.9~206.25）： · 房间送礼（f_0264「＋❤峰生+ 在 语音房 送给🎤静 21个[给你拍拍]，赶快去围观吧👏👏👏」）—— 方框头像 40、左沿 24（卡内缩 9）、文字左沿 70（缝 6）；胶囊 83.75x17.5。 · 个人/祝福（f_0000「夕阳细雨 送给缘聚12个月伯爵，一起来祝福他们吧。」）—— 圆形头像 **26**、左沿 30.6（卡内缩 15.6）、文字左沿 76.25（缝 19.65）；胶囊更小 73.75x15。 上一轮只做了「房间送礼」那套，**还把它套给了所有消息**，于是个人类播报也顶着一枚 40 方头像， 和真机并排看就是「左边一大块、文字贴着脸」。根因在量法：那一轮量 f150 时把「圆头像 + 头条角标」的 **并集**（x25~64.4 / y162.5~202.5，正好 39.4x40）当成了头像本身，才得出「40x40 圆角方、几乎顶满卡高」。 */ .home-marquee-msg[data-style="user"]{gap:19.65px} /* 「上电视」类播报（带房间场景）左侧不是头像，是那枚电视贴纸： 对 f0198 / f0220 / f0242 三帧平均后量，css 左沿 18.3、宽 49、高 44（含外发光）， 文字左沿 76.7 —— 即「卡内缩 2.3 + 贴纸 49 + 缝 9.4」。后端没有这枚素材，用同形内联 SVG 画。 */ .hm-tv{flex:none;width:46px;height:44px;margin-left:4px;margin-bottom:-2px;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 44'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4867E'/%3E%3Cstop offset='1' stop-color='%23E0506E'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4AEF6'/%3E%3Cstop offset='1' stop-color='%23DD8BD3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='2' width='43' height='40' rx='13' fill='%23FFD7E3' opacity='.5'/%3E%3Cpath d='M15 9 11.5 3.6' stroke='%23FFC93D' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M31 9 34.5 3.6' stroke='%23FFC93D' stroke-width='2.8' stroke-linecap='round'/%3E%3Crect x='7.5' y='8.4' width='31' height='26.4' rx='7.5' fill='url(%23f)'/%3E%3Crect x='9.7' y='10.6' width='26.6' height='22' rx='5.6' fill='url(%23s)'/%3E%3Cpath d='M19.6 15.6c0-1.15 1.25-1.86 2.24-1.27l8 4.9c.94.58.94 1.94 0 2.52l-8 4.9c-.99.6-2.24-.11-2.24-1.27z' fill='%23fff' opacity='.94'/%3E%3C/svg%3E") center/contain no-repeat} .home-marquee-msg[data-style="room"]{gap:10.7px} /* 「头条」类播报（无房间场景）左侧才是送礼人本人头像：圆 26、左沿 30.6（卡内缩 14.6）、 中心 y175.6 —— 比卡心 182.2 高 6.6，因为真机是「头像 + 头条角标」作为一组居中，头像要上抬 12.8/2。 上一版还在头像外圈画了 1.5px 粉描边（box-shadow 0 0 0 1.5px #FFD8E8）：对 88b906b5 f0000 的 头像左沿逐点取色（x30.5 #FDFBFE → x31.2 直接进头像像素），真机**没有这一圈**，卡底色一路铺到头像边上。 并排看那圈粉就是「贴纸感」的来源，去掉。 */ .hm-av{flex:none;width:26px;height:26px;margin-left:14.6px;margin-bottom:12.8px;border-radius:50%; object-fit:cover;background:#F7EAF3} /* 「头条」角标：真机 f0154 / f0176 独立重量（两帧一致）—— css x26.25~64.38 / y190~200，即 38.75 x 10.62， 左沿 10（卡内缩）、下沿离消息盒底 1；金→橙→洋红渐变 + 白字「头条」（10px/600）+ 右端深红圆点， 外面还压着一圈 1px 白描边（上一版没有，并排看角标像块脏补丁）。房间类 f0198 没有这枚角标。 角标是纯装饰位（后端没有对应字段），live.js 只给首条头条类播报加，避免整条播报每屏都挂一枚。 */ .hm-tag{position:absolute;left:10px;top:27px;height:10.6px;display:flex;align-items:center;gap:2px; padding:0 6.5px;border-radius:5.3px;color:#fff;font-size:10px;font-weight:600;line-height:10.6px; white-space:nowrap;background:linear-gradient(90deg,#FFD96A 0%,#FFA64D 48%,#F04C8C 100%); box-shadow:0 0 0 1px rgba(255,255,255,.85),0 1px 2px rgba(240,110,90,.26)} .hm-tag::after{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:#E0313F; box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)} /* 正文 13/19.3：真机逐字量（「夕阳细雨」字距 12.5~13.1css、墨迹高 11.2~11.9css）=> 字号 13； 行高按两行墨迹顶差 f_0000 = 19.35css（行一 166.25、行二 185.6）取 19.3。 正文色：拿「同城」当标尺（两边都是同一档深灰）——录像里它的墨芯是 #2E2E2F，我们本机渲染是 #1F1E24， 说明录像把墨压浅了约 15 级。按这个偏移回推 f_0000 正文最暗 12% 的中位数 #7B7375 → 真值 ≈ #6C6466。 上一版写 #56545B 比真值深 22 级，并排看整条播报「又黑又挤」，这就是用户说的「一点间隙都没有」。 */ .hm-text{flex:1;min-width:0;padding-right:82px;box-sizing:border-box;font-size:13px;line-height:38px;color:#6C6466;overflow:hidden; display:block;white-space:nowrap;text-overflow:ellipsis} .hm-text b{font-weight:400;color:#7E6090} /* 房间类播报在送礼人/收礼人名字前各挂一枚小方头像（bxh3 f_0001「▣流年送给▣岁月」、 88b906b5 f0195「▣＋❤峰生+ 在 语音房 送给▣🎤静」两段录像一致）。按 f_0001（1.2px/css）量： 13.4 x 14.2 css、圆角 ≈3、与名字的间距 ≈2.5、下沿正好压在同一基线上（inline-block 默认基线对齐即可）。 头条类**没有**这枚小头像（88b906b5 f0000 的「夕阳细雨」直接起笔）—— 左侧挂的已经是本人头像了。 */ .hm-nava{display:inline-block;width:13px;height:13px;border-radius:3px;object-fit:cover; background:#EDE6EB;margin-right:2.5px} /* 送礼人昵称与后面那串文案之间的空档：真机 f_0000 量到「雨」右沿 126.2 → 「送」左沿 135.0 = **8.1**； 我们原来只是一个半角空格（≈4.7），并排看就是「名字和正文黏在一起」。补 3.5 的空档对齐真机。 */ .hm-text > b:first-child{margin-right:3.5px} .hm-text u{text-decoration:none;color:#3E8AD8} .hm-text em{font-style:normal;font-weight:600;color:#D8427A} .hm-idle{color:#A9A3AF;margin-left:54px} /* 「如何上电视 ›」浮在第二行右侧，不占文字宽度。逐帧重量的结果（卡右 345 / 卡底 207）： f_0210 同款胶囊 css x255~339.4 / y185~201.9（宽 85 高 17.5）→ 右内缩 5.6、下内缩 5.1、字号 11。 取色是 #FF537E→#FF8C64（比「锁屏中 Ns」那款 #FE77B1→#FEB17D 更饱和）。 **定位基点从卡片改成「每条消息」**：录像 f_174→f_182 那次换条里，胶囊是跟着自己那条消息一起上滑的， 而且两条消息的胶囊文案本来就不同（祝福类=「锁屏中 Ns」，房间送礼=「如何上电视 ›」）——所以它是消息的一部分， 不是卡上的固定标签。消息盒 = 卡内容区的 flex 子项（高 38、上下各留 5），所以右内缩写成 -5（= 卡内缩 5）、 bottom 0（= 卡底内缩 5）。几何最终仍按「胶囊右内缩 5.6 / 下内缩 5.1」核对（见文档 §16.9）。 */ /* 胶囊内边距**左右不等**：真机把文案整体推到靠右，左边留一大块。 量法（88b906b5 f0000「锁屏中6s」）：胶囊 x263.75~339.4，白字起笔 x279.5、收笔 x333。左右内缩 = 15.75 / 6.4。 另一款「如何上电视 ›」在同一段录像里也是 14.5 / 3.0（见文档 §16.9 的逐帧重量）——两款一致，不是量错。 上一版统一写 padding:0 12px，胶囊里那串字被顶在正中间、两边只剩 12，"又粗又居中" 是「看着挤」的主因。 字号同时从 11/11.5 提到 12/13 并按录像复核字重：真机是 400~500，我们原来是 600，白字糊成一团。 「锁屏中6s」里数字与「中」是紧贴的（f0000 白字「中」右沿 x317 与「6」左沿 x317.5 相接），文案里不留空格。 */ .home-marquee-more{position:absolute;right:-6.2px;bottom:-2.4px;height:17.5px;display:flex;align-items:center; background:linear-gradient(90deg,#FF5380,#FF8C64);color:#fff;border-radius:8.75px;padding:0 7px 0 14.5px; font-size:11px;font-weight:400;white-space:nowrap;cursor:pointer;box-shadow:0 2px 6px rgba(255,120,150,.3)} .home-marquee-msg[data-style="user"] .home-marquee-more{right:-5px;bottom:1.5px;height:17.5px; border-radius:8.75px;padding:0 15px;font-size:11px;font-weight:400;background:linear-gradient(90deg,#FF6FAE,#FFAE7C)} .more-features{padding:12px}.mf-hero{padding:18px 16px;border-radius:12px;background:linear-gradient(135deg,#FFECF3,#F3EDFF);display:flex;flex-direction:column;gap:5px;color:#573B54}.mf-hero b{font-size:17px}.mf-hero span{font-size:12px;color:#897889}.mf-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 8px;margin:20px 2px 8px}.mf-grid button{min-width:0;height:72px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;color:#35323A}.mf-grid .ico{width:29px;height:29px;padding:7px;border-radius:12px;background:#FFF0F5;color:#FF5A8D;box-sizing:content-box}.mf-grid button:nth-child(3n) .ico{background:#FFF3E5;color:#E99A38}.mf-grid button:nth-child(3n + 2) .ico{background:#F1ECFF;color:#8260DE}.mf-grid span{font-size:11px;font-weight:500;line-height:18px;margin-top:4px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} /* 编辑资料：真机截图中的分区长表单。 */ .ep-body{padding:12px 12px 28px}.navbar .ep-save{height:28px;padding:0 13px;border-radius:14px;background:var(--brand-grad);color:#fff;font-size:12px;font-weight:700}.ep-head{padding:14px 0 10px;background:#fff;display:flex;flex-direction:column;align-items:center}.ep-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;background:#F2EFF1;cursor:zoom-in}.ep-head button{margin-top:8px;color:#77717A;font-size:12px}.ep-percent{margin-top:7px;color:#FF4C81;font-size:13px}.ep-card{margin:12px 0 0;border-radius:10px;background:#fff;padding:0 16px}.ep-card h3{margin:0;padding:15px 0 9px;font-size:15px;color:#2D2930}.ep-row{min-height:48px;display:flex;align-items:center;gap:8px;border-top:1px solid #F1EFF1;cursor:pointer}.ep-row>span{font-size:14px;color:#4B4650;flex:none}.ep-row>b{margin-left:auto;max-width:60%;font-size:13px;color:#8E8891;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.ep-row>i{font-size:22px;font-style:normal;color:#C9C3CB;line-height:1}.ep-row[data-deep] b{color:#F15C6E}.ep-intro{min-height:84px;padding:10px 0 16px;color:#8E8891;font-size:13px;line-height:1.65;cursor:pointer}.ep-chips{padding:3px 0 15px;display:flex;gap:7px;flex-wrap:wrap;min-height:39px;cursor:pointer}.ep-chips span{padding:5px 10px;border-radius:14px;background:#FFF0F5;color:#E95A88;font-size:12px}.ep-photo-grid{display:flex;gap:8px;padding:2px 0 12px;overflow-x:auto}.ep-photo-grid>.ep-photo{position:relative;width:64px;height:64px;border-radius:7px;overflow:hidden;background:#F2EFF1;flex:none}.ep-photo-grid .ep-photo img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in} .ep-photo-up{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.55);color:#E95A88;font-size:11px}.ep-photo-grid>button{width:64px;height:64px;border:1px dashed #F4A6BE;background:#FFF8FA;color:#EF6E97;font-size:23px;border-radius:7px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center}.ep-photo-grid small{font-size:10px}.ep-photo-del{position:absolute;right:3px;top:3px;width:21px!important;height:21px!important;padding:0;border:1px solid rgba(255,255,255,.8)!important;border-radius:50%!important;background:rgba(30,25,32,.62)!important;color:#fff!important;font-size:18px!important;line-height:18px!important;display:flex!important;align-items:center;justify-content:center!important;box-shadow:0 2px 6px rgba(0,0,0,.18)}.ep-img-view{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:36px 18px;box-sizing:border-box;background:rgba(12,9,14,.92)}.ep-img-view img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.38)}.ep-img-view>button{position:absolute;right:15px;top:calc(12px + env(safe-area-inset-top,0px));width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:27px;line-height:36px;text-align:center}.ep-img-view small{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));text-align:center;color:rgba(255,255,255,.7);font-size:11px}.ep-sheet-mask{position:fixed;inset:0;z-index:999;background:rgba(20,15,20,.42);display:flex;align-items:flex-end}.ep-sheet{width:100%;max-height:72vh;overflow:auto;background:#fff;border-radius:16px 16px 0 0;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));color:var(--t1)}.ep-sheet header{height:54px;display:flex;align-items:center;justify-content:space-between}.ep-sheet header b{font-size:17px}.ep-sheet header button{font-size:13px;color:#8E8891}.ep-sheet-options{display:flex;gap:9px;flex-wrap:wrap;padding:4px 0 16px}.ep-sheet-options button{padding:8px 12px;border-radius:17px;background:#F6F4F6;color:#5C5660;font-size:13px}.ep-sheet-options button.on{background:#FFF0F5;color:#ED5486;box-shadow:inset 0 0 0 1px #FF9DB9}.ep-sheet-ok{flex:none;height:48px;width:100%;margin:6px 0 2px;border-radius:24px;background:linear-gradient(103deg,#FF5E5B 0%,#FF4C81 52%,#C94DF0 100%);color:#fff;font-size:16px;font-weight:700;letter-spacing:.5px;box-shadow:0 10px 24px rgba(255,76,129,.34),inset 0 1px 0 rgba(255,255,255,.45)}.ep-sheet-ok:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(255,76,129,.30)}.ep-input{width:100%;height:44px;padding:0 11px;border:1px solid #E8E3E7;border-radius:8px;font-size:15px;margin:4px 0 14px;color:#37323A} /* 我的标签：分类面板（8 组词表，超长词表整块可滚，头和确定键固定） */ .tag-sheet{display:flex;flex-direction:column;max-height:74vh;overflow:hidden} .tag-hint{padding:0 0 8px;font-size:12px;color:#B0AAB3} .tag-hint span{color:#ED5486} .tag-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch} .tag-grp{margin:0 0 12px} .tag-grp h4{margin:0 0 8px;font-size:12px;color:#B0AAB3;font-weight:400} .tag-row{display:flex;gap:8px;flex-wrap:wrap} .tag-row button{padding:7px 11px;border-radius:15px;background:#F6F4F6;color:#5C5660;font-size:12.5px} .tag-row button.on{background:#FFF0F5;color:#ED5486;box-shadow:inset 0 0 0 1px #FF9DB9} /* 兴趣爱好滚轮：已选那排 + 「添加」（滚轮本身复用 .wp-* 那套） */ .ep-picked{display:flex;gap:7px;flex-wrap:wrap;padding:0 0 10px;min-height:26px} .ep-pk{padding:5px 10px;border-radius:13px;background:#FFF0F5;color:#ED5486;font-size:12.5px} .ep-pk-none{font-size:12.5px;color:#B0AAB3;line-height:26px} .ep-add{width:100%;height:40px;margin:2px 0 0;border-radius:20px;background:#F6F4F6;color:#ED5486;font-size:14px;font-weight:600} /* 输入类弹层：贴顶卡片（不是贴底）—— 安卓 WebView 键盘弹起时 layout/visual viewport 都不缩， JS 量不到键盘，贴底的输入框会被键盘整个盖住。放屏幕上方，键盘够不到。 */ /* ============================ 发布动态（照用户给的参考图重做：正文+字数 / 九格素材 / 话题 / 位置 / 可见范围 / 底部悬浮发布） 原先这一屏的骨架里写死了三张示例图 + 一句假正文，进屏第一帧就会闪出来（用户反馈「最开始闪一下女的照片」）， 骨架已改成空壳，这里只留真数据渲染用的样式。 */ .pub2-sheet{background:#fff;border-radius:18px 18px 0 0;padding:0} .pub2-nav{height:52px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #F1EFF1} .pub2-nav b{flex:1;text-align:center;font-size:17px;color:#2D2930} .pub2-cancel{font-size:15px;color:#6B6570;cursor:pointer} .pub2-navsub{height:32px;padding:0 16px;border-radius:16px;background:var(--brand-grad);color:#fff; font-size:14px;font-weight:600;box-shadow:0 4px 12px rgba(255,76,129,.28)} .pub2-navsub[disabled]{background:#E7E4E7;color:#B0AAB3;box-shadow:none} .pub2-body{padding:0 0 12px} .pub2-text{padding:14px 16px 6px} .pub2-ta{width:100%;min-height:120px;border:0;outline:none;resize:none;font-size:15px;line-height:1.7; color:#2D2930;font-family:inherit;background:none;display:block} .pub2-ta::placeholder{color:#B0AAB3} .pub2-count{text-align:right;font-size:12px;color:#B0AAB3;margin-top:4px} .pub2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 16px 14px} .pub2-cell{position:relative;padding-top:100%;border-radius:8px;overflow:hidden;background:#F6F4F6} .pub2-cell>img,.pub2-cell>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .pub2-up{position:absolute;left:5px;bottom:5px;padding:2px 6px;border-radius:8px;background:rgba(0,0,0,.46);color:#fff;font-size:10px;line-height:1.4} .pub2-del{position:absolute;right:3px;top:3px;width:19px;height:19px;border-radius:50%; background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .pub2-del svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:2.4} .pub2-vtag{position:absolute;left:3px;bottom:3px;padding:1px 5px;border-radius:8px;background:rgba(0,0,0,.5); color:#fff;font-size:9.5px} .pub2-add{background:#F6F4F6;color:#A9A3AC;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:1px;cursor:pointer} .pub2-add>*{position:absolute;left:0;right:0;text-align:center} .pub2-plus{top:16%;font-size:22px;line-height:1;color:#C4BEC7} .pub2-add b{top:44%;font-size:13px;color:#8E8891;font-weight:500} .pub2-add small:nth-of-type(1){top:62%;font-size:10.5px} .pub2-add small:nth-of-type(2){top:76%;font-size:10.5px} .pub2-sec{border-top:1px solid #F1EFF1;padding:14px 16px 4px} .pub2-h{font-size:16px;font-weight:600;color:#2D2930} .pub2-h2{font-size:15px;font-weight:600;color:#2D2930;margin:16px 0 2px} .pub2-trow{display:flex;align-items:center;gap:10px;margin:10px 0 12px} .pub2-hash{width:34px;height:34px;flex:none;border:1.4px solid #2D2930;border-radius:8px;display:flex; align-items:center;justify-content:center;font-size:19px;font-weight:700;color:#2D2930} .pub2-tin{flex:1;min-width:0;height:36px;border:0;border-radius:18px;background:#F6F4F6; padding:0 14px;font-size:14px;color:#2D2930;font-family:inherit;outline:none} .pub2-tin::placeholder{color:#B0AAB3} .pub2-tadd{flex:none;height:36px;padding:0 16px;border-radius:18px;background:#F6F4F6;color:#6B6570;font-size:14px} .pub2-picked{display:flex;gap:8px;flex-wrap:wrap;min-height:24px;align-items:center} .pub2-pick-none{font-size:12px;color:#B0AAB3} .pub2-cloud{display:flex;gap:8px;flex-wrap:wrap;padding:10px 0 6px} .pub2-cloud .chip{background:#F6F4F6;color:#6B6570;font-size:13px;padding:8px 14px;border-radius:16px} .pub2-cloud .chip.on{background:#FFF0F5;color:#ED5486;box-shadow:inset 0 0 0 1px #FF9DB9} .pub2-picked .chip i{font-style:normal;margin-left:2px;color:#ED5486} .pub2-rows{border-top:1px solid #F1EFF1;margin-top:6px} .pub2-row{height:54px;display:flex;align-items:center;gap:10px;padding:0 16px;cursor:pointer; border-bottom:1px solid #F1EFF1} .pub2-row img{width:19px;height:19px;flex:none;opacity:.85} .pub2-row span{font-size:15px;color:#2D2930} .pub2-row b{margin-left:auto;font-size:13.5px;color:#8E8891;font-weight:400;max-width:52%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pub2-row i{font-style:normal;font-size:19px;color:#C9C3CB;line-height:1} .pub2-foot{position:sticky;bottom:0;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,rgba(255,255,255,.7),#fff 34%)} .pub2-submit{width:100%;height:46px;border-radius:23px;background:var(--brand-grad);color:#fff; font-size:16px;font-weight:700;letter-spacing:.5px;box-shadow:0 10px 22px rgba(255,76,129,.30)} .pub2-submit[disabled]{background:#E7E4E7;color:#B0AAB3;box-shadow:none} /* 作者编辑动态：复用发布器的完整表单，铺满当前屏幕，正文区自己滚动，底部保存按钮固定。 */ .fd-edit-layer{position:fixed;inset:0;z-index:760;background:#fff;display:flex;flex-direction:column} .fd-edit-sheet{position:absolute;inset:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden} .fd-edit-sheet .pub2-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch} /* 话题行（主发布页：# + 已选标签横向滚动 + 右侧添加按钮） */ .pub2-topicrow{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid #F1EFF1} .pub2-hash-sm{font-size:18px;font-weight:700;color:#FF6B35;flex:none;line-height:1} .pub2-tagscroll{flex:1;display:flex;align-items:center;gap:6px;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch;min-height:28px} .pub2-tagscroll::-webkit-scrollbar{display:none} .pub2-tag{flex:none;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px; border-radius:13px;background:#FFF3EC;color:#FF6B35;font-size:12.5px;white-space:nowrap} .pub2-tag i{font-style:normal;font-size:14px;line-height:1;color:#FF6B35;opacity:.7} .pub2-addbtn{flex:none;height:28px;padding:0 14px;border-radius:14px;border:1px solid #FF6B35; background:#fff;color:#FF6B35;font-size:13px;font-weight:600} /* 话题选择底部弹窗 */ .topic-sheet{padding:0 16px calc(16px + env(safe-area-inset-bottom,0px))} .ts-handle{width:36px;height:4px;border-radius:2px;background:#E0DCE0;margin:8px auto 14px} .ts-searchrow{display:flex;align-items:center;gap:8px;background:#F5F3F5;border-radius:22px; padding:0 6px 0 14px;height:44px;margin-bottom:18px} .ts-hash{font-size:17px;font-weight:700;color:#FF6B35;flex:none} .ts-input{flex:1;min-width:0;border:0;background:transparent;font-size:14.5px;outline:none; color:#2D2930;font-family:inherit;height:44px} .ts-input::placeholder{color:#B0AAB3} .ts-add{flex:none;color:#FF6B35;font-size:15px;font-weight:600;padding:0 8px} .ts-sec{font-size:15px;font-weight:600;color:#2D2930;margin:0 0 10px} .ts-picked{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;min-height:28px} .ts-tag-on{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px; border-radius:16px;border:1px solid #FF6B35;background:#fff;color:#FF6B35;font-size:13.5px} .ts-tag-on i{font-style:normal;font-size:16px;line-height:1;opacity:.6} .ts-rec{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:20px} .ts-tag{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:17px; background:#F5F3F5;color:#4B4650;font-size:13.5px;cursor:pointer} .ts-tag.on{border:1px solid #FF6B35;background:#fff;color:#FF6B35} .ts-tag.dis{opacity:.4;pointer-events:none} /* 位置弹层：真高德底图 + 真周边地点 + 省市区街道四级滚轮 */ .loc-sheet .loc-body{max-height:62vh;overflow-y:auto} .loc-map{position:relative;height:168px;background:#DCE7F5;overflow:hidden} .loc-map img{width:100%;height:100%;object-fit:cover;display:block} .loc-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-108%);width:30px;height:30px; border-radius:50%;background:var(--brand-grad);display:flex;align-items:center;justify-content:center; box-shadow:0 6px 14px rgba(255,76,129,.42)} .loc-pin img{width:15px;height:15px;object-fit:contain} .loc-addr{padding:10px 16px;font-size:13.5px;color:#2D2930;line-height:1.6;border-bottom:1px solid #F1EFF1} .loc-addr small{display:block;font-size:11px;color:#B0AAB3;margin-top:2px} .ep-mask-top{align-items:flex-start;padding:12vh 0 0} .ep-dialog{width:calc(100% - 48px);margin:0 auto;background:#fff;border-radius:18px;padding:4px 18px 16px; box-shadow:0 14px 36px rgba(46,20,38,.24)} .ep-dialog header{height:48px;display:flex;align-items:center;justify-content:center} .ep-dialog header b{font-size:16px;color:#2D2930;font-weight:600} .ep-dialog .ep-input{margin:2px 0 16px;border:1px solid #F3D7E0;background:#FFFBFD} .ep-dialog .ep-input:focus{outline:none;border-color:#FF7FA8;box-shadow:0 0 0 3px rgba(255,127,168,.16)} .ep-dialog-btns{display:flex;gap:10px} .ep-ghost,.ep-primary{flex:1;height:44px;border-radius:22px;font-size:15px} .ep-ghost{background:#F6F4F6;color:#6B6570;font-weight:500} .ep-primary{background:var(--brand-grad);color:#fff;font-weight:700;line-height:44px;letter-spacing:.5px; box-shadow:0 8px 20px rgba(255,76,129,.30)} .ep-primary:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(255,76,129,.26)} /* 其余带输入框的弹层（职业搜索）聚焦时抬头，键盘够不到 */ .ep-sheet-mask.ep-mask-kb{align-items:flex-start;padding-top:9vh} .ep-sheet-mask.ep-mask-kb .ep-sheet{max-height:58vh} .hbar{flex:none;display:flex;align-items:baseline;gap:17px;padding:12px 16px 3px 17px} .hbar .htab{font-size:15px;color:#7C7B82;line-height:24px;cursor:pointer} .hbar .htab.on{font-size:17px;font-weight:700;color:#1F1E24} .hbar .hfun{margin-left:auto;align-self:center;display:flex;color:#6E6D74;cursor:pointer} .hbar .hfun .ico{width:18px;height:18px} /* .hauth（首页粉色认证条）已删除：录像里首页没有这条，见 js/screens.js 里的说明。 */ .hmain{flex:1;min-height:0;position:relative} /* 行卡按 f_0001 量：卡宽 336（左右各 12）、卡高 85、卡间距 19（行距 104），白底圆角 10； 头像 72 圆角方块、卡内左边距 8；文字左起 102；昵称 15/700、信息行与签名 12。 */ /* 上留 9.5 + .hbar 上留 12：两个数一起把首卡顶钉在 css y252.5（60347fd1 f_0000~f_0008 逐帧量到的 真机首行头像顶 y262.5 —— 卡顶 = 头像顶 - 卡内上留 10）。改任一个都要两个一起动，否则首行会整体偏移。 */ .hlist{height:100%;overflow-y:auto;padding:9.5px 12px 14px;-webkit-overflow-scrolling:touch} .hlist::-webkit-scrollbar{width:0;height:0} /* 列表项按真机 f_0001 逐像素量：行高 112、圆角方头像 78、右侧「HI 圆形按钮 + 搭讪文字」。 */ .hr{height:90px;box-sizing:border-box;display:flex;align-items:center;gap:9.4px;margin:0 0 12.5px;padding:0 10px 0 9.5px;background:#fff;border:none;border-radius:10px;cursor:pointer} .hr-av{position:relative;flex:none;width:70px;height:70px;border-radius:9.5px;overflow:hidden;background:var(--line-3)} .hr-av>img{width:100%;height:100%;object-fit:cover;display:block} .hr-new{position:absolute;left:0;top:0;height:15.5px;display:flex;align-items:center;padding:0 4.4px;border-radius:0 4px 4px 4px;background:linear-gradient(90deg,#F6537E,#FF9A5C);color:#fff;font-size:9px;line-height:1;font-weight:500;pointer-events:none} .hr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding-top:9px} .hr-nm{display:flex;align-items:center;gap:6px;font-size:14px;line-height:19px;font-weight:700;color:#26242A} .hr-nm .nick{max-width:7.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hr-real{display:inline-flex;align-items:center;gap:2px;padding:0 5px 0 1px;border-radius:9px;background:#EFFCF7;box-shadow:inset 0 0 0 1px rgba(18,179,124,.32);color:#12B37C;font-size:10px;line-height:15px;font-weight:500;flex:none} .hr-real .ico{width:13px;height:13px;flex:none} .hr-info{display:flex;align-items:center;flex-wrap:nowrap;gap:0 4.5px;font-size:12px;line-height:17px;color:#5A5962;white-space:nowrap;overflow:hidden}.hr-info i{font-style:normal;font-size:11px;color:#A2A1AB} .hr-sig{margin-top:0.9px;font-size:11px;line-height:16px;color:#9C9BA3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 第三行另一形态：**语音介绍条**（真机 f0154 第 4 行「美丽的天空」）。 逐点量（尺子同 §二十一：录像 576x1280 = 360x800css，1css = 1.6 帧px）： 胶囊 x101.25~181.88 / y625.62~645.0（81.25 x 19.4，全圆角）；卡顶 562.5 → 卡内 y+63.12~+82.5； 白底 + 1px #E7E2E4 描边；左边距 6.6 起 13 根柱子（柱宽 1.9 / 缝 1.8 / 高 1.9~12.5）， 末柱后 6.2 起「13s」（墨迹 x160.75~175.75 w15.62，h8.12 → 字号 11）。 柱子高度与秒数都是**后端实测**（voiceWave / voiceSeconds，见 docs/14 §二十二），没有数据就整条不画。 上行负外边距 1.25 是让这条 19.4 高的胶囊在版式里只占「个性签名那 16.9 的位」， 相对位移 +1.5 把胶囊中心对齐真机的卡内 +72.8。 */ .hr-voice{display:inline-flex;align-items:center;gap:6.2px;height:19.4px;box-sizing:border-box; margin:-1.25px 0;padding:0 7.6px 0 6.6px;border:1px solid #E7E2E4;border-radius:9.7px;background:#fff; position:relative;top:1.5px;align-self:flex-start;flex:none;cursor:pointer} .hr-wv{display:flex;align-items:center;gap:2.2px;height:13px} .hr-wv i{width:1.55px;border-radius:0.78px;flex:none} .hr-voice b{font-size:11px;line-height:1;font-weight:500;color:#D46590;white-space:nowrap} .hr-voice.on{border-color:#F7BED1;background:#FFF7FA} .hr-act{position:relative;flex:none;width:40px;display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:8.24px;cursor:pointer} .hr-hi{position:relative;width:22.5px;height:22.5px;display:flex;align-items:center;justify-content:center} .hr-hi .hr-hi-bub{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .hr-hi .hr-hi-t{position:relative;font-size:10px;line-height:1;font-weight:700;font-style:italic;background:linear-gradient(90deg,#FF7A5C,#FF5B92);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#FF5B92} .hr-chat-ic{width:22.5px;height:22.5px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFF1F6;color:#FF5B92} .hr-chat-ic .ico{width:14px;height:14px} .hr-hi-tip{font-size:12.5px;line-height:18px;color:#4C4C50;white-space:nowrap} .hr-gift-art{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:46px;height:46px;background-position:center;background-repeat:no-repeat;background-size:contain;pointer-events:none} .hr-gift-tag{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#FF9A3D,#FF6A3D);color:#fff;font-size:10px;line-height:15px;padding:0 5px;border-radius:8px;white-space:nowrap} .hlist .hempty{padding:46px 24px;text-align:center;color:var(--t3);font-size:var(--fs-13);line-height:1.7} .hlist .hempty img{width:54px;margin:0 auto 10px;opacity:.5} .fate-mask{position:absolute;inset:0;z-index:50;background:rgba(35,20,29,.48);display:flex;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(2px)} .fate-modal{position:relative;width:min(300px,100%);background:linear-gradient(180deg,#FFF7FA 0,#fff 45%);border-radius:20px;padding:20px;box-sizing:border-box;box-shadow:0 14px 36px rgba(0,0,0,.26);text-align:center} .fate-close{position:absolute;top:8px;right:8px;width:28px;height:28px;background:transparent;color:#B5AAB0;display:flex;align-items:center;justify-content:center}.fate-close .ico{width:16px;height:16px} .fate-crown{height:24px;color:#C76CFF;font-size:24px;line-height:24px;background:linear-gradient(90deg,#FF6B9D,#9E4CFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.fate-crown span{font-size:12px;vertical-align:top;margin-left:3px}.fate-title{font-size:18px;line-height:26px;background:linear-gradient(90deg,#FF4C81,#9E4CFF);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}.fate-modal p{font-size:12px;color:#A29AA1;margin:3px 0 15px} .fate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px}.fate-person{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:#58535A;min-width:0;cursor:pointer}.fate-person img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#EEE}.fate-person span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .uh-medals,.uh-gifts{display:flex;align-items:center;gap:10px;min-height:42px;padding:3px 0}.uh-medals img{width:38px;height:38px;object-fit:contain}.uh-gifts img{width:34px;height:34px;object-fit:contain}.uh-gifts span{font-size:13px;color:#7C7480} .fate-enter{height:44px;width:100%;margin-top:17px;border-radius:22px;background:linear-gradient(90deg,#FF6B9D,#FF4C81);color:#fff;font-size:15px;font-weight:700} /* 视频速配：录像 f_0180 的粉紫匹配等待页。 */ /* ============ 视频速配·匹配等待页（真机 f_0174~f_0186） ============ 量出来的东西： · 背景不是「上深下浅」的一根渐变：顶部左右角各有一团暖色（左上偏桃 #FEB3A8、右上偏洋红 #FF77A1）， 中间（css 350~600）几乎洗成 #FFE6EA 的白，底部再回到 #FFCBCF。 · 正中一个**软白晕**（半径 ~42px 就化没了，没有硬边），里面是浅紫的吉祥物形状。 · 头像是一团**大小不一（25~42px）**的圆，散布在 y 167~382 之间；部分头像上方有白底理由胶囊。 · 底部只有「正在为你匹配...」（20px 粉）+「心动在靠近，有点耐心哦」（15px 灰紫）。 本页与真机的**唯一已知偏差**：真机匹配是自动的、这一步没有任何按钮，我们必须留手动出口， 所以把「换一个 / 开始速配 / 今日剩余次数」放在同一页最底部（`.match-actions`）。 */ .match-scene{position:absolute;inset:0;overflow:hidden; /* cdf950 速配录像使用的就是素材包 bg07，保留原始飞鸟、球体、剪影和底部彩带。 */ background:url('../assets/bg07.webp') center top/cover no-repeat} .voice-match-scene{background:url('../assets/bg07.webp') center top/cover no-repeat} .voice-match-scene::before,.voice-match-scene::after{display:none} .voice-match-scene .match-couple{display:none} .voice-match-scene .match-actions{display:none} .match-scene::before,.match-scene::after{content:'';position:absolute;border-radius:50%;filter:blur(22px)} .match-scene::before{width:200px;height:200px;left:-120px;top:-100px;background:rgba(255,255,255,.45)} /* 右上角真机是纯洋红，没有白团，所以 ::after 不画（保留规则位置，写清楚为什么没有）。 */ .match-scene::after{display:none} .voice-match-scene::before,.voice-match-scene::after{display:none} .match-scene .navbar{position:absolute;z-index:8;background:transparent;color:#fff;left:0;right:0;top:0} .match-scene .nb-back img{filter:brightness(0) invert(1)} .match-scene .nb-title{display:none} /* 真机这一屏的「速配规则」胶囊在 y46~73（不是 navbar 纵向居中），所以让 navbar 顶部对齐。 */ .match-scene .navbar{align-items:flex-start;padding:36px 18px 0 10px} .match-scene .nb-back{margin-left:-4px} /* 真机这颗胶囊不是白底粉字，是「很淡的白底(约 12%) + 白字」(f_0182 量：胶囊内比旁边底色亮约 10)。 */ /* cdf950 f_0010 量：胶囊文字墨迹 y54.4~66.2（14px）、右缘 342；返回箭头墨迹 y44.4~59.4 / x15~23.1。 navbar 顶距 36 是给箭头的，胶囊再单独下移 12。 */ .match-rules{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:13px;margin-top:12px; background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:600;cursor:pointer} .match-stage{position:absolute;inset:0;z-index:2} .match-cloud{position:absolute;inset:0} .match-av{position:absolute;width:var(--sz,38px);height:var(--sz,38px);opacity:0; animation:match-pop .55s cubic-bezier(.2,1.4,.5,1) forwards;animation-delay:var(--d,0s)} .match-av>img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block; border:1.5px solid rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(150,80,120,.22); animation:match-float var(--fd,3.6s) ease-in-out infinite;animation-delay:var(--d,0s)} /* 没有真实候选时的中性剪影圆（不拿陌生人照片充数，也不留白） */ .match-av.ghost>span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%; border:1.5px solid rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(150,80,120,.14); background:rgba(255,255,255,.55); animation:match-float var(--fd,3.6s) ease-in-out infinite;animation-delay:var(--d,0s)} .match-av.ghost>span .ico{display:block;width:54%;height:54%;color:rgba(188,150,175,.72)} /* 没候选时的说明行**占 meta 那一行**（top 690），单行不换行：底部留给操作区，互不压字。 */ .match-reason{position:absolute;left:28px;right:28px;top:690px;text-align:center; font-size:12px;line-height:16px;color:rgba(120,92,104,.9); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .match-av small{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-2px);white-space:nowrap; padding:3px 7px;border-radius:5px;background:#fff;color:#6E6170;font-size:11px;line-height:1.2; box-shadow:0 2px 7px rgba(150,80,120,.16)} .match-av.chip-r small{left:auto;right:-8px;transform:translate(0,-2px)} .match-av.chip-l small{left:-8px;transform:translate(0,-2px)} /* cdf950 f_0010 量：正中那团白晕很淡（晕内亮度 ~246，底 ~230，不是纯白），直径约 92； 里面是「心 + 电话」两个实心紫图形，整体 40.6×37.5 @ (161.9,264.4)。 */ .match-core{position:absolute;left:180px;top:281.6px;width:92px;height:92px;transform:translate(-50%,-50%); background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.60) 0 34%,rgba(255,255,255,.34) 58%,rgba(255,255,255,0) 82%)} /* 素材库里没有原版吉祥物插画，用同形图标（心 + 电话）按其量到的位置/尺寸顶位： 心 17x15 @ 相对晕盒 (32,32)，电话 26x48 @ (53,31)。 真机那两团是**实心**紫，所以把描边加粗到 3.2 近似实心（同一个 IC 别处仍是细线）。 */ .match-core .ico{position:absolute;color:#A79BF6;animation:match-breathe 3.2s ease-in-out infinite} .match-core .ico:nth-child(1){width:23px;height:23px;left:24.5px;top:25.4px} .match-core .ico:nth-child(2){width:34px;height:56px;left:37.6px;top:22.2px} .match-core .ico svg path{stroke-width:3.2;stroke-linejoin:round;fill:currentColor;stroke:currentColor} /* 真机这里是一张半透明白色「双人剪影」照片，x116..205 / y417..500；素材库里没有同款， 用 cpl-wedding 压白顶位（同首页三张推广卡的既有处理方式）。 */ .match-couple{display:none} .match-couple img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(0) invert(1)} .match-status{position:absolute;left:16px;right:16px;top:548px;text-align:center;color:#9E8F94;font-size:13px;line-height:1.2} .match-status b{color:#EE6E93;font-weight:400} /* 真机标题是 18px（不是 20px），且从左到右是「粉→橙」的渐变字，图标是视频机轮廓（同 IC('video')）。 */ .match-title{position:absolute;left:0;right:0;top:606.5px;text-align:center;font-size:19.5px;font-weight:700;letter-spacing:.4px;color:#F8636B} .match-title .ico{width:24px;height:24px;vertical-align:-5px;margin-right:7px} .match-title i{font-style:normal;background:linear-gradient(90deg,#F8475F,#FF8A5F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .match-sub{position:absolute;left:0;right:0;top:664px;text-align:center;font-size:14px;color:#9E8F94} /* 语音速配这一屏真机底部只有「正在为你匹配.」+「心动在靠近，有点耐心哦」两行（cdf950 f_0004~f_0017 逐帧确认）， 所以 meta 行（匹配度/km）在语音速配里不显示。 */ .voice-match-scene .match-meta{display:none} .match-meta{position:absolute;left:0;right:0;top:690px;text-align:center;font-size:12px;color:rgba(120,92,104,.9)} /* 操作区贴底、单列纵排：不再用负 top 把「换一个」顶到画面中间去压状态字。 真机这一屏没有按钮（自动匹配），这两个按钮是我们必须留的手动出口，所以只占最底部一条。 */ .match-actions{position:absolute;left:16px;right:16px;bottom:12px;display:none;flex-direction:column;align-items:center;gap:5px} .match-scene.match-controls-open .match-actions{display:flex} /* 面板展开时把 meta 行让出来（meta 在 690、面板占底部，否则两行会叠上）。 */ .match-scene.match-controls-open .match-meta{display:none} /* 已匹配到人时手动展开的面板更高（多两行次数/盲盒），连副标一起让位； 没候选时副标必须留着（真机等待态就有这一行），所以只在 has-cand 时隐藏。 */ .match-scene.match-controls-open.match-has-cand .match-sub{display:none} /* 没候选时（操作面板展开、但还没有 match-has-cand）底部实际是四行： 标题 / 副标 / 原因 / 按钮。真机那两行是钉在 360×800 画布上的 606.5 与 664， 矮一点的屏（比如 393×699）上按钮会直接压在副标上、原因行还会被切掉一半 （模拟器截图：换一个/开始速配 盖住「心动在靠近…」，原因只剩半行）。 所以只在**这一态**里改成从底往上排，别用钉死的 top；有候选那一态照旧用真机的位置。 */ .match-scene.match-controls-open:not(.match-has-cand) .match-title{top:auto;bottom:118px} .match-scene.match-controls-open:not(.match-has-cand) .match-sub{top:auto;bottom:90px} .match-scene.match-controls-open:not(.match-has-cand) .match-reason{top:auto;bottom:62px} .match-act-row{display:flex;align-items:center;justify-content:center;gap:10px} .match-actions button{height:36px;padding:0 20px;border-radius:18px;background:rgba(255,255,255,.72);color:#E24C7B;font-size:13px;font-weight:600;box-shadow:0 3px 12px rgba(214,86,124,.18)} .match-actions button[data-next]{height:32px;padding:0 16px;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.42);color:#B65D7D;font-size:12px;font-weight:500;box-shadow:none} .match-actions button[data-accept]{background:linear-gradient(90deg,#FF73A4,#FF4C81);color:#fff} .match-actions small{text-align:center;color:rgba(120,92,104,.8);font-size:11px} .match-actions .match-unavailable{color:rgba(120,92,104,.62);font-size:10px} @keyframes match-pop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}} @keyframes match-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes match-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} /* ============ 视频速配规则弹层（真机 f_0168~f_0172） ============ 遮罩把粉底压到 40%（黑 60%），白纸从 css 266px 起、圆角 16、内边距 22， 标题 18px 居中、右上 ×，正文 14px / 行高 20，小标题 15px 加粗。 */ .mr-mask{position:absolute;inset:0;z-index:60;background:rgba(0,0,0,.6)} .mr-mask[hidden]{display:none!important} .mr-sheet{position:absolute;left:0;right:0;top:266px;bottom:0;background:#fff;border-radius:16px 16px 0 0; padding:22px 22px 34px;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box} .mr-sheet::-webkit-scrollbar{width:0} .mr-title{font-size:17px;font-weight:700;color:#22222A;text-align:center;margin-bottom:16px} .mr-close{position:absolute;top:24px;right:16px;width:28px;height:28px;color:#B9B4BC;display:flex;align-items:center;justify-content:center;cursor:pointer} .mr-close .ico{width:17px;height:17px} .mr-body{font-size:13.5px;line-height:20px;color:#8C8894} .mr-h{font-size:14px;font-weight:600;color:#22222A;margin:0 0 8px} .mr-t{margin:0 0 8px} .mr-t+ .mr-h{margin-top:4px} .homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:#111;opacity:.85;z-index:35} .homebar.on-dark{background:#fff;opacity:.85} /* 爱情故事（参考录像）：宣传横幅 + 全部/精选 + 双列动态瀑布流。 */ .story-page{background:#fff;overflow-y:auto;overflow-x:hidden;padding-bottom:76px} .story-submit{font-size:12px;color:#F34F74;cursor:pointer} .story-hero{height:138px;position:relative;overflow:hidden;background:linear-gradient(105deg,#FFF5F7 0%,#FFDCE7 53%,#FFB9C8 100%);padding:15px 16px;box-sizing:border-box} .story-hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:21px;max-width:62%} .story-hero-copy b{font-size:21px;line-height:26px;color:#242129;letter-spacing:0} .story-hero-copy span{font-size:11px;line-height:17px;color:#6D5661} .story-hero>img{position:absolute;right:-4px;bottom:-34px;width:156px;height:150px;object-fit:cover;object-position:center top;filter:drop-shadow(0 5px 7px rgba(200,95,119,.16))} .story-hero-count{position:absolute;right:10px;top:17px;z-index:3;background:rgba(255,255,255,.78);color:#E66B91;border-radius:16px;padding:7px 10px;font-size:10px;white-space:nowrap} .story-tabs{height:39px;display:flex;align-items:center;gap:26px;padding:0 18px;border-radius:18px 18px 0 0;background:#fff;position:relative;margin-top:-1px;z-index:4;box-shadow:0 -2px 9px rgba(70,33,48,.04)} .story-tabs [role="tab"]{font-size:16px;color:#85808B;cursor:pointer;line-height:39px} .story-tabs [role="tab"].on{font-size:18px;font-weight:700;color:#1E1B20} .story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 6px;padding:3px 12px 18px;align-items:start} .story-card{overflow:hidden;border-radius:7px;background:#fff;cursor:pointer;min-width:0} .story-cover{position:relative;aspect-ratio:.809;background:#F5F1F3;overflow:hidden;border-radius:5px} .story-media{width:100%;height:100%;display:block;object-fit:cover} .story-play{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(20,16,24,.55);color:#fff;display:flex;align-items:center;justify-content:center} .story-play .ico{width:16px;height:16px} .story-cover img{width:100%;height:100%;object-fit:cover} .story-badge{position:absolute;right:5px;top:5px;padding:3px 7px;border-radius:9px;background:rgba(255,91,145,.88);color:#fff;font-size:9px;line-height:1} .story-date{display:none} .story-card-meta{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 3px;color:#9A96A0;font-size:10px} .story-stack{display:flex;align-items:center;min-width:25px} .story-stack img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:#F1EEF1;border:1.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.12)} .story-bless{white-space:nowrap} .story-copy{padding:0 3px 4px} .story-title{font-size:12.5px;line-height:18px;color:#38363D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:18px} .story-loading,.story-empty{grid-column:1/-1;text-align:center;padding:70px 16px;color:#9A98A1;font-size:13px;line-height:1.8} .story-empty small{font-size:11px;color:#B2AFB7} .story-error{color:#C0392B} .story-float-cta{position:absolute;z-index:12;left:50%;bottom:50px;transform:translateX(-50%);width:235px;height:53px;border:0;border-radius:26.5px;background:linear-gradient(90deg,#FF5C91,#FF8E74);color:#fff;box-shadow:0 7px 18px rgba(255,86,135,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer} .story-float-cta b{font-size:16px;line-height:19px;font-weight:700} .story-float-cta small{font-size:11px;opacity:.92;line-height:14px} /* 游戏速配入口：参考视频先选玩法，再进入语音房；没有 roomId 时不显示空房间错误页。 */ .game-pick{position:absolute;inset:0;background:#fff;color:#1C1B20;padding:0 16px} .game-pick-nav{height:52px;display:flex;align-items:center;justify-content:center;position:relative} .game-pick-nav .nb-back{position:absolute;left:-8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer} .game-pick-nav .nb-back img{width:19px;height:19px} .game-pick-nav b{font-size:17px} .game-help{position:absolute;right:0;width:20px;height:20px;border:1px solid #A9A7AE;border-radius:50%;font-size:12px;color:#8E8B95;display:flex;align-items:center;justify-content:center} .game-pick-sub{display:none} .game-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:34px} .game-pick-card{height:112px;border:0;border-radius:10px;background:linear-gradient(135deg,#F5E8FF,#EAD7FA);text-align:left;padding:0 0 0 16px;position:relative;overflow:hidden;cursor:pointer;color:#29232E;display:flex;align-items:flex-start;justify-content:center;flex-direction:column} .game-pick-card:nth-child(2){background:linear-gradient(135deg,#FFF0F3,#FCE0F0)} .game-pick-card b{position:relative;z-index:2;display:block;font-size:15px;line-height:20px} .game-pick-card small{position:relative;z-index:2;display:block;font-size:10.5px;line-height:15px;color:#716A78;max-width:120px;margin-top:3px} .game-pick-card em{position:absolute;left:16px;right:10px;bottom:8px;z-index:3;font-style:normal;font-size:9.5px;line-height:13px;color:#B65C2B} .game-pick-card.is-blocked{cursor:not-allowed;opacity:.58;filter:saturate(.65)} .game-pick-note{display:block;margin:14px 4px;font-size:11px;line-height:17px;color:#8A8790} .game-art{position:absolute;right:-1px;bottom:0;width:112px;height:100px;display:flex;align-items:flex-end;justify-content:flex-end;opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%)} .game-art img{width:112px;height:100px;object-fit:cover;display:block} .pool-art,.puzzle-art{background:none;transform:none} /* ---------------------------------------------------------------- 展示板演示区 */ .demo-wrap{display:flex;gap:28px;justify-content:center;align-items:flex-start} .demo-list{width:250px;flex:none;max-height:calc(100vh - 140px);overflow:auto;padding-right:6px} .demo-list .dl-group{font-size:11px;color:#6f6f7d;margin:14px 0 6px;letter-spacing:.6px} .demo-list .dl-item{ display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;font-size:13px;color:#b9b9c6;margin-bottom:3px } .demo-list .dl-item:hover{background:#1b1b25;color:#fff} .demo-list .dl-item.on{background:linear-gradient(90deg,rgba(255,76,129,.22),rgba(255,142,97,.08));color:#fff;font-weight:600} .demo-list .dl-item i{width:18px;text-align:center;font-style:normal;font-size:11px;color:#71717f} .demo-stage{display:flex;flex-direction:column;align-items:center;gap:14px} .demo-hint{font-size:12px;color:#6f6f7d} /* ---------------------------------------------------------------- 设计规范页 */ .spec-wrap{max-width:1080px;margin:0 auto;color:#d8d8e2} .spec-wrap h2{font-size:15px;color:#fff;margin:34px 0 14px;letter-spacing:.5px} .spec-wrap h2:first-child{margin-top:0} .swatches{display:flex;flex-wrap:wrap;gap:12px} .sw{width:132px;border-radius:12px;overflow:hidden;background:#16161d;border:1px solid #23232e} .sw i{display:block;height:60px} .sw div{padding:8px 10px;font-size:11px;color:#9a9aa8;line-height:1.5} .sw div b{display:block;color:#e8e8f0;font-size:12px;margin-bottom:2px} .spec-table{width:100%;border-collapse:collapse;font-size:12.5px} .spec-table th,.spec-table td{text-align:left;padding:9px 12px;border-bottom:1px solid #22222c} .spec-table th{color:#7f7f8d;font-weight:500;font-size:11.5px} .asset-row{display:flex;flex-wrap:wrap;gap:10px} .asset-row figure{margin:0;width:84px;background:#16161d;border:1px solid #23232e;border-radius:10px;padding:8px;text-align:center} .asset-row img{width:44px;height:44px;object-fit:contain;margin:0 auto 6px} .asset-row figcaption{font-size:9.5px;color:#7f7f8d;word-break:break-all} /* ========================================================================= 页面级样式 ========================================================================= */ /* --- 渐变底 / 深色场景 --- */ .bg-photo{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0} .bg-mask{position:absolute;inset:0;z-index:1} .mask-b{background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.62) 100%)} .mask-t{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 45%)} .mask-all{background:rgba(0,0,0,.38)} .on-dark,.on-dark .nb-title,.on-dark .nb-right{color:#fff} /* --- 启动/引导 --- */ .splash{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;padding:0 var(--s6)} .splash .logo-ring{width:104px;height:104px;border-radius:30px;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px rgba(255,76,129,.5);margin-top:132px} /* 品牌标换成真图（圆角方块 + 心形牵手图形），不再用「春」字加渐变色块拼 */ .splash .logo-ring img{width:100%;height:100%;display:block} .splash h2{font-size:44px;margin:20px 0 8px;letter-spacing:8px;font-weight:800; /* 上半截留白、下半截转玫红：照参考图那版的字色（白 → 粉） */ background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 44%,#FF8FB6 78%,#FF5E93 100%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 0 22px rgba(255,95,155,.85),0 4px 18px rgba(255,64,130,.5)} .splash .sub{color:#FFD9E6;font-size:var(--fs-14);letter-spacing:2px} .splash .slogan{color:#fff;font-size:var(--fs-15);font-weight:600;letter-spacing:2px;margin-top:6px} .splash .bottom{position:absolute;left:var(--s6);right:var(--s6);bottom:38px} /* 认证进度环：三种认证各占一弧（手机=品牌粉 / 实名=紫 / 真人=金），中心是完成数 */ .ring3{width:92px;height:92px;border-radius:50%;flex:none;position:relative; background:conic-gradient(from -90deg,#FF4C81 0 25%,#9E4CFF 25% 50%,#FFC700 50% 75%,#6A3BFF 75% 100%); box-shadow:0 6px 18px rgba(0,0,0,.18)} .ring3::before{content:'';position:absolute;inset:9px;border-radius:50%;background:#fff;opacity:.94} .ring3 .ring3-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#181818} .ring3 .ring3-in b{font-size:22px;font-weight:700;line-height:1} .ring3 .ring3-in i{font-size:10px;font-style:normal;color:#8A8A94;margin-top:3px} .verify-benefits-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .verify-benefit{position:relative;display:flex;flex-direction:column;min-width:0;min-height:112px;padding:10px; border-radius:14px;background:linear-gradient(145deg,#FFF6FA 0%,#FFF9FC 48%,#F7F3FF 100%); box-shadow:0 3px 12px rgba(158,76,255,.05)} .verify-benefit.is-locked{background:linear-gradient(145deg,#F8F7F9 0%,#FAF9FB 52%,#F3F1F6 100%); box-shadow:0 3px 12px rgba(83,76,92,.035)} .vb-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px} .vb-icon{width:27px;height:27px;border-radius:9px;background:rgba(255,255,255,.82);display:flex; align-items:center;justify-content:center;flex:none;box-shadow:0 2px 8px rgba(229,83,124,.07)} .vb-icon img{width:18px;height:18px;object-fit:contain} .vb-state{font-size:8.5px;line-height:1;color:#E5537C;white-space:nowrap} .is-locked .vb-state{color:#A49CA8} .vb-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:12px;font-weight:600;line-height:1.35;color:#3C3541} .vb-desc{display:-webkit-box;margin-top:3px;overflow:hidden;color:#8F8794;font-size:9.5px;line-height:1.45; -webkit-box-orient:vertical;-webkit-line-clamp:3} .is-locked .vb-title{color:#756E79} .is-locked .vb-desc{color:#A39CA7} .agree{display:flex;align-items:flex-start;gap:7px;color:rgba(255,255,255,.9);font-size:var(--fs-11);line-height:1.5;justify-content:center} .agree .cbx{width:13px;height:13px;border-radius:50%;background:var(--brand);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px} .agree a{color:#FFD9E6;text-decoration:none} /* --- 登录 --- */ /* 品牌底：粉紫渐变 + 城市剪影 + 牵手情侣（assets/brand-hero.svg）。 暗紫台球桌那版已废——真实三款 App 的冷启动都是粉紫系。 */ .brand-hero{position:absolute;inset:0;z-index:0;background-color:#9E4CFF;background-image:url(../assets/brand-hero.svg);background-size:cover;background-position:center bottom;background-repeat:no-repeat} .brand-hero.soft{background-image:none;background:var(--grad-hero)} .hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,8,48,.16) 0%,rgba(22,8,48,0) 26%,rgba(22,8,48,.24) 62%,rgba(16,6,36,.72) 100%)} .brand-badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.42);color:#fff;font-size:var(--fs-11);font-weight:600;letter-spacing:1px;margin-top:12px} .login-hero{position:absolute;inset:0;z-index:0;background-color:#9E4CFF;background-image:url(../assets/brand-city.svg);background-size:cover;background-position:center bottom;background-repeat:no-repeat} .login-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(170deg,rgba(24,8,52,.30) 0%,rgba(24,8,52,.10) 34%,rgba(20,6,44,.62) 100%)} .login-in{position:relative;z-index:2;padding:0 30px} .login-in h2{color:#fff;font-size:26px;font-weight:700;margin:26px 0 6px} .login-in .lt{color:rgba(255,255,255,.75);font-size:var(--fs-13);margin-bottom:30px} .field{display:flex;align-items:center;gap:10px;height:48px;border-radius:var(--r-cap);background:rgba(255,255,255,.16);padding:0 18px;margin-bottom:14px;border:1px solid rgba(255,255,255,.22)} .field input{flex:1;background:none;border:none;outline:none;color:#fff;font-size:var(--fs-15)} .field input::placeholder{color:rgba(255,255,255,.55)} .field .pre{color:#fff;font-size:var(--fs-15);font-weight:600} .field .code{color:#FFD9E6;font-size:var(--fs-13);white-space:nowrap} .field.light{background:var(--line-3);border:1px solid var(--line-2)} .field.light input{color:var(--t1)} .field.light input::placeholder{color:var(--t3)} .field.light .code{color:var(--brand-deep)} /* ---------- 登录 / 注册页（2026-10-14 按线上真机重排） ---------- 改的三件事：①验证码拆成左右两栏 ②发送后按钮进禁用态 + 60s 倒计时 ③提示紧贴验证码行下方。 顺带把输入框对比度提上来（原来 rgba(255,255,255,.16) 在强光下几乎看不出边框）。 */ .lg-title{font-size:26px;font-weight:800;letter-spacing:.4px;line-height:1.25} .lg-close-tap{width:44px;height:44px;margin:2px 0 4px -10px;display:flex;align-items:center;justify-content:center} .lg-field{display:flex;align-items:center;gap:10px;height:52px;border-radius:var(--r-cap); background:rgba(255,255,255,.26);border:1.5px solid rgba(255,255,255,.38);padding:0 18px; transition:border-color .15s ease,background .15s ease} .lg-field input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff; font-size:var(--fs-16);font-weight:600;letter-spacing:.5px} .lg-field input::placeholder{color:rgba(255,255,255,.72);font-weight:400;letter-spacing:0} .lg-field .pre{color:#fff;font-size:var(--fs-16);font-weight:700} /* 错误态：整条框描红 + 下面一行红字（手机号格式 / 验证码位数都走这条） */ .lg-field.is-err{border-color:#FF5C7A;background:rgba(255,70,100,.22)} .lg-arrow{width:34px;height:34px;margin-right:-12px;border:0;background:none;color:#fff; font-size:12px;opacity:.9;cursor:pointer} .lg-err{display:none;margin:6px 4px -4px;font-size:var(--fs-12);color:#FFD3DE} .lg-err.on{display:block} .lg-code-row{display:flex;align-items:center;gap:10px;margin-top:14px} .lg-code-row .lg-field{flex:1 1 auto;min-width:0;padding-right:14px} .lg-code-btn{flex:0 0 auto;height:52px;padding:0 20px;border:0;border-radius:var(--r-cap); background:var(--brand-grad);color:#fff;font-size:var(--fs-14);font-weight:700;white-space:nowrap; cursor:pointer;box-shadow:0 8px 18px rgba(255,76,129,.36)} .lg-code-btn[disabled]{background:rgba(255,255,255,.26);color:rgba(255,255,255,.66); box-shadow:none;cursor:default} .lg-code-hint{display:flex;justify-content:space-between;gap:10px; min-height:17px;margin:9px 4px 0;font-size:var(--fs-12);color:rgba(255,255,255,.9)} .lg-code-hint .lg-hint-r{color:rgba(255,255,255,.66)} /* 原来这枚是
，换成