/* Floating navigation follows the site theme / 悬浮导航跟随站点主题色 */
body {
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

/* Let the app background fill the dynamic viewport and safe area. / 应用底色铺满动态视口与底部区域。 */
#app {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg, #f2f2f7);
}

:root[data-theme-bg-tab] #app {
  background-color: color-mix(in srgb, var(--theme-primary, #007aff) 5%, var(--bg, #f2f2f7));
}

/* Match the body's reserved tabbar space to the active page tint. / body 为导航预留的区域跟随当前页主题底色。 */
:root[data-theme-bg-tab] body {
  background-color: color-mix(in srgb, var(--theme-primary, #007aff) 5%, var(--bg, #f2f2f7));
}

.tabbar {
  left: 14px;
  right: 14px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  width: auto;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), color-mix(in srgb, var(--tab-bg, rgba(249, 249, 249, .82)) 78%, transparent));
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 1px 6px rgba(24, 34, 56, .05);
  -webkit-backdrop-filter: saturate(190%) blur(30px);
  backdrop-filter: saturate(190%) blur(30px);
}

.tab-inner {
  height: 66px;
  max-width: none;
  justify-content: space-around;
  gap: 2px;
}

.tab-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 58px;
  padding: 7px 2px 4px;
  gap: 3px;
  color: var(--label3);
  font-size: 10px;
  font-weight: 600;
  transition: color .24s ease, transform .24s ease, filter .24s ease;
}

.tab-item svg {
  width: 21px;
  height: 21px;
  transition: transform .2s ease;
}

