/* BREAKOUT_IPHONE_MOBILE_LAYOUT_V1
   Mobile-only layout repair. Desktop layout and scanner logic are unchanged. */

@media (max-width:760px){
  html{
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    max-width:100%;
    overflow-x:hidden;
    zoom:1!important;
  }

  .app-shell{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .site-header{
    width:100%;
    max-width:100%;
    min-height:0!important;
    padding:10px 12px 8px!important;
    gap:8px!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    align-items:center!important;
  }

  .brand{
    grid-column:1!important;
    grid-row:1!important;
    width:max-content;
    min-width:0!important;
  }

  .brand img{
    width:40px!important;
    height:40px!important;
  }

  .brand strong{
    font-size:20px!important;
  }

  .header-actions{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 2px!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .header-actions::-webkit-scrollbar,
  .main-nav::-webkit-scrollbar{
    display:none;
  }

  .header-actions>*{
    flex:0 0 auto!important;
  }

  .market-pill{
    display:none!important;
  }

  .scale-control{
    display:none!important;
  }

  .notify-btn{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    padding:0!important;
    font-size:0!important;
    overflow:hidden!important;
  }

  .notify-btn:before{
    content:'🔔'!important;
    display:block;
    font-size:17px!important;
    line-height:38px!important;
  }

  .notify-btn[data-ios-install="1"]:before{
    content:'📲'!important;
  }

  .icon-btn{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
  }

  .theme-toggle{
    width:62px!important;
    min-width:62px!important;
    height:40px!important;
  }

  .bo-strategy-btn{
    min-height:40px!important;
    height:40px!important;
    padding:0 10px!important;
    gap:6px!important;
  }

  .bo-strategy-btn span:nth-child(2){
    display:none!important;
  }

  .bo-strategy-btn b{
    font-size:11px!important;
    white-space:nowrap!important;
  }

  .install-btn{
    min-height:40px!important;
    height:40px!important;
    padding:0 9px!important;
    font-size:11px!important;
  }

  .main-nav{
    grid-column:1!important;
    grid-row:3!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:2px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    padding:0 0 2px!important;
  }

  .main-nav .nav{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    scroll-snap-align:start;
    font-size:13px!important;
    padding:9px 10px!important;
  }

  main{
    width:100%;
    max-width:100%;
    overflow-x:clip;
    padding-left:14px!important;
    padding-right:14px!important;
  }

  .hero{
    width:100%;
    min-width:0;
    padding:28px 4px 26px!important;
    overflow:hidden!important;
  }

  .hero-copy{
    min-width:0;
    max-width:100%;
  }

  .hero-copy h1{
    max-width:100%;
    font-size:clamp(38px,11vw,48px)!important;
    line-height:1.03!important;
  }

  .hero-copy>p:not(.eyebrow){
    max-width:100%;
    font-size:16px!important;
  }

  .hero-status{
    max-width:100%;
    min-width:0;
  }

  .hero-status em{
    width:100%;
    margin-left:0!important;
  }

  .bo-strategy-banner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:4px!important;
    align-items:center!important;
    margin:0 0 12px!important;
    padding:12px 12px!important;
    font-size:12px!important;
  }

  .bo-strategy-banner strong{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0;
  }

  .bo-strategy-banner span{
    grid-column:1!important;
    grid-row:2!important;
    min-width:0;
    overflow-wrap:anywhere;
  }

  .bo-strategy-banner button{
    grid-column:2!important;
    grid-row:1 / 3!important;
    align-self:stretch!important;
    white-space:nowrap;
  }

  .panel,
  .content-grid,
  .bottom-grid,
  .stats-grid,
  .automation-strip{
    max-width:100%!important;
    min-width:0!important;
  }
}

@media (max-width:390px){
  .site-header{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .brand strong{
    font-size:19px!important;
  }

  .bo-strategy-btn{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .theme-toggle{
    width:58px!important;
    min-width:58px!important;
  }

  .main-nav .nav{
    padding-left:9px!important;
    padding-right:9px!important;
  }
}