/* V10.1.8 — Reference-inspired athletic branding & cinematic hero.
   NO swoosh or semicircular backdrop added.
   Quick-action artwork and every original app workflow stay untouched. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800;1,900&family=Rajdhani:wght@500;600;700&display=swap');
:root{
  --cb-athletic:'Barlow Condensed',Impact,'Arial Narrow',Arial,sans-serif;
  --cb-technical:'Rajdhani','Arial Narrow',Arial,sans-serif;
}
/* Wordmark: angular, condensed, forward leaning; white CALORIE / orange BOMB. */
#app .v10a-dashboard .app .header{padding:4px 0 3px!important;min-height:72px!important;position:relative;z-index:2}
#app .v10a-dashboard .app .brand.cb-athletic-logo{
 display:block!important;margin:0!important;padding:0!important;white-space:nowrap!important;
 font-family:var(--cb-athletic)!important;
 font-size:clamp(31px,8.6vw,52px)!important;font-weight:900!important;font-style:italic!important;
 line-height:.93!important;letter-spacing:-.035em!important;text-transform:uppercase!important;
 color:#f8f8f8!important;-webkit-text-fill-color:#f8f8f8!important;
 text-shadow:0 2px 0 rgba(0,0,0,.6)!important;transform:skew(-4deg);transform-origin:left center;
}
#app .v10a-dashboard .app .brand.cb-athletic-logo span{
 color:#ff6339!important;-webkit-text-fill-color:#ff6339!important;margin:0 0 0 2px!important
}
#app .v10a-dashboard .app .date{
 margin-top:9px!important;font-family:var(--cb-technical)!important;
 font-size:12px!important;font-weight:700!important;letter-spacing:.25em!important;
 color:#b5bdc7!important;-webkit-text-fill-color:#b5bdc7!important
}
#app .v10a-dashboard .app .gear{color:#c5cbd3!important;-webkit-text-fill-color:#c5cbd3!important}
#app .v10a-dashboard .app .gear svg{width:32px!important;height:32px!important}

/* Keep the original approved Bomb state illustrations, but give them the
   reference's physical presence, fuse sparks, shadow and dramatic lighting.
   Do not draw or display a swoosh/progress arc behind the character. */
#app .v10a-dashboard .app .hero.cb-cinematic-hero{
 isolation:isolate!important;position:relative!important;
 display:flex!important;align-items:flex-end!important;justify-content:center!important;
 height:clamp(326px,41svh,430px)!important;min-height:326px!important;
 width:100%!important;margin:4px auto -2px!important;padding:0!important;
 background:radial-gradient(ellipse 54% 38% at 50% 76%,rgba(235,81,28,.22) 0%,rgba(101,41,24,.12) 36%,transparent 76%),#080b0f!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;
 overflow:hidden!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero::before{
 content:"";position:absolute;inset:auto 0 3px;height:58px;pointer-events:none;z-index:1;
 background:radial-gradient(ellipse at 50% 90%,rgba(255,83,23,.25) 0%,rgba(219,54,7,.08) 38%,transparent 79%)!important;
 filter:blur(12px);opacity:.95;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero::after{
 content:"";position:absolute;inset:auto 16% 10px;height:1px;pointer-events:none;z-index:3;
 background:linear-gradient(90deg,transparent,rgba(255,105,43,.25),transparent);opacity:.75;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero .cb-hero-atmosphere{
 position:absolute!important;inset:0!important;pointer-events:none!important;z-index:0!important;
 background:radial-gradient(ellipse 43% 47% at 50% 63%,rgba(255,103,39,.24),transparent 83%)!important;
 filter:blur(16px)!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero .mascot{
 display:block!important;position:relative!important;z-index:2!important;
 height:calc(100% - 30px)!important;max-height:404px!important;max-width:84%!important;
 width:auto!important;object-fit:contain!important;object-position:center bottom!important;
 margin:0 0 28px!important;padding:0!important;
 transform:none!important;
 filter:drop-shadow(0 14px 20px rgba(0,0,0,.67)) drop-shadow(0 0 18px rgba(255,103,35,.16))!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero .hero-state{
 position:absolute!important;left:50%!important;right:auto!important;bottom:5px!important;
 transform:translateX(-50%)!important;z-index:4!important;
 display:inline-flex!important;align-items:center!important;gap:6px!important;
 padding:4px 12px!important;border-radius:999px!important;
 color:#ffd0ae!important;-webkit-text-fill-color:#ffd0ae!important;
 background:rgba(17,20,24,.87)!important;border:1px solid rgba(255,103,42,.38)!important;
 font-family:var(--cb-technical)!important;font-size:12px!important;font-weight:800!important;
 letter-spacing:.14em!important;white-space:nowrap!important;text-shadow:none!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero .hero-state.defused{border-color:rgba(66,184,124,.45)!important;color:#a2e8bd!important;-webkit-text-fill-color:#a2e8bd!important}
#app .v10a-dashboard .app .hero.cb-cinematic-hero .hero-state.exploded{border-color:#9f493e!important;color:#ffc1b5!important;-webkit-text-fill-color:#ffc1b5!important}
#app .v10a-dashboard .app .cb-hero-side{
 display:grid!important;gap:9px!important;position:absolute!important;z-index:3!important;pointer-events:none!important;
 font-family:var(--cb-technical)!important;font-size:clamp(10px,2.5vw,13px)!important;
 font-weight:700!important;letter-spacing:.12em!important;line-height:1.35!important;
 color:#b1bccb!important;-webkit-text-fill-color:#b1bccb!important;
 text-shadow:0 2px 9px #080b0f!important
}
#app .v10a-dashboard .app .cb-hero-side i{
 display:block!important;width:32px!important;height:3px!important;border-radius:999px!important;
 background:#ff6339!important;box-shadow:0 0 9px rgba(255,99,57,.22)!important;
}
#app .v10a-dashboard .app .cb-hero-side-left{top:49px!important;left:0!important;text-align:left!important}
#app .v10a-dashboard .app .cb-hero-side-right{right:0!important;bottom:45px!important;text-align:right!important;justify-items:end!important}
#app .v10a-dashboard .app .hero.cb-cinematic-hero .arc{display:none!important}

/* Oversized condensed numerals, from real daily nutrition calculations. */
#app .v10a-dashboard .app .net.cb-net-display{margin:6px 0 12px!important;text-align:center!important}
#app .v10a-dashboard .app .net.cb-net-display strong{
 display:block!important;font-family:var(--cb-athletic)!important;
 font-weight:900!important;font-style:normal!important;font-size:clamp(74px,20.7vw,108px)!important;
 line-height:.79!important;letter-spacing:-.024em!important;color:#fff!important;
 -webkit-text-fill-color:#fff!important;font-variant-numeric:lining-nums tabular-nums!important;
 text-shadow:0 3px 10px rgba(0,0,0,.42)!important
}
#app .v10a-dashboard .app .net.cb-net-display small{
 display:block!important;margin:12px 0 0!important;
 font-family:var(--cb-technical)!important;font-size:16px!important;
 font-weight:700!important;letter-spacing:.27em!important;
 color:#b9c3d0!important;-webkit-text-fill-color:#b9c3d0!important
}

/* One crisp, contained equation/remaining panel like the reference.
   Only a straight horizontal budget line; no swoosh or extra halo. */
#app .v10a-dashboard .app .cb-calorie-panel{
 display:block!important;position:relative!important;
 background:linear-gradient(160deg,rgba(19,24,30,.96),rgba(9,13,18,.97))!important;
 border:1px solid #2d3741!important;border-radius:17px!important;
 padding:13px 14px 14px!important;margin:6px 0 14px!important;
 box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
}
#app .v10a-dashboard .app .cb-calorie-panel .eq{
 display:grid!important;grid-template-columns:1fr 18px 1fr 18px 1fr!important;
 align-items:center!important;gap:2px!important;padding:0 0 12px!important;
 text-align:center!important;margin:0!important
}
#app .v10a-dashboard .app .cb-calorie-panel .eq b{
 display:block!important;font-family:var(--cb-athletic)!important;
 font-size:clamp(29px,8.1vw,43px)!important;font-weight:800!important;
 line-height:.98!important;letter-spacing:-.015em!important;
 color:#faf9f7!important;-webkit-text-fill-color:#faf9f7!important
}
#app .v10a-dashboard .app .cb-calorie-panel .eq .accent b{color:#ff6339!important;-webkit-text-fill-color:#ff6339!important}
#app .v10a-dashboard .app .cb-calorie-panel .eq small{
 display:block!important;margin-top:4px!important;
 font-family:var(--cb-technical)!important;font-size:11px!important;
 font-weight:700!important;letter-spacing:.14em!important;
 color:#a8b3c3!important;-webkit-text-fill-color:#a8b3c3!important
}
#app .v10a-dashboard .app .cb-calorie-panel .eq em{
 color:#ced4dc!important;-webkit-text-fill-color:#ced4dc!important;font-style:normal!important;
 font-size:21px!important;font-weight:750!important
}
#app .v10a-dashboard .app .cb-calorie-track{
 height:8px!important;width:100%!important;
 background:linear-gradient(90deg,#303d48,#212932)!important;border-radius:10px!important;
 overflow:hidden!important;margin:0 0 12px!important
}
#app .v10a-dashboard .app .cb-calorie-track i{
 display:block!important;height:100%!important;border-radius:10px!important;
 background:linear-gradient(90deg,#ff582f,#ff793f)!important;
 box-shadow:0 0 10px rgba(255,95,49,.15)!important
}
#app .v10a-dashboard .app .cb-calorie-panel.cb-over-budget .cb-calorie-track i{background:#e85043!important}
#app .v10a-dashboard .app .cb-calorie-panel .budget,
#app .v10a-dashboard .app .cb-calorie-panel .budget-label{margin:0!important;width:100%!important}
#app .v10a-dashboard .app .cb-calorie-panel .budget-label{
 display:flex!important;justify-content:space-between!important;align-items:flex-end!important;gap:10px!important;
 font-family:var(--cb-technical)!important;font-size:10px!important;
 font-weight:700!important;line-height:1.08!important;letter-spacing:.11em!important;
 color:#b9c3cf!important;-webkit-text-fill-color:#b9c3cf!important
}
#app .v10a-dashboard .app .cb-calorie-panel .budget-label span{
 display:flex!important;align-items:baseline!important;gap:6px!important;min-width:0!important;
}
#app .v10a-dashboard .app .cb-calorie-panel .budget-label span:last-child{
 display:flex!important;flex-direction:column-reverse!important;align-items:flex-end!important;gap:3px!important;text-align:right!important;
}
#app .v10a-dashboard .app .cb-calorie-panel .budget-label b{
 font-family:var(--cb-athletic)!important;font-weight:800!important;
 font-size:clamp(24px,7vw,37px)!important;line-height:.95!important;letter-spacing:0!important;
 color:#fff!important;-webkit-text-fill-color:#fff!important
}
#app .v10a-dashboard .app .cb-calorie-panel .budget-label span:last-child b{font-size:clamp(20px,5.7vw,31px)!important}

/* Matching headline rhythm across secondary pages, no changes to icons. */
#app .cb-v10-page .cb-v10-wordmark{
 font-family:var(--cb-athletic)!important;font-style:italic!important;font-weight:900!important;
 font-size:clamp(31px,8.6vw,52px)!important;letter-spacing:-.045em!important;
 transform:skew(-4deg);transform-origin:left center
}
#app .cb-v10-page h1{
 font-family:var(--cb-athletic)!important;font-weight:800!important;letter-spacing:-.018em!important;
 font-size:clamp(36px,10vw,48px)!important
}
#app .cb-v10-page :is(.dashboard-section h2,.section-title,.page-title h2,.progress-stat-title){
 font-family:var(--cb-technical)!important;letter-spacing:.015em!important;font-weight:800!important
}
#app .login-wrap .brandmark b{
 font-family:var(--cb-athletic)!important;font-style:italic!important;font-weight:900!important;
 font-size:clamp(27px,7vw,40px)!important;letter-spacing:-.035em!important
}

/* Keep the approved four orange quick-action images and routes EXACTLY as they are. */
@media(max-width:430px){
 #app .v10a-dashboard .app .hero.cb-cinematic-hero{height:clamp(320px,42svh,388px)!important;min-height:320px!important}
 #app .v10a-dashboard .app .hero.cb-cinematic-hero .mascot{max-width:84%!important}
 #app .v10a-dashboard .app .cb-hero-side{font-size:10px!important}
}
@media(max-width:360px){
 #app .v10a-dashboard .app .brand.cb-athletic-logo{font-size:30px!important}
 #app .v10a-dashboard .app .cb-hero-side{font-size:9px!important;letter-spacing:.04em!important}
 #app .v10a-dashboard .app .cb-calorie-panel{padding:12px 9px!important}
 #app .v10a-dashboard .app .cb-calorie-panel .budget-label span{gap:3px!important}
 #app .v10a-dashboard .app .cb-calorie-panel .budget-label{font-size:9px!important}
}
@media(prefers-reduced-motion:reduce){
 #app .v10a-dashboard .app .hero.cb-cinematic-hero *,
 #app .v10a-dashboard .app .cb-calorie-track i{transition:none!important;animation:none!important}
}


