/* ===== v223: remove black top gap between beta banner and app shell ===== */
:root{--dx-beta-banner-h-v223:34px;}

body[data-page="home"]{
  margin:0 !important;
  padding-top:0 !important;
}

body[data-page="home"] > .beta-banner{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:var(--dx-beta-banner-h-v223) !important;
  min-height:var(--dx-beta-banner-h-v223) !important;
  max-height:var(--dx-beta-banner-h-v223) !important;
  margin:0 !important;
  padding:0 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:0 !important;
  line-height:1.15 !important;
  box-sizing:border-box !important;
  z-index:1200 !important;
}

body[data-page="home"] > .app-bg{
  inset:var(--dx-beta-banner-h-v223) 0 0 0 !important;
}

/* Desktop software shell must start exactly below the beta bar, with no empty black spacer. */
@media (min-width:981px){
  body.dx-software-shell-active[data-page="home"]{
    overflow:hidden !important;
  }
  body.dx-software-shell-active[data-page="home"] > .diagnostix-app-shell,
  body.dx-software-shell-active[data-page="home"] .diagnostix-app-shell{
    position:fixed !important;
    top:var(--dx-beta-banner-h-v223) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:calc(100dvh - var(--dx-beta-banner-h-v223)) !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    display:grid !important;
    grid-template-columns:var(--dx-soft-sidebar, 268px) minmax(0, 1fr) !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }
  body.dx-software-shell-active[data-page="home"] .app-sidebar-v2,
  body.dx-software-shell-active[data-page="home"] .discord-sidebar,
  body.dx-software-shell-active[data-page="home"] .platform-sidebar-v96{
    position:relative !important;
    top:auto !important;
    height:calc(100dvh - var(--dx-beta-banner-h-v223)) !important;
    min-height:0 !important;
    max-height:calc(100dvh - var(--dx-beta-banner-h-v223)) !important;
    margin:0 !important;
    transform:none !important;
  }
  body.dx-software-shell-active[data-page="home"] .diagnostix-main-v2{
    height:calc(100dvh - var(--dx-beta-banner-h-v223)) !important;
    min-height:0 !important;
    max-height:calc(100dvh - var(--dx-beta-banner-h-v223)) !important;
    margin:0 !important;
    padding-top:0 !important;
    overflow:auto !important;
  }
  body.dx-software-shell-active[data-page="home"] .app-topbar-v2{
    margin-top:0 !important;
    top:0 !important;
  }
}

/* Mobile/tablet: keep normal scroll, but remove every artificial top spacer. */
@media (max-width:980px){
  :root{--dx-beta-banner-h-v223:32px;}
  body[data-page="home"] > .beta-banner{
    height:var(--dx-beta-banner-h-v223) !important;
    min-height:var(--dx-beta-banner-h-v223) !important;
    max-height:var(--dx-beta-banner-h-v223) !important;
    font-size:10px !important;
    letter-spacing:.08em !important;
  }
  body[data-page="home"] > .app-bg{
    inset:var(--dx-beta-banner-h-v223) 0 0 0 !important;
  }
  body[data-page="home"] > .diagnostix-app-shell,
  body[data-page="home"] .diagnostix-app-shell{
    margin-top:var(--dx-beta-banner-h-v223) !important;
    padding-top:0 !important;
    transform:none !important;
  }
  body[data-page="home"] .diagnostix-main-v2{
    padding-top:0 !important;
  }
  body[data-page="home"] .app-topbar-v2{
    margin-top:0 !important;
    top:0 !important;
  }
}

/* ===== v237: responsive top spacing, tablet width and horizontal-scroll fix (CSS only) ===== */
:root{--dx-beta-banner-h-v237:34px;}

html,
body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  overscroll-behavior-x:none !important;
}

body[data-page="home"]{
  margin:0 !important;
  padding-top:0 !important;
  width:100% !important;
  max-width:100vw !important;
  overflow-x:hidden !important;
  touch-action:pan-y;
}

body[data-page="home"] *,
body[data-page="home"] *::before,
body[data-page="home"] *::after{
  box-sizing:border-box !important;
  min-width:0;
}

