/* HealthyBound Quest unified adult shell — desktop sidebar / mobile bottom navigation */
:root{--vp-shell:#080b0f;--vp-side:#0c1015;--vp-panel:#121820;--vp-panel2:#171f28;--vp-line:#28323d;--vp-text:#eef1f3;--vp-muted:#98a3ae;--vp-accent:#7f3142;--vp-accent-hi:#a84a5f;--vp-bronze:#a7865b}
@media(min-width:980px){
 body:not(.auth-open) #appView:not(.hidden)>.topbar{display:none!important}
 body:not(.auth-open) #appView:not(.hidden)>.bottom-nav{display:none!important}
 body:not(.auth-open) #appView:not(.hidden)>main{max-width:none!important;margin:0!important;padding:30px 32px 60px 264px!important;min-height:100vh;background:var(--vp-shell)}
 #vpGlobalSide{display:flex!important;position:fixed;z-index:80;left:0;top:0;bottom:0;width:232px;box-sizing:border-box;padding:28px 16px;background:linear-gradient(180deg,#0d1117,#080b0f);border-right:1px solid var(--vp-line);flex-direction:column}
 #vpGlobalSide .vpg-brand{padding:0 12px 28px;font-size:27px;font-weight:850;letter-spacing:-.04em;color:#fff}#vpGlobalSide .vpg-brand em{font-style:normal;color:#a65c75}#vpGlobalSide .vpg-brand small{display:block;margin-top:5px;font-size:9px;letter-spacing:.17em;color:#84909c;font-weight:650}
 #vpGlobalSide nav{display:grid;gap:5px}#vpGlobalSide button{border:0;background:transparent;color:#b7c0c9;padding:12px 14px;border-radius:8px;text-align:left;font-size:15px;display:flex;gap:13px;align-items:center;cursor:pointer}#vpGlobalSide button i{font-style:normal;width:20px;color:#7f8b97;text-align:center}#vpGlobalSide button:hover{background:#151b22;color:#fff}#vpGlobalSide button.active{background:#20252c;color:#fff;box-shadow:inset 3px 0 0 var(--vp-accent-hi)}#vpGlobalSide button.active i{color:#c07a8d}
 #vpGlobalSide .vpg-account{margin-top:auto;border-top:1px solid var(--vp-line);padding:18px 10px 0;color:#d7dce1}.vpg-account small{display:block;color:#7f8a95;margin-top:3px}.vpg-account button{margin-top:10px;padding:8px 0;color:#aab3bc}
 body.vpx-dashboard-mode main{padding:30px 32px 60px 264px!important}body.vpx-dashboard-mode #vpExactDashboard{max-width:1440px;padding:0!important}body.vpx-dashboard-mode .vpx-side{display:none!important}
}
@media(max-width:979px){#vpGlobalSide{display:none!important}}
/* Mature treatment across companion surfaces */
#wellness .eyebrow,.vpc-myday .eyebrow{color:#a96074!important;letter-spacing:.13em}#wellness .vp-wellness-tabs{border-radius:8px!important;background:#10151b!important}#wellness .vp-wellness-tabs .tab{border-radius:6px!important;font-size:.95rem!important}#wellness .vp-wellness-tabs .tab.active{background:#252c34!important;box-shadow:inset 0 -2px 0 #9a6f50!important}
#wellness .vpq-hero,#wellness .vpq-grid>.card{border-radius:12px!important;background:#11171e!important;border-color:#2b3540!important;box-shadow:none!important}#wellness .vpq-character-info{border-radius:8px!important;background:rgba(8,11,15,.9)!important}#wellness .vpq-ring{background:conic-gradient(#8f5968 calc(var(--p)*1%),#28313b 0)!important}#wellness .vpq-ring:before{background:#11171e!important}#wellness .vpq-message,#wellness .vpq-quest,#wellness .vpq-actions button{border-radius:8px!important;background:#171e26!important;border-color:#303b47!important}#wellness .vpq-xp i,#wellness .vpq-vital i{background:#9a6f50!important}
.vpc-myday{border-radius:12px!important;background:#11171e!important;border-color:#2c3540!important}.vpc-myday-char{font-size:0!important}.vpc-myday-char .vpc-shared-image{width:150px;height:150px;border-radius:8px;background-position:center top;background-size:cover;background-repeat:no-repeat;border:1px solid #333e49}.vpc-myday-char strong{font-size:20px!important;margin-top:9px}.vpc-need{border-radius:8px!important;background:#191f26!important;border-color:#303943!important}.vpc-myday-actions .primary{background:#7f3142!important}.vpc-myday-actions .ghost{background:#1b2128!important;color:#e8ebee!important;border-color:#343d47!important}
/* 2026-09-15 desktop dashboard correction: prevent overflow and mature the exact dashboard */
html,body{max-width:100%;overflow-x:hidden}
#appView,main,.screen{min-width:0;max-width:100%}
@media(min-width:980px){
 body.vpx-dashboard-mode main{box-sizing:border-box;width:100%;padding:28px 28px 48px 260px!important;overflow-x:hidden}
 body.vpx-dashboard-mode #vpGlobalSide{display:none!important}
 body.vpx-dashboard-mode #vpExactDashboard{width:100%;max-width:1320px;min-width:0;margin:0 auto;padding:0!important;box-sizing:border-box}
 .vpx-side{width:232px!important;box-sizing:border-box;background:#0b0e12!important;border-right:1px solid #262b31!important}
 .vpx-nav button{border-radius:7px!important}.vpx-nav button:hover{background:#171b20!important}.vpx-nav button.active{background:#20242a!important;box-shadow:inset 3px 0 0 #9a4f63!important}
 .vpx-side-why{display:none!important}
 .vpx-head{min-width:0;margin-bottom:20px}.vpx-greet h1{font-size:34px!important}.vpx-sun{display:none!important}.vpx-date{background:#11161c!important;border-color:#303740!important;border-radius:8px!important}
 .vpx-hero{min-width:0;grid-template-columns:minmax(300px,36%) minmax(0,1fr)!important;border-radius:12px!important;background:#11161c!important;border-color:#303740!important;overflow:hidden}
 .vpx-character{min-width:0;background-size:contain!important;background-position:center!important;background-color:#0d1116!important;background-repeat:no-repeat!important}
 .vpx-character-card{left:18px!important;right:18px!important;border-radius:8px!important;border-color:#343b44!important;background:rgba(8,10,13,.92)!important}
 .vpx-progress{min-width:0}.vpx-progress-head h2{font-size:22px!important}.vpx-rings{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}.vpx-ring{width:86px!important;height:86px!important;background:conic-gradient(#9a5a6c calc(var(--pct)*1%),#292f36 0)!important}.vpx-ring:before{background:#11161c!important}.vpx-ring div span{display:none!important}.vpx-link{color:#bd788b!important}
 .vpx-says{border-radius:8px!important;background:#171c22!important;border-color:#303740!important}.vpx-says>strong,.vpx-says>b{color:#d7b783}
 .vpx-grid{min-width:0;grid-template-columns:minmax(0,1.2fr) minmax(260px,.75fr) minmax(300px,.95fr)!important;gap:14px!important}.vpx-grid>*{min-width:0}
 .vpx-card{min-width:0;border-radius:10px!important;background:#11161c!important;border-color:#303740!important}.vpx-plan-row,.vpx-quest{min-width:0;border-radius:7px!important;background:#181e25!important}.vpx-plan-row i,.vpx-quest i{border-radius:6px!important;background:#242b33!important;color:#c8a97a!important}.vpx-actions button{border-radius:7px!important;background:#20262d!important;border:1px solid #343c45!important;color:#eef1f3!important}.vpx-actions button:hover{background:#292f37!important}
 .vpx-quote{border-radius:10px!important;filter:saturate(.72);min-width:0}.vpx-quote button{border-radius:7px!important;background:#8a4055!important;color:#fff!important}.vpx-mini{border-radius:7px!important}.vpx-footer{border-radius:9px!important;background:#12171d!important;border-color:#303740!important;color:#cbd1d6!important}
 .vpx-xp span,.vpx-plan-progress span{background:#9a5a6c!important}.vpx-check.done{background:#728c7b!important;border-color:#728c7b!important}
}
@media(min-width:980px) and (max-width:1220px){.vpx-hero{grid-template-columns:300px minmax(0,1fr)!important}.vpx-grid{grid-template-columns:1fr 1fr!important}.vpx-grid>section:first-child{grid-row:span 2}.vpx-rings{grid-template-columns:repeat(2,1fr)!important}}

/* 2026-09-15 hard layout reset — desktop app shell */
@media (min-width:980px){
  body.vpx-dashboard-mode #vpGlobalSide{display:flex!important}
  body.vpx-dashboard-mode .vpx-side{display:none!important}
  body.vpx-dashboard-mode #appView{width:100vw!important;max-width:100vw!important;overflow-x:hidden!important}
  body.vpx-dashboard-mode #appView>main{
    display:block!important;position:relative!important;
    width:calc(100vw - 232px)!important;max-width:none!important;min-width:0!important;
    margin:0 0 0 232px!important;padding:28px!important;overflow:visible!important;
  }
  body.vpx-dashboard-mode #dashboard.screen,
  body.vpx-dashboard-mode #dashboard.screen.active{
    display:block!important;position:static!important;width:100%!important;max-width:none!important;
    min-width:0!important;margin:0!important;padding:0!important;overflow:visible!important;
  }
  body.vpx-dashboard-mode #vpExactDashboard{
    display:block!important;position:static!important;width:100%!important;max-width:1320px!important;
    min-width:0!important;margin:0 auto!important;padding:0!important;transform:none!important;
  }
  body.vpx-dashboard-mode .vpx-head,
  body.vpx-dashboard-mode .vpx-hero,
  body.vpx-dashboard-mode .vpx-grid,
  body.vpx-dashboard-mode .vpx-footer{width:100%!important;max-width:100%!important;min-width:0!important}
  body.vpx-dashboard-mode .vpx-hero{grid-template-columns:minmax(280px,36%) minmax(0,1fr)!important}
  body.vpx-dashboard-mode .vpx-character{
    background-size:cover!important;background-position:center 42%!important;background-repeat:no-repeat!important;
    min-width:0!important;overflow:hidden!important;
  }
  body.vpx-dashboard-mode .vpx-progress{min-width:0!important;overflow:hidden!important}
  body.vpx-dashboard-mode .vpx-grid{grid-template-columns:minmax(0,1.15fr) minmax(240px,.72fr) minmax(280px,.9fr)!important}
}
@media (min-width:980px) and (max-width:1250px){
  body.vpx-dashboard-mode #appView>main{padding:22px!important}
  body.vpx-dashboard-mode .vpx-hero{grid-template-columns:300px minmax(0,1fr)!important}
  body.vpx-dashboard-mode .vpx-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.vpx-dashboard-mode .vpx-rings{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* 2026-09-15 FINAL desktop ownership reset. The app shell owns sidebar spacing; feature CSS must not. */
@media (min-width:980px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body:not(.auth-open) #appView:not(.hidden){padding-left:0!important;margin:0!important;width:100%!important;max-width:100%!important}
  body:not(.auth-open) #appView:not(.hidden)>main,
  body.vpx-dashboard-mode #appView>main{
    width:auto!important;max-width:none!important;min-width:0!important;
    margin:0 0 0 232px!important;padding:28px 32px 56px!important;
    box-sizing:border-box!important;overflow-x:hidden!important;
  }
  body.vpx-dashboard-mode #dashboard,body.vpx-dashboard-mode #vpExactDashboard{
    width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;
  }
  body.vpx-dashboard-mode .vpx-head{margin:0 0 20px!important}
  body.vpx-dashboard-mode .vpx-hero{grid-template-columns:minmax(300px,38%) minmax(0,1fr)!important}
  body.vpx-dashboard-mode .vpx-character{min-height:360px!important;background-size:cover!important;background-position:center center!important}
  body.vpx-dashboard-mode .vpx-progress{overflow:visible!important}
  body.vpx-dashboard-mode .vpx-rings{grid-template-columns:repeat(4,minmax(90px,1fr))!important}
}
@media (min-width:980px) and (max-width:1280px){
 body:not(.auth-open) #appView:not(.hidden)>main,body.vpx-dashboard-mode #appView>main{padding:22px!important}
 body.vpx-dashboard-mode .vpx-hero{grid-template-columns:minmax(280px,34%) minmax(0,1fr)!important}
 body.vpx-dashboard-mode .vpx-rings{grid-template-columns:repeat(2,minmax(100px,1fr))!important}
 body.vpx-dashboard-mode .vpx-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* v16 public Plans & Pricing */
.vp-public-plans-link{width:100%;margin-top:12px;min-height:44px;border:1px solid rgba(220,95,151,.45);border-radius:12px;background:transparent;color:#f2b2cf;font-weight:800;cursor:pointer}
.vp-public-plans-link:hover{background:rgba(220,95,151,.08)}
body.vp-public-plans-mode .sidebar,
body.vp-public-plans-mode .side-nav,
body.vp-public-plans-mode #sidebar,
body.vp-public-plans-mode .app-sidebar{display:none!important}
body.vp-public-plans-mode .main,
body.vp-public-plans-mode main,
body.vp-public-plans-mode .app-main{margin-left:0!important;max-width:none!important}
body.vp-public-plans-mode #vpCheckoutBtn{display:none!important}
body.vp-public-plans-mode .vp-payment-choices{display:none!important}


/* v18 My Account layout repair */
#account{
  width:100%!important;
  max-width:none!important;
  overflow-x:hidden!important;
}
#account .vp-page-head{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:34px 28px 26px!important;
  box-sizing:border-box!important;
}
#account .vp-page-head>div{
  min-width:0!important;
}
#account .vp-page-head h1{
  margin:4px 0 8px!important;
  font-size:clamp(34px,4vw,58px)!important;
  line-height:1.02!important;
  overflow-wrap:anywhere!important;
}
#account .vp-page-head p{
  max-width:760px!important;
  margin:0!important;
  line-height:1.5!important;
}
#account .vp-account-grid{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:26px 28px 42px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:24px!important;
  align-items:start!important;
}
#account .vp-account-card{
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#account .vp-account-card input{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#account .vp-account-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px 18px!important;
  align-items:center!important;
}
#account .vp-account-actions button,
#account .vp-account-actions a{
  max-width:100%!important;
}
@media(max-width:900px){
  #account .vp-account-grid{grid-template-columns:1fr!important}
}
@media(max-width:640px){
  #account .vp-page-head{padding:24px 16px 20px!important}
  #account .vp-account-grid{padding:18px 16px 32px!important;gap:16px!important}
  #account .vp-page-head h1{font-size:34px!important}
  #account .vp-account-actions{display:grid!important;grid-template-columns:1fr!important}
  #account .vp-account-actions button,
  #account .vp-account-actions a{width:100%!important;text-align:center!important}
}

/* v19 collapsible sidebar */
:root{--vp-sidebar-expanded:330px;--vp-sidebar-collapsed:78px}
.vp-sidebar-toggle{
 position:absolute;top:18px;right:12px;z-index:20;width:38px;height:38px;
 display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);
 border-radius:10px;background:rgba(255,255,255,.04);color:#d8e0ea;
 font-size:27px;line-height:1;cursor:pointer;transition:background .18s ease,transform .18s ease
}
.vp-sidebar-toggle:hover{background:rgba(255,255,255,.09)}
@media(min-width:901px){
 body.vp-sidebar-collapsed .sidebar,
 body.vp-sidebar-collapsed .side-nav,
 body.vp-sidebar-collapsed #sidebar,
 body.vp-sidebar-collapsed .app-sidebar{width:var(--vp-sidebar-collapsed)!important;min-width:var(--vp-sidebar-collapsed)!important}
 body.vp-sidebar-collapsed .main,
 body.vp-sidebar-collapsed main,
 body.vp-sidebar-collapsed .app-main{margin-left:var(--vp-sidebar-collapsed)!important}
 body.vp-sidebar-collapsed .sidebar .brand,
 body.vp-sidebar-collapsed .sidebar .logo,
 body.vp-sidebar-collapsed .sidebar .tagline,
 body.vp-sidebar-collapsed .sidebar .nav-label,
 body.vp-sidebar-collapsed .sidebar .nav-text,
 body.vp-sidebar-collapsed .sidebar .account-block,
 body.vp-sidebar-collapsed .sidebar .sidebar-footer,
 body.vp-sidebar-collapsed .side-nav .brand,
 body.vp-sidebar-collapsed .side-nav .tagline,
 body.vp-sidebar-collapsed #sidebar .brand,
 body.vp-sidebar-collapsed #sidebar .tagline{display:none!important}
 body.vp-sidebar-collapsed .sidebar a,
 body.vp-sidebar-collapsed .sidebar button:not(.vp-sidebar-toggle),
 body.vp-sidebar-collapsed .side-nav a,
 body.vp-sidebar-collapsed #sidebar a{justify-content:center!important;padding-left:0!important;padding-right:0!important;gap:0!important}
 body.vp-sidebar-collapsed .sidebar a span:not(:first-child),
 body.vp-sidebar-collapsed .side-nav a span:not(:first-child),
 body.vp-sidebar-collapsed #sidebar a span:not(:first-child){display:none!important}
 body.vp-sidebar-collapsed .vp-sidebar-toggle{right:20px}
}
@media(max-width:900px){
 .vp-sidebar-toggle{display:none!important}
}


/* v20 laptop-density pass
   Compact desktop presentation for common 1366x768 / 1440x900 laptop displays. */
@media (min-width:901px) and (max-width:1500px){
  :root{
    --vp-sidebar-expanded:260px;
    --vp-sidebar-collapsed:64px;
  }

  .sidebar,.side-nav,#sidebar,.app-sidebar{
    width:var(--vp-sidebar-expanded)!important;
    min-width:var(--vp-sidebar-expanded)!important;
  }
  .main,main,.app-main{
    margin-left:var(--vp-sidebar-expanded)!important;
  }
  body.vp-sidebar-collapsed .main,
  body.vp-sidebar-collapsed main,
  body.vp-sidebar-collapsed .app-main{
    margin-left:var(--vp-sidebar-collapsed)!important;
  }

  /* Navigation density */
  .sidebar,.side-nav,#sidebar,.app-sidebar{padding-top:12px!important}
  .sidebar .brand,.side-nav .brand,#sidebar .brand{transform:scale(.88);transform-origin:left top;margin-bottom:-4px!important}
  .sidebar nav a,.side-nav a,#sidebar nav a,
  .sidebar nav button,.side-nav nav button,#sidebar nav button{
    min-height:44px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    font-size:16px!important;
  }
  .sidebar .account-block,.sidebar .sidebar-footer,
  .side-nav .account-block,#sidebar .account-block{
    font-size:14px!important;
  }
  .vp-sidebar-toggle{top:12px!important;width:34px!important;height:34px!important}

  /* General page density */
  .screen{padding-top:0!important}
  .vp-page-head{
    padding-top:22px!important;
    padding-bottom:18px!important;
  }
  .vp-page-head h1{
    font-size:clamp(32px,3.2vw,48px)!important;
    line-height:1.02!important;
  }
  .vp-page-head p{font-size:16px!important}
  .card{border-radius:18px!important}

  /* Account */
  #account .vp-page-head{padding:22px 22px 18px!important}
  #account .vp-account-grid{
    padding:18px 22px 28px!important;
    gap:18px!important;
  }
  #account .vp-account-card{padding:20px!important}
  #account .vp-account-card h2,
  #account .vp-account-card h3{font-size:22px!important}
  #account .vp-account-card p{font-size:15px!important;line-height:1.45!important}
  #account .vp-account-card input{min-height:40px!important}
  #account .vp-account-actions button{min-height:42px!important;padding:9px 16px!important}

  /* Pricing */
  #plans .vp-page-head{padding-top:20px!important;padding-bottom:16px!important}
  #plans .card{padding:20px!important}
  #plans h2,#plans h3{line-height:1.08!important}
  #plans .price{font-size:clamp(38px,4vw,54px)!important}

  /* Dashboard / common content */
  .vpx-hero{min-height:420px!important}
  .vpx-character{min-height:420px!important}
  .vpx-character:before{height:330px!important}
  .vpx-progress{padding:20px 24px!important}
  .vpx-rings{gap:18px 42px!important;margin:18px 0!important}
}

@media (min-width:901px) and (max-height:820px){
  .sidebar nav a,.side-nav a,#sidebar nav a{min-height:40px!important}
  .sidebar nav,.side-nav nav,#sidebar nav{gap:2px!important}
  .vp-page-head{padding-top:16px!important;padding-bottom:14px!important}
  #account .vp-page-head{padding-top:16px!important;padding-bottom:14px!important}
  #account .vp-account-grid{padding-top:14px!important}
  .vpx-hero{min-height:390px!important}
  .vpx-character{min-height:390px!important}
  .vpx-character:before{height:300px!important}
}

/* v21 HealthyBound Quest sidebar wordmark */
.sidebar .brand,.side-nav .brand,#sidebar .brand,.app-sidebar .brand{
  white-space:nowrap!important;
  letter-spacing:-1.5px!important;
}
@media(min-width:901px) and (max-width:1500px){
  .sidebar .brand,.side-nav .brand,#sidebar .brand,.app-sidebar .brand{
    font-size:30px!important;
    letter-spacing:-1.3px!important;
    transform:none!important;
  }
}