/* V10.1.9: approved mobile home—cinematic mascot and all four complete
   quick-action cards visible before scrolling. Preserve current feature routes. */
@media(max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app .hero.cb-cinematic-hero{
    height:clamp(180px,calc(100svh - 610px),362px)!important;
    min-height:0!important;
    margin:1px auto -2px!important;
  }
  #app .v10a-dashboard .app .hero.cb-cinematic-hero .mascot{
    height:calc(100% - 27px)!important;
    max-height:360px!important;
    max-width:92%!important;
    margin-bottom:25px!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display{margin:3px 0 7px!important}
  /* Trade the oversized numeral's extra height for a larger hero.
     Keep the wordmark anchored and all four tools clear of bottom navigation. */
  #app .v10a-dashboard .app .net.cb-net-display strong{
    font-size:clamp(58px,16.5vw,82px)!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display small{margin-top:8px!important}
  #app .v10a-dashboard .app .cb-calorie-panel{
    padding:11px 12px!important;
    margin:3px 0 8px!important;
  }
  #app .v10a-dashboard .app .cb-calorie-panel .eq{padding-bottom:8px!important}
  #app .v10a-dashboard .app .cb-calorie-track{margin-bottom:9px!important}
  #app .v10a-dashboard .app .tools{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    border-block:0!important;
    padding:4px 0 7px!important;
  }
  #app .v10a-dashboard .app .tool,
  #app .v10a-dashboard .app .tool+.tool{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    min-width:0!important;
    min-height:121px!important;
    padding:7px 3px!important;
    gap:4px!important;
    border:1px solid #303d48!important;
    border-radius:13px!important;
    background:linear-gradient(160deg,#10161d,#090d12)!important;
    box-sizing:border-box!important;
  }
  #app .v10a-dashboard .app .tool img{
    width:clamp(37px,11vw,53px)!important;
    height:46px!important;
    min-height:0!important;
    object-fit:contain!important;
  }
  #app .v10a-dashboard .app .tool span{
    font-family:var(--cb-technical)!important;
    font-size:clamp(10px,2.7vw,12px)!important;
    font-weight:800!important;
    line-height:1.08!important;
    text-align:center!important;
    text-transform:uppercase!important;
    white-space:normal!important;
  }
  #app .v10a-dashboard .app .tool small{
    display:block!important;
    font-family:var(--cb-technical)!important;
    font-size:clamp(9px,2.2vw,11px)!important;
    line-height:1.12!important;
    font-weight:500!important;
    letter-spacing:0!important;
    color:#b1bbca!important;
    -webkit-text-fill-color:#b1bbca!important;
    text-align:center!important;
  }
}
@media(max-width:600px) and (max-height:790px) and (orientation:portrait){
  #app .v10a-dashboard .app .header{min-height:64px!important}
  #app .v10a-dashboard .app .net.cb-net-display strong{font-size:clamp(56px,15.5vw,70px)!important}
  #app .v10a-dashboard .app .net.cb-net-display small{font-size:13px!important;margin-top:5px!important}
  #app .v10a-dashboard .app .tool,
  #app .v10a-dashboard .app .tool+.tool{min-height:83px!important;gap:3px!important;padding:5px 2px!important}
  #app .v10a-dashboard .app .tool img{height:40px!important}
  #app .v10a-dashboard .app .tool small{display:none!important}
}


/* V10.2.0 — restore approved oversized hero, preserve full four-card row.
   At 393×852 mobile CSS pixels this gives the hero ~302px (vs ~242px)
   without sliding the cards below the fixed bottom nav. */
@media(max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app .hero.cb-cinematic-hero{
    height:clamp(190px,calc(100svh - 550px),350px)!important;
    min-height:0!important;
  }
  #app .v10a-dashboard .app .hero.cb-cinematic-hero .mascot{
    max-height:350px!important;
    max-width:96%!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display{
    margin:2px 0 5px!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display strong{
    font-size:clamp(49px,14vw,68px)!important;
    line-height:.78!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display small{
    margin-top:6px!important;
    font-size:13px!important;
  }
  #app .v10a-dashboard .app .cb-calorie-panel{
    padding:10px 12px!important;
    margin:2px 0 6px!important;
  }
  #app .v10a-dashboard .app .tools{
    padding:3px 0!important;
  }
}
@media(max-width:600px) and (max-height:790px) and (orientation:portrait){
  #app .v10a-dashboard .app .hero.cb-cinematic-hero{
    height:clamp(155px,calc(100svh - 550px),240px)!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display strong{
    font-size:clamp(47px,13vw,58px)!important;
  }
}

/* V10.2.0 — sign-in and sign-up are their own mobile screen, with the
   exact original dashboard hero artwork, without the obsolete 10vh spacer. */
html:has(#app .cb-login-wrap),
body:has(#app .cb-login-wrap){
  background:#080b0f!important;
  color:#f1f3f5!important;
  color-scheme:dark!important;
}
#app:has(.cb-login-wrap){
  width:100%!important;
  max-width:620px!important;
  min-height:100svh!important;
  margin:0 auto!important;
  padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))!important;
  overflow-x:clip;
  background:#080b0f!important;
}
#app .login-wrap.cb-login-wrap{
  max-width:540px!important;
  width:100%!important;
  margin:0 auto!important;
  padding:0!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
}
#app .cb-login-brand{
  width:100%;
  margin:0!important;
  padding:0 0 2px!important;
}
#app .cb-login-logo{
  display:block;
  font-family:var(--cb-athletic)!important;
  font-size:clamp(34px,9vw,52px)!important;
  font-weight:900!important;
  font-style:italic!important;
  line-height:.98!important;
  letter-spacing:-.035em!important;
  white-space:nowrap;
  color:#f8f8f8!important;
  -webkit-text-fill-color:#f8f8f8!important;
  text-shadow:0 2px #0009;
}
#app .cb-login-logo span{
  color:#ff6339!important;
  -webkit-text-fill-color:#ff6339!important;
}
#app .cb-login-tag{
  margin:6px 0 0!important;
  font-family:var(--cb-technical)!important;
  font-size:14px!important;
  letter-spacing:.10em!important;
  color:#a9b3c0!important;
  -webkit-text-fill-color:#a9b3c0!important;
}
#app .cb-login-hero{
  height:clamp(160px,27svh,270px)!important;
  margin:0 auto 6px!important;
  width:100%!important;
  position:relative!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:radial-gradient(ellipse 48% 48% at 50% 70%,rgba(236,83,35,.22),transparent 90%)!important;
}
#app .cb-login-glow{
  position:absolute;inset:auto 0 5px;height:40%;
  background:radial-gradient(ellipse 55% 28% at 50% 100%,rgba(255,95,38,.18),transparent 90%);
  filter:blur(12px);z-index:0;pointer-events:none;
}
#app .cb-login-mascot{
  display:block!important;
  position:relative!important;
  z-index:1!important;
  height:100%!important;
  max-width:93%!important;
  width:auto!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:drop-shadow(0 10px 18px #000a) drop-shadow(0 0 13px rgba(255,87,30,.20))!important;
}
#app .cb-login-card{
  background:linear-gradient(160deg,#141a21,#0c1118)!important;
  border:1px solid #303b47!important;
  border-radius:18px!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
  box-shadow:none!important;
  padding:18px!important;
  margin:0 0 10px!important;
}
#app .cb-login-card h2{
  font-family:var(--cb-athletic)!important;
  font-size:34px!important;
  font-weight:800!important;
  line-height:1!important;
  margin:0 0 6px!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
#app .cb-login-card p.muted{
  margin:0 0 12px!important;
  font-size:13px!important;
  line-height:1.35!important;
  color:#a9b6c5!important;
  -webkit-text-fill-color:#a9b6c5!important;
}
#app .cb-login-card label{
  display:block!important;
  margin:8px 0 4px!important;
  font-size:13px!important;
  font-weight:750!important;
  color:#e8edf2!important;
  -webkit-text-fill-color:#e8edf2!important;
}
#app .cb-login-card input{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  margin:0 0 7px!important;
  padding:10px 13px!important;
  border:1px solid #47515f!important;
  border-radius:10px!important;
  background:#0a1016!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  caret-color:#ff6339!important;
  font-size:16px!important;
  scroll-margin-block:12px 24px;
}
#app .cb-login-card input:focus{
  border-color:#ff6339!important;
  outline:2px solid rgba(255,99,57,.27)!important;
  outline-offset:1px!important;
}
#app .cb-login-card .captcha-wrap{
  margin:3px 0 10px!important;
  gap:3px!important;
}
#app .cb-login-card .captcha-note{
  color:#9da9b5!important;
  -webkit-text-fill-color:#9da9b5!important;
}
#app .cb-login-card button[type="submit"]{
  display:block!important;
  min-height:46px!important;
  background:#ff6339!important;
  color:#0a0d11!important;
  -webkit-text-fill-color:#0a0d11!important;
  border:1px solid #ff6339!important;
}
#app .cb-login-card button.secondary{
  min-height:44px!important;
  margin-top:8px!important;
  background:#202a34!important;
  color:#e8edf2!important;
  -webkit-text-fill-color:#e8edf2!important;
  border-color:#364453!important;
}
#app .cb-login-card .error{
  color:#ffb5aa!important;
  -webkit-text-fill-color:#ffb5aa!important;
  margin-bottom:10px!important;
}
@media(max-width:430px){
  #app .cb-login-hero{height:clamp(160px,24svh,228px)!important;}
  #app .cb-login-card{padding:15px!important;}
}
@media(max-height:760px){
  #app .cb-login-hero{height:clamp(120px,22svh,170px)!important;}
  #app .cb-login-card{padding:14px!important;}
}
#app .cb-login-wrap:focus-within .cb-login-hero{
  height:clamp(78px,12svh,112px)!important;
}
@media(prefers-reduced-motion:no-preference){
  #app .cb-login-hero{transition:height .18s ease!important;}
}

/* V10.2.1 — Header-only polish. Do not change the hero height,
   calorie summary, tool row, or nav positions.
   Shift wordmark and date visually down, without adding layout height. */
#app .v10a-dashboard .app .header .cb-home-header-copy{
  position:relative!important;
  transform:translateY(7px)!important;
  min-width:0!important;
}
#app .v10a-dashboard .app .header .cb-home-menu{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  flex:0 0 48px!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  padding:8px!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:12px!important;
  color:#ff6339!important;
  -webkit-text-fill-color:#ff6339!important;
  box-shadow:none!important;
}
#app .v10a-dashboard .app .header .cb-home-menu span{
  display:block!important;
  flex:0 0 3px!important;
  width:25px!important;
  height:3px!important;
  min-height:3px!important;
  border-radius:99px!important;
  background:#ff6339!important;
}
#app .v10a-dashboard .app .header .cb-home-menu:focus-visible{
  outline:2px solid #ff6339!important;
  outline-offset:2px!important;
}

