html,body{max-width:100%;overflow-x:hidden}
@media(max-width:720px){
  body{font-size:13px}
  .wrap{width:100%;max-width:100%;padding:12px}
  .top{align-items:flex-start;flex-direction:column;margin-bottom:8px}
  .top>div:first-child{width:100%}
  .top>div:last-child{width:100%;display:flex;align-items:center;justify-content:space-between}
  .top h1{font-size:23px;line-height:1.12;letter-spacing:-.02em}
  .top p{font-size:12px;line-height:1.35;margin-top:6px}
  .badge{white-space:nowrap;padding:6px 9px;font-size:10px}

  .nav{width:calc(100% + 24px);margin:12px -12px 14px;padding:0 12px 8px;display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav button,.nav input{flex:0 0 auto;min-height:42px;padding:9px 12px;white-space:nowrap}
  .nav input{width:148px}

  .priority{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
  .priority .hero,.priority .hero:first-child{grid-column:auto;width:100%;min-height:0;padding:15px;border-radius:15px}
  .hero>strong{font-size:38px;margin:11px 0 5px}
  .hero-sub{padding-top:10px;margin-top:13px}
  .hero .workout-count{font-size:32px}

  .status{width:100%;padding:14px 12px;border-radius:15px;border-left-width:5px}
  .status .headrow{align-items:flex-start}
  .status .dot{width:16px;height:16px;flex:0 0 16px;margin-top:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 15%,transparent)}
  .status-title{font-size:22px}
  .status-copy{font-size:12px;line-height:1.4}
  .freshgrid{grid-template-columns:1fr;gap:8px;margin-top:12px}
  .fresh{padding:11px;border-radius:11px}
  .fresh div,.fresh b,.fresh span{min-width:0}
  .excludedbox{padding:10px;margin-top:10px;font-size:12px}
  .excludedbox ul{padding-left:17px}

  .metricgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
  .metric{min-width:0;padding:12px;border-radius:13px}
  .metric strong{font-size:22px;overflow-wrap:anywhere}
  .metric small{display:block;font-size:10px;line-height:1.3}

  .charts{grid-template-columns:1fr;gap:10px;margin-top:10px}
  .chart{min-width:0;min-height:0;padding:12px;border-radius:14px;overflow:hidden}
  .chart .metrichead{align-items:flex-start;flex-wrap:wrap}
  .chart h2{font-size:15px;line-height:1.25}
  .chart .chip{font-size:10px}
  .canvas{width:100%;height:220px;margin-top:8px}
  .insight{font-size:12px;line-height:1.4}

  .login{width:calc(100% - 24px);margin:6vh auto;padding:20px;border-radius:17px}
  .login h1{font-size:25px}
  .account{padding:12px;align-items:center}
  .account>div{padding:18px;border-radius:15px}
}

@media(max-width:380px){
  .wrap{padding:10px}
  .nav{width:calc(100% + 20px);margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
  .metricgrid{grid-template-columns:1fr}
  .hero>strong{font-size:35px}
  .canvas{height:200px}
}