/* v23 authoritative laptop sizing — based on deployed server source */
@media (min-width:901px){
  #vpGlobalSide{
    width:220px!important;
    min-width:220px!important;
    padding:20px 14px!important;
  }
  body:not(.vp-sidebar-collapsed) #appView,
  body:not(.vp-sidebar-collapsed) .vpg-main,
  body:not(.vp-sidebar-collapsed) #vpxRoot{
    margin-left:220px!important;
  }
  #vpGlobalSide .vpg-brand{
    font-size:23px!important;
    line-height:1.05!important;
    letter-spacing:-.7px!important;
    white-space:normal!important;
    padding-right:26px!important;
  }
  #vpGlobalSide .vpg-brand small{
    font-size:9px!important;
    line-height:1.35!important;
    letter-spacing:1.3px!important;
    margin-top:8px!important;
  }
  #vpGlobalSide nav{gap:3px!important;margin-top:22px!important}
  #vpGlobalSide nav button{
    min-height:42px!important;
    padding:8px 10px!important;
    font-size:15px!important;
    border-radius:10px!important;
  }
  #vpGlobalSide .vpg-account{font-size:13px!important}
  .vp-sidebar-toggle{top:10px!important;right:8px!important;width:30px!important;height:30px!important;font-size:21px!important}

  /* dashboard: fit the complete progress area without horizontal clipping */
  .vpx-shell,.vpx-main,.vpx-content{min-width:0!important;max-width:100%!important}
  .vpx-main{padding:18px 20px 30px!important}
  .vpx-main>h1,.vpx-greeting h1{font-size:38px!important;line-height:1.05!important;margin-bottom:5px!important}
  .vpx-main>p,.vpx-greeting p{font-size:18px!important}
  .vpx-hero{
    width:100%!important;
    max-width:1120px!important;
    min-height:360px!important;
    grid-template-columns:minmax(260px,32%) minmax(0,68%)!important;
    margin-left:0!important;
  }
  .vpx-character{min-width:0!important;min-height:360px!important;padding:10px!important}
  .vpx-character:before{height:280px!important;background-position:center 25%!important}
  .vpx-companion-bubble{
    max-width:calc(100% - 24px)!important;
    padding:14px 16px!important;
    font-size:15px!important;
  }
  .vpx-character-card{left:14px!important;right:14px!important;bottom:12px!important;padding:8px 10px!important}
  .vpx-progress{min-width:0!important;padding:20px 24px!important;overflow:hidden!important}
  .vpx-progress h2{font-size:27px!important}
  .vpx-rings{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px 24px!important;
    width:100%!important;
    margin:16px 0!important;
  }
  .vpx-ring{min-width:0!important;width:100%!important}
  .vpx-ring .ring,.vpx-ring-ring{width:92px!important;height:92px!important}
}
@media (min-width:901px) and (max-width:1400px){
  #vpGlobalSide{width:190px!important;min-width:190px!important;padding-left:10px!important;padding-right:10px!important}
  body:not(.vp-sidebar-collapsed) #appView,
  body:not(.vp-sidebar-collapsed) .vpg-main,
  body:not(.vp-sidebar-collapsed) #vpxRoot{margin-left:190px!important}
  #vpGlobalSide .vpg-brand{font-size:20px!important}
  #vpGlobalSide nav button{font-size:14px!important}
  .vpx-main{padding:14px 16px 24px!important}
  .vpx-main>h1,.vpx-greeting h1{font-size:34px!important}
  .vpx-hero{grid-template-columns:minmax(235px,31%) minmax(0,69%)!important;min-height:330px!important}
  .vpx-character{min-height:330px!important}
  .vpx-character:before{height:250px!important}
  .vpx-progress{padding:16px 18px!important}
  .vpx-progress h2{font-size:24px!important}
  .vpx-rings{gap:12px 18px!important}
  .vpx-ring .ring,.vpx-ring-ring{width:82px!important;height:82px!important}
}
@media (min-width:901px) and (max-height:800px){
  #vpGlobalSide nav button{min-height:36px!important;padding-top:5px!important;padding-bottom:5px!important}
  #vpGlobalSide nav{margin-top:14px!important}
  .vpx-main{padding-top:10px!important}
  .vpx-hero{min-height:300px!important}
  .vpx-character{min-height:300px!important}
  .vpx-character:before{height:225px!important}
}