/* V10.2.2 — Home-matched masthead on the three bottom-tab secondary pages:
   Meals (history), Progress, and Profile (settings).
   Adjust the logo visually without increasing the header or moving content. */
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .cb-v10-brand .brandmark{
  position:relative!important;
  transform:translateY(7px)!important;
  transform-origin:left center!important;
  min-width:0!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .cb-v10-brand .cb-v10-wordmark{
  display:inline-block!important;
  font-family:var(--cb-athletic)!important;
  font-size:clamp(31px,8.6vw,52px)!important;
  font-weight:900!important;
  font-style:italic!important;
  letter-spacing:-.035em!important;
  line-height:.93!important;
  text-transform:uppercase!important;
  transform:skew(-4deg)!important;
  transform-origin:left center!important;
  white-space:nowrap!important;
  color:#f8f8f8!important;
  -webkit-text-fill-color:#f8f8f8!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .cb-v10-brand .cb-v10-wordmark span{
  color:#ff6339!important;
  -webkit-text-fill-color:#ff6339!important;
}

/* V10.2.3 — ONE identical header for Home, Meals, Progress and Profile.
   The markup is shared in cbUnifiedHeader(). This sheet scopes the exact
   Home masthead geometry to the three primary secondary routes. */
#app .v10a-dashboard .app .header.cb-unified-header .cb-home-menu,
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header .cb-home-menu{
  transform:translateY(-6px)!important;
}
body:has(#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings)) #app{
  padding-top:calc(8px + env(safe-area-inset-top))!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:10px!important;
  min-height:72px!important;
  padding:4px 0 3px!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  position:relative!important;
  z-index:2!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header .cb-home-header-copy{
  position:relative!important;
  transform:translateY(7px)!important;
  min-width:0!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header .brand.cb-athletic-logo{
  display:block!important;
  margin:0!important;
  padding:0!important;
  font-family:var(--cb-athletic)!important;
  font-size:clamp(31px,8.6vw,52px)!important;
  font-weight:900!important;
  font-style:italic!important;
  letter-spacing:-.035em!important;
  line-height:.93!important;
  white-space:nowrap!important;
  text-transform:uppercase!important;
  transform:skew(-4deg)!important;
  transform-origin:left center!important;
  color:#f8f8f8!important;
  -webkit-text-fill-color:#f8f8f8!important;
  text-shadow:0 2px 0 rgba(0,0,0,.6)!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header .brand.cb-athletic-logo span{
  color:#ff6339!important;
  -webkit-text-fill-color:#ff6339!important;
  margin:0 0 0 2px!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header .date{
  margin-top:9px!important;
  font-family:var(--cb-technical)!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.25em!important;
  line-height:1.45!important;
  color:#b5bdc7!important;
  -webkit-text-fill-color:#b5bdc7!important;
  text-transform:uppercase!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header .cb-home-menu{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  flex:0 0 48px!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  padding:8px!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:12px!important;
  color:#ff6339!important;
  -webkit-text-fill-color:#ff6339!important;
  box-shadow:none!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header .cb-home-menu span{
  display:block!important;
  flex:0 0 3px!important;
  width:25px!important;
  height:3px!important;
  min-height:3px!important;
  border-radius:99px!important;
  background:#ff6339!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header .cb-home-menu:focus-visible{
  outline:2px solid #ff6339!important;
  outline-offset:2px!important;
}
@media(max-width:360px){
  #app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header .brand.cb-athletic-logo{font-size:30px!important}
}
@media(max-width:600px) and (max-height:790px) and (orientation:portrait){
  #app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) .header.cb-unified-header{min-height:64px!important}
}

/* V10.2.4 — The first divider and page-title baseline are intentionally
   identical on History (Meals), Progress and Goals (Profile).
   These three routes share the exact same heading markup. */
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) > .cb-primary-page-heading{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  width:100%!important;
  height:72px!important;
  min-height:72px!important;
  box-sizing:border-box!important;
  padding:0 0 15px!important;
  margin:14px 0 20px!important;
  border:0!important;
  border-bottom:1px solid #29313b!important;
  background:transparent!important;
}
#app .cb-v10-page:is(.cb-route-history,.cb-route-progress,.cb-route-settings) > .cb-primary-page-heading > h1{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  font-family:var(--cb-athletic)!important;
  font-size:clamp(36px,10vw,48px)!important;
  font-style:normal!important;
  font-weight:800!important;
  line-height:1.08!important;
  letter-spacing:-.018em!important;
  text-transform:none!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
}

/* V10.3.2 — Describe Food is a first-class third Food Analyzer choice.
   Keep the approved dark theme and camera/upload actions unchanged. */
#app #mealDlg .food-photo-actions .photo-source.describe-source{
  grid-column:1 / -1!important;
  min-height:72px!important;
  background:#211b19!important;
  border-color:#7e4b3c!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
}
#app #mealDlg .food-photo-actions .photo-source.describe-source .photo-source-icon{
  color:#ff966b!important;
  background:#392620!important;
}
#app .cb-route-progress .progress-stat-title .qa-weight svg{
  display:block!important;
  width:28px!important;
  height:28px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:3!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* V10.3.3 — Icon standard: use only the approved Pantry artwork
   for Pantry/Planner actions. Replaces legacy green SVG badges. */
#app .cb-v10-page .cb-approved-icon{
  display:grid!important;
  place-items:center!important;
  flex-shrink:0!important;
  background:rgba(255,99,57,.12)!important;
  color:#ff895d!important;
  border:1px solid rgba(255,99,57,.22)!important;
  border-radius:13px!important;
}
#app .cb-v10-page .cb-approved-icon .cb-approved-pantry-art{
  display:block!important;
  width:88%!important;
  height:88%!important;
  max-width:100%!important;
  object-fit:contain!important;
  flex-shrink:0!important;
}
#app .cb-route-pantry .pantry-primary .cb-approved-icon{
  width:58px!important;
  height:58px!important;
}
#app .cb-route-pantry .pantry-food-icon .cb-approved-icon{
  width:40px!important;
  height:40px!important;
}
#app .cb-route-pantry .pantry-food-icon{
  background:transparent!important;
  color:#ff895d!important;
}
#app .cb-route-planner .pantry-route .cb-approved-icon{
  width:48px!important;
  height:48px!important;
}
#app .cb-route-progress .progress-stat-title .qa-icon{
  display:none!important;
}
/* Meals holds food only; Activity is opened from the Home Activity View all
   and uses the same approved heading and row geometry as the Meals page. */
#app .cb-route-activity .activity-history-day .section-heading-row,
#app .cb-route-history .meals-history-day .section-heading-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
#app .cb-route-activity .activity-history-day .section-heading-row .mini-pill,
#app .cb-route-history .meals-history-day .section-heading-row .mini-pill{
  color:#ff9d70!important;
  -webkit-text-fill-color:#ff9d70!important;
  background:#2a211e!important;
  border:1px solid #543929!important;
  font-variant-numeric:tabular-nums!important;
}

/* V10.3.4 — Generated pantry-meal popup: safe-area-aware height,
   independently scrolling recipe and always-visible Save/Log actions.
   Only this dialog is affected: all dashboard and other modal geometry stays. */
#app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open]{
  box-sizing:border-box!important;
  display:block!important;
  width:min(560px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  height:min(790px,calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))!important;
  max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  min-height:0!important;
  margin:auto!important;
  padding:0!important;
  overflow:hidden!important;
}
#app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] #mealSuggestionDetail{
  display:flex!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
  height:100%!important;
  min-height:0!important;
  width:100%!important;
}
#app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] .meal-detail-head{
  flex:0 0 auto!important;
  box-sizing:border-box!important;
  min-width:0!important;
  padding:17px 17px 12px!important;
  margin:0!important;
  background:#141b23!important;
}
#app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] .meal-detail-head > div{
  flex:1 1 auto!important;
  min-width:0!important;
}
#app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] .meal-detail-head h2{
  overflow-wrap:anywhere!important;
  line-height:1.16!important;
  margin:6px 0 0!important;
}
#app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] .meal-detail-head .dialog-x{
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
}
#app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] .meal-detail-scroll{
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  box-sizing:border-box!important;
  padding:0 17px 16px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  scrollbar-width:thin;
}
#app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] .meal-detail-scroll > *{
  max-width:100%!important;
  min-width:0!important;
}
#app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] .meal-detail-actions{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  width:100%!important;
  padding:12px 17px 14px!important;
  margin:0!important;
  background:#141b23!important;
  border-top:1px solid #35414d!important;
  box-shadow:0 -7px 17px rgba(2,5,9,.2)!important;
}
#app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] .meal-detail-actions button{
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  min-height:50px!important;
  padding:10px 7px!important;
  font-size:clamp(13px,3.8vw,17px)!important;
  line-height:1.16!important;
  font-weight:800!important;
  text-align:center!important;
  white-space:normal!important;
}
@media(max-height:690px){
 #app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] .meal-detail-head{
  padding-top:12px!important;
  padding-bottom:9px!important;
 }
 #app :is(.cb-v10-page,.v10a-dashboard) #mealSuggestionDlg[open] .meal-detail-actions{
  padding-top:9px!important;
  padding-bottom:10px!important;
 }
}

/* V10.3.6 — approved seamless cinematic hero.
   Blend the image backdrop into the existing charcoal page without changing
   artwork dimensions, status position, typography, text or other components. */
#app .v10a-dashboard .app .hero.cb-cinematic-hero{
  background:
    radial-gradient(ellipse 65% 49% at 50% 69%,rgba(231,78,31,.13) 0%,rgba(142,47,28,.06) 43%,transparent 90%),
    #080b0f!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero .mascot{
  -webkit-mask-image:radial-gradient(ellipse 62% 76% at 50% 51%,#000 41%,rgba(0,0,0,.99) 55%,rgba(0,0,0,.86) 64%,rgba(0,0,0,.50) 78%,rgba(0,0,0,.12) 90%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 62% 76% at 50% 51%,#000 41%,rgba(0,0,0,.99) 55%,rgba(0,0,0,.86) 64%,rgba(0,0,0,.50) 78%,rgba(0,0,0,.12) 90%,transparent 100%)!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero .cb-hero-atmosphere{
  background:
    radial-gradient(ellipse 48% 55% at 50% 68%,rgba(251,93,34,.21) 0%,rgba(174,52,26,.09) 48%,transparent 88%),
    radial-gradient(ellipse 40% 43% at 50% 27%,rgba(130,138,151,.06),transparent 90%)!important;
  filter:blur(18px)!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero::before{
  background:radial-gradient(ellipse at 50% 90%,rgba(255,91,33,.20),rgba(202,51,15,.07) 43%,transparent 86%)!important;
  filter:blur(16px)!important;
}

/* V10.3.7 — Full dashboard atmospheric wallpaper.
   The art is a background layer of the scrolling page, not the clipped hero.
   Preserve ALL existing font declarations, sizes, spacing, content and actions. */
#app .v10a-dashboard .app{
 position:relative!important;
 isolation:isolate!important;
}
#app .v10a-dashboard .app > .cb-dashboard-wallpaper{
 position:absolute!important;
 inset:0!important;
 display:block!important;
 width:100%!important;
 height:100%!important;
 min-height:100%!important;
 pointer-events:none!important;
 overflow:visible!important;
 z-index:0!important;
 background:
  radial-gradient(ellipse min(75vw,410px) 270px at 50% 290px,rgba(211,69,22,.16) 0%,rgba(120,38,19,.085) 40%,transparent 100%),
  radial-gradient(ellipse min(85vw,460px) 270px at 50% 500px,rgba(138,46,25,.10),transparent 88%),
  radial-gradient(ellipse min(65vw,330px) 190px at 50% 780px,rgba(74,31,22,.065),transparent 95%);
}
#app .v10a-dashboard .app > .cb-dashboard-wallpaper::before{
 content:"";
 position:absolute;
 left:50%;
 top:95px;
 transform:translateX(-50%);
 width:min(114vw,620px);
 height:590px;
 background:
  radial-gradient(ellipse 45% 28% at 50% 42%,rgba(255,92,29,.20),transparent 93%),
  radial-gradient(ellipse 64% 31% at 50% 68%,rgba(142,43,20,.13),transparent 95%);
 filter:blur(23px);
}
#app .v10a-dashboard .app > .cb-dashboard-wallpaper .cb-wallpaper-bomb{
 display:block!important;
 position:absolute!important;
 left:50%!important;
 top:78px!important;
 transform:translateX(-50%)!important;
 height:calc(clamp(326px,41svh,430px) - 30px)!important;
 max-height:404px!important;
 width:auto!important;
 max-width:84%!important;
 object-fit:contain!important;
 object-position:center bottom!important;
 margin:0!important;
 padding:0!important;
 filter:drop-shadow(0 14px 20px rgba(0,0,0,.55)) drop-shadow(0 0 25px rgba(252,95,37,.13))!important;
 -webkit-mask-image:radial-gradient(ellipse 61% 77% at 50% 50%,#000 48%,rgba(0,0,0,.98) 57%,rgba(0,0,0,.82) 69%,rgba(0,0,0,.42) 83%,transparent 99%)!important;
 mask-image:radial-gradient(ellipse 61% 77% at 50% 50%,#000 48%,rgba(0,0,0,.98) 57%,rgba(0,0,0,.82) 69%,rgba(0,0,0,.42) 83%,transparent 99%)!important;
}
#app .v10a-dashboard .app > :not(.cb-dashboard-wallpaper){
 position:relative;
 z-index:1;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero{
 overflow:visible!important;
 background:transparent!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero::before,
#app .v10a-dashboard .app .hero.cb-cinematic-hero::after{
 display:none!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero .cb-hero-atmosphere{
 display:none!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero > .mascot{
 visibility:hidden!important;
}
@media(max-width:600px) and (orientation:portrait){
 #app .v10a-dashboard .app > .cb-dashboard-wallpaper .cb-wallpaper-bomb{
  top:75px!important;
  height:calc(clamp(190px,calc(100svh - 550px),350px) - 27px)!important;
  max-height:350px!important;
  max-width:96%!important;
 }
}
@media(max-width:600px) and (max-height:790px) and (orientation:portrait){
 #app .v10a-dashboard .app > .cb-dashboard-wallpaper .cb-wallpaper-bomb{
  height:calc(clamp(155px,calc(100svh - 550px),240px) - 27px)!important;
 }
}

/* V10.3.8 — Correct the detached artwork/empty orange patch seen on iPhone.
   All dimensions for existing dashboard content, labels, cards and fonts are
   unchanged; this affects background imagery only, which scrolls with the page. */
#app .v10a-dashboard .app > .cb-dashboard-wallpaper{
 background:
   radial-gradient(ellipse 64% 180px at 50% 455px,rgba(224,82,37,.075),transparent 95%),
   radial-gradient(ellipse 70% 225px at 50% 710px,rgba(116,48,27,.045),transparent 96%)!important;
}
#app .v10a-dashboard .app > .cb-dashboard-wallpaper::before{
 top:160px!important;
 height:410px!important;
 background:
   radial-gradient(ellipse 55% 38% at 50% 59%,rgba(246,91,36,.14),rgba(118,47,27,.04) 55%,transparent 94%),
   radial-gradient(ellipse 53% 42% at 50% 37%,rgba(129,111,105,.038),transparent 96%)!important;
 filter:blur(28px)!important;
}
#app .v10a-dashboard .app > .cb-dashboard-wallpaper .cb-wallpaper-bomb{
 top:123px!important;
 -webkit-mask-image:radial-gradient(ellipse 78% 92% at 50% 51%,#000 48%,rgba(0,0,0,.96) 64%,rgba(0,0,0,.63) 78%,rgba(0,0,0,.25) 91%,transparent 100%)!important;
 mask-image:radial-gradient(ellipse 78% 92% at 50% 51%,#000 48%,rgba(0,0,0,.96) 64%,rgba(0,0,0,.63) 78%,rgba(0,0,0,.25) 91%,transparent 100%)!important;
}
#app .v10a-dashboard .app > .cb-dashboard-wallpaper .cb-wallpaper-smoke{
 display:block!important;
 position:absolute!important;
 z-index:0!important;
 top:24px!important;
 left:50%!important;
 transform:translateX(-50%)!important;
 height:calc(clamp(326px,41svh,430px) - 30px)!important;
 max-height:404px!important;
 width:auto!important;
 max-width:84%!important;
 object-fit:contain!important;
 pointer-events:none!important;
 opacity:.85!important;
 filter:blur(1.2px)!important;
 -webkit-mask-image:linear-gradient(to bottom,#000 2%,#000 28%,rgba(0,0,0,.7) 39%,transparent 57%)!important;
 mask-image:linear-gradient(to bottom,#000 2%,#000 28%,rgba(0,0,0,.7) 39%,transparent 57%)!important;
}
@media(max-width:600px) and (orientation:portrait){
 #app .v10a-dashboard .app > .cb-dashboard-wallpaper .cb-wallpaper-bomb{
  top:clamp(102px,15.8svh,145px)!important;
 }
 #app .v10a-dashboard .app > .cb-dashboard-wallpaper .cb-wallpaper-smoke{
  top:24px!important;
  height:calc(clamp(190px,calc(100svh - 550px),350px) - 27px)!important;
  max-height:350px!important;
  max-width:96%!important;
 }
}
@media(max-width:600px) and (max-height:790px) and (orientation:portrait){
 #app .v10a-dashboard .app > .cb-dashboard-wallpaper .cb-wallpaper-smoke{
  height:calc(clamp(155px,calc(100svh - 550px),240px) - 27px)!important;
 }
}

