/* ui-shell — 10.29 壳层：首页顶栏、头像入口、底部导航、A09 登录页、A08/A10 弹层、
   B12/E07/E09 无品牌页头、E08 社区只去顶栏 */

/* 浏览器工具栏取 html/body 底色。只有启动页铺珊瑚色，其它页面白底，
   避免引导页等底部露出启动页的红框。首页顶栏仍由 .app-header 单独着珊瑚。 */
html.is-splash,
html.is-splash body{background:#F73D66}

/* ---------- B01 首页顶栏：登录 66 / 游客 60，左右留白 20 ---------- */
.product.view-home .app-header{height:66px;min-height:66px;padding:0 20px;gap:12px}
.product.view-home.guest-home .app-header{height:60px;min-height:60px}
/* 顶栏白色蝙蝠小标：切图 bat_mark_white 40×21。logo + 名称整块可点，高度至少 44。 */
.product.view-home .app-header .brand{gap:11px;font-size:20px;min-height:44px}
.product.view-home .app-header .brand img{width:40px;height:21px}
/* C-017 登录态右上角：40×40 白圈 + 账号已分配头像 */
.profile-link.has-avatar{background:none;border:1.5px solid #fff;width:40px;height:40px;padding:0;overflow:hidden;box-sizing:border-box}
.profile-avatar{display:block;width:100%;height:100%;background-size:cover;background-position:center;border-radius:50%}
/* C-068 游客首页右上角：透明底白色描边登录胶囊（设计 58×34） */
.product.guest-home .app-header .profile-link{background:transparent;border:1.5px solid #fff;color:#fff;width:auto;height:auto;padding:6px 15px;font-size:13px;font-weight:500;line-height:20px}

/* ---------- C-018~C-021 底部导航：72 高、24 图标、待开放徽章贴图标右上 ---------- */
.product .app-nav{height:calc(72px + env(safe-area-inset-bottom));min-height:calc(72px + env(safe-area-inset-bottom))}
.product .app-nav a{gap:4px;font-size:12px;line-height:1.2}
.product .app-nav a>span:last-child{font-size:12px;line-height:1.2}
.nav-icon{position:relative;display:block;width:24px;height:24px}
.nav-icon img{display:block;width:24px;height:24px}
.nav-badge{position:absolute;left:19px;top:-5px;margin:0;background:#C9C3C6;color:#fff;font-size:9px;line-height:1.2;padding:2px 5px;border-radius:999px;white-space:nowrap;font-weight:400}
/* 底栏文字色：选中主色、社区待开放浅灰、我的未选中灰 */
.product .app-nav a[data-tab="practice"][aria-current="page"] span:last-child{color:var(--accent)}
.product .app-nav a[data-tab="community"]{color:#C9C3C6}
/* E08：社区是当前页时，图标与文字用主色（设计底栏中列 #F73D66），灰只在「还没开放/未选中」时用 */
.product .app-nav a[data-tab="community"][aria-current="page"]{color:var(--accent)}
.product .app-nav a[data-tab="me"]:not([aria-current="page"]){color:var(--faint)}

/* ---------- A01 启动页：logo 位置与底部字居中（设计 logo 墨迹 y 293–416，底字居中、字距 6） ---------- */
.splash img{top:292px}
.splash span{left:0;right:0;text-align:center}

/* ---------- A09 登录页：手机号字段标签 + 协议勾选移到按钮下方 ---------- */
/* 页面左右留白 24（设计 x=24），标题到字段的间距按设计收紧 */
.product.view-login main{padding-left:24px;padding-right:24px}
.product.view-login .page-title{margin-bottom:15px}
#phone-form.login-form{gap:0}
#phone-form.login-form .field-phone{gap:13px;font-size:12px;font-weight:400;color:var(--faint)}
#phone-form.login-form .field-phone input{height:59px;border:1px solid var(--line);border-radius:20px;padding:0 19px;font-size:20px;font-weight:400;color:var(--ink)}
#phone-form.login-form .field-phone input::placeholder{color:#757575}
#phone-form.login-form .field-phone input:focus{outline:none;border-color:#E1DBDE;box-shadow:0 0 0 3px #F73D661A}
#phone-form.login-form>.btn{margin-top:25px;font-size:17px}
#phone-form.login-form>.btn:disabled{background:var(--line);color:var(--faint);opacity:1}
/* 协议勾选：主按钮下方，弱化灰小字两行（设计 13px / #6F666B / 行高 1.64） */
#phone-form.login-form .consent{gap:0;margin-top:24px;font-size:13px;line-height:1.64;font-weight:400;color:var(--muted)}
#phone-form.login-form .consent input{width:13px;height:13px;margin:3px 11px 0 0}
#phone-form.login-form .consent a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
#phone-form.login-form .form-status{min-height:0;margin:10px 0 0;text-align:left}

/* ---------- A08 / A10 弹层：顶部拖柄 + 弱化次按钮 ---------- */
.sheet-overlay .sheet-grab{display:block;width:40px;height:5px;border-radius:999px;background:var(--line);margin:0 auto}
.sheet-overlay .sheet-ghost{display:block;width:100%;margin-top:14px;padding:8px 0;font-size:14px;font-weight:400;color:var(--muted);text-align:center}
.sheet-overlay .sheet-lede{color:var(--muted)}
.sheet-overlay .sheet-lede a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* A10 协议确认：标题居中 24，说明句 + 两行协议链接 */
.sheet-overlay.sheet-consent .bottom-sheet{padding:12px 24px calc(34px + env(safe-area-inset-bottom))}
.sheet-overlay.sheet-consent .page-title{margin:12px 0 0;padding-right:0;align-items:center;gap:0}
.sheet-overlay.sheet-consent .page-title h1{width:100%;font-size:24px;line-height:1.35;text-align:center}
.sheet-overlay.sheet-consent .sheet-lede{margin:13px 0 0;font-size:15px;line-height:1.8;text-align:center}
.sheet-overlay.sheet-consent>.bottom-sheet>.btn{margin-top:15px}

/* A08 试玩结束：eyebrow「试玩结束」+ 左对齐悬念句 + 说明，背景保持解读页 */
.sheet-overlay.sheet-trial .bottom-sheet{padding:12px 24px calc(34px + env(safe-area-inset-bottom))}
.sheet-overlay.sheet-trial .page-title{margin:14px 0 0;padding-right:0;align-items:flex-start;gap:12px}
.sheet-overlay.sheet-trial .eyebrow{font-size:13px;letter-spacing:0;font-weight:700;color:var(--accent)}
.sheet-overlay.sheet-trial .page-title h1{font-size:24px;line-height:1.32;text-align:left}
.sheet-overlay.sheet-trial .page-title .muted{font-size:15px;line-height:1.8;color:var(--muted);text-align:left}
.sheet-overlay.sheet-trial .bottom-sheet>.btn{margin-top:14px}

/* ---------- C-091 UI-121 / C-092 UI-122：无品牌顶栏 + 返回圆钮 + 居中页题 ----------
   B12 会员 / E07 客服 / E09 关于：无品牌顶栏、无底部三 tab（app.js setPage 里已隐藏）；
   E08 社区：只去顶栏，导航与「社区」标题保留。
   设计 390×844 实测：返回圆钮 40×40 @(20,12)，1px #EEECEE 描边、白底，
   中间 ic_back.svg 墨迹高 8.7（= 18px 切图）；页题墨迹中心 y31.5（≈64 高的页头居中）。 */

/* 页头自带 64 高，main 不再留 20 的顶内边距，避免标题贴边或整体下移 */
.product.view-member main,
.product.view-support main,
.product.view-about main{padding-top:0}

/* 左上圆形返回：保留 <a class="back"> 的 href 与落点，只换成图标按钮的外观 */
.product.view-member .back,
.product.view-support .back,
.product.view-about .back{position:absolute;top:12px;left:20px;z-index:3;display:block;width:40px;height:40px;margin:0;padding:0;border:1px solid #EEECEE;border-radius:50%;background:#fff;color:transparent;font-size:0;line-height:0;overflow:hidden}
.product.view-member .back::before,
.product.view-support .back::before,
.product.view-about .back::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);background:url(/site-assets/icons/ic_back.svg) center/18px 18px no-repeat}

/* 居中页题：15px/700（设计墨迹 179×45 设备像素=59.7×15 CSS），与返回钮同一水平中线 */
.product.view-member .page-title,
.product.view-support .page-title,
.product.view-about .page-title{height:64px;margin:0;padding:0;gap:0;justify-content:center;align-items:center;text-align:center}
.product.view-member .page-title .eyebrow,
.product.view-support .page-title .eyebrow,
.product.view-about .page-title .eyebrow{display:none}
.product.view-member .page-title h1,
.product.view-support .page-title h1,
.product.view-about .page-title h1{width:100%;font-size:15px;font-weight:700;line-height:24px;text-align:center}

/* E07：页头 64 + 6，让「常见问题」墨迹落在设计 y75.3 */
.product.view-support .support-page{margin-top:6px}
/* E09：设计图标上沿 y86。已有居中页题时 64+22；还没有页题（about-head 紧跟在返回后）时直接落到 86，
   两种情况都不会和左上返回圆钮打架。居中式头图本身由 E09 条另改。 */
.product.view-about .page-title + .about-head{margin-top:22px}
.product.view-about .back + .about-head{margin-top:86px}

/* E08 社区：无顶栏，main 顶部留白 8（标题墨迹 y≈36.7，与设计一致，不贴边） */
.product.view-community main{padding-top:8px}

/* E03 退出登录：居中确认框（不是底部抽屉），左右两个等宽按钮 */
.sheet-overlay.sheet-dialog{align-items:center;justify-content:center;padding:0 26px}
.sheet-dialog .bottom-sheet{width:100%;max-width:334px;max-height:none;padding:24px 20px 20px;border-radius:24px;text-align:center}
.sheet-dialog .page-title{gap:0;margin:0;align-items:center;text-align:center}
.sheet-dialog .page-title h1{font-size:22px;line-height:1.35}
.sheet-dialog .page-title .muted{margin:10px 0 0;font-size:14px;line-height:1.7}
.sheet-dialog .dialog-actions{display:flex;gap:10px;margin-top:22px}
.sheet-dialog .dialog-actions .btn{flex:1;min-width:0;min-height:48px;font-size:16px}