/* Shared mobile navigation: loaded after both source and compiled styles. */
.mobile-account-button { display: none; }
@media screen and (max-width: 680px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header > .menu-toggle,
  .site-header > .main-nav { display: none; }
  .site-header > .brand { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; }
  .site-header > .header-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .site-header .mobile-account-button {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    position: relative;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #edf8fa;
  }
  .site-header .mobile-account-button::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 11px;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
  }
  .site-header .mobile-account-button svg { position: relative; width: 18px; height: 18px; }
  .site-header .mobile-account-button:hover::before { background: rgba(255, 255, 255, .16); }
  .site-header .mobile-account-button:focus-visible { outline: 2px solid #72d2dc; outline-offset: 2px; }
  .bottom-nav {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    max-width: 460px;
    margin-inline: auto;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(149, 218, 230, .24);
    border-radius: 24px;
    background: rgba(6, 40, 54, .98);
    box-shadow: 0 8px 32px rgba(3, 25, 35, .26), inset 0 1px 0 rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .bottom-nav a {
    min-width: 0;
    min-height: 58px;
    padding: 8px 2px;
    border-radius: 18px;
    align-content: center;
    gap: 5px;
    color: #c0d6de;
    transition: background-color .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav .site-icon { width: 22px; height: 22px; }
  .bottom-nav span { font-size: var(--font-meta); font-weight: 500; line-height: 1.35; white-space: nowrap; }
  .bottom-nav:has(a:nth-child(5)) span { white-space: normal; text-align: center; }
  .bottom-nav:has(a:nth-child(6)) { grid-auto-columns: minmax(72px, 1fr); overflow-x: auto; }
  .bottom-nav a[aria-current="page"] { background: #72d2dc; color: #062836; }
  .bottom-nav a[aria-current="page"] span { font-weight: 600; }
  .bottom-nav a:active { background: #a0e4eb; color: #062836; }
  .bottom-nav a:focus-visible { outline: 2px solid #a0e4eb; outline-offset: 1px; }
  .scroll-to-top { bottom: calc(94px + env(safe-area-inset-bottom)); }
  .site-footer {
    padding-top: 24px;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
  }
  .site-footer .newsletter {
    transform: none;
    margin-top: 0;
    margin-bottom: 24px;
    border-top: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  }
  [data-theme="dark"] .bottom-nav { background: rgba(6, 40, 54, .98); border-color: rgba(149, 218, 230, .24); }
}
@media screen and (max-width: 360px) {
  .site-header .site-brand-mark { display: none; }
  .bottom-nav:has(a:nth-child(5)) { gap: 2px; padding: 5px; }
  .bottom-nav:has(a:nth-child(5)) span { font-size: var(--font-meta); }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-nav a { transition: none; }
}