/* V10.3.9 — Reference-art full-bleed dashboard.
   Use actual smoke, bomb and embers extracted from the user's approved visual,
   not a smaller mascot illustration or a fabricated orange rectangle.
   The wallpaper lives behind the WHOLE scrollable dashboard. No type or
   component geometry changes; all live labels/calculations remain interactive. */
#app .v10a-dashboard .app:has(.hero.exploded) > .cb-dashboard-wallpaper{
 --cb-exploded-scene-top:clamp(8px,calc(100svh - 775px),108px);
 background-image:
  url('caloriebomb-exploded-scene.webp?v=10.3.9'),
  radial-gradient(ellipse 72% 28% at 50% 34%,rgba(103,42,32,.085),transparent 95%),
  linear-gradient(180deg,#080b0f 0%,#080b0f 54%,#080b0f 100%)!important;
 background-position:center var(--cb-exploded-scene-top),center,center!important;
 background-size:calc(100% + 34px) auto,100% 100%,100% 100%!important;
 background-repeat:no-repeat!important;
 background-color:#080b0f!important;
}
#app .v10a-dashboard .app:has(.hero.exploded) > .cb-dashboard-wallpaper::before{
 display:none!important;
}
#app .v10a-dashboard .app:has(.hero.exploded) > .cb-dashboard-wallpaper::after{
 content:""!important;
 display:block!important;
 position:absolute!important;
 inset:0 0 auto!important;
 height:200px!important;
 pointer-events:none!important;
 background-image:url('caloriebomb-exploded-scene.webp?v=10.3.9')!important;
 background-repeat:no-repeat!important;
 background-size:calc(100% + 34px) auto!important;
 background-position:center top!important;
 -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.86) 0%,rgba(0,0,0,.68) 40%,transparent 95%)!important;
 mask-image:linear-gradient(to bottom,rgba(0,0,0,.86) 0%,rgba(0,0,0,.68) 40%,transparent 95%)!important;
 opacity:.75!important;
}
#app .v10a-dashboard .app:has(.hero.exploded) > .cb-dashboard-wallpaper .cb-wallpaper-bomb,
#app .v10a-dashboard .app:has(.hero.exploded) > .cb-dashboard-wallpaper .cb-wallpaper-smoke{
 display:none!important;
}
/* Keep the status overlay in its original hero slot while the cinematic
   artwork fills the page underneath, not the previous clipped hero box. */
#app .v10a-dashboard .app .hero.cb-cinematic-hero.exploded{
 background:transparent!important;
 overflow:visible!important;
}

/* V10.4.0 — cinematic page-level artwork for EVERY hero stage.
   Retain the explicitly approved exploded scene unchanged. The three other
   stages use their existing approved mascot art in seamless atmospheric SVGs.
   Decorative background scrolls with the dashboard; all type/layout unchanged. */
#app .v10a-dashboard .app:has(.hero.armed) > .cb-dashboard-wallpaper,
#app .v10a-dashboard .app:has(.hero.alert) > .cb-dashboard-wallpaper,
#app .v10a-dashboard .app:has(.hero.defused) > .cb-dashboard-wallpaper{
 --cb-scene-top:clamp(8px,calc(100svh - 775px),108px);
 background-position:center var(--cb-scene-top),center!important;
 background-size:calc(100% + 34px) auto,100% 100%!important;
 background-repeat:no-repeat!important;
 background-color:#080b0f!important;
}
#app .v10a-dashboard .app:has(.hero.armed) > .cb-dashboard-wallpaper{
 background-image:url('caloriebomb-armed-scene.svg?v=10.4.0'),linear-gradient(#080b0f,#080b0f)!important;
}
#app .v10a-dashboard .app:has(.hero.alert) > .cb-dashboard-wallpaper{
 background-image:url('caloriebomb-alert-scene.svg?v=10.4.0'),linear-gradient(#080b0f,#080b0f)!important;
}
#app .v10a-dashboard .app:has(.hero.defused) > .cb-dashboard-wallpaper{
 background-image:url('caloriebomb-defused-scene.svg?v=10.4.0'),linear-gradient(#080b0f,#080b0f)!important;
}
#app .v10a-dashboard .app:has(.hero.armed) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.alert) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.defused) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.armed) > .cb-dashboard-wallpaper .cb-wallpaper-bomb,
#app .v10a-dashboard .app:has(.hero.alert) > .cb-dashboard-wallpaper .cb-wallpaper-bomb,
#app .v10a-dashboard .app:has(.hero.defused) > .cb-dashboard-wallpaper .cb-wallpaper-bomb,
#app .v10a-dashboard .app:has(.hero.armed) > .cb-dashboard-wallpaper .cb-wallpaper-smoke,
#app .v10a-dashboard .app:has(.hero.alert) > .cb-dashboard-wallpaper .cb-wallpaper-smoke,
#app .v10a-dashboard .app:has(.hero.defused) > .cb-dashboard-wallpaper .cb-wallpaper-smoke{
 display:none!important;
}

/* V10.4.1 — Combined dashboard cleanup.
   Only the "More" disclosure and its descendants receive refreshed styles.
   The existing buttons, live macro values, fasting logic, and close-day actions remain. */
#app .v10a-dashboard .app .more{
  margin:14px 0 0!important;
  width:100%!important;
  border:0!important;
  background:transparent!important;
}
#app .v10a-dashboard .app .more > summary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  width:max-content!important;
  min-width:108px!important;
  min-height:44px!important;
  margin:0 0 0 auto!important;
  padding:9px 14px!important;
  border:1px solid #35404c!important;
  border-radius:12px!important;
  background:#151b22!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
  font-family:var(--cb-technical)!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  list-style:none!important;
  cursor:pointer!important;
}
#app .v10a-dashboard .app .more > summary::-webkit-details-marker{display:none!important}
#app .v10a-dashboard .app .more > summary::after{
  content:""!important;
  display:block!important;
  width:7px!important;
  height:7px!important;
  border-right:2px solid #ff6339!important;
  border-bottom:2px solid #ff6339!important;
  transform:rotate(45deg) translateY(-2px)!important;
  transition:transform .15s ease!important;
}
#app .v10a-dashboard .app .more[open] > summary{
  border-color:#8e513e!important;
  background:#231b1a!important;
}
#app .v10a-dashboard .app .more[open] > summary::after{
  transform:rotate(225deg) translate(-2px,-1px)!important;
}
#app .v10a-dashboard .app .more > .more-items{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:10px!important;
  padding:15px 0 5px!important;
  margin:0!important;
}
#app .v10a-dashboard .app .more-items > .cb-macros{
  box-sizing:border-box!important;
  grid-column:1 / -1!important;
  display:grid!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 3px!important;
  padding:16px!important;
  background:linear-gradient(155deg,rgba(19,25,32,.97),rgba(11,16,22,.98))!important;
  border:1px solid #2e3944!important;
  border-radius:16px!important;
  box-shadow:none!important;
}
#app .v10a-dashboard .app .more-items .cb-macros .macro-row{
  display:grid!important;
  gap:7px!important;
  margin:0!important;
  min-width:0!important;
}
#app .v10a-dashboard .app .more-items .macro-copy{
  display:flex!important;
  justify-content:space-between!important;
  align-items:baseline!important;
  gap:8px!important;
  margin:0!important;
  font-family:var(--cb-technical)!important;
}
#app .v10a-dashboard .app .more-items .macro-copy b{
  font-weight:800!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
}
#app .v10a-dashboard .app .more-items .macro-copy span{
  color:#b9c3cf!important;
  -webkit-text-fill-color:#b9c3cf!important;
  font-variant-numeric:tabular-nums!important;
}
#app .v10a-dashboard .app .more-items .macro-track{
  display:block!important;
  height:7px!important;
  border:0!important;
  border-radius:99px!important;
  overflow:hidden!important;
  background:#29333e!important;
}
#app .v10a-dashboard .app .more-items .macro-track i{
  display:block!important;
  height:100%!important;
  border-radius:99px!important;
  background:linear-gradient(90deg,#ff5631,#ff884e)!important;
  box-shadow:none!important;
}
#app .v10a-dashboard .app .more-items > button:not(.fast-card){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  min-height:47px!important;
  margin:0!important;
  padding:9px 8px!important;
  border:1px solid #35404c!important;
  border-radius:12px!important;
  background:#151c24!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
  font-family:var(--cb-technical)!important;
  font-weight:800!important;
  line-height:1.15!important;
  text-align:center!important;
  white-space:normal!important;
  box-shadow:none!important;
}
#app .v10a-dashboard .app .more-items > button:not(.fast-card):active{
  background:#26201f!important;
  border-color:#a15a3c!important;
}
#app .v10a-dashboard .app .more-items > .fast-card{
  grid-column:1 / -1!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  width:100%!important;
  min-height:81px!important;
  padding:13px!important;
  margin:3px 0 0!important;
  text-align:left!important;
  border:1px solid #33404b!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#161d25,#10161d)!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
  box-shadow:none!important;
}
#app .v10a-dashboard .app .more-items > .fast-card:is(.eating,.fasting){
  background:linear-gradient(145deg,#211c1b,#141a20)!important;
  border-color:#624337!important;
}
#app .v10a-dashboard .app .more-items .fast-card .fast-icon{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  background:#312520!important;
  color:#ff895d!important;
  -webkit-text-fill-color:#ff895d!important;
}
#app .v10a-dashboard .app .more-items .fast-card span:not(.chevron),
#app .v10a-dashboard .app .more-items .fast-card small{
  color:#b9c3cf!important;
  -webkit-text-fill-color:#b9c3cf!important;
  font-family:var(--cb-technical)!important;
}
#app .v10a-dashboard .app .more-items .fast-card b{
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
  font-family:var(--cb-technical)!important;
}
#app .v10a-dashboard .app .more-items .fast-card .chevron{
  color:#ff895d!important;
  -webkit-text-fill-color:#ff895d!important;
}
#app .v10a-dashboard .app .more-items > .close-day-card{
  grid-column:1 / -1!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  margin:3px 0 0!important;
  padding:16px!important;
  gap:12px!important;
  border:1px solid #35414b!important;
  border-radius:16px!important;
  background:linear-gradient(155deg,#171e25,#11161c)!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
  box-shadow:none!important;
}
#app .v10a-dashboard .app .more-items > .close-day-card.over{
  border-color:#87503d!important;
  background:linear-gradient(155deg,#231b1a,#15161b)!important;
}
#app .v10a-dashboard .app .more-items .close-day-card span,
#app .v10a-dashboard .app .more-items .close-day-card small{
  color:#b9c3cf!important;
  -webkit-text-fill-color:#b9c3cf!important;
  font-family:var(--cb-technical)!important;
}
#app .v10a-dashboard .app .more-items .close-day-card b{
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
  font-family:var(--cb-technical)!important;
}
#app .v10a-dashboard .app .more-items .close-day-card > button{
  box-sizing:border-box!important;
  min-height:44px!important;
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid #ff6339!important;
  border-radius:11px!important;
  background:#ff6339!important;
  color:#080b0f!important;
  -webkit-text-fill-color:#080b0f!important;
  font-family:var(--cb-technical)!important;
  font-weight:900!important;
  box-shadow:none!important;
}
#app .v10a-dashboard .app .more-items .close-day-card.closed > button{
  border-color:#36414d!important;
  background:#222b34!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
}
#app .v10a-dashboard .app .more-items .close-day-card.over > button{
  border-color:#f27a4e!important;
  background:#f27a4e!important;
}
@media(max-width:390px){
  #app .v10a-dashboard .app .more-items > .close-day-card{
    grid-template-columns:1fr!important;
  }
  #app .v10a-dashboard .app .more-items .close-day-card > button{width:100%!important}
}

