/* =========================================================
   v1.36 — Mobile native grouped lists + lighter chrome
   ========================================================= */
@media(max-width:780px){
  :root{--v131-tabbar:54px!important}

  /* App bar owns the compact system summary; no duplicate KPI strip. */
  #home>.status-line{display:none!important}
  .mobile-app-title-v131{gap:6px!important}
  .mobile-app-title-v131 small{font-size:10.25px!important;opacity:.94}
  .search-trigger,#avatarBtn{width:36px!important;height:36px!important;min-width:36px!important}

  /* Native grouped-section rhythm instead of dashboard panels. */
  #home>.g2{gap:14px!important}
  #home>.g2>.panel{
    border:0!important;background:transparent!important;border-radius:0!important;
    overflow:visible!important;
  }
  #home>.g2>.panel>.panel-h{
    min-height:30px!important;height:auto!important;padding:0 4px 7px!important;
    border:0!important;background:transparent!important;
  }
  #home>.g2>.panel>.panel-h h3{font-size:13.5px!important;font-weight:720!important}
  #home>.g2>.panel>.panel-h .meta{font-size:10px!important}
  #home>.g2>.panel>.panel-b{
    padding:0 10px!important;border:1px solid var(--stroke-subtle)!important;
    border-radius:15px!important;background:var(--surface-primary)!important;overflow:hidden!important;
  }

  /* Needs-attention becomes a compact grouped list. */
  #home>.g2>.panel:first-child .att-row{
    min-height:52px!important;padding:8px 4px!important;gap:8px!important;
    border-bottom:1px solid var(--stroke-subtle)!important;
  }
  #home>.g2>.panel:first-child .att-row:last-child{border-bottom:0!important}
  #home>.g2>.panel:first-child .att-main b{
    font-size:12.6px!important;line-height:1.18!important;font-weight:670!important;
  }
  #home>.g2>.panel:first-child .att-main span{
    font-size:10.6px!important;line-height:1.25!important;margin-top:2px!important;
    display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;
  }

  /* Channels: remove nested cards, keep one grouped container with rows. */
  #home>.g2>.panel:nth-child(2) .panel-b{padding:0 10px!important}
  #home>.g2>.panel:nth-child(2) .account-card{
    min-height:55px!important;margin:0!important;padding:9px 4px!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
    border-bottom:1px solid var(--stroke-subtle)!important;
  }
  #home>.g2>.panel:nth-child(2) .account-card:last-child{border-bottom:0!important}
  #home>.g2>.panel:nth-child(2) .account-card b{font-size:12.7px!important}
  #home>.g2>.panel:nth-child(2) .account-card p{font-size:10.5px!important;line-height:1.25!important}

  /* Metrics become lighter swipe cards; they no longer compete with primary work. */
  #home>.g4{margin-top:14px!important;gap:6px!important}
  #home>.g4 .metric{
    flex-basis:min(61vw,220px)!important;min-height:70px!important;padding:9px 10px!important;
    border-radius:13px!important;background:var(--surface-inset)!important;
  }
  #home>.g4 .metric .v{font-size:18px!important}

  /* Native-like tab bar: translucent, edge-to-edge, no per-tab rectangle. */
  .mobile-nav{
    height:calc(56px + env(safe-area-inset-bottom,0px))!important;min-height:56px!important;
    padding:2px 4px calc(4px + env(safe-area-inset-bottom,0px))!important;
    background:color-mix(in srgb,var(--surface-primary) 92%,transparent)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
    box-shadow:0 -1px 0 var(--stroke-subtle)!important;
  }
  .mobile-nav button{
    min-height:48px!important;border-radius:0!important;background:transparent!important;gap:1px!important;
  }
  .mobile-nav button.active{background:transparent!important;color:var(--accent)!important}
  .mobile-nav button::before{display:none!important}
  .mobile-nav button b{width:21px!important;height:21px!important}
  .mobile-nav button span{font-size:10px!important;font-weight:570!important}

  /* More breathing room so the last content can clear the tab bar. */
  .page{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important}
}

@media(max-width:360px){
  #home>.g2>.panel:first-child .att-main b{font-size:12.2px!important}
  #home>.g2>.panel:first-child .att-main span{font-size:10.2px!important}
  #home>.g4 .metric{flex-basis:min(68vw,210px)!important}
}