body[data-page="home"] img,
body[data-page="home"] svg,
body[data-page="home"] canvas,
body[data-page="home"] video,
body[data-page="home"] iframe,
body[data-page="home"] table{
  max-width:100% !important;
}

body[data-page="home"] > .beta-banner{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:var(--dx-beta-banner-h-v237) !important;
  min-height:var(--dx-beta-banner-h-v237) !important;
  max-height:var(--dx-beta-banner-h-v237) !important;
  margin:0 !important;
  padding:0 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1.15 !important;
  border-radius:0 !important;
  z-index:1200 !important;
}

body[data-page="home"] > .app-bg{
  inset:var(--dx-beta-banner-h-v237) 0 0 0 !important;
  width:100% !important;
  max-width:100vw !important;
  overflow:hidden !important;
}

body[data-page="home"] .diagnostix-app-shell,
body[data-page="home"] .diagnostix-main-v2,
body[data-page="home"] .main-layout.app-pages-v2,
body[data-page="home"] .app-pages-v2,
body[data-page="home"] .app-page,
body[data-page="home"] .platform-page-v96,
body[data-page="home"] .control-dock.app-page-connect,
body[data-page="home"] .platform-hero-v96,
body[data-page="home"] .platform-panel-v96,
body[data-page="home"] .widget-card,
body[data-page="home"] .sensor-card-v2{
  max-width:100% !important;
  overflow-x:hidden !important;
}

body[data-page="home"] .platform-status-grid-v96,
body[data-page="home"] .platform-dashboard-grid-v96,
body[data-page="home"] .platform-card-grid-v96,
body[data-page="home"] .widget-grid,
body[data-page="home"] .sensor-grid-v2{
  min-width:0 !important;
  max-width:100% !important;
}

@media (min-width:1181px) and (pointer:fine){
  body[data-page="home"] .diagnostix-main-v2 > .app-topbar-v2{
    width:calc(100% + 36px) !important;
    max-width:calc(100% + 36px) !important;
    margin:0 -18px 18px !important;
    padding-right:48px !important;
    overflow-x:visible !important;
  }
  body[data-page="home"] .profile-area-v3{
    margin-right:0 !important;
    padding-right:0 !important;
  }
  body[data-page="home"] #dxNotificationCenter{
    margin-right:4px !important;
  }
}