/* V10.4.4 — Cinematic end-of-day results.
   Reuse approved full-page bomb scenes for all end-of-day outcomes.
   The legacy red/green rounded card, square icon, and blue CTA are retired;
   calculations, saved status, streaks, and result action remain unchanged. */
body > .game-overlay.cb-result-v10{
  inset:0!important;z-index:9999!important;
  display:flex!important;align-items:stretch!important;justify-content:center!important;
  width:100%!important;height:100svh!important;height:100dvh!important;
  padding:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;
  background:#080b0f!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  color:#f1f3f5!important;-webkit-text-fill-color:#f1f3f5!important;
}
body > .game-overlay.cb-result-v10 .game-overlay-scene{
  position:absolute;inset:0;pointer-events:none;
  background-color:#080b0f;
  background-repeat:no-repeat!important;
  background-size:min(640px,calc(100% + 34px)) auto!important;
  background-position:center clamp(72px,11svh,132px)!important;
}
body > .game-overlay.cb-result-v10.boom .game-overlay-scene{
  background-image:url('caloriebomb-exploded-scene.webp?v=10.4.4')!important;
}
body > .game-overlay.cb-result-v10.win .game-overlay-scene{
  background-image:url('caloriebomb-defused-scene.svg?v=10.4.4')!important;
}
body > .game-overlay.cb-result-v10.closed .game-overlay-scene{
  background-image:url('caloriebomb-armed-scene.svg?v=10.4.4')!important;
}
body > .game-overlay.cb-result-v10 .game-overlay-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,11,15,.3) 0%,transparent 23%,transparent 44%,rgba(8,11,15,.62) 65%,#080b0f 84%,#080b0f 100%);
}
body > .game-overlay.cb-result-v10 .game-overlay-content{
  position:relative;z-index:1;
  width:min(100%,520px);min-height:100%;
  display:flex;flex-direction:column;align-items:stretch;
  padding:calc(24px + env(safe-area-inset-top)) 25px calc(24px + env(safe-area-inset-bottom));
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  text-align:center;
}
body > .game-overlay.cb-result-v10 .game-overlay-brand{
  flex-shrink:0;align-self:flex-start;
  font-family:var(--cb-athletic),Impact,sans-serif;
  font-size:clamp(28px,8vw,38px);font-weight:900;font-style:italic;
  line-height:1;letter-spacing:-.035em;text-transform:uppercase;
  transform:skew(-4deg);color:#f1f3f5!important;-webkit-text-fill-color:#f1f3f5!important;
  text-shadow:0 3px 12px #080b0f;
}
body > .game-overlay.cb-result-v10 .game-overlay-brand span{
  color:#ff6339!important;-webkit-text-fill-color:#ff6339!important;
}
body > .game-overlay.cb-result-v10 .game-overlay-spacer{
  flex:1 1 auto;min-height:235px;pointer-events:none;
}
body > .game-overlay.cb-result-v10 .game-overlay-result{
  flex-shrink:0;width:100%;
  padding:0 0 2px;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
body > .game-overlay.cb-result-v10 .game-overlay-kicker{
  font-family:var(--cb-technical),Arial,sans-serif;
  font-size:13px;font-weight:800;letter-spacing:.28em;line-height:1.2;
  color:#ff9b72!important;-webkit-text-fill-color:#ff9b72!important;
  text-transform:uppercase;
}
body > .game-overlay.cb-result-v10 .game-overlay-title{
  margin:9px 0 10px!important;
  font-family:var(--cb-athletic),Impact,sans-serif!important;
  font-size:clamp(43px,13vw,63px)!important;
  font-style:italic!important;font-weight:900!important;line-height:.99!important;
  letter-spacing:.005em!important;text-transform:uppercase!important;
  color:#ff6339!important;-webkit-text-fill-color:#ff6339!important;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
body > .game-overlay.cb-result-v10 .game-overlay-sub{
  margin:0 auto 23px!important;max-width:345px!important;
  font-family:var(--cb-technical),Arial,sans-serif!important;
  font-size:clamp(16px,4.3vw,19px)!important;
  font-weight:600!important;line-height:1.4!important;
  color:#c9d0d7!important;-webkit-text-fill-color:#c9d0d7!important;
}
body > .game-overlay.cb-result-v10 .game-overlay-continue{
  display:block!important;width:100%!important;
  min-height:58px!important;margin:0!important;padding:13px 22px!important;
  border:1px solid #ff6339!important;border-radius:13px!important;
  background:#ff6339!important;
  color:#080b0f!important;-webkit-text-fill-color:#080b0f!important;
  font-family:var(--cb-technical),Arial,sans-serif!important;
  font-size:21px!important;font-weight:900!important;letter-spacing:.03em!important;
  box-shadow:0 10px 32px rgba(0,0,0,.28)!important;
  cursor:pointer;
}
body > .game-overlay.cb-result-v10 .game-overlay-continue:focus-visible{
  outline:3px solid #fff!important;outline-offset:3px!important;
}
@media(max-height:700px){
  body > .game-overlay.cb-result-v10 .game-overlay-content{
    padding-top:calc(12px + env(safe-area-inset-top));
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  body > .game-overlay.cb-result-v10 .game-overlay-spacer{min-height:160px}
  body > .game-overlay.cb-result-v10 .game-overlay-sub{margin-bottom:14px!important}
  body > .game-overlay.cb-result-v10 .game-overlay-scene{background-position:center 65px!important}
}
@media(prefers-reduced-motion:reduce){
  body > .game-overlay.cb-result-v10{animation:none!important}
}

/* V10.4.5 — Armed hero is an immersive page-level scene, not an image panel.
   Preserve the approved armed bomb art and every dashboard control. The source
   SVG contains an opaque canvas: place it on a feathered wallpaper pseudo-layer
   so its original bottom edge cannot form a visible rectangular cut-off.
   Extend only its ambient light into the rest of the charcoal dashboard. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.armed) > .cb-dashboard-wallpaper{
  background:#080b0f!important;
  overflow:visible!important;
  isolation:isolate!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.armed) > .cb-dashboard-wallpaper::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:var(--cb-scene-top)!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:calc(100% + 72px)!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:889 / 1250!important;
  z-index:1!important;
  pointer-events:none!important;
  background:url('caloriebomb-armed-scene.svg?v=10.4.5') center top / 100% 100% no-repeat!important;
  filter:none!important;
  opacity:1!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.96) 69%,rgba(0,0,0,.68) 77%,rgba(0,0,0,.27) 84%,transparent 93%)!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.96) 69%,rgba(0,0,0,.68) 77%,rgba(0,0,0,.27) 84%,transparent 93%)!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.armed) > .cb-dashboard-wallpaper::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:calc(var(--cb-scene-top) + 130px)!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:calc(100% + 150px)!important;
  height:clamp(640px,94svh,990px)!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse 63% 42% at 50% 37%,rgba(174,65,30,.21) 0%,rgba(100,38,23,.095) 50%,transparent 100%),
    radial-gradient(ellipse 70% 40% at 50% 68%,rgba(117,47,29,.085),transparent 100%)!important;
  filter:blur(24px)!important;
  opacity:1!important;
}
/* Old hero content remains a transparent positioning layer for the existing
   side labels, with all bomb imagery owned by the wallpaper behind it. */
#app .v10a-dashboard .app .hero.cb-cinematic-hero.armed{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
@media(max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.armed) > .cb-dashboard-wallpaper::before{
    width:calc(100% + 72px)!important;
  }
  #app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.armed) > .cb-dashboard-wallpaper::after{
    width:calc(100% + 120px)!important;
  }
}

/* V10.4.6 — Approved four-state cinematic void scenes.
   Each state is a standalone, text-free image containing its own character,
   localized smoke/light/ground and natural charcoal fade. The old mascot SVG,
   glow pseudo-elements and duplicate wallpaper figures must not render.
   Dashboard data, positions, buttons and all user interactions remain intact. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.armed) > .cb-dashboard-wallpaper,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper{
  --cb-v1046-scene-top:clamp(55px,calc(100svh - 720px),110px);
  background-color:#080b0f!important;
  background-repeat:no-repeat!important;
  background-position:center var(--cb-v1046-scene-top),center!important;
  background-size:calc(100% + 34px) auto,100% 100%!important;
  overflow:visible!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.armed) > .cb-dashboard-wallpaper{
  background-image:url('caloriebomb-armed-scene-full.webp?v=10.4.6'),linear-gradient(#080b0f,#080b0f)!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper{
  background-image:url('caloriebomb-alert-scene-full.webp?v=10.4.6'),linear-gradient(#080b0f,#080b0f)!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper{
  background-image:url('caloriebomb-exploded-scene-full.webp?v=10.4.6'),linear-gradient(#080b0f,#080b0f)!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper{
  background-image:url('caloriebomb-defused-scene-full.webp?v=10.4.6'),linear-gradient(#080b0f,#080b0f)!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.armed) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.armed) > .cb-dashboard-wallpaper::after,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper::after,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::after,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper::after{
  display:none!important;
  content:none!important;
}
#app .v10a-dashboard .app > .cb-dashboard-wallpaper .cb-wallpaper-bomb,
#app .v10a-dashboard .app > .cb-dashboard-wallpaper .cb-wallpaper-smoke{
  display:none!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero.armed,
#app .v10a-dashboard .app .hero.cb-cinematic-hero.alert,
#app .v10a-dashboard .app .hero.cb-cinematic-hero.exploded,
#app .v10a-dashboard .app .hero.cb-cinematic-hero.defused{
  background:transparent!important;
  overflow:visible!important;
  border:0!important;
  box-shadow:none!important;
}
#app .v10a-dashboard .app .hero.cb-cinematic-hero > .mascot,
#app .v10a-dashboard .app .hero.cb-cinematic-hero > .cb-hero-atmosphere{
  display:none!important;
}
/* Finalized-day results use the same approved fire/defused/armed scenes.
   These are decorative art backgrounds; dialog controls remain foreground. */
body > .game-overlay.cb-result-v10.boom .game-overlay-scene{
  background-image:url('caloriebomb-exploded-scene-full.webp?v=10.4.6')!important;
}
body > .game-overlay.cb-result-v10.win .game-overlay-scene{
  background-image:url('caloriebomb-defused-scene-full.webp?v=10.4.6')!important;
}
body > .game-overlay.cb-result-v10.closed .game-overlay-scene{
  background-image:url('caloriebomb-armed-scene-full.webp?v=10.4.6')!important;
}

/* V10.4.7 — Approved net readout placement only.
   The cinematic hero/ground, full-page scene, equation card and all actions
   keep their exact existing geometry. These two lines form a fixed stack
   in the already reserved net-calorie space. */
#app .v10a-dashboard .app .net.cb-net-display{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  z-index:2!important;
}
#app .v10a-dashboard .app .net.cb-net-display > strong{
  order:0!important;
  position:relative!important;
  transform:translateY(-4px)!important;
}
#app .v10a-dashboard .app .net.cb-net-display > small{
  order:1!important;
  position:relative!important;
  transform:translateY(3px)!important;
}


/* V10.4.8 — Approved net readout clearance.
   The live numeric value sits BELOW the character's shoes, with the
   NET CALORIES caption immediately below it. Never overlay the shoes.
   Keep the equation, artwork, data bindings and action cards unchanged. */
