/* ONTALA_MOBILE_APP_UI_20260622 */

@media (max-width:820px){

  html,
  body{
    min-height:100%;
    background:var(--bb-bg1,#061A3B) !important;
  }

  body.bb-body{
    min-width:0;
    padding:0;
    background:
      radial-gradient(
        420px 260px at 100% -8%,
        color-mix(in srgb,var(--bb-bg2,#0B78FF) 30%,transparent),
        transparent 72%
      ),
      var(--bb-bg1,#061A3B) !important;
  }

  .bb-wrap{
    width:100%;
    max-width:none;
    margin:0;
    padding:10px 10px calc(28px + env(safe-area-inset-bottom));
  }

  .bb-header{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand last"
      "status status";
    gap:10px;
    min-height:0 !important;
    height:auto !important;
    padding:13px;
    border-radius:20px;
  }

  .bb-brand{
    grid-area:brand;
    min-width:0;
    gap:10px;
  }

  .bb-brand img,
  .bb-logo{
    width:43px !important;
    height:43px !important;
    min-width:43px !important;
    border-radius:13px !important;
  }

  .bb-brand h1{
    max-width:100%;
    margin:0 !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:16px !important;
    line-height:1.35 !important;
  }

  .bb-brand p{
    display:none !important;
  }

  .bb-last{
    grid-area:last;
    min-width:100px;
    padding:0 !important;
    text-align:left;
  }

  .bb-last span{
    display:block;
    margin-bottom:3px;
    font-size:10px !important;
  }

  .bb-last strong{
    display:block;
    font-size:13px !important;
    line-height:1.45 !important;
  }

  .bb-last small{
    display:none !important;
  }

  .bb-status{
    grid-area:status;
    display:flex !important;
    align-items:center;
    gap:7px;
    overflow-x:auto;
    padding-bottom:1px;
    white-space:nowrap;
    scrollbar-width:none;
  }

  .bb-status::-webkit-scrollbar{
    display:none;
  }

  .bb-status span{
    flex:0 0 auto;
    min-width:max-content;
    padding:6px 9px !important;
    border-radius:10px !important;
    font-size:11px !important;
  }

  .bb-slogan{
    min-height:0 !important;
    margin:9px 0 !important;
    padding:8px 12px !important;
    border-radius:14px !important;
    font-size:12px !important;
    line-height:1.65 !important;
  }

  .bb-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    row-gap:9px !important;
    column-gap:9px !important;
    align-items:start !important;
  }

  .bb-grid > .bb-card,
  .bb-grid > .bb-card:nth-child(-n+4),
  .bb-grid > .bb-card:nth-child(n+5){
    min-width:0 !important;
    min-height:103px !important;
    height:auto !important;
    margin:0 !important;
    padding:11px 10px !important;
    transform:none !important;
    border-radius:17px !important;
  }

  .bb-card-title{
    min-height:34px;
    margin:0 0 5px !important;
    font-size:12px !important;
    line-height:1.4 !important;
  }

  .bb-card > strong,
  .bb-card > .bb-price-line > strong{
    display:inline-block;
    margin:0 !important;
    font-size:clamp(21px,6.2vw,29px) !important;
    line-height:1.15 !important;
    letter-spacing:-.3px;
  }

  .bb-card > small,
  .bb-card > .bb-price-line > small{
    margin:0 4px 0 0 !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }

  .bb-card .bb-price-line{
    display:flex !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:4px !important;
    min-height:0 !important;
  }

  .bb-card em{
    display:block;
    margin-top:4px !important;
    font-size:10px !important;
  }

  .bb-multi{
    min-height:128px !important;
  }

  .bb-multi .bb-card-title{
    min-height:auto;
    margin-bottom:5px !important;
  }

  .bb-rate-row{
    min-height:25px !important;
    padding:3px 0 !important;
    gap:7px;
  }

  .bb-rate-row span{
    font-size:11px !important;
  }

  .bb-rate-row strong{
    font-size:15px !important;
    line-height:1.25 !important;
  }

  .ontala-profile-chart{
    margin-top:15px !important;
  }

  .ontala-weekly-chart{
    padding:14px !important;
    border-radius:19px !important;
  }

  .ontala-chart-head{
    gap:8px;
    margin-bottom:10px !important;
  }

  .ontala-chart-head h2{
    font-size:15px !important;
  }

  .ontala-chart-head p{
    margin-top:2px !important;
    font-size:10px !important;
  }

  .ontala-chart-stats{
    width:100%;
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:7px !important;
  }

  .ontala-chart-stat{
    min-width:0;
    padding:7px 8px !important;
    font-size:10px !important;
  }

  .ontala-chart-stat b{
    margin-top:1px !important;
    font-size:12px !important;
  }

  .ontala-chart-canvas-wrap,
  .ontala-chart-canvas{
    height:205px !important;
    border-radius:13px !important;
  }

  .ontala-chart-footer{
    padding-top:7px !important;
    font-size:10px !important;
  }

  .ontala-profile-cta{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:14px !important;
    border-radius:18px !important;
  }

  .ontala-profile-cta strong{
    font-size:15px !important;
  }

  .ontala-profile-cta span{
    font-size:11px !important;
    line-height:1.75 !important;
  }

  .ontala-profile-open{
    width:100%;
    min-height:43px !important;
    border-radius:12px !important;
    font-size:13px !important;
  }

  .ontala-profile-modal{
    padding:8px !important;
  }

  .ontala-profile-modal-box{
    max-height:calc(100vh - 16px);
    padding:18px 14px !important;
    border-radius:19px !important;
  }

  .ontala-profile-modal-head{
    gap:10px;
    padding-left:34px !important;
  }

  .ontala-profile-avatar{
    width:55px !important;
    height:55px !important;
    min-width:55px !important;
    border-radius:15px !important;
    font-size:22px !important;
  }

  .ontala-profile-modal-head h2{
    font-size:16px !important;
  }

  .ontala-profile-modal-head p,
  .ontala-profile-modal-card p{
    font-size:11px !important;
    line-height:1.9 !important;
  }

  .ontala-profile-modal-card{
    padding:12px !important;
    border-radius:13px !important;
  }

  .ontala-profile-modal-card h3{
    font-size:13px !important;
  }

  .bb-footer{
    margin-top:15px !important;
    padding:13px !important;
    border-radius:18px !important;
    font-size:11px !important;
    line-height:1.85 !important;
  }

  .bb-footer-bottom{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:6px !important;
  }

  .bb-footer-bottom a,
  .bb-footer-bottom span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px !important;
  }

  .tv-fullscreen-btn{
    display:none !important;
  }
}

@media (max-width:390px){

  .bb-wrap{
    padding-right:8px;
    padding-left:8px;
  }

  .bb-grid{
    gap:7px !important;
    row-gap:7px !important;
    column-gap:7px !important;
  }

  .bb-grid > .bb-card{
    min-height:98px !important;
    padding:10px 8px !important;
    border-radius:15px !important;
  }

  .bb-card-title{
    font-size:11px !important;
  }

  .bb-card > strong,
  .bb-card > .bb-price-line > strong{
    font-size:clamp(19px,6vw,25px) !important;
  }

  .bb-rate-row strong{
    font-size:14px !important;
  }
}