/* v24 dashboard fit correction — ring item must never receive circle dimensions */
@media (min-width:901px){
  .vpx-progress{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  .vpx-rings{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .vpx-ring{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
  }
  .vpx-ring::before{
    width:88px!important;
    height:88px!important;
    min-width:88px!important;
    min-height:88px!important;
    max-width:88px!important;
    max-height:88px!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
  }
  .vpx-ring .vpx-circle,
  .vpx-ring .vpx-ring-circle,
  .vpx-ring .ring,
  .vpx-ring svg{
    width:88px!important;
    height:88px!important;
    min-width:88px!important;
    min-height:88px!important;
    max-width:88px!important;
    max-height:88px!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
    flex:0 0 88px!important;
  }
  .vpx-ring svg{overflow:visible!important}
}
@media (min-width:901px) and (max-width:1400px){
  .vpx-ring::before,
  .vpx-ring .vpx-circle,
  .vpx-ring .vpx-ring-circle,
  .vpx-ring .ring,
  .vpx-ring svg{
    width:76px!important;height:76px!important;
    min-width:76px!important;min-height:76px!important;
    max-width:76px!important;max-height:76px!important;
    flex-basis:76px!important;
  }
}

/* v25 Account page: authoritative laptop/sidebar fit */
@media (min-width:901px){
  #account{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }
  #account .vp-commerce-hero{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:30px 34px 26px!important;
    box-sizing:border-box!important;
  }
  #account .vp-commerce-hero h2{
    margin:4px 0 8px!important;
    font-size:clamp(34px,3.3vw,48px)!important;
    line-height:1.04!important;
  }
  #account .vp-commerce-hero p{
    max-width:720px!important;
    font-size:16px!important;
    line-height:1.45!important;
  }
  #account .vp-account-grid{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:24px 34px 30px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)!important;
    gap:22px!important;
    box-sizing:border-box!important;
  }
  #account .vp-account-card{
    width:auto!important;
    min-width:0!important;
    min-height:210px!important;
    padding:22px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  #account .vp-card-header{
    min-width:0!important;
    gap:14px!important;
  }
  #account .vp-card-header>div{min-width:0!important}
  #account #vpAccountEmail,
  #account #vpAccountPlan{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    font-size:clamp(21px,2vw,29px)!important;
    line-height:1.12!important;
  }
  #account .vp-account-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px 16px!important;
  }
  #account .vp-account-actions button{
    min-width:0!important;
    max-width:100%!important;
  }
  #account .vp-email-editor{
    width:auto!important;
    max-width:760px!important;
    margin:0 34px 34px!important;
    box-sizing:border-box!important;
  }
}
@media (min-width:901px) and (max-width:1400px){
  #account .vp-commerce-hero{padding:22px 24px 20px!important}
  #account .vp-commerce-hero h2{font-size:36px!important}
  #account .vp-account-grid{
    padding:18px 24px 24px!important;
    gap:16px!important;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)!important;
  }
  #account .vp-account-card{padding:18px!important;min-height:190px!important}
  #account #vpAccountEmail,
  #account #vpAccountPlan{font-size:22px!important}
  #account .vp-account-card p{font-size:14px!important}
  #account .vp-account-actions button{font-size:14px!important;padding:9px 14px!important}
  #account .vp-email-editor{margin:0 24px 24px!important}
}
@media (max-width:900px){
  #account .vp-account-grid{grid-template-columns:1fr!important}
}