@media(max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app .net.cb-net-display{
    margin-top:clamp(44px,7svh,72px)!important;
    margin-bottom:8px!important;
    gap:0!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display > strong{
    order:0!important;
    transform:none!important;
    line-height:.85!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display > small{
    order:1!important;
    transform:none!important;
    margin-top:7px!important;
    margin-bottom:0!important;
  }
}


/* V10.4.9 — Mobile first-screen fit.
   Reserve space for all four analyzer cards above the fixed bottom navigation.
   Scale the decorative cinematic wallpaper (not its content), reclaim excess
   hero spacer, and keep the numeric net readout above its caption. */
@media(max-width:600px) and (orientation:portrait) and (max-height:950px){
  #app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.armed) > .cb-dashboard-wallpaper,
  #app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper,
  #app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper,
  #app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper{
    background-size:calc((100% + 34px) * .88) auto,100% 100%!important;
  }
  #app .v10a-dashboard .app .hero.cb-cinematic-hero{
    height:clamp(135px,calc(100svh - 585px),315px)!important;
    min-height:0!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display{
    margin-top:clamp(12px,2svh,20px)!important;
    margin-bottom:4px!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display > strong{
    order:0!important;
    transform:none!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display > small{
    order:1!important;
    transform:none!important;
    margin-top:5px!important;
  }
  #app .v10a-dashboard .app .cb-calorie-panel{
    padding-top:8px!important;
    padding-bottom:8px!important;
    margin-bottom:4px!important;
  }
  #app .v10a-dashboard .app .tools{
    padding-top:2px!important;
    padding-bottom:2px!important;
  }
  #app .v10a-dashboard .app .tool,
  #app .v10a-dashboard .app .tool+.tool{
    min-height:99px!important;
    padding:5px 2px!important;
    gap:3px!important;
  }
  #app .v10a-dashboard .app .tool img{
    height:39px!important;
    min-height:0!important;
  }
}


/* V10.4.10 — Four quick-action cards end the initial dashboard viewport.
   The journal/weekly sections follow on scroll, never crowd the card row. */
@media(max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app .tools{
    margin-bottom:clamp(85px,12svh,125px)!important;
  }
  #app .v10a-dashboard .app .tool,
  #app .v10a-dashboard .app .tool+.tool{
    min-height:112px!important;
  }
  #app .v10a-dashboard .app .tool img{
    height:44px!important;
  }
}


/* V10.4.11 — Move the entire net-to-analyzers stack DOWN together.
   Keep the cinematic hero fixed. Undo v10.4.10's empty space below
   the four cards; place that spacing ABOVE the net value instead.
   Equation and cards keep their existing internal geometry. */
@media(max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app .net.cb-net-display{
    margin-top:clamp(66px,9svh,92px)!important;
  }
  #app .v10a-dashboard .app .tools{
    margin-bottom:0!important;
  }
}


/* V10.4.12 — Match the breathing room above and below the four-card row.
   No movement to hero, net readout, equation or card contents. */
@media(max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app .tools{
    margin-bottom:6px!important;
  }
}


/* V10.4.13 — Correct fixed-navigation overlap, not just document margin.
   Move the complete readout/equation/analyzer group upward 24px in normal
   flow so the bottom edge of every card clears the fixed navigation.
   Keep the artwork, card heights, labels and internal spacing unchanged. */
@media(max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app .net.cb-net-display{
    margin-top:calc(clamp(66px,9svh,92px) - 24px)!important;
  }
  #app .v10a-dashboard .app .tools{
    margin-bottom:12px!important;
  }
}


/* V10.4.14 — Hide the alert artwork's visible left seam.
   A narrow, feathered void-colored overlay sits only on the wallpaper.
   Hero position, scene scale, live readout, equation, and action cards
   remain unchanged. Side labels stay above the wallpaper. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:105px!important;
  left:0!important;
  right:auto!important;
  width:80px!important;
  height:760px!important;
  transform:none!important;
  z-index:2!important;
  pointer-events:none!important;
  background:linear-gradient(to right,#080b0f 0%,#080b0f 54%,rgba(8,11,15,.85) 67%,transparent 100%)!important;
  filter:none!important;
  opacity:1!important;
}

/* V10.4.15 — Restore full Alert smoke/fire/rubble.
   Replace the overly wide v10.4.14 obscuring mask with a hairline seam
   cover at the original image's left edge only. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper::before{
  left:17px!important;
  right:auto!important;
  top:105px!important;
  width:2px!important;
  height:760px!important;
  background:#080b0f!important;
  filter:none!important;
}


/* V10.4.16 — ROOT CAUSE: the v10.4.9 mobile 88% scene width
   exposed the image's vertical left/right edges at ~32px.
   Return ALERT to its original full-bleed width. Disable both
   v10.4.14/15 masking attempts entirely. Do not alter layout. */
@media(max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper{
    background-size:calc(100% + 34px) auto,100% 100%!important;
  }
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper::before{
  display:none!important;
  content:none!important;
}


/* V10.4.17 — Alert artwork at approved 88% scale, with soft side fades.
   Render the image on its own feathered pseudo-layer so its hard edges
   disappear into the page void. No change to hero/readout/card geometry. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper{
  background:#080b0f!important;
  isolation:isolate!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:var(--cb-v1046-scene-top)!important;
  transform:translateX(-50%)!important;
  width:calc((100% + 34px) * .88)!important;
  height:100%!important;
  max-width:none!important;
  background:url('caloriebomb-alert-scene-full.webp?v=10.4.6') center top / 100% auto no-repeat!important;
  opacity:1!important;
  filter:none!important;
  pointer-events:none!important;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%)!important;
  mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%)!important;
  z-index:1!important;
}


/* V10.4.18 — Suppress only the 1px left boundary visible at x≈33px.
   The scene itself stays at the approved 88% scale. Feather its
   lateral alpha more broadly and cover the precise source seam,
   without obscuring the surrounding smoke or rubble. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper::before{
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 6%,#000 14%,#000 88%,transparent 100%)!important;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 6%,#000 14%,#000 88%,transparent 100%)!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:var(--cb-v1046-scene-top)!important;
  left:calc(50% - (100% + 34px) * .44)!important;
  right:auto!important;
  width:3px!important;
  height:clamp(520px,90svh,850px)!important;
  background:#080b0f!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  pointer-events:none!important;
  z-index:2!important;
}


/* V10.4.19 — Restore the user-approved full-bleed ALERT scene.
   Keep the scene's full width and move only the background art upward
   so the shoes clear the live net calorie number. Remove ALL later
   alert-only pseudo-layer/mask experiments. Layout stays untouched. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper{
  --cb-alert-fullbleed-top:calc(var(--cb-v1046-scene-top) - 36px);
  background-image:url('caloriebomb-alert-scene-full.webp?v=10.4.6'),linear-gradient(#080b0f,#080b0f)!important;
  background-position:center var(--cb-alert-fullbleed-top),center!important;
  background-size:calc(100% + 34px) auto,100% 100%!important;
  background-repeat:no-repeat!important;
  background-color:#080b0f!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.alert) > .cb-dashboard-wallpaper::after{
  content:none!important;
  display:none!important;
}


/* V10.4.20 — Defused dashboard only: match approved Alert full-bleed
   composition, lifting the scenery 36px to keep the shoes above the
   net value. The end-of-day celebration overlay is not changed. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper{
  background-image:url('caloriebomb-defused-scene-full.webp?v=10.4.6'),linear-gradient(#080b0f,#080b0f)!important;
  background-position:center calc(var(--cb-v1046-scene-top) - 36px),center!important;
  background-size:calc(100% + 34px) auto,100% 100%!important;
  background-repeat:no-repeat!important;
  background-color:#080b0f!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper::after{
  content:none!important;
  display:none!important;
}


/* V10.4.21 — Defused only: blend the source image's bright top
   boundary into the charcoal header. Full-bleed image scale,
   vertical position, shoes and dashboard layout remain unchanged.
   A short gradient is anchored to the image top, not the screen. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:calc(var(--cb-v1046-scene-top) - 39px)!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:65px!important;
  background:linear-gradient(to bottom,#080b0f 0%,#080b0f 5%,rgba(8,11,15,.94) 22%,rgba(8,11,15,.48) 57%,transparent 100%)!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  pointer-events:none!important;
  z-index:2!important;
}


/* V10.4.22 — The bright Defused seam is at the image's TOP edge.
   Blend on the same background layer and same background-position,
   rather than an absolutely positioned overlay whose top can drift.
   This leaves the scene scale, shoes and dashboard geometry intact. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper{
  background-image:
    linear-gradient(to bottom,#080b0f 0px,#080b0f 7px,rgba(8,11,15,.96) 15px,rgba(8,11,15,.7) 29px,transparent 64px),
    url('caloriebomb-defused-scene-full.webp?v=10.4.6'),
    linear-gradient(#080b0f,#080b0f)!important;
  background-position:
    center calc(var(--cb-v1046-scene-top) - 36px),
    center calc(var(--cb-v1046-scene-top) - 36px),
    center!important;
  background-size:
    100% 66px,
    calc(100% + 34px) auto,
    100% 100%!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper::after{
  content:none!important;
  display:none!important;
}


/* V10.4.23 — Solid seam removal for Defused, replacing ineffective fades.
   The source image contains a bright topmost edge. Paint over only its
   first 18px at the exact background start, leaving all other pixels
   and the approved dashboard geometry untouched. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper{
  background-image:url('caloriebomb-defused-scene-full.webp?v=10.4.6'),linear-gradient(#080b0f,#080b0f)!important;
  background-position:center calc(var(--cb-v1046-scene-top) - 36px),center!important;
  background-size:calc(100% + 34px) auto,100% 100%!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(var(--cb-v1046-scene-top) - 36px)!important;
  width:100%!important;
  height:19px!important;
  background:#080b0f!important;
  border:0!important;
  box-shadow:none!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  pointer-events:none!important;
  z-index:3!important;
}


/* V10.4.24 — Fix the SOURCE LAYER, not an overlay.
   The defused image has an unwanted luminous top boundary.
   Mask the entire decorative wallpaper from transparent at the
   image start to opaque 72px below it. This removes the line and
   orange bleed, without changing image position/scale or content
   geometry. Only the defused dashboard wallpaper is affected. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper{
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0px,
    transparent calc(var(--cb-v1046-scene-top) - 36px),
    rgba(0,0,0,0) calc(var(--cb-v1046-scene-top) - 26px),
    #000 calc(var(--cb-v1046-scene-top) + 38px),
    #000 100%)!important;
  mask-image:linear-gradient(to bottom,
    transparent 0px,
    transparent calc(var(--cb-v1046-scene-top) - 36px),
    rgba(0,0,0,0) calc(var(--cb-v1046-scene-top) - 26px),
    #000 calc(var(--cb-v1046-scene-top) + 38px),
    #000 100%)!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper::after{
  content:none!important;
  display:none!important;
}


/* V10.4.25 — Defused: isolate the artwork on its OWN fading layer.
   The earlier wallpaper mask was applied to a full-page background stack;
   instead remove that stack and render only the scene in ::before, with
   a generous 110px soft fade at its top edge. No horizontal boundary,
   no orange bleed, no additional mascot, and no layout changes. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper{
  background:#080b0f!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  pointer-events:none!important;
  background-image:url('caloriebomb-defused-scene-full.webp?v=10.4.6')!important;
  background-position:center calc(var(--cb-v1046-scene-top) - 36px)!important;
  background-size:calc(100% + 34px) auto!important;
  background-repeat:no-repeat!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0px,
    transparent calc(var(--cb-v1046-scene-top) - 36px),
    rgba(0,0,0,0) calc(var(--cb-v1046-scene-top) + 18px),
    #000 calc(var(--cb-v1046-scene-top) + 105px),
    #000 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0px,
    transparent calc(var(--cb-v1046-scene-top) - 36px),
    rgba(0,0,0,0) calc(var(--cb-v1046-scene-top) + 18px),
    #000 calc(var(--cb-v1046-scene-top) + 105px),
    #000 100%)!important;
  z-index:0!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .cb-dashboard-wallpaper::after{
  content:none!important;
  display:none!important;
}


/* V10.4.26 — Defused header boundary cleanup.
   The remaining thin horizontal rule is at the masthead/scene junction,
   not the mascot. Neutralize any header border/shadow and cover the
   4px seam directly below the header, without moving header or art. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .header.cb-unified-header{
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  outline:0!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .header.cb-unified-header::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:calc(-1 * (100vw - 100%) / 2)!important;
  right:auto!important;
  width:100vw!important;
  height:5px!important;
  bottom:-5px!important;
  background:#080b0f!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  z-index:5!important;
}


/* V10.4.27 — Defused: remove the remaining 4px masthead seam.
   Validated placement against the user's screenshot before deployment.
   Replace the short hard-edged V10.4.26 strip with a continuous matte:
   solid charcoal across the boundary, then a gradual fade into the
   scene. No hard bottom edge; no change to the art or layout. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .header.cb-unified-header::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:calc(100% - 10px)!important;
  bottom:auto!important;
  left:calc(-1 * (100vw - 100%) / 2)!important;
  right:auto!important;
  width:100vw!important;
  height:62px!important;
  background:linear-gradient(to bottom,
    #080b0f 0px,#080b0f 26px,
    rgba(8,11,15,.98) 31px,
    rgba(8,11,15,.72) 43px,
    rgba(8,11,15,0) 62px)!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  pointer-events:none!important;
  transform:none!important;
  z-index:0!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .header.cb-unified-header .cb-home-header-copy,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.defused) > .header.cb-unified-header .cb-home-menu{
  position:relative!important;
  z-index:1!important;
}

/* v10.4.47: hide the source's top border, then finish the fade above
   the fuse. Scale both stops with the image (889px source width), rather
   than fixed offsets that mask the character on smaller screens. */
body > .game-overlay.cb-result-v10.win .game-overlay-scene{
 --cb-defused-result-top:clamp(72px,11svh,132px);
 background-position:center var(--cb-defused-result-top)!important;
 -webkit-mask-image:linear-gradient(to bottom,
   transparent calc(var(--cb-defused-result-top) + min(96px,calc(15vw + 5.1px))),
   black calc(var(--cb-defused-result-top) + min(172.8px,calc(27vw + 9.18px))),
   black 100%)!important;
 mask-image:linear-gradient(to bottom,
   transparent calc(var(--cb-defused-result-top) + min(96px,calc(15vw + 5.1px))),
   black calc(var(--cb-defused-result-top) + min(172.8px,calc(27vw + 9.18px))),
   black 100%)!important;
}
body > .game-overlay.cb-result-v10.win .game-overlay-scene::after{
 background:linear-gradient(to bottom,transparent 0%,transparent 44%,rgba(8,11,15,.62) 65%,#080b0f 84%,#080b0f 100%);
}
@media(max-height:700px){
 body > .game-overlay.cb-result-v10.win .game-overlay-scene{
  --cb-defused-result-top:65px;
 }
}


/* V10.4.29 — Exploded dashboard only. The artwork has the same hard
   image boundary as the defused scene, but 45px below the masthead.
   Render the full-bleed image on its own feathered layer so its top
   and side edges cannot form a visible rectangular panel. No changes
   to the dashboard's typography, readout, cards or navigation. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper{
  background:#080b0f!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  pointer-events:none!important;
  background-image:url('caloriebomb-exploded-scene-full.webp?v=10.4.6')!important;
  background-position:center var(--cb-v1046-scene-top)!important;
  background-size:calc(100% + 34px) auto!important;
  background-repeat:no-repeat!important;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0px,transparent 255px,
    #000 340px,#000 100%)!important;
  mask-image:linear-gradient(to bottom,
    transparent 0px,transparent 255px,
    #000 340px,#000 100%)!important;
  z-index:0!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::after{
  content:none!important;
  display:none!important;
}


/* V10.4.30 — Exploded dashboard composition: restore hero above number.
   V10.4.29's scene top is too low, leaving empty space and placing
   the feet across the net readout. Move ONLY the background art up
   92px; keep full-bleed width and feather the upper edge gently.
   All foreground layout and other hero states remain unchanged. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::before{
  background-position:center calc(var(--cb-v1046-scene-top) - 92px)!important;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0px,transparent 216px,
    rgba(0,0,0,.45) 252px,
    #000 316px,#000 100%)!important;
  mask-image:linear-gradient(to bottom,
    transparent 0px,transparent 216px,
    rgba(0,0,0,.45) 252px,
    #000 316px,#000 100%)!important;
}


/* V10.4.31 — Exploded uses the APPROVED Alert full-bleed technique.
   Remove the v10.4.29/30 pseudo-image and its dark mask entirely.
   Shift the actual full-size background above the masthead boundary
   so smoke/flames extend naturally to the top; keep the character
   clear of the fixed net calorie readout. No foreground changes. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper{
  background-image:url('caloriebomb-exploded-scene-full.webp?v=10.4.6'),linear-gradient(#080b0f,#080b0f)!important;
  background-position:center calc(var(--cb-v1046-scene-top) - 112px),center!important;
  background-size:calc(100% + 34px) auto,100% 100%!important;
  background-repeat:no-repeat!important;
  background-color:#080b0f!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::after{
  content:none!important;
  display:none!important;
}


/* V10.4.32 — Exploded composition: reduce the illustrated bomb ~10%
   without leaving visible image edges. Ambient fire fills the full
   width, while the inset illustration is feathered on every side.
   Top boundary is transparent until the image's smoky interior.
   Dashboard foreground and other scenes are not modified. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper{
  background:
    radial-gradient(ellipse 100% 39% at 50% 40%,rgba(92,29,17,.4) 0%,rgba(43,16,14,.24) 63%,transparent 100%),
    #080b0f!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-image:url('caloriebomb-exploded-scene-full.webp?v=10.4.6')!important;
  background-position:center 72px!important;
  background-size:calc((100% + 34px) * .90) auto!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  pointer-events:none!important;
  z-index:0!important;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0px,#000 34px,#000 calc(100% - 34px),transparent 100%),
    linear-gradient(to bottom,transparent 0px,transparent 100px,#000 205px,#000 100%)!important;
  mask-image:
    linear-gradient(to right,transparent 0px,#000 34px,#000 calc(100% - 34px),transparent 100%),
    linear-gradient(to bottom,transparent 0px,transparent 100px,#000 205px,#000 100%)!important;
  -webkit-mask-composite:source-in!important;
  mask-composite:intersect!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::after{
  content:none!important;
  display:none!important;
}


/* V10.4.33 — Exploded: full-width scene, top-edge seam concealed.
   Undo V10.4.32's 90% shrink and lateral masks. The artwork is once
   again full-bleed like approved Alert. Mask ONLY the source image's
   top edge, which falls around y=100 on the target iPhone, with a
   short 55px blend. Never mask the left or right sides. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper{
  background:#080b0f!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-image:url('caloriebomb-exploded-scene-full.webp?v=10.4.6')!important;
  background-position:center calc(var(--cb-v1046-scene-top) - 112px)!important;
  background-size:calc(100% + 34px) auto!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  pointer-events:none!important;
  z-index:0!important;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0px,transparent 102px,
    #000 158px,#000 100%)!important;
  mask-image:linear-gradient(to bottom,
    transparent 0px,transparent 102px,
    #000 158px,#000 100%)!important;
  -webkit-mask-composite:source-over!important;
  mask-composite:add!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::after{
  content:none!important;
  display:none!important;
}


/* V10.4.34 — Safari website / installed PWA parity.
   Mobile Safari's browser chrome reduces 100svh by ~100px. Previous
   100svh-585px hero sizing therefore collapsed the scene spacer,
   pulling the net readout up over the bomb and exposing the journal
   above the bottom navigation. In browser mode reserve the same hero
   geometry as standalone, independent of browser toolbar height.
   Do not change any standalone/installed layout or approved art. */
@media (display-mode:browser) and (max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app .hero.cb-cinematic-hero{
    height:clamp(250px,69vw,305px)!important;
    min-height:clamp(250px,69vw,305px)!important;
    flex-shrink:0!important;
  }
  #app .v10a-dashboard .app .net.cb-net-display{
    margin-top:calc(clamp(66px,9svh,92px) - 24px)!important;
  }
  #app .v10a-dashboard .app .tools{
    margin-bottom:max(20px,env(safe-area-inset-bottom))!important;
  }
  #app .v10a-dashboard .app{
    padding-bottom:calc(108px + env(safe-area-inset-bottom))!important;
  }
}

