.pb-bottom-nav {
  display: none;
}

@media (max-width: 640px) {
  .pb-bottom-nav {
    position: fixed;
    z-index: 900;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(var(--pb-bnav-n, 4), minmax(0, 1fr));
    min-height: 56px;
    padding: 0 8px env(safe-area-inset-bottom);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
    box-shadow: 0 -4px 16px color-mix(in srgb, var(--c-text) 8%, transparent);
  }

  .pb-bottom-nav__item {
    display: flex;
    min-width: 0;
    min-height: 56px;
    padding: 7px 4px 5px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    color: var(--c-text-muted);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur) var(--ease);
  }

  .pb-bottom-nav__item:hover,
  .pb-bottom-nav__item:focus-visible,
  .pb-bottom-nav__item.is-active {
    color: var(--c-accent);
  }

  .pb-bottom-nav__item:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: -2px;
    border-radius: var(--radius);
  }

  .pb-bottom-nav__icon {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* IconFont 571607 线性套装：首页 / 阅读 / 分类 / 用户；视频为同笔触屏+播放 */
  .pb-bottom-nav__icon--home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M911.701333%20460.8a34.133333%2034.133333%200%200%201-20.224-6.656L512%20174.08%20132.522667%20454.314667a34.133333%2034.133333%200%200%201-40.533334-54.954667l399.701334-295.168a34.133333%2034.133333%200%200%201%2040.618666%200l399.701334%20295.168a34.133333%2034.133333%200%200%201-20.309334%2061.44zM853.333333%20926.549333H608.853333a34.133333%2034.133333%200%200%201-34.133333-34.133333V604.245333h-125.44v288.170667a34.133333%2034.133333%200%200%201-34.133333%2034.133333H170.666667a34.133333%2034.133333%200%200%201-34.133334-34.133333V389.717333a34.133333%2034.133333%200%200%201%2068.266667%200v468.565334h176.213333V570.112a34.133333%2034.133333%200%200%201%2034.133334-34.133333h193.706666a34.133333%2034.133333%200%200%201%2034.133334%2034.133333v288.170667H819.2V389.717333a34.133333%2034.133333%200%200%201%2068.266667%200v502.698667a34.133333%2034.133333%200%200%201-34.133334%2034.133333z%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M911.701333%20460.8a34.133333%2034.133333%200%200%201-20.224-6.656L512%20174.08%20132.522667%20454.314667a34.133333%2034.133333%200%200%201-40.533334-54.954667l399.701334-295.168a34.133333%2034.133333%200%200%201%2040.618666%200l399.701334%20295.168a34.133333%2034.133333%200%200%201-20.309334%2061.44zM853.333333%20926.549333H608.853333a34.133333%2034.133333%200%200%201-34.133333-34.133333V604.245333h-125.44v288.170667a34.133333%2034.133333%200%200%201-34.133333%2034.133333H170.666667a34.133333%2034.133333%200%200%201-34.133334-34.133333V389.717333a34.133333%2034.133333%200%200%201%2068.266667%200v468.565334h176.213333V570.112a34.133333%2034.133333%200%200%201%2034.133334-34.133333h193.706666a34.133333%2034.133333%200%200%201%2034.133334%2034.133333v288.170667H819.2V389.717333a34.133333%2034.133333%200%200%201%2068.266667%200v502.698667a34.133333%2034.133333%200%200%201-34.133334%2034.133333z%27%2F%3E%3C%2Fsvg%3E");
  }

  .pb-bottom-nav__icon--video {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%20d%3D%27M853.333333%20170.666667H170.666667a68.266667%2068.266667%200%200%200-68.266667%2068.266666v546.133334a68.266667%2068.266667%200%200%200%2068.266667%2068.266666h682.666666a68.266667%2068.266667%200%200%200%2068.266667-68.266666V238.933333a68.266667%2068.266667%200%200%200-68.266667-68.266666zM785.066667%20238.933333v546.133334H238.933333V238.933333h546.133334zM430.933333%20362.666667a34.133333%2034.133333%200%200%201%2052.053334-28.928l213.333333%20128a34.133333%2034.133333%200%200%201%200%2057.856l-213.333333%20128A34.133333%2034.133333%200%200%201%20430.933333%20618.666667V362.666667zM499.2%20431.573333v117.76L597.333333%20512z%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%20d%3D%27M853.333333%20170.666667H170.666667a68.266667%2068.266667%200%200%200-68.266667%2068.266666v546.133334a68.266667%2068.266667%200%200%200%2068.266667%2068.266666h682.666666a68.266667%2068.266667%200%200%200%2068.266667-68.266666V238.933333a68.266667%2068.266667%200%200%200-68.266667-68.266666zM785.066667%20238.933333v546.133334H238.933333V238.933333h546.133334zM430.933333%20362.666667a34.133333%2034.133333%200%200%201%2052.053334-28.928l213.333333%20128a34.133333%2034.133333%200%200%201%200%2057.856l-213.333333%20128A34.133333%2034.133333%200%200%201%20430.933333%20618.666667V362.666667zM499.2%20431.573333v117.76L597.333333%20512z%27%2F%3E%3C%2Fsvg%3E");
  }

  .pb-bottom-nav__icon--book {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M512%20886.272a34.133333%2034.133333%200%200%201-34.133333-34.133333c0-21.930667-23.893333-40.533333-52.224-40.533334H111.957333a34.133333%2034.133333%200%200%201-34.133333-34.133333v-605.866667a34.133333%2034.133333%200%200%201%2034.133333-34.133333h313.685334C492.117333%20137.728%20546.133333%20186.538667%20546.133333%20246.528v605.866667a34.133333%2034.133333%200%200%201-34.133333%2033.877333zM146.090667%20743.338667h279.552A131.669333%20131.669333%200%200%201%20477.866667%20754.090667V246.528c0-22.016-23.893333-40.533333-52.224-40.533333H146.090667zM512%20886.272a34.133333%2034.133333%200%200%201-34.133333-34.133333v-605.866667c0-59.733333%2054.016-108.8%20120.490666-108.8h313.685334a34.133333%2034.133333%200%200%201%2034.133333%2034.133333v605.866667a34.133333%2034.133333%200%200%201-34.133333%2034.133333H598.357333c-28.330667%200-52.224%2018.602667-52.224%2040.533334a34.133333%2034.133333%200%200%201-34.133333%2034.133333z%20m86.357333-680.277333c-28.330667%200-52.224%2018.517333-52.224%2040.533333v507.562667a131.669333%20131.669333%200%200%201%2052.224-10.752h279.552v-537.6z%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M512%20886.272a34.133333%2034.133333%200%200%201-34.133333-34.133333c0-21.930667-23.893333-40.533333-52.224-40.533334H111.957333a34.133333%2034.133333%200%200%201-34.133333-34.133333v-605.866667a34.133333%2034.133333%200%200%201%2034.133333-34.133333h313.685334C492.117333%20137.728%20546.133333%20186.538667%20546.133333%20246.528v605.866667a34.133333%2034.133333%200%200%201-34.133333%2033.877333zM146.090667%20743.338667h279.552A131.669333%20131.669333%200%200%201%20477.866667%20754.090667V246.528c0-22.016-23.893333-40.533333-52.224-40.533333H146.090667zM512%20886.272a34.133333%2034.133333%200%200%201-34.133333-34.133333v-605.866667c0-59.733333%2054.016-108.8%20120.490666-108.8h313.685334a34.133333%2034.133333%200%200%201%2034.133333%2034.133333v605.866667a34.133333%2034.133333%200%200%201-34.133333%2034.133333H598.357333c-28.330667%200-52.224%2018.602667-52.224%2040.533334a34.133333%2034.133333%200%200%201-34.133333%2034.133333z%20m86.357333-680.277333c-28.330667%200-52.224%2018.517333-52.224%2040.533333v507.562667a131.669333%20131.669333%200%200%201%2052.224-10.752h279.552v-537.6z%27%2F%3E%3C%2Fsvg%3E");
  }

  .pb-bottom-nav__icon--manga {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M911.786667%20486.826667h-799.573334a34.133333%2034.133333%200%200%201-34.133333-34.133334V193.109333a34.133333%2034.133333%200%200%201%2034.133333-34.133333h799.573334a34.133333%2034.133333%200%200%201%2034.133333%2034.133333v259.584a34.133333%2034.133333%200%200%201-34.133333%2034.133334z%20m-765.44-68.266667h731.306666V227.242667h-731.306666zM392.533333%20357.034667H225.109333a34.133333%2034.133333%200%201%201%200-68.266667H392.533333a34.133333%2034.133333%200%200%201%200%2068.266667zM911.786667%20865.024h-799.573334a34.133333%2034.133333%200%200%201-34.133333-34.133333V571.733333a34.133333%2034.133333%200%200%201%2034.133333-34.133333h799.573334a34.133333%2034.133333%200%200%201%2034.133333%2034.133333v259.157334a34.133333%2034.133333%200%200%201-34.133333%2034.133333z%20m-765.44-68.266667h731.306666V605.866667h-731.306666zM392.533333%20735.232H225.109333a34.133333%2034.133333%200%201%201%200-68.266667H392.533333a34.133333%2034.133333%200%200%201%200%2068.266667z%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M911.786667%20486.826667h-799.573334a34.133333%2034.133333%200%200%201-34.133333-34.133334V193.109333a34.133333%2034.133333%200%200%201%2034.133333-34.133333h799.573334a34.133333%2034.133333%200%200%201%2034.133333%2034.133333v259.584a34.133333%2034.133333%200%200%201-34.133333%2034.133334z%20m-765.44-68.266667h731.306666V227.242667h-731.306666zM392.533333%20357.034667H225.109333a34.133333%2034.133333%200%201%201%200-68.266667H392.533333a34.133333%2034.133333%200%200%201%200%2068.266667zM911.786667%20865.024h-799.573334a34.133333%2034.133333%200%200%201-34.133333-34.133333V571.733333a34.133333%2034.133333%200%200%201%2034.133333-34.133333h799.573334a34.133333%2034.133333%200%200%201%2034.133333%2034.133333v259.157334a34.133333%2034.133333%200%200%201-34.133333%2034.133333z%20m-765.44-68.266667h731.306666V605.866667h-731.306666zM392.533333%20735.232H225.109333a34.133333%2034.133333%200%201%201%200-68.266667H392.533333a34.133333%2034.133333%200%200%201%200%2068.266667z%27%2F%3E%3C%2Fsvg%3E");
  }

  .pb-bottom-nav__icon--user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M512%20549.290667a227.754667%20227.754667%200%201%201%20227.754667-227.669334A228.010667%20228.010667%200%200%201%20512%20549.290667zM512%20162.133333a159.488%20159.488%200%201%200%20159.488%20159.488A159.658667%20159.658667%200%200%200%20512%20162.133333zM914.773333%20930.133333H109.226667a34.133333%2034.133333%200%200%201-34.133334-34.133333V763.904C75.093333%20661.418667%20279.210667%20571.733333%20512%20571.733333s436.906667%2089.941333%20436.906667%20192.426667V896a34.133333%2034.133333%200%200%201-34.133334%2034.133333z%20m-771.413333-68.266666h737.28V763.904C880.64%20727.04%20737.621333%20640%20512%20640S143.36%20727.04%20143.36%20763.904z%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M512%20549.290667a227.754667%20227.754667%200%201%201%20227.754667-227.669334A228.010667%20228.010667%200%200%201%20512%20549.290667zM512%20162.133333a159.488%20159.488%200%201%200%20159.488%20159.488A159.658667%20159.658667%200%200%200%20512%20162.133333zM914.773333%20930.133333H109.226667a34.133333%2034.133333%200%200%201-34.133334-34.133333V763.904C75.093333%20661.418667%20279.210667%20571.733333%20512%20571.733333s436.906667%2089.941333%20436.906667%20192.426667V896a34.133333%2034.133333%200%200%201-34.133334%2034.133333z%20m-771.413333-68.266666h737.28V763.904C880.64%20727.04%20737.621333%20640%20512%20640S143.36%20727.04%20143.36%20763.904z%27%2F%3E%3C%2Fsvg%3E");
  }

  /* 兼容旧草稿图标名 → 同套 mask */
  .pb-bottom-nav__icon--grid {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%20d%3D%27M853.333333%20170.666667H170.666667a68.266667%2068.266667%200%200%200-68.266667%2068.266666v546.133334a68.266667%2068.266667%200%200%200%2068.266667%2068.266666h682.666666a68.266667%2068.266667%200%200%200%2068.266667-68.266666V238.933333a68.266667%2068.266667%200%200%200-68.266667-68.266666zM785.066667%20238.933333v546.133334H238.933333V238.933333h546.133334zM430.933333%20362.666667a34.133333%2034.133333%200%200%201%2052.053334-28.928l213.333333%20128a34.133333%2034.133333%200%200%201%200%2057.856l-213.333333%20128A34.133333%2034.133333%200%200%201%20430.933333%20618.666667V362.666667zM499.2%20431.573333v117.76L597.333333%20512z%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%20d%3D%27M853.333333%20170.666667H170.666667a68.266667%2068.266667%200%200%200-68.266667%2068.266666v546.133334a68.266667%2068.266667%200%200%200%2068.266667%2068.266666h682.666666a68.266667%2068.266667%200%200%200%2068.266667-68.266666V238.933333a68.266667%2068.266667%200%200%200-68.266667-68.266666zM785.066667%20238.933333v546.133334H238.933333V238.933333h546.133334zM430.933333%20362.666667a34.133333%2034.133333%200%200%201%2052.053334-28.928l213.333333%20128a34.133333%2034.133333%200%200%201%200%2057.856l-213.333333%20128A34.133333%2034.133333%200%200%201%20430.933333%20618.666667V362.666667zM499.2%20431.573333v117.76L597.333333%20512z%27%2F%3E%3C%2Fsvg%3E");
  }

  .pb-bottom-nav__icon--compass {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M911.786667%20486.826667h-799.573334a34.133333%2034.133333%200%200%201-34.133333-34.133334V193.109333a34.133333%2034.133333%200%200%201%2034.133333-34.133333h799.573334a34.133333%2034.133333%200%200%201%2034.133333%2034.133333v259.584a34.133333%2034.133333%200%200%201-34.133333%2034.133334z%20m-765.44-68.266667h731.306666V227.242667h-731.306666zM392.533333%20357.034667H225.109333a34.133333%2034.133333%200%201%201%200-68.266667H392.533333a34.133333%2034.133333%200%200%201%200%2068.266667zM911.786667%20865.024h-799.573334a34.133333%2034.133333%200%200%201-34.133333-34.133333V571.733333a34.133333%2034.133333%200%200%201%2034.133333-34.133333h799.573334a34.133333%2034.133333%200%200%201%2034.133333%2034.133333v259.157334a34.133333%2034.133333%200%200%201-34.133333%2034.133333z%20m-765.44-68.266667h731.306666V605.866667h-731.306666zM392.533333%20735.232H225.109333a34.133333%2034.133333%200%201%201%200-68.266667H392.533333a34.133333%2034.133333%200%200%201%200%2068.266667z%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201024%201024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M911.786667%20486.826667h-799.573334a34.133333%2034.133333%200%200%201-34.133333-34.133334V193.109333a34.133333%2034.133333%200%200%201%2034.133333-34.133333h799.573334a34.133333%2034.133333%200%200%201%2034.133333%2034.133333v259.584a34.133333%2034.133333%200%200%201-34.133333%2034.133334z%20m-765.44-68.266667h731.306666V227.242667h-731.306666zM392.533333%20357.034667H225.109333a34.133333%2034.133333%200%201%201%200-68.266667H392.533333a34.133333%2034.133333%200%200%201%200%2068.266667zM911.786667%20865.024h-799.573334a34.133333%2034.133333%200%200%201-34.133333-34.133333V571.733333a34.133333%2034.133333%200%200%201%2034.133333-34.133333h799.573334a34.133333%2034.133333%200%200%201%2034.133333%2034.133333v259.157334a34.133333%2034.133333%200%200%201-34.133333%2034.133333z%20m-765.44-68.266667h731.306666V605.866667h-731.306666zM392.533333%20735.232H225.109333a34.133333%2034.133333%200%201%201%200-68.266667H392.533333a34.133333%2034.133333%200%200%201%200%2068.266667z%27%2F%3E%3C%2Fsvg%3E");
  }

  .pb-bottom-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pb-bottom-nav__item {
    transition: none;
  }
}