/* Production responsive guardrail: keep all MomentumSwitch content inside the viewport. */
html,body{max-width:100%;overflow-x:hidden}
main,main>*,.panel,.hero,.hero>*,.workspace,.workspace>*,.side,.side>*,.section-head,.legend,.support-panel{min-width:0;max-width:100%}
.hero{overflow:hidden}
.hero>div:first-child{min-width:0;max-width:100%;overflow:hidden}
.hero .eyebrow,.hero h1,.hero h1 span,.hero p,.identity-line{max-width:100%;white-space:normal!important;overflow-wrap:anywhere;word-break:normal}
.hero h1{width:auto!important}
.hero h1 span{display:inline;min-width:0}
.hero p{width:auto!important}
.section-head>div,.section-head h2,.legend span,.rule span,.rule strong,.wallet-card p,.note{min-width:0;overflow-wrap:anywhere}
img,svg,video,canvas{max-width:100%}

@media(max-width:720px){
  main{width:100%;max-width:100%;padding-left:12px!important;padding-right:12px!important}
  .hero{width:100%;max-width:100%;padding:22px 18px!important;grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  .hero .eyebrow{font-size:9px!important;line-height:1.45!important;letter-spacing:.11em!important}
  .hero h1{font-size:clamp(32px,9.7vw,40px)!important;line-height:1.03!important;letter-spacing:-.04em!important;margin:12px 0 16px!important}
  .hero h1 span{display:inline!important}
  .hero p{font-size:13px!important;line-height:1.58!important}
  .identity-line{display:flex!important;flex-wrap:wrap!important;gap:6px 8px!important;align-items:center}
  .mode-box{width:100%;min-width:0}
  .seg{min-width:0}.seg button{min-width:0;padding:10px 6px!important;font-size:12px!important}
  .stats-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .workspace{grid-template-columns:minmax(0,1fr)!important}
  .side{width:100%;min-width:0}
  .top-breakouts,.trade-candidates,.candidate-row,.top-row{max-width:100%;min-width:0}
  .section-head{width:100%;min-width:0}
  .section-head h2{max-width:100%;font-size:clamp(18px,5.8vw,28px)!important;line-height:1.16}
  .filters{max-width:100%;min-width:0}.filters input{min-width:0!important}
  .support-panel{width:100%;min-width:0}
  footer{max-width:100%;overflow-wrap:anywhere}
}

@media(max-width:390px){
  header{padding-left:12px!important;padding-right:12px!important}
  .brand{gap:8px!important}.brandmark{width:36px!important}.brand strong{font-size:14px!important}
  .head-actions{min-width:0}.wallet-btn{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero{padding:20px 15px!important}
  .hero h1{font-size:clamp(30px,9.4vw,36px)!important}
  .stats-grid{grid-template-columns:minmax(0,1fr)!important}
}