/* V10.4.36 — Approved Exploded artwork, full bleed from the top.
   The artwork includes the smoke, character and ground at their approved scale.
   Remove the old masked pseudo-image; preserve all foreground geometry. */
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper{
  background-image:url('caloriebomb-exploded-scene-approved.webp?v=10.4.36'),linear-gradient(#080b0f,#080b0f)!important;
  background-position:center -36px,center!important;
  background-size:calc(100% + 34px) auto,100% 100%!important;
  background-repeat:no-repeat!important;
  background-color:#080b0f!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::before,
#app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper::after{
  content:none!important;
  display:none!important;
}

/* V10.4.37 — Authentication shares the approved full-scene artwork. */
#app:has(.cb-login-wrap){
  max-width:620px!important;
  background-image:url('caloriebomb-armed-scene-full.webp?v=10.4.6')!important;
  background-position:center -28px!important;
  background-size:100% auto!important;
  background-repeat:no-repeat!important;
}
#app .login-wrap.cb-login-wrap{
  max-width:540px!important;
  position:relative!important;
}
#app .cb-login-brand{position:relative!important;z-index:1!important;}
#app .cb-login-logo{
  font-size:clamp(31px,8.6vw,52px)!important;
  line-height:.98!important;
  transform:skew(-4deg);
  transform-origin:left center;
}
#app .cb-login-tag{
  color:#b5bdc7!important;
  -webkit-text-fill-color:#b5bdc7!important;
}
#app .cb-login-hero,
#app .cb-login-wrap:focus-within .cb-login-hero{
  height:clamp(230px,70vw,320px)!important;
  margin:0 auto 12px!important;
  background:none!important;
  overflow:visible!important;
  transition:none!important;
}
#app .cb-login-mascot,
#app .cb-login-glow{display:none!important;}
#app .cb-login-card{
  position:relative!important;
  z-index:1!important;
  background:linear-gradient(160deg,rgba(20,26,33,.97),rgba(12,17,24,.98))!important;
  border:1px solid #303b47!important;
  box-shadow:0 18px 48px #0005!important;
}
#app .cb-login-card h2{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  font-size:26px!important;
  font-weight:800!important;
  line-height:1.15!important;
  letter-spacing:-.025em!important;
}
@media(min-width:601px){
  #app:has(.cb-login-wrap){background-position:center -86px!important;background-size:540px auto!important;}
}

/* V10.4.38 — Readout-side mottos; Exploded message above the character. */
#app .v10a-dashboard .app .net.cb-net-display{position:relative!important;}
#app .v10a-dashboard .app .cb-net-motto{
  position:absolute;
  top:12px;
  width:70px;
  font-family:var(--cb-technical);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.12em;
  color:#c3ccd6;
  -webkit-text-fill-color:#c3ccd6;
  text-shadow:0 2px 5px #000;
}
#app .v10a-dashboard .app .cb-net-motto-left{left:0;text-align:left;}
#app .v10a-dashboard .app .cb-net-motto-right{right:0;text-align:right;}
#app .v10a-dashboard .app .hero.cb-cinematic-hero .cb-game-over{
  position:absolute;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:90%;
  z-index:3;
  text-align:center;
  text-shadow:0 2px 8px #000,0 0 20px #000;
  pointer-events:none;
}
#app .v10a-dashboard .app .cb-game-over b{
  display:block;
  font-family:var(--cb-athletic);
  font-size:clamp(26px,7vw,36px);
  line-height:1;
  font-weight:900;
  letter-spacing:.1em;
  color:#ff754d;
  -webkit-text-fill-color:#ff754d;
}
#app .v10a-dashboard .app .cb-game-over span{
  display:block;
  margin-top:7px;
  font-family:var(--cb-technical);
  font-size:13px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:.08em;
  color:#e0e5eb;
  -webkit-text-fill-color:#e0e5eb;
}

/* V10.4.39 — Live activity-credit gap to the daily net target. */
#app .v10a-dashboard .app .cb-game-over .cb-continue-credit{
  margin:10px 0 0;
  font-family:var(--cb-technical);
  font-size:11px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:.025em;
  color:#e0e5eb;
  -webkit-text-fill-color:#e0e5eb;
}
#app .v10a-dashboard .app .cb-game-over .cb-continue-credit strong{
  font:inherit;
  font-weight:900;
  color:#ffb18b;
  -webkit-text-fill-color:#ffb18b;
}

/* V10.4.40 — Contemporary arcade prompt below the character. */
#app .v10a-dashboard .app .cb-game-over b{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  font-size:clamp(25px,6.7vw,34px)!important;
  font-weight:900!important;
  font-style:italic;
  letter-spacing:.065em!important;
}
#app .v10a-dashboard .app .net.cb-net-display > .cb-respawn-prompt{
  order:-1;
  flex-shrink:0;
  display:block;
  max-width:100%;
  margin:0 0 10px;
  padding:7px 13px;
  border:1px solid rgba(255,118,64,.55);
  border-radius:8px;
  background:linear-gradient(110deg,rgba(21,16,16,.96),rgba(42,24,19,.94));
  box-shadow:0 0 18px rgba(255,88,35,.13),inset 0 1px 0 rgba(255,190,140,.12);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:12px;
  font-weight:650;
  line-height:1.25;
  letter-spacing:.015em;
  color:#f4dfd4;
  -webkit-text-fill-color:#f4dfd4;
}
#app .v10a-dashboard .app .cb-respawn-prompt > b{
  font:inherit;
  font-weight:900;
  color:#ff935c;
  -webkit-text-fill-color:#ff935c;
}

/* V10.4.41 — Standalone respawn text over a feathered black gradient. */
#app .v10a-dashboard .app .net.cb-net-display > .cb-respawn-prompt{
  border-color:transparent;
  border-radius:0;
  box-shadow:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.5) 0%,rgba(0,0,0,.35) 48%,transparent 80%);
  color:#fff;
  -webkit-text-fill-color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,.8);
}
#app .v10a-dashboard .app .cb-respawn-prompt > b{
  color:#ffad7d;
  -webkit-text-fill-color:#ffad7d;
}