/* v26 expanded companions */
.hbq-companion-choice{border:1px solid #303740;border-radius:14px;background:#11161c;color:#fff;padding:8px;cursor:pointer;text-align:left;overflow:hidden}
.hbq-companion-choice img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.hbq-companion-choice span{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:9px 3px 3px}
.hbq-companion-choice small{color:#d66b9b;text-transform:uppercase;letter-spacing:.08em}
.hbq-companion-choice.selected{border-color:#d66b9b;box-shadow:0 0 0 2px rgba(214,107,155,.18)}
.hbq-companions-page{max-width:1180px;margin:0 auto;padding:34px 28px 48px}
.hbq-companions-page h1{font-size:clamp(34px,4vw,58px);margin:6px 0 10px}
.hbq-companions-page>p{max-width:800px;color:#c6ced8;line-height:1.55}
.hbq-lineup-art{display:block;width:100%;height:auto;border:1px solid #303740;border-radius:18px;margin:24px 0}
.hbq-lineup-cards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.hbq-lineup-cards article{background:#11161c;border:1px solid #303740;border-radius:12px;padding:12px;text-align:center}
.hbq-lineup-cards b,.hbq-lineup-cards span{display:block}.hbq-lineup-cards span{color:#d66b9b;font-size:12px;text-transform:uppercase;margin-top:3px}
@media(max-width:900px){.hbq-lineup-cards{grid-template-columns:repeat(2,1fr)}.hbq-companions-page{padding:24px 16px 36px}}

/* v27 public Meet the Companions */
body.hbq-public-companions-mode #vpGlobalSide,
body.hbq-public-companions-mode .topbar,
body.hbq-public-companions-mode #vpSidebarToggle,
body.hbq-public-companions-mode .bottom-nav,
body.hbq-public-companions-mode .mobile-nav{display:none!important}
body.hbq-public-companions-mode #appView,
body.hbq-public-companions-mode main,
body.hbq-public-companions-mode #companions{
  margin-left:0!important;width:100%!important;max-width:none!important
}
body.hbq-public-companions-mode{overflow-x:hidden!important}
body.hbq-public-companions-mode #companions{display:block!important;background:#080c11!important;min-height:100vh}
body.hbq-public-companions-mode .hbq-companions-page{max-width:1280px!important;padding-top:42px!important}
.hbq-companions-page .eyebrow{color:#d56b9b;font-weight:900;letter-spacing:.15em}
.hbq-companion-cta{
 margin:22px 0 0;padding:20px 22px;border:1px solid #303740;border-radius:16px;background:#11161c;
 display:flex;align-items:center;justify-content:space-between;gap:22px
}
.hbq-companion-cta>div:first-child{display:grid;gap:5px}
.hbq-companion-cta>div:first-child b{font-size:20px}
.hbq-companion-cta>div:first-child span{color:#b8c1cd}
.hbq-companion-cta-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vp-auth-companions{display:block;width:100%;margin-top:4px}
@media(max-width:760px){
 body.hbq-public-companions-mode .hbq-companions-page{padding:24px 14px 32px!important}
 .hbq-companion-cta{align-items:stretch;flex-direction:column}
 .hbq-companion-cta-actions{display:grid;grid-template-columns:1fr}
 .hbq-companion-cta-actions button{width:100%}
}

/* v36 laptop viewport containment — authoritative final overrides */
html,body{max-width:100%!important;overflow-x:hidden!important}
#appView,.vp-shell,.vp-shell-main,.main-content,main{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.vp-shell-main,.main-content,main{overflow-x:hidden!important}

/* The dashboard must size itself to the AVAILABLE content area, not viewport width. */
.vpx-page,.vpx-wrap,.vpx-dashboard{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
}
.vpx-hero{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(280px,34%) minmax(0,1fr)!important;
  box-sizing:border-box!important;
}
.vpx-character,.vpx-progress{min-width:0!important;max-width:100%!important}
.vpx-progress{padding:24px!important;overflow:hidden!important}
.vpx-rings{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px 28px!important;
}
.vpx-ring,.vpx-ring-wrap,.vpx-stat{min-width:0!important;max-width:100%!important}
.vpx-ring{width:116px!important;height:116px!important;margin-inline:auto!important}

/* Laptop widths: compact the shell and dashboard rather than clipping the right side. */
@media (min-width:769px) and (max-width:1500px){
  .vp-sidebar,.sidebar,#vpGlobalSide{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
  }
  .vp-shell-main,.main-content,main{
    margin-left:220px!important;
    width:calc(100% - 220px)!important;
    max-width:calc(100% - 220px)!important;
  }
  .vpx-page,.vpx-wrap,.vpx-dashboard{padding-left:22px!important;padding-right:22px!important}
  .vpx-hero{grid-template-columns:minmax(250px,32%) minmax(0,1fr)!important}
  .vpx-character:before{height:330px!important}
  .vpx-progress{padding:20px!important}
  .vpx-rings{gap:16px 20px!important}
  .vpx-ring{width:104px!important;height:104px!important}
}

/* Smaller laptops: make dashboard vertical so nothing can disappear offscreen. */
@media (min-width:769px) and (max-width:1180px){
  .vp-sidebar,.sidebar,#vpGlobalSide{width:190px!important;min-width:190px!important;max-width:190px!important}
  .vp-shell-main,.main-content,main{margin-left:190px!important;width:calc(100% - 190px)!important;max-width:calc(100% - 190px)!important}
  .vpx-hero{grid-template-columns:1fr!important}
  .vpx-character{min-height:390px!important}
  .vpx-character:before{height:300px!important}
  .vpx-rings{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Public/Meet Companions page must also stay inside viewport. */
.hbq-companions-page,.hbq-companions-page *{box-sizing:border-box}
.hbq-companions-page{width:100%!important;max-width:1280px!important;margin-inline:auto!important;overflow-x:hidden!important}
.hbq-lineup-cards{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;width:100%!important;max-width:100%!important}
.hbq-companions-page img{max-width:100%!important;height:auto}

/* v41 — Companion-page containment + visible account sign-out.
   Does not modify companion artwork, image paths, or image sizing. */
@media (min-width:980px){
  body:not(.auth-open) #appView:not(.hidden)>main{
    margin-left:232px!important;
    width:calc(100% - 232px)!important;
    max-width:calc(100% - 232px)!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }

  body:not(.auth-open) #appView:not(.hidden)>main>.screen,
  body:not(.auth-open) #appView:not(.hidden)>main>.screen.active{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  #wellness,
  #wellness.vp-companion-page,
  #wellness #vpWellnessPanel,
  #wellness .vpa-overview,
  #wellness .vpa-summary,
  #wellness .vpa-section,
  #wellness .vpa-profile,
  #wellness .vpa-focus,
  #wellness .vpa-columns{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  #wellness.vp-companion-page{
    width:100%!important;
    padding:20px 0 30px!important;
    overflow-x:hidden!important;
  }
  #wellness.vp-companion-page #vpWellnessPanel{
    width:100%!important;
    margin:0!important;
  }

  #vpGlobalSide .vpg-account #vpgSignOut{
    margin-top:2px!important;
    padding:8px 0!important;
    color:#c98a9a!important;
  }
  #vpGlobalSide .vpg-account #vpgSignOut:hover{
    color:#fff!important;
    background:transparent!important;
  }
}

/* v26 visible hierarchical navigation */
#vpGlobalSide{overflow-y:auto!important;overflow-x:hidden!important}
#vpGlobalSide nav{display:flex!important;flex-direction:column!important;gap:3px!important;padding-bottom:12px!important}
#vpGlobalSide .vpg-nav-group{display:block!important}
#vpGlobalSide .vpg-group-toggle{width:100%!important;display:grid!important;grid-template-columns:24px 1fr 20px!important;align-items:center!important;text-align:left!important;background:transparent!important;border:0!important;color:#d9d4d8!important;padding:9px 12px!important;border-radius:10px!important;font:inherit!important;cursor:pointer!important}
#vpGlobalSide .vpg-group-toggle:hover{background:#191a20!important;color:#fff!important}
#vpGlobalSide .vpg-group-toggle i{font-style:normal!important;color:#9aa7b7!important}
#vpGlobalSide .vpg-group-toggle b{font-weight:400!important;transition:transform .15s ease!important}
#vpGlobalSide .vpg-group-toggle[aria-expanded="true"] b{transform:rotate(180deg)!important}
#vpGlobalSide .vpg-subnav{display:none!important;padding:1px 0 5px 24px!important}
#vpGlobalSide .vpg-subnav.open{display:flex!important;flex-direction:column!important;gap:1px!important}
#vpGlobalSide .vpg-subnav button{min-height:34px!important;width:100%!important;display:grid!important;grid-template-columns:22px 1fr!important;align-items:center!important;text-align:left!important;border:0!important;background:transparent!important;color:#bfc5cf!important;padding:6px 10px!important;border-radius:9px!important;font:inherit!important;font-size:14px!important;cursor:pointer!important}
#vpGlobalSide .vpg-subnav button:hover,#vpGlobalSide .vpg-subnav button.active{background:#25151e!important;color:#fff!important}
#vpGlobalSide .vpg-subnav button.active{box-shadow:inset 3px 0 #b33568!important}
#vpGlobalSide .vpg-subnav button i{font-style:normal!important;font-size:13px!important;color:#9aa7b7!important}
body.vp-sidebar-collapsed #vpGlobalSide .vpg-group-toggle span,body.vp-sidebar-collapsed #vpGlobalSide .vpg-group-toggle b,body.vp-sidebar-collapsed #vpGlobalSide .vpg-subnav{display:none!important}

/* v26 exercise library: never show browser broken-image UI */
.vp-exercise-thumb-wrap{width:100%;min-height:120px;border-radius:14px;overflow:hidden;background:#111218;border:1px solid #34363f;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.vp-exercise-thumb-wrap .vp-exercise-thumb{width:100%!important;height:180px!important;display:block;object-fit:cover!important;border:0!important;border-radius:0!important;margin:0!important}
.vp-exercise-thumb-fallback{width:100%;min-height:120px;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#d6ccd2;text-align:center;padding:18px}
.vp-exercise-thumb-fallback span{font-size:30px}.vp-exercise-thumb-fallback small{color:#a9a1a6}

/* v27 compact discoverable sidebar */
#vpGlobalSide{width:232px!important;padding:18px 14px 14px!important}
#vpGlobalSide nav{gap:2px!important}
#vpGlobalSide .vpg-primary{display:flex;flex-direction:column;gap:2px;margin:4px 0 8px}
#vpGlobalSide .vpg-primary button,#vpGlobalSide .vpg-admin-link{width:100%;height:42px;display:grid;grid-template-columns:26px 1fr;align-items:center;text-align:left;border:0;background:transparent;color:#c7ccd5;padding:0 10px;border-radius:9px;font:inherit;font-size:15px;cursor:pointer}
#vpGlobalSide .vpg-primary button i,#vpGlobalSide .vpg-admin-link i{font-style:normal;color:#93a0b1;font-size:14px}
#vpGlobalSide .vpg-primary button:hover,#vpGlobalSide .vpg-primary button.active,#vpGlobalSide .vpg-admin-link:hover{background:#1a1b21;color:#fff}
#vpGlobalSide .vpg-primary button.active{box-shadow:inset 3px 0 #b33568}
#vpGlobalSide .vpg-group-toggle{height:42px!important;grid-template-columns:26px 1fr 16px!important;padding:0 10px!important;font-size:15px!important}
#vpGlobalSide .vpg-group-toggle b{font-size:20px;line-height:1;transform:none!important}
#vpGlobalSide .vpg-group-toggle[aria-expanded="true"] b{transform:rotate(90deg)!important}
#vpGlobalSide .vpg-subnav{padding:1px 0 5px 27px!important;border-left:1px solid #30323a;margin-left:21px!important}
#vpGlobalSide .vpg-subnav button{min-height:32px!important;grid-template-columns:1fr!important;padding:5px 10px!important;font-size:13px!important}
#vpGlobalSide .vpg-subnav button i{display:none!important}
#vpGlobalSide .vpg-account{margin-top:auto!important;padding:12px 8px 0!important;border-top:1px solid #30323a!important}
#vpGlobalSide .vpg-account small,#vpGlobalSide .vpg-account button[data-vpg-nav="account"]{display:none!important}
#vpGlobalSide .vpg-admin-link{margin-top:6px;border-top:1px solid #30323a;border-radius:0;padding-top:4px;height:46px}