@media (min-width:1181px){
  body.dx-software-shell-active[data-page="home"]{
    overflow:hidden !important;
  }
  body.dx-software-shell-active[data-page="home"] > .diagnostix-app-shell,
  body.dx-software-shell-active[data-page="home"] .diagnostix-app-shell{
    position:fixed !important;
    top:var(--dx-beta-banner-h-v237) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:100vw !important;
    height:calc(100dvh - var(--dx-beta-banner-h-v237)) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:var(--dx-soft-sidebar, 268px) minmax(0,1fr) !important;
    overflow:hidden !important;
    transform:none !important;
  }
  body.dx-software-shell-active[data-page="home"] .diagnostix-main-v2{
    min-width:0 !important;
    height:calc(100dvh - var(--dx-beta-banner-h-v237)) !important;
    max-height:calc(100dvh - var(--dx-beta-banner-h-v237)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  body.dx-software-shell-active[data-page="home"] .app-sidebar-v2,
  body.dx-software-shell-active[data-page="home"] .discord-sidebar,
  body.dx-software-shell-active[data-page="home"] .platform-sidebar-v96{
    height:calc(100dvh - var(--dx-beta-banner-h-v237)) !important;
    min-height:0 !important;
    max-height:calc(100dvh - var(--dx-beta-banner-h-v237)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  body.dx-software-shell-active[data-page="home"] .app-topbar-v2{
    top:0 !important;
    margin-top:0 !important;
  }
}

@media (min-width:768px) and (max-width:1180px), (min-width:1181px) and (max-width:1366px) and (pointer:coarse){
  body[data-page="home"],
  body.dx-software-shell-active[data-page="home"]{
    height:auto !important;
    min-height:100svh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body[data-page="home"] > .diagnostix-app-shell,
  body[data-page="home"] .diagnostix-app-shell,
  body.dx-software-shell-active[data-page="home"] > .diagnostix-app-shell,
  body.dx-software-shell-active[data-page="home"] .diagnostix-app-shell{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    display:block !important;
    grid-template-columns:none !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    min-height:calc(100svh - var(--dx-beta-banner-h-v237)) !important;
    margin:var(--dx-beta-banner-h-v237) 0 0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    transform:none !important;
  }

  body[data-page="home"] .app-sidebar-v2,
  body[data-page="home"] .discord-sidebar,
  body[data-page="home"] .app-rail-v2,
  body[data-page="home"] .discord-rail{
    display:none !important;
  }

  body[data-page="home"] .diagnostix-main-v2,
  body.dx-software-shell-active[data-page="home"] .diagnostix-main-v2{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    min-height:calc(100svh - var(--dx-beta-banner-h-v237)) !important;
    margin:0 !important;
    padding:0 24px 32px !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  body[data-page="home"] .diagnostix-main-v2 > .app-topbar-v2,
  body.dx-software-shell-active[data-page="home"] .diagnostix-main-v2 > .app-topbar-v2{
    position:sticky !important;
    top:var(--dx-beta-banner-h-v237) !important;
    z-index:700 !important;
    width:calc(100% + 48px) !important;
    max-width:calc(100% + 48px) !important;
    margin:0 -24px 18px !important;
    min-height:74px !important;
    padding:14px 24px !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:14px !important;
    overflow:visible !important;
  }

  body[data-page="home"] .tablet-menu-button-v49{
    display:grid !important;
    grid-column:1 !important;
    grid-row:1 !important;
  }

  body[data-page="home"] .app-topbar-left{
    grid-column:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  body[data-page="home"] .app-topbar-left strong,
  body[data-page="home"] .app-topbar-left span{
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body[data-page="home"] .app-topbar-mark,
  body[data-page="home"] .app-topbar-status{
    display:none !important;
  }

  body[data-page="home"] .profile-area-v3{
    grid-column:3 !important;
    justify-self:end !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  body[data-page="home"] .main-layout.app-pages-v2,
  body[data-page="home"] .app-pages-v2{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  body[data-page="home"] .platform-status-grid-v96{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body[data-page="home"] .platform-dashboard-grid-v96{
    grid-template-columns:1fr !important;
  }
  body[data-page="home"] .platform-card-grid-v96,
  body[data-page="home"] .platform-report-categories-v96,
  body[data-page="home"] .platform-steps-grid-v96{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  body[data-page="home"] .mobile-bottom-nav{
    display:none !important;
  }
}

@media (min-width:768px) and (max-width:900px){
  body[data-page="home"] .diagnostix-main-v2,
  body.dx-software-shell-active[data-page="home"] .diagnostix-main-v2{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  body[data-page="home"] .diagnostix-main-v2 > .app-topbar-v2,
  body.dx-software-shell-active[data-page="home"] .diagnostix-main-v2 > .app-topbar-v2{
    width:calc(100% + 36px) !important;
    max-width:calc(100% + 36px) !important;
    margin-left:-18px !important;
    margin-right:-18px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

@media (max-width:767px){
  :root{--dx-beta-banner-h-v237:32px;}
  body[data-page="home"] > .beta-banner{
    height:var(--dx-beta-banner-h-v237) !important;
    min-height:var(--dx-beta-banner-h-v237) !important;
    max-height:var(--dx-beta-banner-h-v237) !important;
    font-size:10px !important;
    letter-spacing:.08em !important;
  }
  body[data-page="home"] > .diagnostix-app-shell,
  body[data-page="home"] .diagnostix-app-shell{
    margin-top:var(--dx-beta-banner-h-v237) !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  body[data-page="home"] .diagnostix-main-v2{
    width:min(430px,100%) !important;
    max-width:100% !important;
    margin:0 auto !important;
    overflow-x:hidden !important;
  }
  body[data-page="home"] .diagnostix-main-v2 > .app-topbar-v2{
    top:var(--dx-beta-banner-h-v237) !important;
    overflow:visible !important;
  }
  body[data-page="home"] .main-layout.app-pages-v2,
  body[data-page="home"] .app-pages-v2{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  body[data-page="home"] .mobile-bottom-nav{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }
}

/* ===== v242: mobile profile/header to dashboard card spacing only =====
   Keeps the beta bar/header untouched and doubles the clean gap below
   the mobile topbar so the dashboard card no longer sits under the
   profile/notification circle. */
@media (max-width:767px){
  body[data-page="home"] .diagnostix-main-v2 > .app-topbar-v2{
    margin-bottom:60px !important;
  }

  body[data-page="home"] .main-layout.app-pages-v2.platform-pages-v96{
    padding-top:0 !important;
  }

  body[data-page="home"] .app-page-dashboard.is-active > .platform-hero-v96{
    margin-top:0 !important;
  }
}

/* ===== v243: iPad/tablet scroll + same top spacing behavior as mobile =====
   Scope: responsive layout only. Does not change login, profile circle,
   hamburger/menu, Bluetooth, OBD, widgets, API or server logic. */
@media (min-width:768px) and (max-width:1180px), (pointer:coarse) and (min-width:768px) and (max-width:1400px){
  html,
  body,
  body[data-page="home"],
  body.dx-software-shell-active[data-page="home"]{
    height:auto !important;
    min-height:100svh !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:auto !important;
  }

  body[data-page="home"] > .beta-banner{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:var(--dx-beta-banner-h-v237) !important;
    min-height:var(--dx-beta-banner-h-v237) !important;
    max-height:var(--dx-beta-banner-h-v237) !important;
    margin:0 !important;
    z-index:1200 !important;
  }

  body[data-page="home"] > .app-bg{
    inset:var(--dx-beta-banner-h-v237) 0 0 0 !important;
  }

  body[data-page="home"] > .diagnostix-app-shell,
  body[data-page="home"] .diagnostix-app-shell,
  body.dx-software-shell-active[data-page="home"] > .diagnostix-app-shell,
  body.dx-software-shell-active[data-page="home"] .diagnostix-app-shell{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    display:block !important;
    width:100% !important;
    max-width:100vw !important;
    min-height:calc(100svh - var(--dx-beta-banner-h-v237)) !important;
    height:auto !important;
    max-height:none !important;
    margin:var(--dx-beta-banner-h-v237) 0 0 !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
  }

  body[data-page="home"] .diagnostix-main-v2,
  body.dx-software-shell-active[data-page="home"] .diagnostix-main-v2{
    width:100% !important;
    max-width:100vw !important;
    min-height:calc(100svh - var(--dx-beta-banner-h-v237)) !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    overflow:visible !important;
    overflow-x:hidden !important;
    padding-left:24px !important;
    padding-right:24px !important;
    padding-bottom:calc(34px + env(safe-area-inset-bottom)) !important;
  }

  body[data-page="home"] .diagnostix-main-v2 > .app-topbar-v2,
  body.dx-software-shell-active[data-page="home"] .diagnostix-main-v2 > .app-topbar-v2{
    position:sticky !important;
    top:var(--dx-beta-banner-h-v237) !important;
    z-index:800 !important;
    margin-bottom:60px !important;
  }

  body[data-page="home"] .main-layout.app-pages-v2,
  body[data-page="home"] .app-pages-v2,
  body.dx-software-shell-active[data-page="home"] .main-layout.app-pages-v2,
  body.dx-software-shell-active[data-page="home"] .app-pages-v2{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-x:hidden !important;
    padding-top:0 !important;
  }

  body[data-page="home"] .app-page,
  body[data-page="home"] .app-page.is-active,
  body[data-page="home"] .platform-page-v96,
  body[data-page="home"] .platform-page-v96.is-active{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    overflow-x:hidden !important;
  }

  body[data-page="home"] .app-page-dashboard.is-active > .platform-hero-v96{
    margin-top:0 !important;
  }

  body[data-page="home"] .platform-dashboard-grid-v96,
  body[data-page="home"] .platform-status-grid-v96,
  body[data-page="home"] .platform-card-grid-v96,
  body[data-page="home"] .widget-grid,
  body[data-page="home"] #widgetGrid{
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Same as mobile: this hint must not reserve top space on iPad/tablet. */
  body[data-page="home"] .dx-android-subscription-hint-v221{
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }
}

@media (min-width:768px) and (max-width:900px){
  body[data-page="home"] .diagnostix-main-v2,
  body.dx-software-shell-active[data-page="home"] .diagnostix-main-v2{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}