/* Bottom navigation only: keep its geometry tied to the 760px content column. */
@media (max-width:1100px) {
  .app-shell > .mobile-nav {
    position:fixed;
    left:50%;
    right:auto;
    bottom:max(10px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    width:min(760px,calc(100% - 30px));
    max-width:760px;
    height:78px;
    min-height:78px;
    margin-inline:auto;
    padding:7px 8px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:center;
    border:1px solid rgba(106,120,143,.11);
    border-radius:26px;
    background:#fff;
    box-shadow:0 7px 24px rgba(35,55,84,.075);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-sizing:border-box;
  }
  .app-shell > .mobile-nav .tabbar__pill {
    position:absolute;
    top:7px;
    left:8px;
    width:calc((100% - 16px)/4);
    height:62px;
    pointer-events:none;
    transition:transform 200ms ease;
  }
  .app-shell > .mobile-nav .tabbar__pill::before {
    content:"";
    position:absolute;
    inset:0 5%;
    border-radius:20px;
    background:rgba(0,122,255,.08);
  }
  .app-shell > .mobile-nav button {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    height:62px;
    min-height:62px;
    padding:4px 2px;
    gap:4px;
    border:0;
    border-radius:20px;
    background:transparent!important;
    box-shadow:none;
    color:#737780;
    font-weight:500;
    line-height:1;
    cursor:pointer;
    transition:background-color 180ms ease,color 180ms ease,transform 160ms ease;
  }
  .app-shell > .mobile-nav button .aegis-svg {
    width:24px;
    height:24px;
    flex:none;
    color:inherit;
    stroke-width:1.9;
    transform:none;
    transition:color 180ms ease;
  }
  .app-shell > .mobile-nav button span {
    display:block!important;
    position:static;
    width:auto;
    height:16px;
    margin:0;
    padding:0;
    overflow:visible;
    clip-path:none;
    color:inherit!important;
    font-size:12px;
    line-height:16px;
    font-weight:inherit;
    white-space:nowrap;
  }
  .app-shell > .mobile-nav button.active,
  .app-shell > .mobile-nav button.active:hover {
    background:transparent!important;
    color:var(--accent);
    font-weight:600;
  }
  .app-shell > .mobile-nav button:not(.active) .aegis-svg { color:inherit; }
  .app-shell > .mobile-nav button:active { transform:scale(.98); }
  .app-shell > .mobile-nav button:active .aegis-svg,
  .app-shell > .mobile-nav button.active .aegis-svg { transform:none; }
  .app-shell > .mobile-nav button:focus { outline:none; }
  .app-shell > .mobile-nav button:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:-3px;
  }
  html[data-theme="dark"] .app-shell > .mobile-nav {
    background:#1c1c1e;
    border-color:rgba(255,255,255,.10);
    box-shadow:0 7px 24px rgba(0,0,0,.23);
  }
  html[data-theme="dark"] .app-shell > .mobile-nav .tabbar__pill::before {
    background:rgba(10,132,255,.17);
  }
  html[data-theme="dark"] .app-shell > .mobile-nav button:not(.active) { color:#a1a5ad; }
  @media (hover:hover) {
    .app-shell > .mobile-nav button:not(.active):hover {
      background:rgba(15,23,42,.035)!important;
      color:#4b5563!important;
    }
    html[data-theme="dark"] .app-shell > .mobile-nav button:not(.active):hover {
      background:rgba(255,255,255,.055)!important;
      color:#d0d2d8!important;
    }
  }
}