/* V10.4.42 — Center the continue prompt in the hero-to-readout gap. */
#app .v10a-dashboard .app .net.cb-net-display > .cb-respawn-prompt{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%);
  width:max-content;
  max-width:100%;
  margin:0;
  padding:5px 18px;
  text-align:center;
}
#app .v10a-dashboard .app .cb-respawn-prompt > p{margin:0;white-space:nowrap;font:inherit;}
#app .v10a-dashboard .app .cb-respawn-prompt b{font:inherit;font-weight:900;color:#ffad7d;-webkit-text-fill-color:#ffad7d;}
#app .v10a-dashboard .app .cb-respawn-countdown{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:5px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:11px;
  line-height:1.2;
  letter-spacing:.1em;
  color:#ffc096;
  -webkit-text-fill-color:#ffc096;
}
#app .v10a-dashboard .app .cb-respawn-countdown time{
  font-size:15px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  color:#fff;
  -webkit-text-fill-color:#fff;
}
@media (display-mode:browser) and (max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app:has(.hero.exploded) .net.cb-net-display{
    margin-top:calc(clamp(66px,9svh,92px) + 16px)!important;
  }
}

/* V10.4.43 — Approved arcade typography, countdown rules and over-target colors. */
#app .v10a-dashboard .app .cb-game-over b{font-size:40px!important;letter-spacing:.065em!important;}
#app .v10a-dashboard .app .net.cb-net-display > .cb-respawn-prompt{
  padding:5px 30px;
  bottom:calc(100% + 12px);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),rgba(0,0,0,.35) 50%,transparent 80%);
}
#app .v10a-dashboard .app .cb-respawn-prompt > p{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:clamp(16px,4.09vw,18px);
  font-weight:850;
  letter-spacing:.04em;
  line-height:1.2;
  color:#fff;
  -webkit-text-fill-color:#fff;
}
#app .v10a-dashboard .app .cb-respawn-countdown{display:block;margin-top:9px;}
#app .v10a-dashboard .app .cb-respawn-countdown time{
  position:relative;
  display:block;
  font-size:29px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
  letter-spacing:.1em;
  color:#fff;
  -webkit-text-fill-color:#fff;
  text-shadow:0 2px 3px rgba(0,0,0,.85);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.75) 0%,rgba(0,0,0,.45) 48%,transparent 80%);
}
#app .v10a-dashboard .app .cb-respawn-countdown time::before,
#app .v10a-dashboard .app .cb-respawn-countdown time::after{
  content:"";
  position:absolute;
  top:50%;
  width:52px;
  height:2px;
  transform:translateY(-50%);
}
#app .v10a-dashboard .app .cb-respawn-countdown time::before{
  right:calc(100% + 10px);
  background:linear-gradient(to right,transparent,rgba(255,255,255,.98));
}
#app .v10a-dashboard .app .cb-respawn-countdown time::after{
  left:calc(100% + 10px);
  background:linear-gradient(to left,transparent,rgba(255,255,255,.98));
}
#app .v10a-dashboard .app .net.cb-net-display.cb-net-over-target > strong,
#app .v10a-dashboard .app .cb-calorie-panel.cb-over-budget .eq .accent b{
  color:#ff595e!important;
  -webkit-text-fill-color:#ff595e!important;
  text-shadow:0 2px 5px rgba(0,0,0,.7)!important;
}
/* Keep the full four-card row above navigation in the Exploded layout. */
#app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-panel{padding:7px 12px!important;margin-bottom:3px!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-panel .eq{margin:0!important;padding:0!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-panel .eq b{font-size:30px!important;line-height:1!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-panel .eq small{font-size:10px!important;line-height:1!important;margin-top:3px!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-track{height:4px!important;margin:7px 0 6px!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-panel .budget{padding:0!important;margin:0!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-panel .budget-label{font-size:9px!important;line-height:1!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-panel .budget-label b{font-size:24px!important;line-height:1!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .tools .tool{min-height:106px!important;padding:6px!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .tools .tool img{height:34px!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .tools .tool span{font-size:13px!important;}
#app .v10a-dashboard .app:has(.hero.exploded) .tools .tool small{font-size:9px!important;line-height:1.2!important;}
@media(max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app:has(.hero.exploded) .net.cb-net-display{margin-top:calc(clamp(66px,9svh,92px) - 36px)!important;}
}
@media(display-mode:browser) and (max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app:has(.hero.exploded) .net.cb-net-display{margin-top:calc(clamp(66px,9svh,92px) + 74px)!important;}
}

/* V10.4.44 — Clear the shoes without moving or resizing the approved artwork. */
#app .v10a-dashboard .app .net.cb-net-display > .cb-respawn-prompt{padding:0 30px;}
#app .v10a-dashboard .app .cb-respawn-prompt > p{line-height:1.1;}
#app .v10a-dashboard .app .cb-respawn-countdown{margin-top:6px;}
#app .v10a-dashboard .app .cb-respawn-countdown time{line-height:1.05;}

/* V10.4.45 — Approved login refinement, isolated from dashboard styling. */
#app:has(.cb-login-wrap){
  background-position:center 60px!important;
  background-size:calc(100% - 24px) auto!important;
}
#app .cb-login-brand{text-align:center!important;}
#app .cb-login-logo{transform-origin:center!important;}
#app .cb-login-tag{margin-top:7px!important;letter-spacing:.08em!important;}
#app .cb-login-hero,
#app .cb-login-wrap:focus-within .cb-login-hero{
  height:clamp(180px,calc(93vw - 48px - env(safe-area-inset-top)),380px)!important;
  margin-bottom:8px!important;
}
#app .cb-login-card{
  padding:18px!important;
  border-color:#303b47!important;
  background:linear-gradient(160deg,rgba(19,25,32,.98),rgba(11,16,23,.99))!important;
}
#app .cb-login-card h2{font-size:26px!important;letter-spacing:-.025em!important;}
#app .cb-login-card p.muted{margin:0 0 13px!important;font-size:13px!important;}
#app .cb-login-card .captcha-wrap{margin:8px 0 12px!important;}
#app .cb-login-card .captcha-note{font-size:10px!important;line-height:1.3!important;margin-top:5px!important;}
#app .cb-login-card button[type="submit"]{font-weight:800!important;color:#fff!important;-webkit-text-fill-color:#fff!important;}
@media(min-width:601px){
  #app:has(.cb-login-wrap){background-position:center 16px!important;background-size:420px auto!important;}
  #app .cb-login-hero,#app .cb-login-wrap:focus-within .cb-login-hero{height:320px!important;}
}


/* V10.4.46 — Undo an accidental close for today. */
#app .v10a-dashboard .app .more-items > .close-day-card.closed{grid-template-columns:1fr!important;}
#app .v10a-dashboard .app .cb-closed-day-actions{display:flex!important;flex-wrap:wrap;gap:8px!important;}
#app .v10a-dashboard .app .cb-closed-day-actions button{
  flex:1 1 120px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #36414d!important;
  border-radius:11px;
  background:#222b34!important;
  color:#f1f3f5!important;
  -webkit-text-fill-color:#f1f3f5!important;
  font-family:var(--cb-technical);
  font-size:13px;
  font-weight:800;
  box-shadow:none!important;
}
#app .v10a-dashboard .app .cb-closed-day-actions button[data-reopen-day]{
  background:#ff6339!important;
  border-color:#ff6339!important;
  color:#080b0f!important;
  -webkit-text-fill-color:#080b0f!important;
}
body > .game-overlay.cb-result-v10 .cb-result-reopen{
  display:block;
  min-height:44px;
  margin:10px auto 0;
  padding:8px 18px;
  border:1px solid #59616b;
  border-radius:10px;
  background:rgba(8,11,15,.8);
  color:#fff;
  -webkit-text-fill-color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
[data-reopen-day]:disabled{opacity:.6;cursor:wait;}


/* V10.4.48 — Fit all four dashboard analyzer cards above the Safari tab bar.
   Installed/standalone iPhone layout and approved source artwork are unchanged.
   Mobile Safari loses usable height to its address/toolbar chrome. For compact
   browser viewports move the SAME full-bleed exploded scene up, reclaim blank
   hero space, and tighten readouts/cards while retaining the 4-column row. */
@media (display-mode:browser) and (max-width:600px) and (max-height:820px) and (orientation:portrait){
  #app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper{
    background-position:center -96px,center!important;
  }
  #app .v10a-dashboard .app .hero.cb-cinematic-hero.exploded{
    height:clamp(180px,50vw,210px)!important;
    min-height:0!important;
  }
  #app .v10a-dashboard .app .hero.cb-cinematic-hero.exploded .cb-game-over{
    top:16px!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .net.cb-net-display{
    margin-top:0!important;
    margin-bottom:2px!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .net.cb-net-display > strong{
    font-size:clamp(63px,18.5vw,76px)!important;
    line-height:.8!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .net.cb-net-display > small{
    font-size:12px!important;
    margin-top:3px!important;
    margin-bottom:0!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-panel{
    padding:6px 10px!important;
    margin:3px 0 4px!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-panel .eq b{
    font-size:26px!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .cb-calorie-panel .budget-label b{
    font-size:21px!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .tools{
    padding:3px 0!important;
    margin-bottom:8px!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .tools .tool{
    min-height:86px!important;
    padding:4px 2px!important;
    gap:3px!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .tools .tool img{
    height:29px!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .tools .tool span{
    font-size:11px!important;
    line-height:1.1!important;
  }
  #app .v10a-dashboard .app:has(.hero.exploded) .tools .tool small{
    font-size:8px!important;
    line-height:1.13!important;
  }
}


/* V10.4.50 — Dynamic Safari first-screen fit. Rather than use another fixed
   margin that can still hide cards, measure the actual full tool row against
   the fixed nav and reclaim only the necessary browser-only hero spacer.
   Lift the approved scene in lockstep so shoes never cover the respawn prompt.
   This rule is isolated from installed PWA and from the other three states. */
@media (display-mode:browser) and (max-width:600px) and (max-height:820px) and (orientation:portrait){
  #app .v10a-dashboard .app:has(.hero.cb-cinematic-hero.exploded) > .cb-dashboard-wallpaper{
    background-position:center calc(-96px - var(--cb-browser-layout-lift,0px)),center!important;
  }
  #app .v10a-dashboard .app .hero.cb-cinematic-hero.exploded{
    height:max(112px,calc(clamp(180px,50vw,210px) - var(--cb-browser-layout-lift,0px)))!important;
    min-height:0!important;
  }
  #app .v10a-dashboard .app .hero.cb-cinematic-hero.exploded .cb-game-over{
    top:calc(16px - var(--cb-browser-title-lift,0px))!important;
  }
}


/* V10.4.51 — No hard image edge on the Day Bombed result.
   Match the existing Day Defused scene's source-scaled top feather.
   The artwork, mascot scale, screen layout, and buttons stay unchanged. */
body > .game-overlay.cb-result-v10.boom .game-overlay-scene{
  --cb-bombed-result-top:clamp(72px,11svh,132px);
  background-position:center var(--cb-bombed-result-top)!important;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--cb-bombed-result-top) + min(96px,calc(15vw + 5.1px))),
    black calc(var(--cb-bombed-result-top) + min(172.8px,calc(27vw + 9.18px))),
    black 100%)!important;
  mask-image:linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--cb-bombed-result-top) + min(96px,calc(15vw + 5.1px))),
    black calc(var(--cb-bombed-result-top) + min(172.8px,calc(27vw + 9.18px))),
    black 100%)!important;
}
body > .game-overlay.cb-result-v10.boom .game-overlay-scene::after{
  background:linear-gradient(to bottom,transparent 0%,transparent 44%,rgba(8,11,15,.62) 65%,#080b0f 84%,#080b0f 100%);
}
@media(max-height:700px){
  body > .game-overlay.cb-result-v10.boom .game-overlay-scene{
    --cb-bombed-result-top:65px;
  }
}

/* V10.4.52 — Safari standing states share the first-screen fit. The measured
   hero spacer reserves the entire card row; the complete scene moves together
   to leave clearance above the net number without floating the shoes. */
@media (display-mode:browser) and (max-width:600px) and (orientation:portrait){
  #app .v10a-dashboard .app.cb-browser-fit .hero.cb-cinematic-hero{
    height:var(--cb-browser-hero-height,clamp(250px,69vw,305px))!important;
    min-height:0!important;
  }
  #app .v10a-dashboard .app.cb-browser-fit > .cb-dashboard-wallpaper{
    transform:translateY(var(--cb-browser-scene-shift,0px))!important;
  }
  #app .v10a-dashboard .app.cb-browser-fit .cb-calorie-panel{
    padding:6px 10px!important;
    margin:3px 0 4px!important;
  }
  #app .v10a-dashboard .app.cb-browser-fit .cb-calorie-panel .eq b{font-size:26px!important;}
  #app .v10a-dashboard .app.cb-browser-fit .cb-calorie-panel .budget-label b{font-size:21px!important;}
  #app .v10a-dashboard .app.cb-browser-fit .tools{padding:3px 0!important;}
  #app .v10a-dashboard .app.cb-browser-fit .tools .tool,
  #app .v10a-dashboard .app.cb-browser-fit .tools .tool+.tool{
    min-height:86px!important;
    padding:4px 2px!important;
    gap:3px!important;
  }
  #app .v10a-dashboard .app.cb-browser-fit .tools .tool img{height:29px!important;}
  #app .v10a-dashboard .app.cb-browser-fit .tools .tool span{font-size:11px!important;line-height:1.1!important;}
  #app .v10a-dashboard .app.cb-browser-fit .tools .tool small{font-size:8px!important;line-height:1.13!important;}
}