.mobile-bottom-bar { display: none; }
@media (max-width: 900px) {
  :root { --bottom-bar-space: calc(94px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: var(--bottom-bar-space); }
  body { padding-bottom: var(--bottom-bar-space); }
  .mobile-bottom-bar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
    position: fixed; z-index: 45; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-width: 520px; margin-inline: auto;
    padding: 6px; gap: 3px; border: 1px solid #dedede; border-radius: 18px;
    background: #fff; color: #646464; box-shadow: 0 8px 32px #00000014, 0 1px 5px #00000008;
  }
  .bottom-bar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: 62px; padding: 4px 2px; margin: 0; border: 0; border-radius: 12px;
    background: transparent; color: inherit; font: inherit; cursor: pointer; line-height: 1.25;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .bottom-bar-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 30px; flex-shrink: 0; }
  .bottom-bar-label { font-size: 12px; font-weight: 500; letter-spacing: -.2px; white-space: nowrap; }
  .bottom-bar-item[aria-current], .bottom-bar-item[aria-expanded="true"] { background: #f0f0f0; color: #202020; }
  .bottom-bar-item[aria-current] .bottom-bar-icon svg { stroke-width: 2.2; }
  .bottom-bar-item.bottom-bar-primary { background: linear-gradient(180deg, #ffe498, #ffce3e); color: #26220f; }
  .bottom-bar-primary .bottom-bar-icon { height: 31px; }
  .bottom-bar-item:focus-visible { outline: 2px solid #222; outline-offset: -2px; }
  .bottom-bar-item:active { background: #e9e9e9; }
  .bottom-bar-primary:active { background: #ffce3e; }
  .header-inner #navigation.is-open { bottom: var(--bottom-bar-space); height: calc(100vh - 72px - var(--bottom-bar-space)); height: calc(100dvh - 72px - var(--bottom-bar-space)); }
  .toast { bottom: var(--bottom-bar-space); }
  body:has(dialog[open]) .mobile-bottom-bar, body.mobile-keyboard-open .mobile-bottom-bar { visibility: hidden; pointer-events: none; }
}
@media (max-width: 900px) {
  body.mobile-menu-open::after { content: ''; position: fixed; inset: 72px 0 0; z-index: 29; background: #fff; }
}