/* HelloGo responsive guardrails — phones, tablets, desktop */
html,body{max-width:100%;overflow-x:hidden}
img,video,svg{max-width:100%}
button,input,select,textarea{max-width:100%}
.app-shell{width:min(100%,760px)}
.sheet-panel,.my-dialog,.code-dialog,.purchase-dialog,.points-dialog,.hg-tools-dialog,.agreement-dialog,.auth-utility-dialog{max-width:calc(100vw - 20px)}
.devices-hero{margin-top:0}
.devices-hero .purchase-records{top:72px}
.ride-topbar,.rules-topbar,.detail-topbar{padding-right:172px!important}
.points-main,.my-main{padding-top:72px!important}
@media(max-width:760px){
  .device-card,.profile-card,.shortcut-card,.score-card,.rules-intro,.rule-section{max-width:100%}
  .device-metrics{min-width:0}
  .income-grid>div,.device-metrics>div{min-width:0}
  .bottom-nav{width:100%}
}
@media(max-width:600px){
  .ride-topbar,.rules-topbar,.detail-topbar{padding-right:150px!important}
  .points-main,.my-main{padding-top:62px!important}
  .devices-hero .purchase-records{top:64px}
  .device-card{grid-template-columns:minmax(0,1fr)!important}
  .device-product,.device-metrics{width:100%}
  .purchase-dialog,.my-dialog,.code-dialog,.points-dialog{max-height:88dvh}
}
@media(max-width:420px){
  .ride-topbar,.rules-topbar,.detail-topbar{padding-right:140px!important}
  .points-main,.my-main{padding-top:58px!important}
  .income-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bottom-nav{padding-left:4px;padding-right:4px}
  .nav-item{min-width:0}
  .nav-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .history-date-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
}
@media(max-width:360px){
  .hg-global-tools>*{width:30px!important;height:30px!important}
  .hg-global-tools{right:5px!important}
  .ride-topbar,.rules-topbar,.detail-topbar{padding-right:130px!important}
  .profile-card{padding-left:12px!important;padding-right:12px!important}
}
@media(min-width:761px) and (max-width:1100px){
  .app-shell{width:min(92vw,760px)}
}
@media(min-width:1101px){
  body{background-attachment:fixed}
  .app-shell{border-left:1px solid rgba(218,230,242,.7);border-right:1px solid rgba(218,230,242,.7)}
}
@media(orientation:landscape) and (max-height:620px){
  .hg-tools-dialog,.agreement-dialog,.purchase-dialog,.my-dialog,.code-dialog{max-height:92dvh}
}