/* v1.41 — one mobile routing model for JS, no-JS and script-sanitizing previews. */
@media (max-width:780px){
  /* CSS routing is always active. It does not depend on <noscript>. */
  .app .main > .page{display:none!important}
  #mroute-home-v140:checked ~ .app .main #home,
  #mroute-channel-v140:checked ~ .app .main #channel,
  #mroute-studio-v140:checked ~ .app .main #studio,
  #mroute-analyze-v140:checked ~ .app .main #analyze,
  #mroute-more-v140:checked ~ .app .main #mobile-more-fallback,
  #mroute-discover-v140:checked ~ .app .main #discover,
  #mroute-publish-v140:checked ~ .app .main #publish,
  #mroute-community-v140:checked ~ .app .main #community,
  #mroute-library-v140:checked ~ .app .main #library,
  #mroute-mail-v140:checked ~ .app .main #mail-center,
  #mroute-actions-v140:checked ~ .app .main #action-center,
  #mroute-settings-v140:checked ~ .app .main #settings,
  #mroute-operation-v147:checked ~ .app .main #operation,
  #mroute-dynamic-v141:checked ~ .app .main > .page.active{display:block!important}
  {
    display:block!important;
  }

  #mroute-home-v140:checked ~ .mobile-nav label[for="mroute-home-v140"],
  #mroute-channel-v140:checked ~ .mobile-nav label[for="mroute-channel-v140"],
  #mroute-studio-v140:checked ~ .mobile-nav label[for="mroute-studio-v140"],
  #mroute-analyze-v140:checked ~ .mobile-nav label[for="mroute-analyze-v140"],
  #mroute-more-v140:checked ~ .mobile-nav label[for="mroute-more-v140"]{
    color:var(--accent,#7dd3fc)!important;
  }

  /* Preview/iOS shell geometry: compact internal app bar and a bottom row that cannot be clipped. */
  :root{--v141-appbar:48px;--v141-navbase:62px}
  body{grid-template-rows:minmax(0,1fr) auto!important;min-height:100dvh!important;height:100dvh!important;overflow:hidden!important}
  body>.app{grid-row:1!important;min-height:0!important;height:auto!important;max-height:none!important;grid-template-rows:var(--v141-appbar) minmax(0,1fr)!important}
  .topbar{height:var(--v141-appbar)!important;min-height:var(--v141-appbar)!important;max-height:var(--v141-appbar)!important;grid-template-rows:var(--v141-appbar)!important;padding-top:0!important;padding-bottom:0!important}
  .mobile-app-title-v131{height:var(--v141-appbar)!important;min-height:var(--v141-appbar)!important}
  .mobile-app-title-v131 strong{font-size:17px!important;line-height:1.05!important}
  .mobile-app-title-v131 small{font-size:10.5px!important;line-height:1.05!important}
  .shell,.main{min-height:0!important}
  .main{overflow-y:auto!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important}

  body>.mobile-nav{
    grid-row:2!important;position:relative!important;inset:auto!important;z-index:160!important;
    width:100%!important;height:calc(var(--v141-navbase) + env(safe-area-inset-bottom,0px))!important;
    min-height:var(--v141-navbase)!important;
    padding:2px 4px calc(10px + env(safe-area-inset-bottom,0px))!important;
    box-sizing:border-box!important;overflow:visible!important;
    background:var(--surface-nav,#0b1016)!important;border-top:1px solid var(--stroke-subtle,#26323d)!important;
  }
  body>.mobile-nav>label{
    min-height:48px!important;height:48px!important;padding:2px 0 3px!important;box-sizing:border-box!important;
    display:grid!important;place-items:center!important;align-content:center!important;gap:2px!important;
    color:var(--text-muted,#8f9bab)!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important;
  }
  body>.mobile-nav>label b{font-size:16px!important;line-height:1!important;min-height:19px!important}
  body>.mobile-nav>label span{font-size:10px!important;line-height:1.05!important;white-space:nowrap!important}
  .page{padding-bottom:18px!important}
}
@media (max-width:360px){
  :root{--v141-appbar:46px;--v141-navbase:60px}
  body>.mobile-nav{padding-bottom:9px!important}
  body>.mobile-nav>label{height:46px!important;min-height:46px!important}
}