.mobile-navigation-rail, .mobile-home, .mobile-menu-toggle, .nav-label { display: none; }
.circle-button > [data-icon] { display: inline-grid; place-items: center; }
.more-menu { color: var(--rs-text); background: var(--rs-background); border: 1px solid var(--rs-control-border); border-radius: 14px; padding: 8px; margin: 0; }
.more-menu:popover-open { display: flex; flex-direction: column; gap: 6px; position: fixed; inset: 50% auto auto 92px; transform: translateY(-50%); width: min(260px, calc(100vw - 112px)); max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: 0 12px 40px #0006; }
.more-menu .circle-button { display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; height: 44px; min-height: 44px; padding: 0 12px; border-radius: 9px; text-decoration: none; font-size: 14px; }
.more-menu .nav-label { display: inline; }
.more-menu::backdrop { background: transparent; }
@media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) {
  :root { --mobile-safe-bottom: 0px; --mobile-rail-padding: 8px; --mobile-control-size: 44px; --mobile-control-gap: clamp(4px, 1vw, 8px); --mobile-group-width: calc(2 * var(--mobile-control-size) + var(--mobile-control-gap)); }
  body { --mobile-rail-height: calc(var(--mobile-control-size) + 2 * var(--mobile-rail-padding)); }
  body:has(#browse-view:not([hidden])) { --mobile-control-size: min(44px, calc((100vw - 56px) / 7)); --mobile-group-width: calc(7 * var(--mobile-control-size) + 6 * var(--mobile-control-gap)); }
  .mobile-navigation-rail { display: block; position: fixed; inset: auto 0 0; height: calc(var(--mobile-rail-height) + var(--mobile-safe-bottom)); z-index: 2; pointer-events: none; border-top: 1px solid var(--rs-border); background: var(--rs-background); }
  .mobile-home, .mobile-menu-toggle { position: fixed; top: auto; bottom: calc((var(--mobile-rail-height) - var(--mobile-control-size)) / 2 + var(--mobile-safe-bottom)); display: inline-grid; width: var(--mobile-control-size); height: var(--mobile-control-size); pointer-events: auto; cursor: pointer; color: var(--rs-text); }
  .mobile-home { left: calc(50% - var(--mobile-group-width) / 2); }
  .mobile-home img { width: calc(var(--mobile-control-size) * .65); height: calc(var(--mobile-control-size) * .65); display: block; margin: 0; }
  .mobile-menu-toggle { left: calc(50% + var(--mobile-group-width) / 2 - var(--mobile-control-size)); }
  #navigation-panel { display: none; }
  #navigation-panel:popover-open { display: flex; position: fixed; inset: auto auto calc(var(--mobile-rail-height) + 12px + var(--mobile-safe-bottom)) 50%; transform: translateX(-50%); margin: 0; width: min(280px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - var(--mobile-rail-height) - 36px); padding: 12px; overflow-y: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; border: 1px solid var(--rs-control-border); border-radius: 16px; background: var(--rs-background); color: var(--rs-text); box-shadow: 0 12px 40px #0008; }
  #navigation-panel nav { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  #navigation-panel .more-menu, #navigation-panel .more-menu:popover-open { display: contents; position: static; transform: none; border: 0; padding: 0; box-shadow: none; }
  #navigation-panel .circle-button { display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; min-height: 44px; height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14px; line-height: 1.3; text-decoration: none; }
  #navigation-panel .nav-label { display: inline; }
  #navigation-panel > a[aria-label="Random Shorts home"] { display: none; }
  #navigation-panel .circle-button svg { width: 22px; height: 22px; }
  #navigation-panel .desktop-menu-toggle { display: none; }
  #navigation-panel::backdrop { background: #0003; }
}