/* BLUE8 navigation single source of truth — clean replacement for the previous nav hotfix chain.
   One five-column geometry, one palette, one 400px canvas on desktop and full viewport on phone. */
:root { --blue8-nav-max:400px; --blue8-nav-muted:#9caac0; --blue8-nav-active:#3aa2ed; --blue8-nav-green:#17765d; }
html { scrollbar-gutter:stable; }
@media (max-width:600px) {html{scrollbar-gutter:auto}}
html body .site-shell,html body main.activities-page {box-sizing:border-box;}
html body main.activities-page {max-width:var(--blue8-nav-max)!important;width:100%!important;margin:0 auto!important;padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))!important;min-height:0!important;}
html body main.activities-page > .activities-list {margin-bottom:0!important;padding-bottom:0!important;min-height:0!important;height:auto!important;}
html body main.activities-page > .activities-list > .activity-banner:last-child{margin-bottom:0!important;}
/* Precisely the SAME centered fixed area on home and activity screens. */
html body .mobile-nav,
html body main.activities-page > :is(.mobile-nav,.activities-nav),
html body main.activities-page nav.activities-nav {
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:64px!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:0!important;
  position:fixed!important;
  left:50%!important;right:auto!important;bottom:0!important;
  transform:translateX(-50%)!important;
  margin:0!important;padding:0 0 env(safe-area-inset-bottom,0px)!important;
  width:min(100%,var(--blue8-nav-max))!important;
  max-width:var(--blue8-nav-max)!important;
  min-width:0!important;
  height:calc(64px + env(safe-area-inset-bottom,0px))!important;
  background:#ffffff!important;
  border:0!important;border-top:1px solid #e9f0f7!important;border-radius:0!important;
  box-shadow:0 -4px 12px rgba(91,148,200,.10)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  overflow:visible!important;z-index:95!important;
}
/* Each link gets exactly ONE grid column. Never manually allocate 70px alongside 20% columns. */
html body :is(.mobile-nav,.activities-nav) > :is(button,a) {
  box-sizing:border-box!important;
  grid-row:1!important;
  width:100%!important;min-width:0!important;max-width:none!important;
  height:64px!important;min-height:0!important;
  flex:none!important;
  display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
  align-items:center!important;justify-content:center!important;
  align-self:stretch!important;justify-self:center!important;
  gap:4px!important;
  position:relative!important;left:auto!important;right:auto!important;top:0!important;
  transform:none!important;margin:0!important;padding:1px 0!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;text-decoration:none!important;
  white-space:nowrap!important;word-break:keep-all!important;overflow:visible!important;
  font:500 12px/16px system-ui,-apple-system,"Microsoft YaHei",sans-serif!important;
  color:var(--blue8-nav-muted)!important;
  -webkit-text-fill-color:var(--blue8-nav-muted)!important;
  opacity:1!important;
}
html body :is(.mobile-nav,.activities-nav) > :is(button,a) > :is(.nav-icon,svg) {
  flex:none!important;display:grid!important;place-items:center!important;
  box-sizing:border-box!important;width:24px!important;height:24px!important;
  margin:0!important;padding:0!important;background:transparent!important;border:0!important;
}
html body :is(.mobile-nav,.activities-nav) > :is(button,a) svg {width:23px!important;height:23px!important;min-width:0!important;max-width:23px!important;flex:none!important;stroke:currentColor!important;opacity:1!important;}
html body :is(.mobile-nav,.activities-nav) > :is(button,a) > :is(.nav-label,strong,span:last-child) {
  display:block!important;position:relative!important;max-width:100%!important;min-width:0!important;
  height:auto!important;width:auto!important;
  flex:none!important;padding:0!important;margin:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;
  font:500 12px/16px system-ui,-apple-system,"Microsoft YaHei",sans-serif!important;
  letter-spacing:0!important;text-align:center!important;text-decoration:none!important;
  color:inherit!important;-webkit-text-fill-color:currentColor!important;opacity:1!important;
}
/* Selected tab: first on home; fourth on activities; others muted. */
html body .site-shell .mobile-nav > :first-child,
html body .mobile-nav:not(.blue8-activities-mobile-nav) > :first-child {color:var(--blue8-nav-active)!important;-webkit-text-fill-color:var(--blue8-nav-active)!important;}
html body main.activities-page > :is(.mobile-nav,.activities-nav) > :first-child {color:var(--blue8-nav-muted)!important;-webkit-text-fill-color:var(--blue8-nav-muted)!important;}
html body main.activities-page > :is(.mobile-nav,.activities-nav) > :nth-child(4) {color:var(--blue8-nav-active)!important;-webkit-text-fill-color:var(--blue8-nav-active)!important;}
/* Raised recharge disc, same size and position in all pages, WITHOUT changing track widths. */
html body :is(.mobile-nav,.activities-nav) > :nth-child(3) {
  color:var(--blue8-nav-green)!important;-webkit-text-fill-color:var(--blue8-nav-green)!important;
  width:70px!important;max-width:70px!important;min-width:70px!important;
  height:70px!important;min-height:70px!important;
  top:-12px!important;align-self:start!important;justify-self:center!important;
  display:flex!important;flex-direction:column!important;gap:2px!important;
  padding:3px 0!important;margin:0!important;
  border:3px solid #bde8ff!important;border-radius:50%!important;
  background:#fff!important;box-shadow:0 3px 12px rgba(93,166,205,.13)!important;
  isolation:isolate!important;
}
html body :is(.mobile-nav,.activities-nav) > :nth-child(3)::before,
html body :is(.mobile-nav,.activities-nav) > :nth-child(3)::after,
html body :is(.mobile-nav,.activities-nav) > :nth-child(3) > .nav-icon::before,
html body :is(.mobile-nav,.activities-nav) > :nth-child(3) > .nav-icon::after {content:none!important;display:none!important;}
html body :is(.mobile-nav,.activities-nav) > :nth-child(3) :is(svg,.nav-icon) {width:30px!important;height:30px!important;max-width:30px!important;}
html body :is(.mobile-nav,.activities-nav) > :nth-child(3) > :is(.nav-label,strong,span:last-child) {color:var(--blue8-nav-green)!important;-webkit-text-fill-color:var(--blue8-nav-green)!important;font-weight:700!important;font-size:13px!important;line-height:16px!important;letter-spacing:0!important;}