:root{
  --mobile-main-nav-accent:#ff7246;
  --mobile-main-nav-muted:#9da4b3;
  --mobile-main-nav-panel:rgba(255,250,242,.46);
  --mobile-main-nav-line:rgba(255,255,255,.74);
  --mobile-main-nav-shadow:0 18px 42px rgba(145,74,29,.14),inset 0 1px 0 rgba(255,255,255,.92);
  --mobile-main-content-bottom:104px;
}

/* 用显式页面状态统一用户端 430px 画布，不再把关键定位依赖 :has()。 */
body.user-canvas-active{
  display:flex;
  justify-content:center;
  background:#e8dfd3;
}

body.user-canvas-active main{
  width:100%;
  max-width:430px;
  margin-inline:auto;
  overflow-x:hidden;
}

body.user-canvas-active .page-content:not(.page-hidden){
  width:100%;
  max-width:430px;
  margin-inline:auto;
  box-sizing:border-box;
}

body.user-secondary-page-active main{
  padding-top:0!important;
  padding-bottom:0!important;
}

body.user-secondary-page-active :is(#mainHeader,#mainFooter){
  display:none!important;
}

body.user-canvas-active #floatingCSButton{
  left:auto!important;
  right:max(16px,calc((100vw - 430px)/2 + 16px))!important;
}

/* 四个用户主 Tab 在所有视口宽度下使用同一底栏几何规则。 */
body.mobile-main-tab-active{
  display:flex;
  justify-content:center;
  background:#e8dfd3;
}

body.mobile-main-tab-active main{
  width:100%;
  max-width:430px;
  margin-inline:auto;
  padding-bottom:0!important;
  overflow-x:hidden;
}

body.mobile-main-tab-active #page-home.mobile-main-tab-page:not(.page-hidden),
body.mobile-main-tab-active #page-service.mobile-main-tab-page:not(.page-hidden),
body.mobile-main-tab-active #page-message.mobile-main-tab-page:not(.page-hidden),
body.mobile-main-tab-active #page-profile.mobile-main-tab-page:not(.page-hidden){
  width:100%;
  max-width:430px;
  margin-inline:auto;
  padding-bottom:calc(var(--mobile-main-content-bottom) + env(safe-area-inset-bottom,0px))!important;
  scroll-padding-bottom:calc(var(--mobile-main-content-bottom) + env(safe-area-inset-bottom,0px));
  box-sizing:border-box;
}

body.mobile-main-tab-active #mainFooter{
  left:50%!important;
  right:auto!important;
  bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
  width:calc(100vw - 28px)!important;
  max-width:402px!important;
  height:62px!important;
  transform:translateX(-50%);
  padding:5px!important;
  overflow:visible;
  border:1.5px solid var(--mobile-main-nav-line)!important;
  border-radius:26px!important;
  background:var(--mobile-main-nav-panel)!important;
  box-shadow:var(--mobile-main-nav-shadow)!important;
  -webkit-backdrop-filter:blur(19px);
  backdrop-filter:blur(19px);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

body.mobile-main-tab-active #mainFooter>div{
  height:50px!important;
  padding:0!important;
}

body.mobile-main-tab-active #mainFooter .tab-item{
  height:50px;
  gap:2px;
  color:var(--mobile-main-nav-muted)!important;
}

body.mobile-main-tab-active #mainFooter .tab-item.text-primary{
  color:var(--mobile-main-nav-accent)!important;
}

body.mobile-main-tab-active #mainFooter .tab-item svg{
  width:22px!important;
  height:22px!important;
  stroke-width:1.8;
}

body.mobile-main-tab-active #mainFooter .tab-item span:last-child{
  margin:0!important;
  font-size:11px!important;
  font-weight:400!important;
  line-height:14px;
}

@media (max-width:767px){
  body.mobile-floating-cs-active #floatingCSButton{
    left:auto!important;
    right:max(16px,calc((100vw - 430px)/2 + 16px))!important;
    z-index:80!important;
  }
}