.tab-item.active {
  color: var(--theme-primary, var(--blue, #007aff));
}

.tab-item:active svg {
  transform: scale(.9);
}

.tab-item-home {
  z-index: 1;
  transform: translateY(-12px);
  height: 74px;
  padding: 0 0 2px;
  gap: 3px;
  color: var(--theme-primary, var(--blue, #007aff));
  font-weight: 700;
}

.tab-item-home svg {
  width: 54px;
  height: 54px;
  padding: 15px;
  overflow: visible;
  border: 4px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-primary, #007aff) 84%, white), var(--theme-primary, #007aff));
  box-shadow: 0 8px 20px rgba(var(--theme-primary-rgb, 0, 122, 255), .38), inset 0 1px rgba(255, 255, 255, .45);
  color: var(--theme-on-primary, #fff);
}

.tab-item-home span {
  font-size: 10px;
  line-height: 1;
}

.tab-item-home.active svg {
  box-shadow: 0 9px 20px rgba(var(--theme-primary-rgb, 0, 122, 255), .42);
}

/* Keep selected category labels readable on the accent fill. / 选中分类在主题色底上使用白字。 */
.cat-pill.active {
  color: #fff !important;
}

@media (min-width: 720px) {
  .tabbar {
    bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-item,
  .tab-item svg {
    transition: none;
  }
}

/* Refine bottom navigation icons and focus feedback. / 优化底部导航图标与键盘焦点反馈。 */
.tab-item:not(.tab-item-home) svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease, filter .18s ease, color .18s ease;
}

.tab-item:not(.tab-item-home).active svg {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 2px 3px rgba(var(--theme-primary-rgb, 0, 122, 255), .22));
}

.tab-item:focus-visible {
  outline: 2px solid var(--theme-primary, #007aff);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tab-item:not(.tab-item-home) svg {
    transition: none;
  }
}

/* 统一五个底部标签高度 / Keep all five bottom tabs level. */
.tabbar{padding:0 8px!important}.tab-inner{height:66px!important;align-items:center!important}
.tab-item,.tab-item-home{transform:none!important;height:60px!important;padding:7px 2px 4px!important;gap:3px!important}
.tab-item-home svg{width:23px!important;height:23px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:inherit!important}
.tab-item.active:not(.tab-item-home):after,.tab-item-home.active:after{content:"";position:absolute;bottom:2px;left:50%;width:4px;height:4px;border-radius:50%;background:var(--theme-primary,var(--blue,#007aff));transform:translateX(-50%)}

/* Match the reference tab bar: highlight only the selected page. / 底部导航只高亮当前选中页面。 */
.tab-item-home{color:var(--label3)!important;font-weight:600!important;transform:none!important}
.tab-item-home svg{width:23px!important;height:23px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--label3)!important}
.tab-item-home.active{color:var(--theme-primary,var(--blue,#007aff))!important}
.tab-item-home.active svg{color:var(--theme-primary,var(--blue,#007aff))!important;filter:drop-shadow(0 2px 3px rgba(var(--theme-primary-rgb,0,122,255),.18))}

/* Match the reference tab bar: highlight only the selected page. / 底部导航只高亮当前选中页面。 */
.tab-item-home{color:var(--label3)!important;font-weight:600!important;transform:none!important}
.tab-item-home svg{width:23px!important;height:23px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--label3)!important}
.tab-item-home.active{color:var(--theme-primary,var(--blue,#007aff))!important}
.tab-item-home.active svg{color:var(--theme-primary,var(--blue,#007aff))!important;filter:drop-shadow(0 2px 3px rgba(var(--theme-primary-rgb,0,122,255),.18))}

/* Lift and illuminate the central Home tab without changing navigation behavior. / 上浮并点亮首页标签，不改动导航行为。 */
.tabbar{overflow:visible!important}
.tab-inner{overflow:visible!important;align-items:center!important}
.tab-item-home{position:relative!important;z-index:2!important;transform:translateY(-11px)!important;height:78px!important;padding:0 2px 4px!important;gap:3px!important;color:var(--label3)!important;font-weight:650!important;isolation:isolate}
.tab-item-home::before{content:"";position:absolute;z-index:-1;top:1px;left:50%;width:56px;height:56px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle,color-mix(in srgb,var(--theme-primary,#007aff) 20%,transparent) 0%,color-mix(in srgb,var(--theme-primary,#007aff) 9%,transparent) 48%,transparent 74%);filter:blur(2px);pointer-events:none;animation:tab-home-glow 3.2s ease-in-out infinite}
.tab-item-home svg{position:relative;z-index:1;width:50px!important;height:50px!important;padding:13px!important;border:3px solid rgba(255,255,255,.88)!important;border-radius:50%!important;background:linear-gradient(145deg,color-mix(in srgb,var(--theme-primary,#007aff) 86%,white),var(--theme-primary,#007aff))!important;box-shadow:0 8px 20px rgba(var(--theme-primary-rgb,0,122,255),.30),0 0 0 5px color-mix(in srgb,var(--theme-primary,#007aff) 9%,transparent),inset 0 1px rgba(255,255,255,.5)!important;color:var(--theme-on-primary,#fff)!important;transition:transform .22s ease,box-shadow .22s ease!important}
.tab-item-home span{position:relative;z-index:1;font-size:10px;line-height:1.1}
.tab-item-home.active{color:var(--theme-primary,var(--blue,#007aff))!important}
.tab-item-home.active svg{box-shadow:0 9px 24px rgba(var(--theme-primary-rgb,0,122,255),.42),0 0 0 6px color-mix(in srgb,var(--theme-primary,#007aff) 13%,transparent),inset 0 1px rgba(255,255,255,.55)!important}
.tab-item-home.active::before{animation-duration:2.2s}
.tab-item-home:active svg{transform:scale(.94)}
.tab-item-home:focus-visible{outline:2px solid var(--theme-primary,#007aff);outline-offset:3px;border-radius:28px}
@keyframes tab-home-glow{0%,100%{opacity:.58;transform:translateX(-50%) scale(.94)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.tab-item-home::before{animation:none!important}.tab-item-home svg{transition:none!important}}

/* Keep the raised Home glyph white on the accent button in every state. / 首页凸起按钮内图标在所有状态使用白色，保证主题色上的清晰度。 */
.tabbar .tab-item-home svg,.tabbar .tab-item-home.active svg{color:#fff!important;stroke:#fff!important;filter:none!important}
.tabbar .tab-item-home svg [stroke]:not([stroke="none"]){stroke:#fff!important}

:root .tabbar .tab-item.tab-item-home svg,:root .tabbar .tab-item.tab-item-home.active svg{color:#fff!important;stroke:#fff!important}