/* iOS and embedded browsers may not expose pointer:coarse. Use the viewport
   width as a second, deterministic mobile-layout signal. */
@media screen and (max-width:700px){
  html,body{min-width:0;overflow-x:hidden}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  #app{width:100%;min-width:0;overflow-x:hidden}
  .site-header .primary-nav{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;
    position:fixed!important;
    z-index:80!important;
    top:auto!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    height:calc(70px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    padding:5px 13px calc(5px + env(safe-area-inset-bottom))!important;
    gap:2px!important;
    background:#050e1bf5!important;
    border-top:1px solid #30455f40!important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px)
  }
  .site-header .primary-nav button,
  .site-header .primary-nav a{
    box-sizing:border-box!important;
    min-width:0!important;
    min-height:57px!important;
    padding:6px 5px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:11px!important;
    font-size:11px!important;
    line-height:1.5!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .site-header .primary-nav button svg,
  .site-header .primary-nav a svg{width:21px;height:21px;flex:none}
  .user-main{box-sizing:border-box;width:calc(100% - 36px);max-width:1100px;min-width:0;padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}